[docs] Remove unnecessary findDOMNode usage

mui · Mar 10, 2019 · 7f77419 · 7f77419
1 parent a5b8011
commit 7f77419
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 39 deletions.
diff --git a/docs/src/pages/demos/selects/NativeSelects.js b/docs/src/pages/demos/selects/NativeSelects.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
@@ -31,10 +30,10 @@ function NativeSelects() {
     name: 'hai',
   });
 
-  const inputLabelRef = React.useRef(null);
+  const inputLabel = React.useRef(null);
   const [labelWidth, setLabelWidth] = React.useState(0);
   React.useEffect(() => {
-    setLabelWidth(ReactDOM.findDOMNode(inputLabelRef.current).offsetWidth);
+    setLabelWidth(inputLabel.current.offsetWidth);
   }, []);
 
   const handleChange = name => event => {
@@ -189,7 +188,7 @@ function NativeSelects() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabelRef} htmlFor="outlined-age-native-simple">
+        <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
           Age
         </InputLabel>
         <Select

diff --git a/docs/src/pages/demos/selects/SimpleSelect.js b/docs/src/pages/demos/selects/SimpleSelect.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
@@ -31,10 +30,10 @@ function SimpleSelect() {
     name: 'hai',
   });
 
-  const inputLabelRef = React.useRef(null);
+  const inputLabel = React.useRef(null);
   const [labelWidth, setLabelWidth] = React.useState(0);
   React.useEffect(() => {
-    setLabelWidth(ReactDOM.findDOMNode(inputLabelRef.current).offsetWidth);
+    setLabelWidth(inputLabel.current.offsetWidth);
   }, []);
 
   function handleChange(event) {
@@ -223,7 +222,7 @@ function SimpleSelect() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabelRef} htmlFor="outlined-age-simple">
+        <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
           Age
         </InputLabel>
         <Select

diff --git a/docs/src/pages/demos/text-fields/ComposedTextField.js b/docs/src/pages/demos/text-fields/ComposedTextField.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import FilledInput from '@material-ui/core/FilledInput';
@@ -20,32 +20,36 @@ const styles = theme => ({
 });
 
 class ComposedTextField extends React.Component {
+  label = React.createRef();
+
   state = {
+    labelWidth: 0,
     name: 'Composed TextField',
   };
 
   componentDidMount() {
-    this.forceUpdate();
+    this.setState({ labelWidth: this.label.current.offsetWidth });
   }
 
   handleChange = event => {
     this.setState({ name: event.target.value });
   };
 
   render() {
+    const { labelWidth, name } = this.state;
     const { classes } = this.props;
 
     return (
       <div className={classes.container}>
         <FormControl className={classes.formControl}>
           <InputLabel htmlFor="component-simple">Name</InputLabel>
-          <Input id="component-simple" value={this.state.name} onChange={this.handleChange} />
+          <Input id="component-simple" value={name} onChange={this.handleChange} />
         </FormControl>
         <FormControl className={classes.formControl}>
           <InputLabel htmlFor="component-helper">Name</InputLabel>
           <Input
             id="component-helper"
-            value={this.state.name}
+            value={name}
             onChange={this.handleChange}
             aria-describedby="component-helper-text"
           />
@@ -54,39 +58,34 @@ class ComposedTextField extends React.Component {
         </FormControl>
         <FormControl className={classes.formControl} disabled>
           <InputLabel htmlFor="component-disabled">Name</InputLabel>
-          <Input id="component-disabled" value={this.state.name} onChange={this.handleChange} />
+          <Input id="component-disabled" value={name} onChange={this.handleChange} />
           <FormHelperText>Disabled</FormHelperText>
         </FormControl>
         <FormControl className={classes.formControl} error>
           <InputLabel htmlFor="component-error">Name</InputLabel>
           <Input
             id="component-error"
-            value={this.state.name}
+            value={name}
             onChange={this.handleChange}
             aria-describedby="component-error-text"
           />
 
           <FormHelperText id="component-error-text">Error</FormHelperText>
         </FormControl>
         <FormControl className={classes.formControl} variant="outlined">
-          <InputLabel
-            ref={ref => {
-              this.labelRef = ReactDOM.findDOMNode(ref);
-            }}
-            htmlFor="component-outlined"
-          >
+          <InputLabel ref={this.label} htmlFor="component-outlined">
             Name
           </InputLabel>
           <OutlinedInput
             id="component-outlined"
-            value={this.state.name}
+            value={name}
             onChange={this.handleChange}
-            labelWidth={this.labelRef ? this.labelRef.offsetWidth : 0}
+            labelWidth={labelWidth}
           />
         </FormControl>
         <FormControl className={classes.formControl} variant="filled">
           <InputLabel htmlFor="component-filled">Name</InputLabel>
-          <FilledInput id="component-filled" value={this.state.name} onChange={this.handleChange} />
+          <FilledInput id="component-filled" value={name} onChange={this.handleChange} />
         </FormControl>
       </div>
     );

diff --git a/docs/src/pages/demos/text-fields/ComposedTextField.tsx b/docs/src/pages/demos/text-fields/ComposedTextField.tsx
@@ -23,77 +23,75 @@ const styles = (theme: Theme) =>
 export interface Props extends WithStyles<typeof styles> {}
 
 interface State {
+  labelWidth: number;
   name: string;
 }
 
 class ComposedTextField extends React.Component<Props, State> {
-  labelRef: HTMLElement | null | undefined;
+  label = React.createRef<HTMLElement>();
 
   state = {
+    labelWidth: 0,
     name: 'Composed TextField',
   };
 
   componentDidMount() {
-    this.forceUpdate();
+    this.setState({ labelWidth: this.label.current!.offsetWidth });
   }
 
   handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ name: event.target.value });
   };
 
   render() {
+    const { labelWidth, name } = this.state;
     const { classes } = this.props;
 
     return (
       <div className={classes.container}>
         <FormControl className={classes.formControl}>
           <InputLabel htmlFor="component-simple">Name</InputLabel>
-          <Input id="component-simple" value={this.state.name} onChange={this.handleChange} />
+          <Input id="component-simple" value={name} onChange={this.handleChange} />
         </FormControl>
         <FormControl className={classes.formControl}>
           <InputLabel htmlFor="component-helper">Name</InputLabel>
           <Input
             id="component-helper"
-            value={this.state.name}
+            value={name}
             onChange={this.handleChange}
             aria-describedby="component-helper-text"
           />
           <FormHelperText id="component-helper-text">Some important helper text</FormHelperText>
         </FormControl>
         <FormControl className={classes.formControl} disabled>
           <InputLabel htmlFor="component-disabled">Name</InputLabel>
-          <Input id="component-disabled" value={this.state.name} onChange={this.handleChange} />
+          <Input id="component-disabled" value={name} onChange={this.handleChange} />
           <FormHelperText>Disabled</FormHelperText>
         </FormControl>
         <FormControl className={classes.formControl} error>
           <InputLabel htmlFor="component-error">Name</InputLabel>
           <Input
             id="component-error"
-            value={this.state.name}
+            value={name}
             onChange={this.handleChange}
             aria-describedby="component-error-text"
           />
           <FormHelperText id="component-error-text">Error</FormHelperText>
         </FormControl>
         <FormControl className={classes.formControl} variant="outlined">
-          <InputLabel
-            ref={ref => {
-              this.labelRef = ReactDOM.findDOMNode(ref!) as HTMLLabelElement | null;
-            }}
-            htmlFor="component-outlined"
-          >
+          <InputLabel ref={this.label} htmlFor="component-outlined">
             Name
           </InputLabel>
           <OutlinedInput
             id="component-outlined"
-            value={this.state.name}
+            value={name}
             onChange={this.handleChange}
-            labelWidth={this.labelRef ? this.labelRef.offsetWidth : 0}
+            labelWidth={labelWidth}
           />
         </FormControl>
         <FormControl className={classes.formControl} variant="filled">
           <InputLabel htmlFor="component-filled">Name</InputLabel>
-          <FilledInput id="component-filled" value={this.state.name} onChange={this.handleChange} />
+          <FilledInput id="component-filled" value={name} onChange={this.handleChange} />
         </FormControl>
       </div>
     );

diff --git a/packages/material-ui/src/FormLabel/FormLabel.d.ts b/packages/material-ui/src/FormLabel/FormLabel.d.ts
@@ -7,6 +7,11 @@ export interface FormLabelProps extends StandardProps<FormLabelBaseProps, FormLa
   error?: boolean;
   filled?: boolean;
   focused?: boolean;
+  /**
+   * Should only be used if ref forwarding `component` is used.
+   * This is imprecise if `<FormLabel component={SomeComponent} />` is used.
+   */
+  ref?: React.Ref<HTMLElement>;
   required?: boolean;
 }
 

diff --git a/packages/material-ui/src/InputLabel/InputLabel.d.ts b/packages/material-ui/src/InputLabel/InputLabel.d.ts
@@ -26,4 +26,6 @@ export type InputLabelClassKey =
   | 'filled'
   | 'outlined';
 
-export default class InputLabel extends React.Component<InputLabelProps> {}
+declare const InputLabel: React.ComponentType<InputLabelProps>;
+
+export default InputLabel;