import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { InternalStandardProps as StandardProps, Theme } from '..'; import { RatingClasses } from './ratingClasses'; export interface IconContainerProps extends React.HTMLAttributes { value: number; } export interface RatingPropsSizeOverrides {} export interface RatingProps extends StandardProps, 'children' | 'onChange'> { /** * Override or extend the styles applied to the component. */ classes?: Partial; /** * The default value. Use when the component is not controlled. * @default null */ defaultValue?: number; /** * If `true`, the component is disabled. * @default false */ disabled?: boolean; /** * The icon to display when empty. * @default */ emptyIcon?: React.ReactNode; /** * The label read when the rating input is empty. * @default 'Empty' */ emptyLabelText?: React.ReactNode; /** * Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating. * This is important for screen reader users. * * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). * @param {number} value The rating label's value to format. * @returns {string} * @default function defaultLabelText(value) { * return `${value} Star${value !== 1 ? 's' : ''}`; * } */ getLabelText?: (value: number) => string; /** * If `true`, only the selected icon will be highlighted. * @default false */ highlightSelectedOnly?: boolean; /** * The icon to display. * @default */ icon?: React.ReactNode; /** * The component containing the icon. * @default function IconContainer(props) { * const { value, ...other } = props; * return ; * } */ IconContainerComponent?: React.ElementType; /** * Maximum rating. * @default 5 */ max?: number; /** * The name attribute of the radio `input` elements. * This input `name` should be unique within the page. * Being unique within a form is insufficient since the `name` is used to generated IDs. */ name?: string; /** * Callback fired when the value changes. * @param {React.SyntheticEvent} event The event source of the callback. * @param {number|null} value The new value. */ onChange?: (event: React.SyntheticEvent, value: number | null) => void; /** * Callback function that is fired when the hover state changes. * @param {React.SyntheticEvent} event The event source of the callback. * @param {number} value The new value. */ onChangeActive?: (event: React.SyntheticEvent, value: number) => void; /** * The minimum increment value change allowed. * @default 1 */ precision?: number; /** * Removes all hover effects and pointer events. * @default false */ readOnly?: boolean; /** * The size of the component. * @default 'medium' */ size?: OverridableStringUnion<'small' | 'medium' | 'large', RatingPropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps; /** * The rating value. */ value?: number | null; } /** * * Demos: * * - [Rating](https://mui.com/material-ui/react-rating/) * * API: * * - [Rating API](https://mui.com/material-ui/api/rating/) */ export default function Rating(props: RatingProps): React.JSX.Element;