[Rating] Add default value prop (mui#19103)

liangchunn · Jan 7, 2020 · c99bd0d · c99bd0d
1 parent cbdcb38
commit c99bd0d
Show file tree

Hide file tree

Showing 13 changed files with 153 additions and 150 deletions.
diff --git a/docs/pages/api/rating.md b/docs/pages/api/rating.md
@@ -25,6 +25,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">defaultValue</span> | <span class="prop-type">number</span> | <span class="prop-default">null</span> | The default value. Use when the component is not controlled. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the rating will be disabled. |
 | <span class="prop-name">emptyIcon</span> | <span class="prop-type">node</span> |  | The icon to display when empty. |
 | <span class="prop-name">emptyLabelText</span> | <span class="prop-type">node</span> | <span class="prop-default">'Empty'</span> | The label read when the rating input is empty. |
@@ -38,7 +39,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">precision</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The minimum increment value change allowed. |
 | <span class="prop-name">readOnly</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Removes all hover effects and pointer events. |
 | <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'</span> | <span class="prop-default">'medium'</span> | The size of the rating. |
-| <span class="prop-name">value</span> | <span class="prop-type">number</span> | <span class="prop-default">null</span> | The rating value. |
+| <span class="prop-name">value</span> | <span class="prop-type">number</span> |  | The rating value. |
 
 The `ref` is forwarded to the root element.
 

diff --git a/docs/src/pages/components/rating/CustomizedRatings.js b/docs/src/pages/components/rating/CustomizedRatings.js
@@ -60,7 +60,7 @@ export default function CustomizedRatings() {
         <Typography component="legend">Custom empty icon</Typography>
         <Rating
           name="customized-empty"
-          value={2}
+          defaultValue={2}
           precision={0.5}
           emptyIcon={<StarBorderIcon fontSize="inherit" />}
         />
@@ -69,21 +69,21 @@ export default function CustomizedRatings() {
         <Typography component="legend">Custom icon and color</Typography>
         <StyledRating
           name="customized-color"
-          value={2}
+          defaultValue={2}
           getLabelText={value => `${value} Heart${value !== 1 ? 's' : ''}`}
           precision={0.5}
           icon={<FavoriteIcon fontSize="inherit" />}
         />
       </Box>
       <Box component="fieldset" mb={3} borderColor="transparent">
         <Typography component="legend">10 stars</Typography>
-        <Rating name="customized-10" value={2} max={10} />
+        <Rating name="customized-10" defaultValue={2} max={10} />
       </Box>
       <Box component="fieldset" mb={3} borderColor="transparent">
         <Typography component="legend">Custom icon set</Typography>
         <Rating
           name="customized-icons"
-          value={2}
+          defaultValue={2}
           getLabelText={value => customIcons[value].label}
           IconContainerComponent={IconContainer}
         />

diff --git a/docs/src/pages/components/rating/CustomizedRatings.tsx b/docs/src/pages/components/rating/CustomizedRatings.tsx
@@ -55,7 +55,7 @@ export default function CustomizedRatings() {
         <Typography component="legend">Custom empty icon</Typography>
         <Rating
           name="customized-empty"
-          value={2}
+          defaultValue={2}
           precision={0.5}
           emptyIcon={<StarBorderIcon fontSize="inherit" />}
         />
@@ -64,21 +64,21 @@ export default function CustomizedRatings() {
         <Typography component="legend">Custom icon and color</Typography>
         <StyledRating
           name="customized-color"
-          value={2}
+          defaultValue={2}
           getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
           precision={0.5}
           icon={<FavoriteIcon fontSize="inherit" />}
         />
       </Box>
       <Box component="fieldset" mb={3} borderColor="transparent">
         <Typography component="legend">10 stars</Typography>
-        <Rating name="customized-10" value={2} max={10} />
+        <Rating name="customized-10" defaultValue={2} max={10} />
       </Box>
       <Box component="fieldset" mb={3} borderColor="transparent">
         <Typography component="legend">Custom icon set</Typography>
         <Rating
           name="customized-icons"
-          value={2}
+          defaultValue={2}
           getLabelText={(value: number) => customIcons[value].label}
           IconContainerComponent={IconContainer}
         />

diff --git a/docs/src/pages/components/rating/HalfRating.js b/docs/src/pages/components/rating/HalfRating.js
@@ -2,5 +2,5 @@ import React from 'react';
 import Rating from '@material-ui/lab/Rating';
 
 export default function HalfRating() {
-  return <Rating name="half-rating" value={2.5} precision={0.5} />;
+  return <Rating name="half-rating" defaultValue={2.5} precision={0.5} />;
 }
diff --git a/docs/src/pages/components/rating/HalfRating.tsx b/docs/src/pages/components/rating/HalfRating.tsx
@@ -2,5 +2,5 @@ import React from 'react';
 import Rating from '@material-ui/lab/Rating';
 
 export default function HalfRating() {
-  return <Rating name="half-rating" value={2.5} precision={0.5} />;
+  return <Rating name="half-rating" defaultValue={2.5} precision={0.5} />;
 }
diff --git a/docs/src/pages/components/rating/HoverRating.js b/docs/src/pages/components/rating/HoverRating.js
@@ -1,9 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import Rating from '@material-ui/lab/Rating';
-import Tooltip from '@material-ui/core/Tooltip';
-import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 
 const labels = {
@@ -19,57 +16,33 @@ const labels = {
   5: 'Excellent+',
 };
 
-function IconContainer(props) {
-  const { value, ...other } = props;
-  return (
-    <Tooltip title={labels[value] || ''}>
-      <span {...other} />
-    </Tooltip>
-  );
-}
-
-IconContainer.propTypes = {
-  value: PropTypes.number.isRequired,
-};
-
 const useStyles = makeStyles({
-  rating1: {
+  rating: {
     width: 200,
     display: 'flex',
     alignItems: 'center',
   },
 });
 
 export default function HoverRating() {
-  const value = 2;
+  const [value, setValue] = React.useState(2);
   const [hover, setHover] = React.useState(-1);
   const classes = useStyles();
 
   return (
-    <div>
-      <Box component="fieldset" mb={3} borderColor="transparent">
-        <Typography component="legend">Side</Typography>
-        <div className={classes.rating1}>
-          <Rating
-            name="hover-side"
-            value={value}
-            precision={0.5}
-            onChangeActive={(event, newHover) => {
-              setHover(newHover);
-            }}
-          />
-          <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>
-        </div>
-      </Box>
-      <Box component="fieldset" mb={3} borderColor="transparent">
-        <Typography component="legend">Tooltip</Typography>
-        <Rating
-          name="hover-tooltip"
-          value={value}
-          precision={0.5}
-          IconContainerComponent={IconContainer}
-        />
-      </Box>
+    <div className={classes.rating}>
+      <Rating
+        name="hover-feedback"
+        value={value}
+        precision={0.5}
+        onChange={(event, newValue) => {
+          setValue(newValue);
+        }}
+        onChangeActive={(event, newHover) => {
+          setHover(newHover);
+        }}
+      />
+      {value !== null && <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>}
     </div>
   );
 }
diff --git a/docs/src/pages/components/rating/HoverRating.tsx b/docs/src/pages/components/rating/HoverRating.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Rating, { IconContainerProps } from '@material-ui/lab/Rating';
-import Tooltip from '@material-ui/core/Tooltip';
-import Typography from '@material-ui/core/Typography';
+import Rating from '@material-ui/lab/Rating';
 import Box from '@material-ui/core/Box';
 
 const labels: { [index: string]: string } = {
@@ -18,53 +16,33 @@ const labels: { [index: string]: string } = {
   5: 'Excellent+',
 };
 
-function IconContainer(props: IconContainerProps) {
-  const { value, ...other } = props;
-  return (
-    <Tooltip title={labels[value] || ''}>
-      <span {...other} />
-    </Tooltip>
-  );
-}
-
 const useStyles = makeStyles({
-  rating1: {
+  rating: {
     width: 200,
     display: 'flex',
     alignItems: 'center',
   },
 });
 
 export default function HoverRating() {
-  const value = 2;
+  const [value, setValue] = React.useState<number | null>(2);
   const [hover, setHover] = React.useState(-1);
   const classes = useStyles();
 
   return (
-    <div>
-      <Box component="fieldset" mb={3} borderColor="transparent">
-        <Typography component="legend">Side</Typography>
-        <div className={classes.rating1}>
-          <Rating
-            name="hover-side"
-            value={value}
-            precision={0.5}
-            onChangeActive={(event, newHover) => {
-              setHover(newHover);
-            }}
-          />
-          <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>
-        </div>
-      </Box>
-      <Box component="fieldset" mb={3} borderColor="transparent">
-        <Typography component="legend">Tooltip</Typography>
-        <Rating
-          name="hover-tooltip"
-          value={value}
-          precision={0.5}
-          IconContainerComponent={IconContainer}
-        />
-      </Box>
+    <div className={classes.rating}>
+      <Rating
+        name="hover-feedback"
+        value={value}
+        precision={0.5}
+        onChange={(event, newValue) => {
+          setValue(newValue);
+        }}
+        onChangeActive={(event, newHover) => {
+          setHover(newHover);
+        }}
+      />
+      {value !== null && <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>}
     </div>
   );
 }
diff --git a/docs/src/pages/components/rating/RatingSize.js b/docs/src/pages/components/rating/RatingSize.js
@@ -5,9 +5,9 @@ import Rating from '@material-ui/lab/Rating';
 export default function RatingSize() {
   return (
     <Box display="flex" flexDirection="column">
-      <Rating name="size-small" value={2} size="small" />
-      <Rating name="size-medium" value={2} />
-      <Rating name="size-large" value={2} size="large" />
+      <Rating name="size-small" defaultValue={2} size="small" />
+      <Rating name="size-medium" defaultValue={2} />
+      <Rating name="size-large" defaultValue={2} size="large" />
     </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/RatingSize.tsx b/docs/src/pages/components/rating/RatingSize.tsx
@@ -5,9 +5,9 @@ import Rating from '@material-ui/lab/Rating';
 export default function RatingSize() {
   return (
     <Box display="flex" flexDirection="column">
-      <Rating name="size-small" value={2} size="small" />
-      <Rating name="size-medium" value={2} />
-      <Rating name="size-large" value={2} size="large" />
+      <Rating name="size-small" defaultValue={2} size="small" />
+      <Rating name="size-medium" defaultValue={2} />
+      <Rating name="size-large" defaultValue={2} size="large" />
     </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/rating.md b/docs/src/pages/components/rating/rating.md
@@ -21,7 +21,7 @@ Here are some examples of customizing the component. You can learn more about th
 ## Hover feedback
 
 You can display a label on hover to help users pick the correct rating value.
-The first demo uses the `onChangeActive` prop while the last one uses the `IconContainerComponent` prop.
+The demo uses the `onChangeActive` prop.
 
 {{"demo": "pages/components/rating/HoverRating.js"}}
 
@@ -47,4 +47,3 @@ The accessibility of this component relies on:
 - A radio group is used with its fields visually hidden.
 It contains six radio buttons, one for each star and another for 0 stars, which is checked by default. Make sure you are providing a `name` prop that is unique to the parent form.
 - The labels for the radio buttons contain actual text (“1 Star”, “2 Stars”, …), make sure you provide a `getLabelText` prop when the page language is not English.
-
diff --git a/packages/material-ui-lab/src/Rating/Rating.d.ts b/packages/material-ui-lab/src/Rating/Rating.d.ts
@@ -7,6 +7,7 @@ export interface IconContainerProps extends React.HTMLAttributes<HTMLSpanElement
 
 export interface RatingProps
   extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, RatingClassKey, 'onChange'> {
+  defaultValue?: number;
   disabled?: boolean;
   emptyIcon?: React.ReactElement;
   getLabelText?: (value: number) => string;
@@ -19,7 +20,7 @@ export interface RatingProps
   precision?: number;
   readOnly?: boolean;
   size?: 'small' | 'medium' | 'large';
-  value: number | null;
+  value?: number | null;
 }
 
 export type RatingClassKey =