refactor dash table refs to createRef

Author: T4rk1n

components/dash-table/src/core/components/IsolatedInput/index.tsx

@@ -93,7 +93,6 @@ export default class IsolatedInput extends PureComponent<IProps, IState> {
 
         return (
             <input
-                ref='input'
                 type='text'
                 value={this.state.value || ''}
                 onChange={this.handleChange}

components/dash-table/src/dash-table/components/Cell/index.tsx

@@ -31,7 +31,6 @@ export default class Cell extends Component<ICellProps> {
 
         return (
             <td
-                ref='td'
                 children={(this as any).props.children}
                 tabIndex={-1}
                 className={className}

components/dash-table/src/dash-table/components/CellDropdown/index.tsx

@@ -1,4 +1,4 @@
-import React, {ChangeEvent, PureComponent} from 'react';
+import React, {ChangeEvent, Component, createRef} from 'react';
 import Dropdown from 'react-select';
 
 import DOM from 'core/browser/DOM';
@@ -17,7 +17,12 @@ interface IProps {
     disabled?: boolean;
 }
 
-export default class CellDropdown extends PureComponent<IProps> {
+export default class CellDropdown extends Component<IProps> {
+    dropdownRef: React.RefObject<any>;
+    constructor(props: IProps) {
+        super(props);
+        this.dropdownRef = createRef();
+    }
     render() {
         const {clearable, dropdown, onChange, value, disabled} = this.props;
 
@@ -37,7 +42,7 @@ export default class CellDropdown extends PureComponent<IProps> {
                     }
                 </div>
                 <Dropdown
-                    ref='dropdown'
+                    ref={this.dropdownRef}
                     clearable={clearable}
                     onChange={(newValue: any) => {
                         onChange(newValue ? newValue.value : newValue);
@@ -71,7 +76,7 @@ export default class CellDropdown extends PureComponent<IProps> {
             return;
         }
 
-        const dropdown = this.refs.dropdown as any;
+        const dropdown = this.dropdownRef.current;
 
         if (applyFocus && dropdown && document.activeElement !== dropdown) {
             // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child
@@ -83,8 +88,8 @@ export default class CellDropdown extends PureComponent<IProps> {
     }
 
     private handleOpenDropdown = () => {
-        const {dropdown}: {[key: string]: any} = this.refs;
-
-        dropdownHelper(dropdown.wrapper.querySelector('.Select-menu-outer'));
+        dropdownHelper(
+            this.dropdownRef.current.wrapper.querySelector('.Select-menu-outer')
+        );
     };
 }

components/dash-table/src/dash-table/components/CellInput/index.tsx

@@ -1,6 +1,7 @@
 import React, {
     ChangeEvent,
     ClipboardEvent,
+    createRef,
     KeyboardEvent,
     MouseEvent,
     PureComponent
@@ -25,12 +26,15 @@ interface ICellState {
 }
 
 export default class CellInput extends PureComponent<ICellProps, ICellState> {
+    textInputRef: React.RefObject<any>;
     constructor(props: ICellProps) {
         super(props);
 
         this.state = {
             value: props.value
         };
+
+        this.textInputRef = createRef();
     }
 
     render() {
@@ -46,7 +50,7 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
                     {value}
                 </div>
                 <input
-                    ref='textInput'
+                    ref={this.textInputRef}
                     type='text'
                     className={className}
                     onBlur={this.propagateChange}
@@ -116,7 +120,7 @@ export default class CellInput extends PureComponent<ICellProps, ICellState> {
             return;
         }
 
-        const input = this.refs.textInput as HTMLInputElement;
+        const input = this.textInputRef.current;
 
         if (applyFocus && input && document.activeElement !== input) {
             input.focus();

components/dash-table/src/dash-table/components/CellLabel/index.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {createRef, PureComponent} from 'react';
 
 interface IProps {
     active: boolean;
@@ -8,11 +8,16 @@ interface IProps {
 }
 
 export default class CellLabel extends PureComponent<IProps> {
+    elRef: React.RefObject<any>;
+    constructor(props: IProps) {
+        super(props);
+        this.elRef = createRef();
+    }
     render() {
         const {className, value} = this.props;
 
         return (
-            <div ref='el' className={className} tabIndex={-1}>
+            <div ref={this.elRef} className={className} tabIndex={-1}>
                 {typeof value === 'boolean' ? value.toString() : value}
             </div>
         );
@@ -32,7 +37,7 @@ export default class CellLabel extends PureComponent<IProps> {
             return;
         }
 
-        const el = this.refs.el as HTMLDivElement;
+        const el = this.elRef.current;
 
         if (applyFocus && el && document.activeElement !== el) {
             window.getSelection()?.selectAllChildren(el);

components/dash-table/src/dash-table/components/CellMarkdown/index.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {createRef, PureComponent} from 'react';
 
 import DOM from 'core/browser/DOM';
 import {memoizeOne} from 'core/memoizer';
@@ -19,6 +19,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
             __html: md.render(String(value))
         }
     }));
+    elRef: React.RefObject<any>;
 
     constructor(props: IProps) {
         super(props);
@@ -28,6 +29,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
                 this.setState({});
             });
         }
+        this.elRef = createRef();
     }
 
     componentDidUpdate() {
@@ -43,7 +45,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
 
         return (
             <div
-                ref='el'
+                ref={this.elRef}
                 className={[className, 'cell-markdown'].join(' ')}
                 {...this.getMarkdown(value, markdown, Markdown.isReady)}
             />
@@ -56,7 +58,7 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
             return;
         }
 
-        const el = this.refs.el as any;
+        const el = this.elRef.current;
 
         if (applyFocus && el && document.activeElement !== el) {
             // Limitation. If React >= 16 --> Use React.createRef instead to pass parent ref to child