Skip to content

Commit 69557f3

Browse files
damianstasikdamianstasik
authored
refactor: use ref API instead of findDOMNode (#1952)
1 parent dcc87ae commit 69557f3

File tree

27 files changed

+167
-188
lines changed

27 files changed

+167
-188
lines changed

‎src/components/Autocomplete/Autocomplete.react.js

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
import Position from 'lib/Position';
99
import PropTypes from 'prop-types'
1010
import React, { Component } from 'react';
11-
import ReactDOM from 'react-dom';
1211
import styles from 'components/Autocomplete/Autocomplete.scss';
1312
import SuggestionsList from 'components/SuggestionsList/SuggestionsList.react';
1413

@@ -32,8 +31,9 @@ export default class Autocomplete extends Component {
3231
this.getPosition = this.getPosition.bind(this);
3332
this.recalculatePosition = this.recalculatePosition.bind(this);
3433

35-
this.inputRef = React.createRef(null);
36-
this.dropdownRef = React.createRef(null);
34+
this.inputRef = React.createRef();
35+
this.dropdownRef = React.createRef();
36+
this.fieldRef = React.createRef();
3737

3838
this.handleScroll = () => {
3939
const pos = this.getPosition();
@@ -57,23 +57,24 @@ export default class Autocomplete extends Component {
5757

5858
componentDidMount() {
5959
window.addEventListener('resize', this.handleResize);
60-
this.node = ReactDOM.findDOMNode(this);
61-
this.node.addEventListener('scroll', this.handleScroll);
60+
this.fieldRef.current.addEventListener('scroll', this.handleScroll);
6261
this.recalculatePosition();
6362
this._ignoreBlur = false;
6463
}
6564

6665
componentWillUnmount() {
67-
this.node.removeEventListener('scroll', this.handleScroll);
66+
this.fieldRef.current.removeEventListener('scroll', this.handleScroll);
6867
window.removeEventListener('resize', this.handleResize);
6968
}
7069

7170
getPosition() {
71+
const node = this.fieldRef.current;
72+
7273
let newPosition = this.props.fixed
73-
? Position.inWindow(this.node)
74-
: Position.inDocument(this.node);
74+
? Position.inWindow(node)
75+
: Position.inDocument(node);
7576

76-
newPosition.y += this.node.offsetHeight;
77+
newPosition.y += node.offsetHeight;
7778

7879
return newPosition;
7980
}
@@ -321,7 +322,7 @@ export default class Autocomplete extends Component {
321322

322323
return (
323324
<React.Fragment>
324-
<div className={fieldClassName}>
325+
<div className={fieldClassName} ref={this.fieldRef}>
325326
<input
326327
id={1}
327328
role={'combobox'}

‎src/components/BrowserFilter/BrowserFilter.react.js

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import Icon from 'components/Icon/Icon.react';
1313
import Popover from 'components/Popover/Popover.react';
1414
import Position from 'lib/Position';
1515
import React from 'react';
16-
import ReactDOM from 'react-dom';
1716
import styles from 'components/BrowserFilter/BrowserFilter.scss';
1817
import { List, Map } from 'immutable';
1918

@@ -29,10 +28,7 @@ export default class BrowserFilter extends React.Component {
2928
blacklistedFilters: Filters.BLACKLISTED_FILTERS.concat(props.blacklistedFilters)
3029
};
3130
this.toggle = this.toggle.bind(this);
32-
}
33-
34-
componentDidMount() {
35-
this.node = ReactDOM.findDOMNode(this);
31+
this.wrapRef = React.createRef();
3632
}
3733

3834
componentWillReceiveProps(props) {
@@ -93,9 +89,10 @@ export default class BrowserFilter extends React.Component {
9389
render() {
9490
let popover = null;
9591
let buttonStyle = [styles.entry];
92+
const node = this.wrapRef.current;
9693

9794
if (this.state.open) {
98-
let position = Position.inDocument(this.node);
95+
let position = Position.inDocument(node);
9996
let popoverStyle = [styles.popover];
10097
buttonStyle.push(styles.title);
10198

@@ -109,7 +106,7 @@ export default class BrowserFilter extends React.Component {
109106
popover = (
110107
<Popover fixed={true} position={position} onExternalClick={this.toggle} contentId={POPOVER_CONTENT_ID}>
111108
<div className={popoverStyle.join(' ')} onClick={() => this.props.setCurrent(null)} id={POPOVER_CONTENT_ID}>
112-
<div onClick={this.toggle} style={{ cursor: 'pointer', width: this.node.clientWidth, height: this.node.clientHeight }}></div>
109+
<div onClick={this.toggle} style={{ cursor: 'pointer', width: node.clientWidth, height: node.clientHeight }}></div>
113110
<div className={styles.body}>
114111
<Filter
115112
className={this.props.className}
@@ -157,7 +154,7 @@ export default class BrowserFilter extends React.Component {
157154
buttonStyle.push(styles.disabled);
158155
}
159156
return (
160-
<div className={styles.wrap}>
157+
<div className={styles.wrap} ref={this.wrapRef}>
161158
<div className={buttonStyle.join(' ')} onClick={this.toggle}>
162159
<Icon name="filter-solid" width={14} height={14} />
163160
<span>{this.props.filters.size ? 'Filtered' : 'Filter'}</span>

‎src/components/BrowserFilter/FilterRow.react.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import Icon from 'components/Icon/Icon.react';
1212
import Parse from 'parse';
1313
import PropTypes from 'lib/PropTypes';
1414
import React from 'react';
15-
import ReactDOM from 'react-dom';
1615
import styles from 'components/BrowserFilter/BrowserFilter.scss';
1716
import validateNumeric from 'lib/validateNumeric';
1817

@@ -23,7 +22,7 @@ for (let c in Constraints) {
2322

2423
let setFocus = (input) => {
2524
if (input !== null) {
26-
ReactDOM.findDOMNode(input).focus();
25+
input.focus();
2726
}
2827
}
2928

‎src/components/BrowserMenu/BrowserMenu.react.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,20 @@ import Icon from 'components/Icon/Icon.react';
1010
import Position from 'lib/Position';
1111
import PropTypes from 'lib/PropTypes';
1212
import React from 'react';
13-
import ReactDOM from 'react-dom';
1413
import styles from 'components/BrowserMenu/BrowserMenu.scss';
1514

1615
export default class BrowserMenu extends React.Component {
1716
constructor() {
1817
super();
1918

2019
this.state = { open: false };
21-
}
22-
23-
componentDidMount() {
24-
this.node = ReactDOM.findDOMNode(this);
20+
this.wrapRef = React.createRef();
2521
}
2622

2723
render() {
2824
let menu = null;
2925
if (this.state.open) {
30-
let position = Position.inDocument(this.node);
26+
let position = Position.inDocument(this.wrapRef.current);
3127
let titleStyle = [styles.title];
3228
if (this.props.active) {
3329
titleStyle.push(styles.active);
@@ -39,7 +35,7 @@ export default class BrowserMenu extends React.Component {
3935
<Icon name={this.props.icon} width={14} height={14} />
4036
<span>{this.props.title}</span>
4137
</div>
42-
<div className={styles.body} style={{ minWidth: this.node.clientWidth }}>
38+
<div className={styles.body} style={{ minWidth: this.wrapRef.current.clientWidth }}>
4339
{React.Children.map(this.props.children, (child) => (
4440
React.cloneElement(child, { ...child.props, onClick: () => {
4541
this.setState({ open: false });
@@ -66,7 +62,7 @@ export default class BrowserMenu extends React.Component {
6662
};
6763
}
6864
return (
69-
<div className={styles.wrap}>
65+
<div className={styles.wrap} ref={this.wrapRef}>
7066
<div className={classes.join(' ')} onClick={onClick}>
7167
<Icon name={this.props.icon} width={14} height={14} />
7268
<span>{this.props.title}</span>

‎src/components/ChromeDatePicker/ChromeDatePicker.react.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import Popover from 'components/Popover/Popover.react';
1515
import Position from 'lib/Position';
1616
import PropTypes from 'lib/PropTypes';
1717
import React from 'react';
18-
import ReactDOM from 'react-dom';
1918
import styles from 'components/ChromeDatePicker/ChromeDatePicker.scss';
2019

2120
export default class ChromeDatePicker extends React.Component {
@@ -26,20 +25,18 @@ export default class ChromeDatePicker extends React.Component {
2625
open: false,
2726
position: null,
2827
};
29-
}
3028

31-
componentDidMount() {
32-
this.node = ReactDOM.findDOMNode(this);
29+
this.wrapRef = React.createRef()
3330
}
3431

3532
toggle() {
3633
this.setState(() => {
3734
if (this.state.open) {
3835
return { open: false };
3936
}
40-
let pos = Position.inWindow(this.node);
37+
let pos = Position.inWindow(this.wrapRef.current);
4138
if (this.props.align === Directions.RIGHT) {
42-
pos.x += this.node.clientWidth;
39+
pos.x += this.wrapRef.current.clientWidth;
4340
}
4441
return {
4542
open: true,
@@ -92,7 +89,7 @@ export default class ChromeDatePicker extends React.Component {
9289
}
9390

9491
return (
95-
<div className={styles.wrap} onClick={this.toggle.bind(this)}>
92+
<div className={styles.wrap} onClick={this.toggle.bind(this)} ref={this.wrapRef}>
9693
{content}
9794
{popover}
9895
</div>

‎src/components/ChromeDropdown/ChromeDropdown.react.js

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import Popover from 'components/Popover/Popover.react';
99
import PropTypes from 'lib/PropTypes';
1010
import Position from 'lib/Position';
1111
import React from 'react';
12-
import ReactDOM from 'react-dom';
1312
import styles from 'components/ChromeDropdown/ChromeDropdown.scss';
1413

1514
export default class ChromeDropdown extends React.Component {
@@ -20,6 +19,8 @@ export default class ChromeDropdown extends React.Component {
2019
open: false,
2120
selected: false,
2221
};
22+
23+
this.dropdownRef = React.createRef();
2324
}
2425

2526
componentWillReceiveProps(nextProps) {
@@ -38,10 +39,6 @@ export default class ChromeDropdown extends React.Component {
3839
this.styles = this.props.styles || styles;
3940
}
4041

41-
componentDidMount() {
42-
this.node = ReactDOM.findDOMNode(this);
43-
}
44-
4542
select(value, e) {
4643
e.stopPropagation();
4744
this.setState({
@@ -72,8 +69,8 @@ export default class ChromeDropdown extends React.Component {
7269
);
7370

7471
if (this.state.open) {
75-
let position = Position.inWindow(this.node);
76-
let measuredWidth = parseFloat(this.node.offsetWidth);
72+
let position = Position.inWindow(this.dropdownRef.current);
73+
let measuredWidth = parseFloat(this.dropdownRef.current.offsetWidth);
7774
widthStyle = { width: measuredWidth };
7875
content = (
7976
<Popover fixed={true} position={position} onExternalClick={() => this.setState({ open: false })}>
@@ -93,7 +90,7 @@ export default class ChromeDropdown extends React.Component {
9390
}
9491

9592
return (
96-
<div style={widthStyle} className={styles.dropdown}>
93+
<div style={widthStyle} className={styles.dropdown} ref={this.dropdownRef}>
9794
{content}
9895
</div>
9996
);

‎src/components/ColumnsConfiguration/ColumnsConfiguration.react.js

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import { DndProvider } from 'react-dnd'
33
import HTML5Backend from 'react-dnd-html5-backend'
4-
import ReactDOM from 'react-dom';
54

65
import Button from 'components/Button/Button.react';
76
import ColumnConfigurationItem from 'components/ColumnsConfiguration/ColumnConfigurationItem.react';
@@ -19,10 +18,8 @@ export default class ColumnsConfiguration extends React.Component {
1918
this.state = {
2019
open: false
2120
};
22-
}
2321

24-
componentDidMount() {
25-
this.node = ReactDOM.findDOMNode(this);
22+
this.entryRef = React.createRef();
2623
}
2724

2825
componentWillReceiveProps(props) {
@@ -73,12 +70,16 @@ export default class ColumnsConfiguration extends React.Component {
7370

7471
render() {
7572
const { handleColumnDragDrop, handleColumnsOrder, order, disabled } = this.props;
76-
let [ title, entry ] = [styles.title, styles.entry ].map(className => (
77-
<div className={className} onClick={this.toggle.bind(this)}>
78-
<Icon name='manage-columns' width={14} height={14} />
79-
<span>Manage Columns</span>
80-
</div>
81-
));
73+
const title = <div className={styles.title} onClick={this.toggle.bind(this)}>
74+
<Icon name='manage-columns' width={14} height={14} />
75+
<span>Manage Columns</span>
76+
</div>
77+
78+
let entry = <div className={styles.entry} onClick={this.toggle.bind(this)} ref={this.entryRef}>
79+
<Icon name='manage-columns' width={14} height={14} />
80+
<span>Manage Columns</span>
81+
</div>
82+
8283
if (disabled) {
8384
entry = <div className={styles.entry + ' ' + styles.disabled} onClick={null}>
8485
<Icon name='manage-columns' width={14} height={14} />
@@ -89,7 +90,7 @@ export default class ColumnsConfiguration extends React.Component {
8990
let popover = null;
9091
if (this.state.open) {
9192
popover = (
92-
<Popover fixed={true} position={Position.inDocument(this.node)} onExternalClick={this.toggle.bind(this)} contentId={POPOVER_CONTENT_ID}>
93+
<Popover fixed={true} position={Position.inDocument(this.entryRef.current)} onExternalClick={this.toggle.bind(this)} contentId={POPOVER_CONTENT_ID}>
9394
<div className={styles.popover} id={POPOVER_CONTENT_ID}>
9495
{title}
9596
<div className={styles.body}>

‎src/components/CreditCardInput/CreditCardInput.react.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
*/
88
import PropTypes from 'lib/PropTypes';
99
import React from 'react';
10-
import ReactDOM from 'react-dom';
1110
import styles from 'components/CreditCardInput/CreditCardInput.scss';
1211

1312
const VALID_REGEX = /^[\d ]*$/;
@@ -18,10 +17,12 @@ class CreditCardInput extends React.Component {
1817
this.state = {
1918
cursorPosition: 0,
2019
};
20+
21+
this.inputRef = React.createRef();
2122
}
2223

2324
componentDidUpdate() {
24-
ReactDOM.findDOMNode(this).setSelectionRange(this.state.cursorPosition, this.state.cursorPosition);
25+
this.inputRef.current.setSelectionRange(this.state.cursorPosition, this.state.cursorPosition);
2526
}
2627

2728
render() {
@@ -33,6 +34,7 @@ class CreditCardInput extends React.Component {
3334
}
3435
return (
3536
<input
37+
ref={this.inputRef}
3638
type='text'
3739
className={styles.input}
3840
value={value}

‎src/components/DatePicker/DatePicker.react.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { MONTHS } from 'lib/DateUtils';
1111
import Popover from 'components/Popover/Popover.react';
1212
import Position from 'lib/Position';
1313
import React from 'react';
14-
import ReactDOM from 'react-dom';
1514
import SliderWrap from 'components/SliderWrap/SliderWrap.react';
1615
import styles from 'components/DatePicker/DatePicker.scss';
1716

@@ -22,10 +21,7 @@ export default class DatePicker extends React.Component {
2221
open: false,
2322
position: null
2423
}
25-
}
26-
27-
componentDidMount() {
28-
this.node = ReactDOM.findDOMNode(this);
24+
this.inputRef = React.createRef()
2925
}
3026

3127
toggle() {
@@ -35,7 +31,7 @@ export default class DatePicker extends React.Component {
3531
}
3632
return {
3733
open: true,
38-
position: Position.inDocument(this.node)
34+
position: Position.inDocument(this.inputRef.current)
3935
};
4036
});
4137
}
@@ -49,7 +45,7 @@ export default class DatePicker extends React.Component {
4945
render() {
5046
let popover = null;
5147
if (this.state.open) {
52-
let width = this.node.clientWidth;
48+
let width = this.inputRef.current.clientWidth;
5349
popover = (
5450
<Popover position={this.state.position} onExternalClick={this.close.bind(this)}>
5551
<SliderWrap direction={Directions.DOWN} expanded={true}>
@@ -75,7 +71,7 @@ export default class DatePicker extends React.Component {
7571
}
7672

7773
return (
78-
<div className={styles.input} onClick={this.toggle.bind(this)}>
74+
<div className={styles.input} onClick={this.toggle.bind(this)} ref={this.inputRef}>
7975
{content}
8076
{popover}
8177
</div>

0 commit comments

Comments
 (0)