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()}