Remove findDOMNode() from components
This commit is contained in:
parent
87768010d5
commit
5091f59786
|
@ -20,6 +20,7 @@
|
|||
"no-var": 2,
|
||||
"react/jsx-indent": [2, 2],
|
||||
"react/jsx-indent-props": [2, 2],
|
||||
"react/no-find-dom-node": 2,
|
||||
"react/no-set-state": 1,
|
||||
"react/require-optimization": 0
|
||||
}
|
||||
|
|
|
@ -3,19 +3,20 @@
|
|||
// See LICENSE.txt for license information.
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {findDOMNode} from 'react-dom';
|
||||
import {Button, Col, ControlLabel, Form, FormGroup, FormControl, Modal} from 'react-bootstrap';
|
||||
|
||||
export default class LoginModal extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.usernameRef = React.createRef();
|
||||
this.passwordRef = React.createRef();
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
const usernameNode = findDOMNode(this.refs.username);
|
||||
const passwordNode = findDOMNode(this.refs.password);
|
||||
const usernameNode = this.usernameRef.current;
|
||||
const passwordNode = this.passwordRef.current;
|
||||
this.props.onLogin(this.props.request, usernameNode.value, passwordNode.value);
|
||||
usernameNode.value = '';
|
||||
passwordNode.value = '';
|
||||
|
@ -53,7 +54,7 @@ export default class LoginModal extends React.Component {
|
|||
<FormControl
|
||||
type='text'
|
||||
placeholder='User Name'
|
||||
ref='username'
|
||||
ref={this.usernameRef}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
|
@ -69,7 +70,7 @@ export default class LoginModal extends React.Component {
|
|||
<FormControl
|
||||
type='password'
|
||||
placeholder='Password'
|
||||
ref='password'
|
||||
ref={this.passwordRef}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
|
|
|
@ -9,7 +9,6 @@ import url from 'url';
|
|||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {findDOMNode} from 'react-dom';
|
||||
import {ipcRenderer, remote, shell} from 'electron';
|
||||
|
||||
import contextMenu from '../js/contextMenu';
|
||||
|
@ -63,6 +62,8 @@ export default class MattermostView extends React.Component {
|
|||
this.goForward = this.goForward.bind(this);
|
||||
this.getSrc = this.getSrc.bind(this);
|
||||
this.handleDeepLink = this.handleDeepLink.bind(this);
|
||||
|
||||
this.webviewRef = React.createRef();
|
||||
}
|
||||
|
||||
handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned) {
|
||||
|
@ -73,7 +74,7 @@ export default class MattermostView extends React.Component {
|
|||
|
||||
componentDidMount() {
|
||||
const self = this;
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
const webview = this.webviewRef.current;
|
||||
|
||||
webview.addEventListener('did-fail-load', (e) => {
|
||||
console.log(self.props.name, 'webview did-fail-load', e);
|
||||
|
@ -218,7 +219,7 @@ export default class MattermostView extends React.Component {
|
|||
reloadTimeoutID: null,
|
||||
isLoaded: false,
|
||||
});
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
const webview = this.webviewRef.current;
|
||||
webview.reload();
|
||||
}
|
||||
|
||||
|
@ -226,14 +227,14 @@ export default class MattermostView extends React.Component {
|
|||
this.setState({
|
||||
errorInfo: null,
|
||||
});
|
||||
const webContents = findDOMNode(this.refs.webview).getWebContents();
|
||||
const webContents = this.webviewRef.current.getWebContents();
|
||||
webContents.session.clearCache(() => {
|
||||
webContents.reload();
|
||||
});
|
||||
}
|
||||
|
||||
focusOnWebView() {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
const webview = this.webviewRef.current;
|
||||
const webContents = webview.getWebContents(); // webContents might not be created yet.
|
||||
if (webContents && !webContents.isFocused()) {
|
||||
webview.focus();
|
||||
|
@ -242,32 +243,32 @@ export default class MattermostView extends React.Component {
|
|||
}
|
||||
|
||||
canGoBack() {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
const webview = this.webviewRef.current;
|
||||
return webview.getWebContents().canGoBack();
|
||||
}
|
||||
|
||||
canGoForward() {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
const webview = this.webviewRef.current;
|
||||
return webview.getWebContents().canGoForward();
|
||||
}
|
||||
|
||||
goBack() {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
const webview = this.webviewRef.current;
|
||||
webview.getWebContents().goBack();
|
||||
}
|
||||
|
||||
goForward() {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
const webview = this.webviewRef.current;
|
||||
webview.getWebContents().goForward();
|
||||
}
|
||||
|
||||
getSrc() {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
const webview = this.webviewRef.current;
|
||||
return webview.src;
|
||||
}
|
||||
|
||||
handleDeepLink(relativeUrl) {
|
||||
const webview = findDOMNode(this.refs.webview);
|
||||
const webview = this.webviewRef.current;
|
||||
webview.executeJavaScript(
|
||||
'history.pushState(null, null, "' + relativeUrl + '");'
|
||||
);
|
||||
|
@ -314,7 +315,7 @@ export default class MattermostView extends React.Component {
|
|||
id={this.props.id}
|
||||
preload={preloadJS}
|
||||
src={this.props.src}
|
||||
ref='webview'
|
||||
ref={this.webviewRef}
|
||||
/>
|
||||
{ loadingImage }
|
||||
</div>);
|
||||
|
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ReactDOM from 'react-dom';
|
||||
import {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} from 'react-bootstrap';
|
||||
|
||||
import {ipcRenderer, remote} from 'electron';
|
||||
|
@ -74,6 +73,8 @@ export default class SettingsPage extends React.Component {
|
|||
this.handleChangeEnableHardwareAcceleration = this.handleChangeEnableHardwareAcceleration.bind(this);
|
||||
this.updateTeam = this.updateTeam.bind(this);
|
||||
this.addServer = this.addServer.bind(this);
|
||||
|
||||
this.trayIconThemeRef = React.createRef();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -214,7 +215,7 @@ export default class SettingsPage extends React.Component {
|
|||
|
||||
handleChangeTrayIconTheme() {
|
||||
this.setState({
|
||||
trayIconTheme: ReactDOM.findDOMNode(this.refs.trayIconTheme).value,
|
||||
trayIconTheme: this.trayIconThemeRef.current.value,
|
||||
});
|
||||
setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
|
||||
}
|
||||
|
@ -543,6 +544,7 @@ export default class SettingsPage extends React.Component {
|
|||
options.push(
|
||||
<FormGroup
|
||||
key='trayIconTheme'
|
||||
ref={this.trayIconThemeRef}
|
||||
style={{marginLeft: '20px'}}
|
||||
>
|
||||
{'Icon theme: '}
|
||||
|
|
Loading…
Reference in a new issue