[Select] Simplify the demos (remove ref) (#20076)

mui · Mar 13, 2020 · 35dae27 · 35dae27
1 parent e89ddfd
commit 35dae27
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 40 deletions.
diff --git a/docs/src/pages/components/selects/NativeSelects.js b/docs/src/pages/components/selects/NativeSelects.js
@@ -23,12 +23,6 @@ export default function NativeSelects() {
     name: 'hai',
   });
 
-  const inputLabel = React.useRef(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current.offsetWidth);
-  }, []);
-
   const handleChange = name => event => {
     setState({
       ...state,
@@ -200,14 +194,12 @@ export default function NativeSelects() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="outlined-age-native-simple">Age</InputLabel>
         <Select
           native
           value={state.age}
           onChange={handleChange('age')}
-          labelWidth={labelWidth}
+          label="Age"
           inputProps={{
             name: 'age',
             id: 'outlined-age-native-simple',

diff --git a/docs/src/pages/components/selects/NativeSelects.tsx b/docs/src/pages/components/selects/NativeSelects.tsx
@@ -25,12 +25,6 @@ export default function NativeSelects() {
     name: 'hai',
   });
 
-  const inputLabel = React.useRef<HTMLLabelElement>(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current!.offsetWidth);
-  }, []);
-
   const handleChange = (name: keyof typeof state) => (
     event: React.ChangeEvent<{ value: unknown }>,
   ) => {
@@ -204,14 +198,12 @@ export default function NativeSelects() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="outlined-age-native-simple">Age</InputLabel>
         <Select
           native
           value={state.age}
           onChange={handleChange('age')}
-          labelWidth={labelWidth}
+          label="Age"
           inputProps={{
             name: 'age',
             id: 'outlined-age-native-simple',

diff --git a/docs/src/pages/components/selects/SimpleSelect.js b/docs/src/pages/components/selects/SimpleSelect.js
@@ -20,12 +20,6 @@ export default function SimpleSelect() {
   const classes = useStyles();
   const [age, setAge] = React.useState('');
 
-  const inputLabel = React.useRef(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current.offsetWidth);
-  }, []);
-
   const handleChange = event => {
     setAge(event.target.value);
   };
@@ -195,15 +189,13 @@ export default function SimpleSelect() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
-          Age
-        </InputLabel>
+        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
         <Select
           labelId="demo-simple-select-outlined-label"
           id="demo-simple-select-outlined"
           value={age}
           onChange={handleChange}
-          labelWidth={labelWidth}
+          label="Age"
         >
           <MenuItem value="">
             <em>None</em>

diff --git a/docs/src/pages/components/selects/SimpleSelect.tsx b/docs/src/pages/components/selects/SimpleSelect.tsx
@@ -22,12 +22,6 @@ export default function SimpleSelect() {
   const classes = useStyles();
   const [age, setAge] = React.useState('');
 
-  const inputLabel = React.useRef<HTMLLabelElement>(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current!.offsetWidth);
-  }, []);
-
   const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
     setAge(event.target.value as string);
   };
@@ -197,15 +191,13 @@ export default function SimpleSelect() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
-          Age
-        </InputLabel>
+        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
         <Select
           labelId="demo-simple-select-outlined-label"
           id="demo-simple-select-outlined"
           value={age}
           onChange={handleChange}
-          labelWidth={labelWidth}
+          label="Age"
         >
           <MenuItem value="">
             <em>None</em>