Remove findDOMNode as per warning

This commit is contained in:
Cmdr McDonald
2017-04-23 18:50:13 +01:00
parent 7db76ecba0
commit 4dc8ab928c
6 changed files with 11 additions and 29 deletions

View File

@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import * as ModuleUtils from '../shipyard/ModuleUtils'; import * as ModuleUtils from '../shipyard/ModuleUtils';
import { findDOMNode } from 'react-dom';
import TranslatedComponent from './TranslatedComponent'; import TranslatedComponent from './TranslatedComponent';
import { stopCtxPropagation } from '../utils/UtilityFunctions'; import { stopCtxPropagation } from '../utils/UtilityFunctions';
import cn from 'classnames'; import cn from 'classnames';
@@ -374,7 +373,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
*/ */
componentDidMount() { componentDidMount() {
if (this.groupElem) { // Scroll to currently selected group if (this.groupElem) { // Scroll to currently selected group
findDOMNode(this).scrollTop = this.groupElem.offsetTop; this.node.scrollTop = this.groupElem.offsetTop;
} }
} }
@@ -393,7 +392,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
*/ */
render() { render() {
return ( return (
<div <div ref={node => this.node = node}
className={cn('select', this.props.className)} className={cn('select', this.props.className)}
onScroll={this._hideDiff} onScroll={this._hideDiff}
onClick={(e) => e.stopPropagation() } onClick={(e) => e.stopPropagation() }

View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import TranslatedComponent from './TranslatedComponent'; import TranslatedComponent from './TranslatedComponent';
/** /**
@@ -46,10 +45,9 @@ export default class ModalExport extends TranslatedComponent {
* Focus on textarea and select all * Focus on textarea and select all
*/ */
componentDidMount() { componentDidMount() {
let e = findDOMNode(this.refs.exportField); if (this.exportField) {
if (e) { this.exportField.focus();
e.focus(); this.exportField.select();
e.select();
} }
} }
@@ -69,7 +67,7 @@ export default class ModalExport extends TranslatedComponent {
<h2>{translate(this.props.title || 'Export')}</h2> <h2>{translate(this.props.title || 'Export')}</h2>
{description} {description}
<div> <div>
<textarea className='cb json' ref='exportField' readOnly value={this.state.exportJson} /> <textarea className='cb json' ref={node => this.exportField = node} readOnly value={this.state.exportJson} />
</div> </div>
<button className='r dismiss cap' onClick={this.context.hideModal}>{translate('close')}</button> <button className='r dismiss cap' onClick={this.context.hideModal}>{translate('close')}</button>
</div>; </div>;

View File

@@ -1,7 +1,6 @@
/* eslint react/no-danger: 0 */ /* eslint react/no-danger: 0 */
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { findDOMNode } from 'react-dom';
import TranslatedComponent from './TranslatedComponent'; import TranslatedComponent from './TranslatedComponent';
/** /**
@@ -21,17 +20,6 @@ export default class ModalHelp extends TranslatedComponent {
super(props); super(props);
} }
/**
* Focus on textarea and select all
*/
componentDidMount() {
const e = findDOMNode(this.refs.exportField);
if (e) {
e.focus();
e.select();
}
}
/** /**
* Render the modal * Render the modal
* @return {React.Component} Modal Content * @return {React.Component} Modal Content

View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import cn from 'classnames'; import cn from 'classnames';
import TranslatedComponent from './TranslatedComponent'; import TranslatedComponent from './TranslatedComponent';
import PowerBands from './PowerBands'; import PowerBands from './PowerBands';
@@ -149,7 +148,7 @@ export default class PowerManagement extends TranslatedComponent {
* Update power bands width from DOM * Update power bands width from DOM
*/ */
_updateWidth() { _updateWidth() {
this.setState({ width: findDOMNode(this).offsetWidth }); this.setState({ width: this.node.offsetWidth });
} }
/** /**
@@ -197,7 +196,7 @@ export default class PowerManagement extends TranslatedComponent {
let sortOrder = this._sortOrder; let sortOrder = this._sortOrder;
return ( return (
<div className='group half' id='componentPriority'> <div ref={node => this.node = node} className='group half' id='componentPriority'>
<table style={{ width: '100%' }}> <table style={{ width: '100%' }}>
<thead> <thead>
<tr className='main'> <tr className='main'>

View File

@@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import { findDOMNode } from 'react-dom';
import Page from './Page'; import Page from './Page';
import Router from '../Router'; import Router from '../Router';
import cn from 'classnames'; import cn from 'classnames';
@@ -385,7 +384,7 @@ export default class ComparisonPage extends Page {
*/ */
_updateDimensions() { _updateDimensions() {
this.setState({ this.setState({
chartWidth: findDOMNode(this.refs.chartRef).offsetWidth chartWidth: this.chartRef.offsetWidth
}); });
} }
@@ -500,9 +499,9 @@ export default class ComparisonPage extends Page {
<ComparisonTable builds={builds} facets={facets} onSort={this._sortShips} predicate={predicate} desc={desc} /> <ComparisonTable builds={builds} facets={facets} onSort={this._sortShips} predicate={predicate} desc={desc} />
{!builds.length ? {!builds.length ?
<div className='chart' ref={'chartRef'}>{translate('PHRASE_NO_BUILDS')}</div> : <div className='chart' ref={node => this.chartRef = node}>{translate('PHRASE_NO_BUILDS')}</div> :
facets.filter((f) => f.active).map((f, i) => facets.filter((f) => f.active).map((f, i) =>
<div key={f.title} className='chart' ref={ i == 0 ? 'chartRef' : null}> <div key={f.title} className='chart' ref={ i == 0 ? node => this.chartRef = node : null}>
<h3 className='ptr' onClick={this._sortShips.bind(this, f.props[0])}>{translate(f.title)}</h3> <h3 className='ptr' onClick={this._sortShips.bind(this, f.props[0])}>{translate(f.title)}</h3>
<BarChart <BarChart
width={chartWidth} width={chartWidth}

View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
// import Perf from 'react-addons-perf'; // import Perf from 'react-addons-perf';
import { findDOMNode } from 'react-dom';
import { Ships } from 'coriolis-data/dist'; import { Ships } from 'coriolis-data/dist';
import cn from 'classnames'; import cn from 'classnames';
import Page from './Page'; import Page from './Page';