From bcb0468d5b1ae55d926463e60e873421777fa4ee Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sun, 10 Mar 2019 23:00:45 +0100
Subject: [PATCH] [docs] Remove unnecessary findDOMNode usage

---
 docs/src/pages/demos/selects/NativeSelects.js |  7 ++---
 docs/src/pages/demos/selects/SimpleSelect.js  |  4 +--
 .../demos/text-fields/ComposedTextField.js    | 29 +++++++++----------
 .../demos/text-fields/ComposedTextField.tsx   | 28 +++++++++---------
 .../material-ui/src/FormLabel/FormLabel.d.ts  |  5 ++++
 .../src/InputLabel/InputLabel.d.ts            |  4 ++-
 6 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/docs/src/pages/demos/selects/NativeSelects.js b/docs/src/pages/demos/selects/NativeSelects.js
index 4e8bc9136b2361..ff09fb50a2bea5 100644
--- 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
index bcd4bb4a2ab768..99f4a273f9f9d9 100644
--- a/docs/src/pages/demos/selects/SimpleSelect.js
+++ b/docs/src/pages/demos/selects/SimpleSelect.js
@@ -31,10 +31,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) {
diff --git a/docs/src/pages/demos/text-fields/ComposedTextField.js b/docs/src/pages/demos/text-fields/ComposedTextField.js
index 478c9941e33133..3d395a3b93b129 100644
--- 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,12 +20,15 @@ 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 => {
@@ -33,19 +36,20 @@ class ComposedTextField extends React.Component {
   };
 
   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,14 +58,14 @@ 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"
           />
@@ -69,24 +73,19 @@ class ComposedTextField extends React.Component {
           <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
index 1a7661f16d5fb7..371ef333f447cf 100644
--- a/docs/src/pages/demos/text-fields/ComposedTextField.tsx
+++ b/docs/src/pages/demos/text-fields/ComposedTextField.tsx
@@ -23,18 +23,20 @@ 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>) => {
@@ -42,19 +44,20 @@ class ComposedTextField extends React.Component<Props, State> {
   };
 
   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"
           />
@@ -62,38 +65,33 @@ class ComposedTextField extends React.Component<Props, State> {
         </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
index eb077775734168..d1dca65d280832 100644
--- 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
index c2356b8958154f..7cb5088c418c4b 100644
--- 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;