[Rating] Add a demo with different icons (#19004)

mui · Dec 30, 2019 · 991b858 · 991b858
1 parent b2caec6
commit 991b858
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 7 deletions.
diff --git a/docs/src/pages/components/rating/CustomizedRatings.js b/docs/src/pages/components/rating/CustomizedRatings.js
@@ -1,8 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Rating from '@material-ui/lab/Rating';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 import FavoriteIcon from '@material-ui/icons/Favorite';
+import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
+import SentimentDissatisfiedIcon from '@material-ui/icons/SentimentDissatisfied';
+import SentimentSatisfiedIcon from '@material-ui/icons/SentimentSatisfied';
+import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltOutlined';
+import SentimentVerySatisfiedIcon from '@material-ui/icons/SentimentVerySatisfied';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 
@@ -15,10 +21,38 @@ const StyledRating = withStyles({
   },
 })(Rating);
 
-function getLabelText(value) {
-  return `${value} Heart${value !== 1 ? 's' : ''}`;
+const customIcons = {
+  1: {
+    icon: <SentimentVeryDissatisfiedIcon />,
+    label: 'Very Dissatisfied',
+  },
+  2: {
+    icon: <SentimentDissatisfiedIcon />,
+    label: 'Dissatisfied',
+  },
+  3: {
+    icon: <SentimentSatisfiedIcon />,
+    label: 'Neutral',
+  },
+  4: {
+    icon: <SentimentSatisfiedAltIcon />,
+    label: 'Satisfied',
+  },
+  5: {
+    icon: <SentimentVerySatisfiedIcon />,
+    label: 'Very Satisfied',
+  },
+};
+
+function IconContainer(props) {
+  const { value, ...other } = props;
+  return <span {...other}>{customIcons[value].icon}</span>;
 }
 
+IconContainer.propTypes = {
+  value: PropTypes.number.isRequired,
+};
+
 export default function CustomizedRatings() {
   return (
     <div>
@@ -36,7 +70,7 @@ export default function CustomizedRatings() {
         <StyledRating
           name="customized-color"
           value={2}
-          getLabelText={getLabelText}
+          getLabelText={value => `${value} Heart${value !== 1 ? 's' : ''}`}
           precision={0.5}
           icon={<FavoriteIcon fontSize="inherit" />}
         />
@@ -45,6 +79,15 @@ export default function CustomizedRatings() {
         <Typography component="legend">10 stars</Typography>
         <Rating name="customized-10" value={2} max={10} />
       </Box>
+      <Box component="fieldset" mb={3} borderColor="transparent">
+        <Typography component="legend">Custom icon set</Typography>
+        <Rating
+          name="customized-icons"
+          value={2}
+          getLabelText={value => customIcons[value].label}
+          IconContainerComponent={IconContainer}
+        />
+      </Box>
     </div>
   );
 }
diff --git a/docs/src/pages/components/rating/CustomizedRatings.tsx b/docs/src/pages/components/rating/CustomizedRatings.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import Rating from '@material-ui/lab/Rating';
+import Rating, { IconContainerProps } from '@material-ui/lab/Rating';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 import FavoriteIcon from '@material-ui/icons/Favorite';
+import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
+import SentimentDissatisfiedIcon from '@material-ui/icons/SentimentDissatisfied';
+import SentimentSatisfiedIcon from '@material-ui/icons/SentimentSatisfied';
+import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltOutlined';
+import SentimentVerySatisfiedIcon from '@material-ui/icons/SentimentVerySatisfied';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 
@@ -15,8 +20,32 @@ const StyledRating = withStyles({
   },
 })(Rating);
 
-function getLabelText(value: number) {
-  return `${value} Heart${value !== 1 ? 's' : ''}`;
+const customIcons: { [index: string]: { icon: React.ReactElement; label: string } } = {
+  1: {
+    icon: <SentimentVeryDissatisfiedIcon />,
+    label: 'Very Dissatisfied',
+  },
+  2: {
+    icon: <SentimentDissatisfiedIcon />,
+    label: 'Dissatisfied',
+  },
+  3: {
+    icon: <SentimentSatisfiedIcon />,
+    label: 'Neutral',
+  },
+  4: {
+    icon: <SentimentSatisfiedAltIcon />,
+    label: 'Satisfied',
+  },
+  5: {
+    icon: <SentimentVerySatisfiedIcon />,
+    label: 'Very Satisfied',
+  },
+};
+
+function IconContainer(props: IconContainerProps) {
+  const { value, ...other } = props;
+  return <span {...other}>{customIcons[value].icon}</span>;
 }
 
 export default function CustomizedRatings() {
@@ -36,7 +65,7 @@ export default function CustomizedRatings() {
         <StyledRating
           name="customized-color"
           value={2}
-          getLabelText={getLabelText}
+          getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
           precision={0.5}
           icon={<FavoriteIcon fontSize="inherit" />}
         />
@@ -45,6 +74,15 @@ export default function CustomizedRatings() {
         <Typography component="legend">10 stars</Typography>
         <Rating name="customized-10" value={2} max={10} />
       </Box>
+      <Box component="fieldset" mb={3} borderColor="transparent">
+        <Typography component="legend">Custom icon set</Typography>
+        <Rating
+          name="customized-icons"
+          value={2}
+          getLabelText={(value: number) => customIcons[value].label}
+          IconContainerComponent={IconContainer}
+        />
+      </Box>
     </div>
   );
 }