diff --git a/client/.eslintrc b/client/.eslintrc index 8d7c2eff7..02df626fb 100644 --- a/client/.eslintrc +++ b/client/.eslintrc @@ -31,6 +31,5 @@ "import/no-extraneous-dependencies": 0, "jsx-a11y/no-static-element-interactions": 0, - "react/no-find-dom-node": 0, } } diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index 9b9f53766..1be2a0f3b 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import { connect } from 'react-redux'; import classnames from 'classnames'; import { Map as makeMap, List as makeList } from 'immutable'; @@ -167,8 +166,7 @@ class Node extends React.Component { handleMouseClick(ev) { ev.stopPropagation(); - this.props.clickNode(this.props.id, this.props.label, - ReactDOM.findDOMNode(this.shapeRef).getBoundingClientRect()); + this.props.clickNode(this.props.id, this.props.label, this.shapeRef.getBoundingClientRect()); } handleMouseEnter() { diff --git a/client/app/scripts/components/node-details/node-details-relatives-link.js b/client/app/scripts/components/node-details/node-details-relatives-link.js index 3505ac773..30d254a60 100644 --- a/client/app/scripts/components/node-details/node-details-relatives-link.js +++ b/client/app/scripts/components/node-details/node-details-relatives-link.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import { connect } from 'react-redux'; import { clickRelative } from '../../actions/app-actions'; @@ -10,18 +9,29 @@ class NodeDetailsRelativesLink extends React.Component { constructor(props, context) { super(props, context); this.handleClick = this.handleClick.bind(this); + this.saveNodeRef = this.saveNodeRef.bind(this); } handleClick(ev) { ev.preventDefault(); - this.props.dispatch(clickRelative(this.props.id, this.props.topologyId, - this.props.label, ReactDOM.findDOMNode(this).getBoundingClientRect())); + this.props.dispatch(clickRelative( + this.props.id, + this.props.topologyId, + this.props.label, + this.node.getBoundingClientRect() + )); + } + + saveNodeRef(ref) { + this.node = ref; } render() { const title = `View in ${this.props.topologyId}: ${this.props.label}`; return ( - + ); diff --git a/client/app/scripts/components/node-details/node-details-table-node-link.js b/client/app/scripts/components/node-details/node-details-table-node-link.js index 2b080afc2..3eef941ef 100644 --- a/client/app/scripts/components/node-details/node-details-table-node-link.js +++ b/client/app/scripts/components/node-details/node-details-table-node-link.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import { connect } from 'react-redux'; import { clickRelative } from '../../actions/app-actions'; @@ -9,12 +8,21 @@ class NodeDetailsTableNodeLink extends React.Component { constructor(props, context) { super(props, context); this.handleClick = this.handleClick.bind(this); + this.saveNodeRef = this.saveNodeRef.bind(this); } handleClick(ev) { ev.preventDefault(); - this.props.dispatch(clickRelative(this.props.nodeId, this.props.topologyId, - this.props.label, ReactDOM.findDOMNode(this).getBoundingClientRect())); + this.props.dispatch(clickRelative( + this.props.nodeId, + this.props.topologyId, + this.props.label, + this.node.getBoundingClientRect() + )); + } + + saveNodeRef(ref) { + this.node = ref; } render() { @@ -24,8 +32,8 @@ class NodeDetailsTableNodeLink extends React.Component { if (linkable) { return ( + className="node-details-table-node-link" title={title} + ref={this.saveNodeRef} onClick={this.handleClick}> {label} ); diff --git a/client/app/scripts/components/node-details/node-details-table-row.js b/client/app/scripts/components/node-details/node-details-table-row.js index 1cbd76be7..a26bee551 100644 --- a/client/app/scripts/components/node-details/node-details-table-row.js +++ b/client/app/scripts/components/node-details/node-details-table-row.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import classNames from 'classnames'; import NodeDetailsTableNodeLink from './node-details-table-node-link'; @@ -79,15 +78,15 @@ export default class NodeDetailsTableRow extends React.Component { // this.mouseDragOrigin = [0, 0]; - this.storeLabelRef = this.storeLabelRef.bind(this); + this.saveLabelElementRef = this.saveLabelElementRef.bind(this); this.onMouseDown = this.onMouseDown.bind(this); this.onMouseUp = this.onMouseUp.bind(this); this.onMouseEnter = this.onMouseEnter.bind(this); this.onMouseLeave = this.onMouseLeave.bind(this); } - storeLabelRef(ref) { - this.labelEl = ref; + saveLabelElementRef(ref) { + this.labelElement = ref; } onMouseEnter() { @@ -118,7 +117,7 @@ export default class NodeDetailsTableRow extends React.Component { } const { node, onClick } = this.props; - onClick(ev, node, ReactDOM.findDOMNode(this.labelEl)); + onClick(ev, node, this.labelElement); } render() { @@ -138,7 +137,7 @@ export default class NodeDetailsTableRow extends React.Component { className={className}> + ref={this.saveLabelElementRef} style={firstColumnStyle}> {this.props.renderIdCell(Object.assign(node, {topologyId, nodeId}))} {values} diff --git a/client/app/scripts/components/search.js b/client/app/scripts/components/search.js index 63bd0d899..65259cc43 100644 --- a/client/app/scripts/components/search.js +++ b/client/app/scripts/components/search.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import { connect } from 'react-redux'; import classnames from 'classnames'; import { debounce } from 'lodash'; @@ -48,6 +47,7 @@ class Search extends React.Component { this.handleBlur = this.handleBlur.bind(this); this.handleChange = this.handleChange.bind(this); this.handleFocus = this.handleFocus.bind(this); + this.saveQueryInputRef = this.saveQueryInputRef.bind(this); this.doSearch = debounce(this.doSearch.bind(this), 200); this.state = { value: '' @@ -81,6 +81,10 @@ class Search extends React.Component { this.props.doSearch(value); } + saveQueryInputRef(ref) { + this.queryInput = ref; + } + componentWillReceiveProps(nextProps) { // when cleared from the outside, reset internal state if (this.props.searchQuery !== nextProps.searchQuery && nextProps.searchQuery === '') { @@ -90,9 +94,9 @@ class Search extends React.Component { componentDidUpdate() { if (this.props.searchFocused) { - ReactDOM.findDOMNode(this.queryInput).focus(); + this.queryInput.focus(); } else if (!this.state.value) { - ReactDOM.findDOMNode(this.queryInput).blur(); + this.queryInput.blur(); } } @@ -125,7 +129,7 @@ class Search extends React.Component { className="search-input-field" type="text" id={inputId} value={value} onChange={this.handleChange} onFocus={this.handleFocus} onBlur={this.handleBlur} - disabled={disabled} ref={(c) => { this.queryInput = c; }} /> + disabled={disabled} ref={this.saveQueryInputRef} />
diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js index 7fc4f551d..6cd28052e 100644 --- a/client/app/scripts/components/terminal.js +++ b/client/app/scripts/components/terminal.js @@ -1,7 +1,6 @@ /* eslint no-return-assign: "off", react/jsx-no-bind: "off" */ import debug from 'debug'; import React from 'react'; -import ReactDOM from 'react-dom'; import { connect } from 'react-redux'; import classNames from 'classnames'; import { debounce } from 'lodash'; @@ -97,6 +96,8 @@ class Terminal extends React.Component { this.handleCloseClick = this.handleCloseClick.bind(this); this.handlePopoutTerminal = this.handlePopoutTerminal.bind(this); + this.saveInnerFlexRef = this.saveInnerFlexRef.bind(this); + this.saveNodeRef = this.saveNodeRef.bind(this); this.handleResize = this.handleResize.bind(this); this.handleResizeDebounced = debounce(this.handleResize, 500); } @@ -183,7 +184,6 @@ class Terminal extends React.Component { } mountTerminal() { - const component = this; this.term = new Term({ cols: this.state.cols, rows: this.state.rows, @@ -192,8 +192,7 @@ class Terminal extends React.Component { scrollback: 10000, }); - const innerNode = ReactDOM.findDOMNode(component.innerFlex); - this.term.open(innerNode); + this.term.open(this.innerFlex); this.term.on('data', (data) => { this.scrollToBottom(); if (this.socket) { @@ -263,16 +262,15 @@ class Terminal extends React.Component { const paramString = JSON.stringify(this.props); this.props.dispatch(clickCloseTerminal(this.getPipeId())); - const bcr = ReactDOM.findDOMNode(this).getBoundingClientRect(); + const bcr = this.node.getBoundingClientRect(); const minWidth = (this.state.characterWidth * 80) + (8 * 2); openNewWindow(`terminal.html#!/state/${paramString}`, bcr, minWidth); } handleResize() { - const innerNode = ReactDOM.findDOMNode(this.innerFlex); // scrollbar === 16px - const width = innerNode.clientWidth - (2 * 8) - 16; - const height = innerNode.clientHeight - (2 * 8); + const width = this.innerFlex.clientWidth - (2 * 8) - 16; + const height = this.innerFlex.clientHeight - (2 * 8); const cols = Math.floor(width / this.state.characterWidth); const rows = Math.floor(height / this.state.characterHeight); @@ -358,6 +356,14 @@ class Terminal extends React.Component { ); } + saveNodeRef(ref) { + this.node = ref; + } + + saveInnerFlexRef(ref) { + this.innerFlex = ref; + } + render() { const innerFlexStyle = { opacity: this.state.connected ? 1 : 0.8, @@ -371,13 +377,10 @@ class Terminal extends React.Component { }); return ( -
+
{this.isEmbedded() && this.getTerminalHeader()} -
this.innerFlex = ref} - className={innerClassName} - style={innerFlexStyle} > -
this.inner = ref} /> +
+
{this.getTerminalStatusBar()}