UNPKG

2.79 kBTypeScriptView Raw
1import * as React from 'react';
2import { StandardProps } from '@material-ui/core';
3
4export interface IconContainerProps extends React.HTMLAttributes<HTMLSpanElement> {
5 value: number;
6}
7
8export interface RatingProps
9 extends StandardProps<
10 React.HTMLAttributes<HTMLSpanElement>,
11 RatingClassKey,
12 'children' | 'onChange'
13 > {
14 /**
15 * The default value. Use when the component is not controlled.
16 */
17 defaultValue?: number;
18 /**
19 * If `true`, the rating will be disabled.
20 */
21 disabled?: boolean;
22 /**
23 * The icon to display when empty.
24 */
25 emptyIcon?: React.ReactNode;
26 /**
27 * The label read when the rating input is empty.
28 */
29 emptyLabelText?: React.ReactNode;
30 /**
31 * Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating.
32 *
33 * For localization purposes, you can use the provided [translations](/guides/localization/).
34 *
35 * @param {number} value The rating label's value to format.
36 * @returns {string}
37 */
38 getLabelText?: (value: number) => string;
39 /**
40 * The icon to display.
41 */
42 icon?: React.ReactNode;
43 /**
44 * The component containing the icon.
45 */
46 IconContainerComponent?: React.ElementType<IconContainerProps>;
47 /**
48 * Maximum rating.
49 */
50 max?: number;
51 /**
52 * The name attribute of the radio `input` elements.
53 * If `readOnly` is false, the prop is required,
54 * this input name`should be unique within the parent form.
55 */
56 name?: string;
57 /**
58 * Callback fired when the value changes.
59 *
60 * @param {object} event The event source of the callback.
61 * @param {number} value The new value.
62 */
63 onChange?: (event: React.ChangeEvent<{}>, value: number | null) => void;
64 /**
65 * Callback function that is fired when the hover state changes.
66 *
67 * @param {object} event The event source of the callback.
68 * @param {number} value The new value.
69 */
70 onChangeActive?: (event: React.ChangeEvent<{}>, value: number) => void;
71 /**
72 * The minimum increment value change allowed.
73 */
74 precision?: number;
75 /**
76 * Removes all hover effects and pointer events.
77 */
78 readOnly?: boolean;
79 /**
80 * The size of the rating.
81 */
82 size?: 'small' | 'medium' | 'large';
83 /**
84 * The rating value.
85 */
86 value?: number | null;
87}
88
89export type RatingClassKey =
90 | 'root'
91 | 'sizeSmall'
92 | 'sizeLarge'
93 | 'readOnly'
94 | 'disabled'
95 | 'focusVisible'
96 | 'visuallyhidden'
97 | 'pristine'
98 | 'label'
99 | 'icon'
100 | 'iconEmpty'
101 | 'iconFilled'
102 | 'iconHover'
103 | 'iconFocus'
104 | 'iconActive'
105 | 'decimal';
106
107/**
108 *
109 * Demos:
110 *
111 * - [Rating](https://mui.com/components/rating/)
112 *
113 * API:
114 *
115 * - [Rating API](https://mui.com/api/rating/)
116 */
117export default function Rating(props: RatingProps): JSX.Element;