Use ES6 import/export for modules

This commit is contained in:
Yuya Ochiai
2018-04-10 01:16:44 +09:00
parent 7af4a139ec
commit 60e6058869
46 changed files with 238 additions and 287 deletions

View File

@@ -1,6 +1,6 @@
const React = require('react');
const PropTypes = require('prop-types');
const {Alert} = require('react-bootstrap');
import React from 'react';
import PropTypes from 'prop-types';
import {Alert} from 'react-bootstrap';
const baseClassName = 'AutoSaveIndicator';
const leaveClassName = `${baseClassName}-Leave`;
@@ -25,7 +25,7 @@ function getClassNameAndMessage(savingState, errorMessage) {
}
}
function AutoSaveIndicator(props) {
export default function AutoSaveIndicator(props) {
const {savingState, errorMessage, ...rest} = props;
const {className, message} = getClassNameAndMessage(savingState, errorMessage);
return (
@@ -50,5 +50,3 @@ Object.assign(AutoSaveIndicator, {
SAVING_STATE_ERROR,
SAVING_STATE_DONE,
});
module.exports = AutoSaveIndicator;

View File

@@ -1,8 +1,8 @@
const React = require('react');
const PropTypes = require('prop-types');
const {Button, Modal} = require('react-bootstrap');
import React from 'react';
import PropTypes from 'prop-types';
import {Button, Modal} from 'react-bootstrap';
function DestructiveConfirmationModal(props) {
export default function DestructiveConfirmationModal(props) {
const {
title,
body,
@@ -39,5 +39,3 @@ DestructiveConfirmationModal.propTypes = {
onAccept: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
};
module.exports = DestructiveConfirmationModal;

View File

@@ -1,11 +1,11 @@
// ErrorCode: https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h
const React = require('react');
const PropTypes = require('prop-types');
const {Grid, Row, Col} = require('react-bootstrap');
const {shell, remote} = require('electron');
import React from 'react';
import PropTypes from 'prop-types';
import {Grid, Row, Col} from 'react-bootstrap';
import {shell, remote} from 'electron';
function ErrorView(props) {
export default function ErrorView(props) {
const classNames = ['container', 'ErrorView'];
if (!props.active) {
classNames.push('ErrorView-hidden');
@@ -82,5 +82,3 @@ ErrorView.propTypes = {
active: PropTypes.bool,
withTab: PropTypes.bool,
};
module.exports = ErrorView;

View File

@@ -1,7 +1,7 @@
const React = require('react');
const PropTypes = require('prop-types');
import React from 'react';
import PropTypes from 'prop-types';
function HoveringURL(props) {
export default function HoveringURL(props) {
return (
<div className='HoveringURL HoveringURL-left'>
{props.targetURL}
@@ -12,5 +12,3 @@ function HoveringURL(props) {
HoveringURL.propTypes = {
targetURL: PropTypes.string,
};
module.exports = HoveringURL;

View File

@@ -1,9 +1,9 @@
const React = require('react');
const PropTypes = require('prop-types');
const ReactDOM = require('react-dom');
const {Button, Col, ControlLabel, Form, FormGroup, FormControl, Modal} = require('react-bootstrap');
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';
class LoginModal extends React.Component {
export default class LoginModal extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
@@ -11,8 +11,8 @@ class LoginModal extends React.Component {
handleSubmit(event) {
event.preventDefault();
const usernameNode = ReactDOM.findDOMNode(this.refs.username);
const passwordNode = ReactDOM.findDOMNode(this.refs.password);
const usernameNode = findDOMNode(this.refs.username);
const passwordNode = findDOMNode(this.refs.password);
this.props.onLogin(this.props.request, usernameNode.value, passwordNode.value);
usernameNode.value = '';
passwordNode.value = '';
@@ -94,5 +94,3 @@ LoginModal.propTypes = {
request: PropTypes.object,
show: PropTypes.bool,
};
module.exports = LoginModal;

View File

@@ -1,22 +1,22 @@
const url = require('url');
import url from 'url';
const React = require('react');
const PropTypes = require('prop-types');
const createReactClass = require('create-react-class');
const {CSSTransition, TransitionGroup} = require('react-transition-group');
const {Grid, Row} = require('react-bootstrap');
import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import {CSSTransition, TransitionGroup} from 'react-transition-group';
import {Grid, Row} from 'react-bootstrap';
const {ipcRenderer, remote} = require('electron');
import {ipcRenderer, remote} from 'electron';
const Utils = require('../../utils/util.js');
import Utils from '../../utils/util.js';
const LoginModal = require('./LoginModal.jsx');
const MattermostView = require('./MattermostView.jsx');
const TabBar = require('./TabBar.jsx');
const HoveringURL = require('./HoveringURL.jsx');
const PermissionRequestDialog = require('./PermissionRequestDialog.jsx');
import LoginModal from './LoginModal.jsx';
import MattermostView from './MattermostView.jsx';
import TabBar from './TabBar.jsx';
import HoveringURL from './HoveringURL.jsx';
import PermissionRequestDialog from './PermissionRequestDialog.jsx';
const NewTeamModal = require('./NewTeamModal.jsx');
import NewTeamModal from './NewTeamModal.jsx';
const MainPage = createReactClass({
propTypes: {
@@ -386,4 +386,4 @@ const MainPage = createReactClass({
},
});
module.exports = MainPage;
export default MainPage;

View File

@@ -1,18 +1,18 @@
/* eslint-disable react/no-set-state */
// setState() is necessary for this component
const url = require('url');
import url from 'url';
const React = require('react');
const PropTypes = require('prop-types');
const createReactClass = require('create-react-class');
const {findDOMNode} = require('react-dom');
const {ipcRenderer, remote, shell} = require('electron');
import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import {findDOMNode} from 'react-dom';
import {ipcRenderer, remote, shell} from 'electron';
const contextMenu = require('../js/contextMenu');
const {protocols} = require('../../../electron-builder.json');
import contextMenu from '../js/contextMenu';
import {protocols} from '../../../electron-builder.json';
const scheme = protocols[0].schemes[0];
const ErrorView = require('./ErrorView.jsx');
import ErrorView from './ErrorView.jsx';
const preloadJS = `file://${remote.app.getAppPath()}/browser/webview/mattermost_bundle.js`;
@@ -312,4 +312,4 @@ const MattermostView = createReactClass({
},
});
module.exports = MattermostView;
export default MattermostView;

View File

@@ -1,8 +1,8 @@
const React = require('react');
const PropTypes = require('prop-types');
const {Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock} = require('react-bootstrap');
import React from 'react';
import PropTypes from 'prop-types';
import {Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock} from 'react-bootstrap';
class NewTeamModal extends React.Component {
export default class NewTeamModal extends React.Component {
constructor() {
super();
@@ -201,5 +201,3 @@ NewTeamModal.propTypes = {
editMode: PropTypes.bool,
show: PropTypes.bool,
};
module.exports = NewTeamModal;

View File

@@ -1,6 +1,6 @@
const React = require('react');
const PropTypes = require('prop-types');
const {Button, Glyphicon, Popover} = require('react-bootstrap');
import React from 'react';
import PropTypes from 'prop-types';
import {Button, Glyphicon, Popover} from 'react-bootstrap';
const PERMISSIONS = {
media: {
@@ -49,7 +49,7 @@ function description(permission) {
return `Be granted "${permission}" permission`;
}
function PermissionRequestDialog(props) {
export default function PermissionRequestDialog(props) {
const {origin, permission, onClickAllow, onClickBlock, onClickClose, ...reft} = props;
return (
<Popover
@@ -85,5 +85,3 @@ PermissionRequestDialog.propTypes = {
onClickBlock: PropTypes.func,
onClickClose: PropTypes.func,
};
module.exports = PermissionRequestDialog;

View File

@@ -1,10 +1,10 @@
const React = require('react');
const PropTypes = require('prop-types');
const {Modal} = require('react-bootstrap');
import React from 'react';
import PropTypes from 'prop-types';
import {Modal} from 'react-bootstrap';
const DestructiveConfirmationModal = require('./DestructiveConfirmModal.jsx');
import DestructiveConfirmationModal from './DestructiveConfirmModal.jsx';
function RemoveServerModal(props) {
export default function RemoveServerModal(props) {
const {serverName, ...rest} = props;
return (
<DestructiveConfirmationModal
@@ -30,5 +30,3 @@ function RemoveServerModal(props) {
RemoveServerModal.propTypes = {
serverName: PropTypes.string.isRequired,
};
module.exports = RemoveServerModal;

View File

@@ -1,18 +1,18 @@
const React = require('react');
const PropTypes = require('prop-types');
const createReactClass = require('create-react-class');
const ReactDOM = require('react-dom');
const {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} = require('react-bootstrap');
import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';
import {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} from 'react-bootstrap';
const {ipcRenderer, remote} = require('electron');
const AutoLaunch = require('auto-launch');
const {debounce} = require('underscore');
import {ipcRenderer, remote} from 'electron';
import AutoLaunch from 'auto-launch';
import {debounce} from 'underscore';
const buildConfig = require('../../common/config/buildConfig');
const settings = require('../../common/settings');
import buildConfig from '../../common/config/buildConfig';
import settings from '../../common/settings';
const TeamList = require('./TeamList.jsx');
const AutoSaveIndicator = require('./AutoSaveIndicator.jsx');
import TeamList from './TeamList.jsx';
import AutoSaveIndicator from './AutoSaveIndicator.jsx';
const appLauncher = new AutoLaunch({
name: remote.app.getName(),
@@ -625,4 +625,4 @@ const SettingsPage = createReactClass({
},
});
module.exports = SettingsPage;
export default SettingsPage;

View File

@@ -1,10 +1,10 @@
const React = require('react');
const PropTypes = require('prop-types');
const {Glyphicon, Nav, NavItem, Overlay} = require('react-bootstrap');
import React from 'react';
import PropTypes from 'prop-types';
import {Glyphicon, Nav, NavItem, Overlay} from 'react-bootstrap';
const PermissionRequestDialog = require('./PermissionRequestDialog.jsx');
import PermissionRequestDialog from './PermissionRequestDialog.jsx';
class TabBar extends React.Component { // need "this"
export default class TabBar extends React.Component { // need "this"
render() {
const tabs = this.props.teams.map((team, index) => {
let unreadCount = 0;
@@ -118,5 +118,3 @@ TabBar.propTypes = {
onAddServer: PropTypes.func,
onClickPermissionDialog: PropTypes.func,
};
module.exports = TabBar;

View File

@@ -1,11 +1,11 @@
const React = require('react');
const PropTypes = require('prop-types');
const createReactClass = require('create-react-class');
const {ListGroup} = require('react-bootstrap');
import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import {ListGroup} from 'react-bootstrap';
const TeamListItem = require('./TeamListItem.jsx');
const NewTeamModal = require('./NewTeamModal.jsx');
const RemoveServerModal = require('./RemoveServerModal.jsx');
import TeamListItem from './TeamListItem.jsx';
import NewTeamModal from './NewTeamModal.jsx';
import RemoveServerModal from './RemoveServerModal.jsx';
const TeamList = createReactClass({
propTypes: {
@@ -171,4 +171,4 @@ const TeamList = createReactClass({
},
});
module.exports = TeamList;
export default TeamList;

View File

@@ -1,7 +1,7 @@
const React = require('react');
const PropTypes = require('prop-types');
import React from 'react';
import PropTypes from 'prop-types';
class TeamListItem extends React.Component {
export default class TeamListItem extends React.Component {
constructor(props) {
super(props);
this.handleTeamRemove = this.handleTeamRemove.bind(this);
@@ -49,5 +49,3 @@ TeamListItem.propTypes = {
onTeamClick: PropTypes.func,
url: PropTypes.string,
};
module.exports = TeamListItem;

View File

@@ -1,6 +1,6 @@
const {remote} = require('electron');
import {remote} from 'electron';
const settings = require('../../common/settings');
import settings from '../../common/settings';
class AppConfig {
constructor(file) {
@@ -20,4 +20,4 @@ class AppConfig {
}
}
module.exports = new AppConfig(remote.app.getPath('userData') + '/config.json');
export default new AppConfig(remote.app.getPath('userData') + '/config.json');

View File

@@ -1,24 +1,24 @@
'use strict';
require('./css/index.css');
import './css/index.css';
window.eval = global.eval = () => { // eslint-disable-line no-multi-assign, no-eval
throw new Error('Sorry, Mattermost does not support window.eval() for security reasons.');
};
const url = require('url');
import url from 'url';
const React = require('react');
const ReactDOM = require('react-dom');
const {remote, ipcRenderer} = require('electron');
import React from 'react';
import ReactDOM from 'react-dom';
import {remote, ipcRenderer} from 'electron';
const buildConfig = require('../common/config/buildConfig');
const settings = require('../common/settings');
const utils = require('../utils/util');
import buildConfig from '../common/config/buildConfig';
import settings from '../common/settings';
import utils from '../utils/util';
const MainPage = require('./components/MainPage.jsx');
const AppConfig = require('./config/AppConfig.js');
const badge = require('./js/badge');
import MainPage from './components/MainPage.jsx';
import AppConfig from './config/AppConfig.js';
import {createDataURL as createBadgeDataURL} from './js/badge';
const teams = settings.mergeDefaultTeams(AppConfig.data.teams);
@@ -41,10 +41,10 @@ function showUnreadBadgeWindows(unreadCount, mentionCount) {
}
if (mentionCount > 0) {
const dataURL = badge.createDataURL(mentionCount.toString());
const dataURL = createBadgeDataURL(mentionCount.toString());
sendBadge(dataURL, 'You have unread mentions (' + mentionCount + ')');
} else if (unreadCount > 0 && AppConfig.data.showUnreadBadge) {
const dataURL = badge.createDataURL('•');
const dataURL = createBadgeDataURL('•');
sendBadge(dataURL, 'You have unread channels (' + unreadCount + ')');
} else {
sendBadge(null, 'You have no unread messages');

View File

@@ -1,6 +1,6 @@
'use strict';
function createDataURL(text) {
export function createDataURL(text) {
const scale = 2; // should rely display dpi
const size = 16 * scale;
const canvas = document.createElement('canvas');
@@ -23,7 +23,3 @@ function createDataURL(text) {
return canvas.toDataURL();
}
module.exports = {
createDataURL,
};

View File

@@ -1,5 +1,5 @@
const {ipcRenderer} = require('electron');
const electronContextMenu = require('electron-context-menu');
import {ipcRenderer} from 'electron';
import electronContextMenu from 'electron-context-menu';
function getSuggestionsMenus(win, suggestions) {
if (suggestions.length === 0) {
@@ -37,7 +37,7 @@ function getSpellCheckerLocaleMenus(onSelectSpellCheckerLocale) {
}));
}
module.exports = {
export default {
setup(win, options) {
const defaultOptions = {
useSpellChecker: false,

View File

@@ -1,11 +1,12 @@
'use strict';
const OriginalNotification = Notification;
const {ipcRenderer, remote} = require('electron');
const {throttle} = require('underscore');
import {throttle} from 'underscore';
const osVersion = require('../../common/osVersion');
const dingDataURL = require('../../assets/ding.mp3'); // https://github.com/mattermost/platform/blob/v3.7.3/webapp/images/ding.mp3
import {ipcRenderer, remote} from 'electron';
import osVersion from '../../common/osVersion';
import dingDataURL from '../../assets/ding.mp3'; // https://github.com/mattermost/platform/blob/v3.7.3/webapp/images/ding.mp3
const appIconURL = `file:///${remote.app.getAppPath()}/assets/appicon.png`;
@@ -14,7 +15,7 @@ const playDing = throttle(() => {
ding.play();
}, 3000, {trailing: false});
class EnhancedNotification extends OriginalNotification {
export default class EnhancedNotification extends OriginalNotification {
constructor(title, options) {
if (process.platform === 'win32') {
// Replace with application icon.
@@ -64,5 +65,3 @@ class EnhancedNotification extends OriginalNotification {
return super.onclick;
}
}
module.exports = EnhancedNotification;

View File

@@ -1,17 +1,17 @@
'use strict';
const {remote} = require('electron');
import {remote} from 'electron';
window.eval = global.eval = () => { // eslint-disable-line no-multi-assign, no-eval
throw new Error(`Sorry, ${remote.app.getName()} does not support window.eval() for security reasons.`);
};
const React = require('react');
const ReactDOM = require('react-dom');
import React from 'react';
import ReactDOM from 'react-dom';
const buildConfig = require('../common/config/buildConfig');
import buildConfig from '../common/config/buildConfig';
const SettingsPage = require('./components/SettingsPage.jsx');
const contextMenu = require('./js/contextMenu');
import SettingsPage from './components/SettingsPage.jsx';
import contextMenu from './js/contextMenu';
const configFile = remote.app.getPath('userData') + '/config.json';

View File

@@ -1,10 +1,8 @@
'use strict';
const electron = require('electron');
const ipc = electron.ipcRenderer;
const webFrame = electron.webFrame;
import {ipcRenderer, webFrame} from 'electron';
const EnhancedNotification = require('../js/notification');
import EnhancedNotification from '../js/notification';
const UNREAD_COUNT_INTERVAL = 1000;
//eslint-disable-next-line no-magic-numbers
@@ -41,11 +39,11 @@ function watchReactAppUntilInitialized(callback) {
window.addEventListener('load', () => {
if (document.getElementById('root') === null) {
console.log('The guest is not assumed as mattermost-webapp');
ipc.sendToHost('onGuestInitialized');
ipcRenderer.sendToHost('onGuestInitialized');
return;
}
watchReactAppUntilInitialized(() => {
ipc.sendToHost('onGuestInitialized');
ipcRenderer.sendToHost('onGuestInitialized');
});
});
@@ -67,7 +65,7 @@ function getUnreadCount() {
// LHS not found => Log out => Count should be 0.
if (document.getElementById('sidebar-left') === null) {
ipc.sendToHost('onUnreadCountChange', 0, 0, false, false);
ipcRenderer.sendToHost('onUnreadCountChange', 0, 0, false, false);
this.unreadCount = 0;
this.mentionCount = 0;
setTimeout(getUnreadCount, UNREAD_COUNT_INTERVAL);
@@ -152,7 +150,7 @@ function getUnreadCount() {
}
if (this.unreadCount !== unreadCount || this.mentionCount !== mentionCount || isUnread || isMentioned) {
ipc.sendToHost('onUnreadCountChange', unreadCount, mentionCount, isUnread, isMentioned);
ipcRenderer.sendToHost('onUnreadCountChange', unreadCount, mentionCount, isUnread, isMentioned);
}
this.unreadCount = unreadCount;
this.mentionCount = mentionCount;
@@ -165,28 +163,28 @@ function isElementVisible(elem) {
}
function resetMisspelledState() {
ipc.once('spellchecker-is-ready', () => {
ipcRenderer.once('spellchecker-is-ready', () => {
const element = document.activeElement;
if (element) {
element.blur();
element.focus();
}
});
ipc.send('reply-on-spellchecker-is-ready');
ipcRenderer.send('reply-on-spellchecker-is-ready');
}
function setSpellChecker() {
const spellCheckerLocale = ipc.sendSync('get-spellchecker-locale');
const spellCheckerLocale = ipcRenderer.sendSync('get-spellchecker-locale');
webFrame.setSpellCheckProvider(spellCheckerLocale, false, {
spellCheck(text) {
const res = ipc.sendSync('checkspell', text);
const res = ipcRenderer.sendSync('checkspell', text);
return res === null ? true : res;
},
});
resetMisspelledState();
}
setSpellChecker();
ipc.on('set-spellcheker', setSpellChecker);
ipcRenderer.on('set-spellcheker', setSpellChecker);
// mattermost-webapp is SPA. So cache is not cleared due to no navigation.
// We needed to manually clear cache to free memory in long-term-use.