Use ES6 class for React components

This commit is contained in:
Yuya Ochiai
2018-09-03 22:33:34 +09:00
parent 456727ebef
commit 23ca8bbe5a
8 changed files with 198 additions and 133 deletions

View File

@@ -21,7 +21,6 @@
"react/jsx-indent": [2, 2], "react/jsx-indent": [2, 2],
"react/jsx-indent-props": [2, 2], "react/jsx-indent-props": [2, 2],
"react/no-set-state": 1, "react/no-set-state": 1,
"react/prefer-es6-class": 1,
"react/require-optimization": 0 "react/require-optimization": 0
} }
} }

View File

@@ -428,7 +428,7 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
## react ## react
This product contains a modified portion of 'react', a declarative, efficient, and flexible JavaScript library for building user interfaces, This product contains a modified portion of 'react', a declarative, efficient, and flexible JavaScript library for building user interfaces,
'create-react-class', a drop-in replacement for React.createClass, and 'react-dom', the entry point of the DOM-related and 'react-dom', the entry point of the DOM-related
rendering paths, by Facebook, Inc. rendering paths, by Facebook, Inc.
* HOMEPAGE: * HOMEPAGE:

View File

@@ -1,11 +1,13 @@
// Copyright (c) 2015-2016 Yuya Ochiai // Copyright (c) 2015-2016 Yuya Ochiai
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
/* eslint-disable react/no-set-state */
import url from 'url'; import url from 'url';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import {CSSTransition, TransitionGroup} from 'react-transition-group'; import {CSSTransition, TransitionGroup} from 'react-transition-group';
import {Grid, Row} from 'react-bootstrap'; import {Grid, Row} from 'react-bootstrap';
@@ -21,21 +23,10 @@ import PermissionRequestDialog from './PermissionRequestDialog.jsx';
import Finder from './Finder.jsx'; import Finder from './Finder.jsx';
import NewTeamModal from './NewTeamModal.jsx'; import NewTeamModal from './NewTeamModal.jsx';
const MainPage = createReactClass({ export default class MainPage extends React.Component {
propTypes: { constructor(props) {
onUnreadCountChange: PropTypes.func.isRequired, super(props);
teams: PropTypes.array.isRequired,
onTeamConfigChange: PropTypes.func.isRequired,
initialIndex: PropTypes.number.isRequired,
useSpellChecker: PropTypes.bool.isRequired,
onSelectSpellCheckerLocale: PropTypes.func.isRequired,
deeplinkingUrl: PropTypes.string,
showAddServerButton: PropTypes.bool.isRequired,
requestingPermission: TabBar.propTypes.requestingPermission,
onClickPermissionDialog: PropTypes.func,
},
getInitialState() {
let key = this.props.initialIndex; let key = this.props.initialIndex;
if (this.props.deeplinkingUrl !== null) { if (this.props.deeplinkingUrl !== null) {
for (let i = 0; i < this.props.teams.length; i++) { for (let i = 0; i < this.props.teams.length; i++) {
@@ -46,7 +37,7 @@ const MainPage = createReactClass({
} }
} }
return { this.state = {
key, key,
unreadCounts: new Array(this.props.teams.length), unreadCounts: new Array(this.props.teams.length),
mentionCounts: new Array(this.props.teams.length), mentionCounts: new Array(this.props.teams.length),
@@ -55,7 +46,22 @@ const MainPage = createReactClass({
loginQueue: [], loginQueue: [],
targetURL: '', targetURL: '',
}; };
},
this.activateFinder = this.activateFinder.bind(this);
this.addServer = this.addServer.bind(this);
this.closeFinder = this.closeFinder.bind(this);
this.focusOnWebView = this.focusOnWebView.bind(this);
this.handleLogin = this.handleLogin.bind(this);
this.handleLoginCancel = this.handleLoginCancel.bind(this);
this.handleOnTeamFocused = this.handleOnTeamFocused.bind(this);
this.handleSelect = this.handleSelect.bind(this);
this.handleTargetURLChange = this.handleTargetURLChange.bind(this);
this.handleUnreadCountChange = this.handleUnreadCountChange.bind(this);
this.handleUnreadCountTotalChange = this.handleUnreadCountTotalChange.bind(this);
this.inputBlur = this.inputBlur.bind(this);
this.markReadAtActive = this.markReadAtActive.bind(this);
}
componentDidMount() { componentDidMount() {
const self = this; const self = this;
ipcRenderer.on('login-request', (event, request, authInfo) => { ipcRenderer.on('login-request', (event, request, authInfo) => {
@@ -146,12 +152,14 @@ const MainPage = createReactClass({
ipcRenderer.on('toggle-find', () => { ipcRenderer.on('toggle-find', () => {
this.activateFinder(true); this.activateFinder(true);
}); });
}, }
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (prevState.key !== this.state.key) { // i.e. When tab has been changed if (prevState.key !== this.state.key) { // i.e. When tab has been changed
this.refs[`mattermostView${this.state.key}`].focusOnWebView(); this.refs[`mattermostView${this.state.key}`].focusOnWebView();
} }
}, }
handleSelect(key) { handleSelect(key) {
const newKey = (this.props.teams.length + key) % this.props.teams.length; const newKey = (this.props.teams.length + key) % this.props.teams.length;
this.setState({ this.setState({
@@ -163,7 +171,7 @@ const MainPage = createReactClass({
title: webview.getTitle(), title: webview.getTitle(),
}); });
this.handleOnTeamFocused(newKey); this.handleOnTeamFocused(newKey);
}, }
handleUnreadCountChange(index, unreadCount, mentionCount, isUnread, isMentioned) { handleUnreadCountChange(index, unreadCount, mentionCount, isUnread, isMentioned) {
const unreadCounts = this.state.unreadCounts; const unreadCounts = this.state.unreadCounts;
@@ -187,7 +195,8 @@ const MainPage = createReactClass({
mentionAtActiveCounts, mentionAtActiveCounts,
}); });
this.handleUnreadCountTotalChange(); this.handleUnreadCountTotalChange();
}, }
markReadAtActive(index) { markReadAtActive(index) {
const unreadAtActive = this.state.unreadAtActive; const unreadAtActive = this.state.unreadAtActive;
const mentionAtActiveCounts = this.state.mentionAtActiveCounts; const mentionAtActiveCounts = this.state.mentionAtActiveCounts;
@@ -198,7 +207,8 @@ const MainPage = createReactClass({
mentionAtActiveCounts, mentionAtActiveCounts,
}); });
this.handleUnreadCountTotalChange(); this.handleUnreadCountTotalChange();
}, }
handleUnreadCountTotalChange() { handleUnreadCountTotalChange() {
if (this.props.onUnreadCountChange) { if (this.props.onUnreadCountChange) {
let allUnreadCount = this.state.unreadCounts.reduce((prev, curr) => { let allUnreadCount = this.state.unreadCounts.reduce((prev, curr) => {
@@ -217,23 +227,26 @@ const MainPage = createReactClass({
}); });
this.props.onUnreadCountChange(allUnreadCount, allMentionCount); this.props.onUnreadCountChange(allUnreadCount, allMentionCount);
} }
}, }
handleOnTeamFocused(index) { handleOnTeamFocused(index) {
// Turn off the flag to indicate whether unread message of active channel contains at current tab. // Turn off the flag to indicate whether unread message of active channel contains at current tab.
this.markReadAtActive(index); this.markReadAtActive(index);
}, }
handleLogin(request, username, password) { handleLogin(request, username, password) {
ipcRenderer.send('login-credentials', request, username, password); ipcRenderer.send('login-credentials', request, username, password);
const loginQueue = this.state.loginQueue; const loginQueue = this.state.loginQueue;
loginQueue.shift(); loginQueue.shift();
this.setState({loginQueue}); this.setState({loginQueue});
}, }
handleLoginCancel() { handleLoginCancel() {
const loginQueue = this.state.loginQueue; const loginQueue = this.state.loginQueue;
loginQueue.shift(); loginQueue.shift();
this.setState({loginQueue}); this.setState({loginQueue});
}, }
handleTargetURLChange(targetURL) { handleTargetURLChange(targetURL) {
clearTimeout(this.targetURLDisappearTimeout); clearTimeout(this.targetURLDisappearTimeout);
if (targetURL === '') { if (targetURL === '') {
@@ -244,37 +257,38 @@ const MainPage = createReactClass({
} else { } else {
this.setState({targetURL}); this.setState({targetURL});
} }
}, }
addServer() { addServer() {
this.setState({ this.setState({
showNewTeamModal: true, showNewTeamModal: true,
}); });
}, }
focusOnWebView(e) { focusOnWebView(e) {
if (e.target.className !== 'finder-input') { if (e.target.className !== 'finder-input') {
this.refs[`mattermostView${this.state.key}`].focusOnWebView(); this.refs[`mattermostView${this.state.key}`].focusOnWebView();
} }
}, }
activateFinder() { activateFinder() {
this.setState({ this.setState({
finderVisible: true, finderVisible: true,
focusFinder: true, focusFinder: true,
}); });
}, }
closeFinder() { closeFinder() {
this.setState({ this.setState({
finderVisible: false, finderVisible: false,
}); });
}, }
inputBlur() { inputBlur() {
this.setState({ this.setState({
focusFinder: false, focusFinder: false,
}); });
}, }
render() { render() {
const self = this; const self = this;
@@ -419,7 +433,18 @@ const MainPage = createReactClass({
</div> </div>
</div> </div>
); );
}, }
}); }
export default MainPage; MainPage.propTypes = {
onUnreadCountChange: PropTypes.func.isRequired,
teams: PropTypes.array.isRequired,
onTeamConfigChange: PropTypes.func.isRequired,
initialIndex: PropTypes.number.isRequired,
useSpellChecker: PropTypes.bool.isRequired,
onSelectSpellCheckerLocale: PropTypes.func.isRequired,
deeplinkingUrl: PropTypes.string,
showAddServerButton: PropTypes.bool.isRequired,
requestingPermission: TabBar.propTypes.requestingPermission,
onClickPermissionDialog: PropTypes.func,
};

View File

@@ -9,7 +9,6 @@ import url from 'url';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import {findDOMNode} from 'react-dom'; import {findDOMNode} from 'react-dom';
import {ipcRenderer, remote, shell} from 'electron'; import {ipcRenderer, remote, shell} from 'electron';
@@ -43,33 +42,34 @@ function isNetworkDrive(fileURL) {
return false; return false;
} }
const MattermostView = createReactClass({ export default class MattermostView extends React.Component {
propTypes: { constructor(props) {
name: PropTypes.string, super(props);
id: PropTypes.string,
onTargetURLChange: PropTypes.func,
onUnreadCountChange: PropTypes.func,
src: PropTypes.string,
active: PropTypes.bool,
withTab: PropTypes.bool,
useSpellChecker: PropTypes.bool,
onSelectSpellCheckerLocale: PropTypes.func,
},
getInitialState() { this.state = {
return {
errorInfo: null, errorInfo: null,
isContextMenuAdded: false, isContextMenuAdded: false,
reloadTimeoutID: null, reloadTimeoutID: null,
isLoaded: false, isLoaded: false,
}; };
},
this.handleUnreadCountChange = this.handleUnreadCountChange.bind(this);
this.reload = this.reload.bind(this);
this.clearCacheAndReload = this.clearCacheAndReload.bind(this);
this.focusOnWebView = this.focusOnWebView.bind(this);
this.canGoBack = this.canGoBack.bind(this);
this.canGoForward = this.canGoForward.bind(this);
this.goBack = this.goBack.bind(this);
this.goForward = this.goForward.bind(this);
this.getSrc = this.getSrc.bind(this);
this.handleDeepLink = this.handleDeepLink.bind(this);
}
handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned) { handleUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned) {
if (this.props.onUnreadCountChange) { if (this.props.onUnreadCountChange) {
this.props.onUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned); this.props.onUnreadCountChange(unreadCount, mentionCount, isUnread, isMentioned);
} }
}, }
componentDidMount() { componentDidMount() {
const self = this; const self = this;
@@ -209,7 +209,7 @@ const MattermostView = createReactClass({
break; break;
} }
}); });
}, }
reload() { reload() {
clearTimeout(this.state.reloadTimeoutID); clearTimeout(this.state.reloadTimeoutID);
@@ -220,7 +220,7 @@ const MattermostView = createReactClass({
}); });
const webview = findDOMNode(this.refs.webview); const webview = findDOMNode(this.refs.webview);
webview.reload(); webview.reload();
}, }
clearCacheAndReload() { clearCacheAndReload() {
this.setState({ this.setState({
@@ -230,7 +230,7 @@ const MattermostView = createReactClass({
webContents.session.clearCache(() => { webContents.session.clearCache(() => {
webContents.reload(); webContents.reload();
}); });
}, }
focusOnWebView() { focusOnWebView() {
const webview = findDOMNode(this.refs.webview); const webview = findDOMNode(this.refs.webview);
@@ -239,32 +239,32 @@ const MattermostView = createReactClass({
webview.focus(); webview.focus();
webContents.focus(); webContents.focus();
} }
}, }
canGoBack() { canGoBack() {
const webview = findDOMNode(this.refs.webview); const webview = findDOMNode(this.refs.webview);
return webview.getWebContents().canGoBack(); return webview.getWebContents().canGoBack();
}, }
canGoForward() { canGoForward() {
const webview = findDOMNode(this.refs.webview); const webview = findDOMNode(this.refs.webview);
return webview.getWebContents().canGoForward(); return webview.getWebContents().canGoForward();
}, }
goBack() { goBack() {
const webview = findDOMNode(this.refs.webview); const webview = findDOMNode(this.refs.webview);
webview.getWebContents().goBack(); webview.getWebContents().goBack();
}, }
goForward() { goForward() {
const webview = findDOMNode(this.refs.webview); const webview = findDOMNode(this.refs.webview);
webview.getWebContents().goForward(); webview.getWebContents().goForward();
}, }
getSrc() { getSrc() {
const webview = findDOMNode(this.refs.webview); const webview = findDOMNode(this.refs.webview);
return webview.src; return webview.src;
}, }
handleDeepLink(relativeUrl) { handleDeepLink(relativeUrl) {
const webview = findDOMNode(this.refs.webview); const webview = findDOMNode(this.refs.webview);
@@ -274,7 +274,7 @@ const MattermostView = createReactClass({
webview.executeJavaScript( webview.executeJavaScript(
'dispatchEvent(new PopStateEvent("popstate", null));' 'dispatchEvent(new PopStateEvent("popstate", null));'
); );
}, }
render() { render() {
const errorView = this.state.errorInfo ? ( const errorView = this.state.errorInfo ? (
@@ -318,7 +318,17 @@ const MattermostView = createReactClass({
/> />
{ loadingImage } { loadingImage }
</div>); </div>);
}, }
}); }
export default MattermostView; MattermostView.propTypes = {
name: PropTypes.string,
id: PropTypes.string,
onTargetURLChange: PropTypes.func,
onUnreadCountChange: PropTypes.func,
src: PropTypes.string,
active: PropTypes.bool,
withTab: PropTypes.bool,
useSpellChecker: PropTypes.bool,
onSelectSpellCheckerLocale: PropTypes.func,
};

View File

@@ -1,9 +1,11 @@
// Copyright (c) 2015-2016 Yuya Ochiai // Copyright (c) 2015-2016 Yuya Ochiai
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
/* eslint-disable react/no-set-state */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} from 'react-bootstrap'; import {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} from 'react-bootstrap';
@@ -31,20 +33,16 @@ function backToIndex(index) {
const CONFIG_TYPE_SERVERS = 'servers'; const CONFIG_TYPE_SERVERS = 'servers';
const CONFIG_TYPE_APP_OPTIONS = 'appOptions'; const CONFIG_TYPE_APP_OPTIONS = 'appOptions';
const SettingsPage = createReactClass({ export default class SettingsPage extends React.Component {
propTypes: { constructor(props) {
configFile: PropTypes.string, super(props);
enableServerManagement: PropTypes.bool,
},
getInitialState() {
let initialState; let initialState;
try { try {
initialState = settings.readFileSync(this.props.configFile); initialState = settings.readFileSync(this.props.configFile);
} catch (e) { } catch (e) {
initialState = settings.loadDefault(); initialState = settings.loadDefault();
} }
initialState.showAddTeamForm = false; initialState.showAddTeamForm = false;
initialState.trayWasVisible = remote.getCurrentWindow().trayWasVisible; initialState.trayWasVisible = remote.getCurrentWindow().trayWasVisible;
if (initialState.teams.length === 0) { if (initialState.teams.length === 0) {
@@ -54,9 +52,30 @@ const SettingsPage = createReactClass({
appOptions: AutoSaveIndicator.SAVING_STATE_DONE, appOptions: AutoSaveIndicator.SAVING_STATE_DONE,
servers: AutoSaveIndicator.SAVING_STATE_DONE, servers: AutoSaveIndicator.SAVING_STATE_DONE,
}; };
this.state = initialState;
this.startSaveConfig = this.startSaveConfig.bind(this);
this.didSaveConfig = this.didSaveConfig.bind(this);
this.handleTeamsChange = this.handleTeamsChange.bind(this);
this.saveConfig = this.saveConfig.bind(this);
this.saveAutoStart = this.saveAutoStart.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.handleChangeShowTrayIcon = this.handleChangeShowTrayIcon.bind(this);
this.handleChangeTrayIconTheme = this.handleChangeTrayIconTheme.bind(this);
this.handleChangeAutoStart = this.handleChangeAutoStart.bind(this);
this.handleChangeMinimizeToTray = this.handleChangeMinimizeToTray.bind(this);
this.toggleShowTeamForm = this.toggleShowTeamForm.bind(this);
this.setShowTeamFormVisibility = this.setShowTeamFormVisibility.bind(this);
this.handleFlashWindow = this.handleFlashWindow.bind(this);
this.handleBounceIcon = this.handleBounceIcon.bind(this);
this.handleBounceIconType = this.handleBounceIconType.bind(this);
this.handleShowUnreadBadge = this.handleShowUnreadBadge.bind(this);
this.handleChangeUseSpellChecker = this.handleChangeUseSpellChecker.bind(this);
this.handleChangeEnableHardwareAcceleration = this.handleChangeEnableHardwareAcceleration.bind(this);
this.updateTeam = this.updateTeam.bind(this);
this.addServer = this.addServer.bind(this);
}
return initialState;
},
componentDidMount() { componentDidMount() {
if (process.platform === 'win32' || process.platform === 'linux') { if (process.platform === 'win32' || process.platform === 'linux') {
const self = this; const self = this;
@@ -74,7 +93,7 @@ const SettingsPage = createReactClass({
ipcRenderer.on('switch-tab', (event, key) => { ipcRenderer.on('switch-tab', (event, key) => {
backToIndex(key); backToIndex(key);
}); });
}, }
startSaveConfig(configType) { startSaveConfig(configType) {
if (!this.startSaveConfigImpl) { if (!this.startSaveConfigImpl) {
@@ -97,7 +116,7 @@ const SettingsPage = createReactClass({
savingState[configType] = AutoSaveIndicator.SAVING_STATE_SAVING; savingState[configType] = AutoSaveIndicator.SAVING_STATE_SAVING;
this.setState({savingState}); this.setState({savingState});
this.startSaveConfigImpl[configType](); this.startSaveConfigImpl[configType]();
}, }
didSaveConfig(configType) { didSaveConfig(configType) {
if (!this.didSaveConfigImpl) { if (!this.didSaveConfigImpl) {
@@ -111,7 +130,7 @@ const SettingsPage = createReactClass({
}, 2000); }, 2000);
} }
this.didSaveConfigImpl[configType](); this.didSaveConfigImpl[configType]();
}, }
handleTeamsChange(teams) { handleTeamsChange(teams) {
this.setState({ this.setState({
@@ -122,7 +141,7 @@ const SettingsPage = createReactClass({
this.setState({showAddTeamForm: true}); this.setState({showAddTeamForm: true});
} }
setImmediate(this.startSaveConfig, CONFIG_TYPE_SERVERS); setImmediate(this.startSaveConfig, CONFIG_TYPE_SERVERS);
}, }
saveConfig(callback) { saveConfig(callback) {
const config = { const config = {
@@ -156,7 +175,7 @@ const SettingsPage = createReactClass({
callback(); callback();
} }
}); });
}, }
saveAutoStart(autostart, callback) { saveAutoStart(autostart, callback) {
appLauncher.isEnabled().then((enabled) => { appLauncher.isEnabled().then((enabled) => {
@@ -172,11 +191,12 @@ const SettingsPage = createReactClass({
callback(); callback();
} }
}).catch(callback); }).catch(callback);
}, }
handleCancel() { handleCancel() {
backToIndex(); backToIndex();
}, }
handleChangeShowTrayIcon() { handleChangeShowTrayIcon() {
const shouldShowTrayIcon = !this.refs.showTrayIcon.props.checked; const shouldShowTrayIcon = !this.refs.showTrayIcon.props.checked;
this.setState({ this.setState({
@@ -190,19 +210,22 @@ const SettingsPage = createReactClass({
} }
setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS); setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
}, }
handleChangeTrayIconTheme() { handleChangeTrayIconTheme() {
this.setState({ this.setState({
trayIconTheme: ReactDOM.findDOMNode(this.refs.trayIconTheme).value, trayIconTheme: ReactDOM.findDOMNode(this.refs.trayIconTheme).value,
}); });
setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS); setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
}, }
handleChangeAutoStart() { handleChangeAutoStart() {
this.setState({ this.setState({
autostart: !this.refs.autostart.props.checked, autostart: !this.refs.autostart.props.checked,
}); });
setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS); setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
}, }
handleChangeMinimizeToTray() { handleChangeMinimizeToTray() {
const shouldMinimizeToTray = this.state.showTrayIcon && !this.refs.minimizeToTray.props.checked; const shouldMinimizeToTray = this.state.showTrayIcon && !this.refs.minimizeToTray.props.checked;
@@ -210,18 +233,21 @@ const SettingsPage = createReactClass({
minimizeToTray: shouldMinimizeToTray, minimizeToTray: shouldMinimizeToTray,
}); });
setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS); setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
}, }
toggleShowTeamForm() { toggleShowTeamForm() {
this.setState({ this.setState({
showAddTeamForm: !this.state.showAddTeamForm, showAddTeamForm: !this.state.showAddTeamForm,
}); });
document.activeElement.blur(); document.activeElement.blur();
}, }
setShowTeamFormVisibility(val) { setShowTeamFormVisibility(val) {
this.setState({ this.setState({
showAddTeamForm: val, showAddTeamForm: val,
}); });
}, }
handleFlashWindow() { handleFlashWindow() {
this.setState({ this.setState({
notifications: { notifications: {
@@ -230,7 +256,8 @@ const SettingsPage = createReactClass({
}, },
}); });
setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS); setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
}, }
handleBounceIcon() { handleBounceIcon() {
this.setState({ this.setState({
notifications: { notifications: {
@@ -239,7 +266,8 @@ const SettingsPage = createReactClass({
}, },
}); });
setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS); setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
}, }
handleBounceIconType(event) { handleBounceIconType(event) {
this.setState({ this.setState({
notifications: { notifications: {
@@ -248,27 +276,28 @@ const SettingsPage = createReactClass({
}, },
}); });
setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS); setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
}, }
handleShowUnreadBadge() { handleShowUnreadBadge() {
this.setState({ this.setState({
showUnreadBadge: !this.refs.showUnreadBadge.props.checked, showUnreadBadge: !this.refs.showUnreadBadge.props.checked,
}); });
setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS); setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
}, }
handleChangeUseSpellChecker() { handleChangeUseSpellChecker() {
this.setState({ this.setState({
useSpellChecker: !this.refs.useSpellChecker.props.checked, useSpellChecker: !this.refs.useSpellChecker.props.checked,
}); });
setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS); setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
}, }
handleChangeEnableHardwareAcceleration() { handleChangeEnableHardwareAcceleration() {
this.setState({ this.setState({
enableHardwareAcceleration: !this.refs.enableHardwareAcceleration.props.checked, enableHardwareAcceleration: !this.refs.enableHardwareAcceleration.props.checked,
}); });
setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS); setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
}, }
updateTeam(index, newData) { updateTeam(index, newData) {
const teams = this.state.teams; const teams = this.state.teams;
@@ -277,7 +306,7 @@ const SettingsPage = createReactClass({
teams, teams,
}); });
setImmediate(this.startSaveConfig, CONFIG_TYPE_SERVERS); setImmediate(this.startSaveConfig, CONFIG_TYPE_SERVERS);
}, }
addServer(team) { addServer(team) {
const teams = this.state.teams; const teams = this.state.teams;
@@ -286,7 +315,7 @@ const SettingsPage = createReactClass({
teams, teams,
}); });
setImmediate(this.startSaveConfig, CONFIG_TYPE_SERVERS); setImmediate(this.startSaveConfig, CONFIG_TYPE_SERVERS);
}, }
render() { render() {
const settingsPage = { const settingsPage = {
@@ -625,7 +654,10 @@ const SettingsPage = createReactClass({
</Grid> </Grid>
</div> </div>
); );
}, }
}); }
export default SettingsPage; SettingsPage.propTypes = {
configFile: PropTypes.string,
enableServerManagement: PropTypes.bool,
};

View File

@@ -3,27 +3,17 @@
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import {ListGroup} from 'react-bootstrap'; import {ListGroup} from 'react-bootstrap';
import TeamListItem from './TeamListItem.jsx'; import TeamListItem from './TeamListItem.jsx';
import NewTeamModal from './NewTeamModal.jsx'; import NewTeamModal from './NewTeamModal.jsx';
import RemoveServerModal from './RemoveServerModal.jsx'; import RemoveServerModal from './RemoveServerModal.jsx';
const TeamList = createReactClass({ export default class TeamList extends React.Component {
propTypes: { constructor(props) {
onTeamsChange: PropTypes.func, super(props);
showAddTeamForm: PropTypes.bool,
teams: PropTypes.array,
addServer: PropTypes.func,
updateTeam: PropTypes.func,
toggleAddTeamForm: PropTypes.func,
setAddTeamFormVisibility: PropTypes.func,
onTeamClick: PropTypes.func,
},
getInitialState() { this.state = {
return {
showEditTeamForm: false, showEditTeamForm: false,
indexToRemoveServer: -1, indexToRemoveServer: -1,
team: { team: {
@@ -32,13 +22,21 @@ const TeamList = createReactClass({
index: false, index: false,
}, },
}; };
},
this.handleTeamRemove = this.handleTeamRemove.bind(this);
this.handleTeamAdd = this.handleTeamAdd.bind(this);
this.handleTeamEditing = this.handleTeamEditing.bind(this);
this.openServerRemoveModal = this.openServerRemoveModal.bind(this);
this.closeServerRemoveModal = this.closeServerRemoveModal.bind(this);
}
handleTeamRemove(index) { handleTeamRemove(index) {
console.log(index); console.log(index);
const teams = this.props.teams; const teams = this.props.teams;
teams.splice(index, 1); teams.splice(index, 1);
this.props.onTeamsChange(teams); this.props.onTeamsChange(teams);
}, }
handleTeamAdd(team) { handleTeamAdd(team) {
const teams = this.props.teams; const teams = this.props.teams;
@@ -60,7 +58,8 @@ const TeamList = createReactClass({
}); });
this.props.onTeamsChange(teams); this.props.onTeamsChange(teams);
}, }
handleTeamEditing(teamName, teamUrl, teamIndex) { handleTeamEditing(teamName, teamUrl, teamIndex) {
this.setState({ this.setState({
showEditTeamForm: true, showEditTeamForm: true,
@@ -70,15 +69,15 @@ const TeamList = createReactClass({
index: teamIndex, index: teamIndex,
}, },
}); });
}, }
openServerRemoveModal(indexForServer) { openServerRemoveModal(indexForServer) {
this.setState({indexToRemoveServer: indexForServer}); this.setState({indexToRemoveServer: indexForServer});
}, }
closeServerRemoveModal() { closeServerRemoveModal() {
this.setState({indexToRemoveServer: -1}); this.setState({indexToRemoveServer: -1});
}, }
render() { render() {
const self = this; const self = this;
@@ -171,7 +170,16 @@ const TeamList = createReactClass({
{ removeServerModal} { removeServerModal}
</ListGroup> </ListGroup>
); );
}, }
}); }
export default TeamList; TeamList.propTypes = {
onTeamsChange: PropTypes.func,
showAddTeamForm: PropTypes.bool,
teams: PropTypes.array,
addServer: PropTypes.func,
updateTeam: PropTypes.func,
toggleAddTeamForm: PropTypes.func,
setAddTeamFormVisibility: PropTypes.func,
onTeamClick: PropTypes.func,
};

View File

@@ -11,7 +11,6 @@
"dependencies": { "dependencies": {
"auto-launch": "^5.0.5", "auto-launch": "^5.0.5",
"bootstrap": "^3.3.7", "bootstrap": "^3.3.7",
"create-react-class": "^15.6.3",
"electron-context-menu": "0.9.0", "electron-context-menu": "0.9.0",
"electron-devtools-installer": "^2.2.4", "electron-devtools-installer": "^2.2.4",
"electron-is-dev": "^0.3.0", "electron-is-dev": "^0.3.0",

View File

@@ -107,14 +107,6 @@ core-js@^2.4.0:
version "2.5.1" version "2.5.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
create-react-class@^15.6.3:
version "15.6.3"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.3.1"
object-assign "^4.1.1"
cross-unzip@0.0.2: cross-unzip@0.0.2:
version "0.0.2" version "0.0.2"
resolved "https://registry.yarnpkg.com/cross-unzip/-/cross-unzip-0.0.2.tgz#5183bc47a09559befcf98cc4657964999359372f" resolved "https://registry.yarnpkg.com/cross-unzip/-/cross-unzip-0.0.2.tgz#5183bc47a09559befcf98cc4657964999359372f"