fix: Eslint warnings (#550)

.eslintrc.js

@@ -68,7 +68,7 @@ module.exports = {
     'arrow-parens': 'off',
 
     // import
-    'import/no-extraneous-dependencies': ['warn', { devDependencies: false }],
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'import/no-dynamic-require': 'warn',
     'import/no-unresolved': 'off',
     'import/extensions': 'off',

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Provider } from 'mobx-react';

src/components/Base/Notification/item.jsx

@@ -33,12 +33,25 @@ export default class NotificationItem extends React.Component {
     ts: Date.now()
   };
 
-  timer = null;
-
   state = {
     hidden: false
   };
 
+  componentDidMount() {
+    const { timeOut } = this.props;
+    if (timeOut) {
+      this.timer = setTimeout(this.hideNotify, timeOut);
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+    this.timer = null;
+    this.props.onClosed();
+  }
+
+  timer = null;
+
   // based on font-awesome icons
   iconMap = {
     error: 'error',
@@ -65,20 +78,7 @@ export default class NotificationItem extends React.Component {
     });
   };
 
-  componentDidMount() {
-    const { timeOut } = this.props;
-    if (timeOut) {
-      this.timer = setTimeout(this.hideNotify, timeOut);
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timer);
-    this.timer = null;
-    this.props.onClosed();
-  }
-
-  handleClick = e => {
+  handleClick = () => {
     // this.hideNotify();
   };
 

src/components/Base/Pagination/index.jsx

@@ -136,7 +136,7 @@ export default class Pagination extends React.Component {
   }
 
   render() {
-    const { total, className, ...rest } = this.props;
+    const { total, className } = this.props;
     const { current } = this.state;
     const totalPage = this.calculatePage();
 

src/components/Base/Select/select.jsx

@@ -26,14 +26,14 @@ export default class Select extends React.Component {
     isOpen: false
   };
 
-  childNodes = [];
-
-  currentLabel = '';
-
   componentWillUnmount() {
     document.removeEventListener('click', this.handleOutsideClick.bind(this));
   }
 
+  childNodes = [];
+
+  currentLabel = '';
+
   handleOutsideClick(e) {
     if (this.wrapper && !this.wrapper.contains(e.target)) {
       this.setState({ isOpen: false });
@@ -92,7 +92,7 @@ export default class Select extends React.Component {
 
   renderControl() {
     const { isOpen } = this.state;
-    const { value, disabled } = this.props;
+    const { disabled } = this.props;
 
     return (
       <div className={styles.control} onClick={this.handleControlClick}>

src/components/Base/Switch/index.jsx

@@ -28,17 +28,17 @@ export default class Switch extends PureComponent {
     };
   }
 
-  toggleSwitch = () => {
-    const on = !this.state.on;
-    this.setState({ on }, this.props.onChange(on));
-  };
-
   componentWillReceiveProps(nextProps) {
     if (nextProps.checked !== this.state.on) {
       this.setState({ on: nextProps.checked });
     }
   }
 
+  toggleSwitch = () => {
+    const on = !this.state.on;
+    this.setState({ on }, this.props.onChange(on));
+  };
+
   render() {
     const {
       disabled, type, onText, offText

src/components/Base/Table/noData.jsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { translate } from 'react-i18next';
 
 import { Icon } from 'components/Base';

src/components/Base/Table/table.jsx

@@ -42,6 +42,20 @@ export default class Table extends React.Component {
     };
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (!isEqual(this.props.dataSource, nextProps.dataSource)) {
+      this.setState({
+        selectionDirty: false
+      });
+    }
+
+    if (nextProps.rowSelection && nextProps.rowSelection.selectedRowKeys) {
+      this.setState({
+        selectedRowKeys: nextProps.rowSelection.selectedRowKeys || []
+      });
+    }
+  }
+
   getTableData = () => {
     const { rowKey } = this.props;
     const data = [...this.props.dataSource];
@@ -109,13 +123,8 @@ export default class Table extends React.Component {
     }
   };
 
-  setExtendRowKeys = (
-    selectedRowKeys,
-    {
-      selectType, item, checked, changeRowKeys
-    }
-  ) => {
-    const { extendRowSelection } = this.props;
+  setExtendRowKeys = () => {
+    /* const { extendRowSelection } = this.props; */
   };
 
   handleCheckboxSelect = (value, index, e) => {
@@ -354,20 +363,6 @@ export default class Table extends React.Component {
     );
   };
 
-  componentWillReceiveProps(nextProps) {
-    if (!isEqual(this.props.dataSource, nextProps.dataSource)) {
-      this.setState({
-        selectionDirty: false
-      });
-    }
-
-    if (nextProps.rowSelection && nextProps.rowSelection.selectedRowKeys) {
-      this.setState({
-        selectedRowKeys: nextProps.rowSelection.selectedRowKeys || []
-      });
-    }
-  }
-
   render() {
     const {
       className,

src/components/Base/Tooltip/index.jsx

@@ -39,6 +39,20 @@ export default class Tooltip extends React.Component {
     this.trigger = props.trigger;
   }
 
+  componentDidMount() {
+    this.bindEvent();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.visible !== this.state.visible) {
+      this.setState({ visible: nextProps.visible });
+    }
+  }
+
+  componentWillUnmount() {
+    this.removeEvent();
+  }
+
   showPopper = () => {
     this.setState(
       { visible: true },
@@ -110,20 +124,6 @@ export default class Tooltip extends React.Component {
     }
   };
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.visible !== this.state.visible) {
-      this.setState({ visible: nextProps.visible });
-    }
-  }
-
-  componentDidMount() {
-    this.bindEvent();
-  }
-
-  componentWillUnmount() {
-    this.removeEvent();
-  }
-
   render() {
     const {
       prefixCls,

src/components/Base/Upload/index.jsx

@@ -6,7 +6,7 @@ import { noop } from 'lodash';
 import attrAccept from './utils/attr-accept';
 import traverseFileTree from './utils/traverseFileTree';
 
-import styles from './index.scss';
+import './index.scss';
 
 const now = Date.now();
 let index = 0;
@@ -17,8 +17,6 @@ function getUid() {
 }
 
 export default class Upload extends Component {
-  reqs = {};
-
   static propTypes = {
     accept: PropTypes.string,
     checkFile: PropTypes.func,
@@ -54,6 +52,8 @@ export default class Upload extends Component {
     this.abort();
   }
 
+  reqs = {};
+
   onChange = e => {
     const { files } = e.target;
     this.uploadFiles(files);

src/components/Base/index.js

@@ -16,4 +16,3 @@ export Timeline from './Timeline';
 export Tooltip from './Tooltip';
 export Image from './Image';
 export Upload from './Upload';
-export CodeMirror from './CodeMirror';

src/components/Card/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { withRouter } from 'react-router';
 
-import { Icon, Image } from 'components/Base';
+import { Image } from 'components/Base';
 
 import styles from './index.scss';
 

src/components/CodeMirror/CodeMirror.jsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import CodeMirror from 'react-codemirror';
+
+// fixme
+/* eslint-disable import/no-extraneous-dependencies */
+require('codemirror/lib/codemirror.css');
+require('codemirror/mode/yaml/yaml');
+
+export default class LazyCodeMirror extends Component {
+  static propTypes = {
+    code: PropTypes.string,
+    mode: PropTypes.string,
+    onChange: PropTypes.func
+  };
+
+  static defaultProps = {
+    code: '',
+    onChange: () => {},
+    mode: 'yaml'
+  };
+
+  render() {
+    const {
+      onChange, code, mode, ...rest
+    } = this.props;
+
+    return (
+      <CodeMirror
+        value={code}
+        onChange={onChange}
+        options={{ mode }}
+        {...rest}
+      />
+    );
+  }
+}

src/components/Base/CodeMirror/index.jsx → src/components/CodeMirror/index.jsx

@@ -1,16 +1,9 @@
 import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 
-const CodeMirror = lazy(() => import('react-codemirror'));
+const Component = lazy(() => import('./CodeMirror'));
 
-// fixme
-if (process.browser) {
-  require('codemirror/mode/yaml/yaml');
-  require('codemirror/mode/javascript/javascript');
-  require('codemirror/lib/codemirror.css');
-}
-
-export default class CodeMirrorX extends React.Component {
+export default class CodeMirror extends React.Component {
   static propTypes = {
     code: PropTypes.string,
     mode: PropTypes.string,
@@ -23,19 +16,14 @@ export default class CodeMirrorX extends React.Component {
     mode: 'yaml'
   };
 
-  constructor(props) {
-    super(props);
-    this.state = { module: null };
-  }
-
   render() {
     const {
       onChange, code, mode, ...rest
     } = this.props;
 
     return (
       <Suspense fallback={<div>Loading...</div>}>
-        <CodeMirror
+        <Component
           value={code}
           onChange={onChange}
           options={{ mode, lineNumbers: true }}

src/components/Deploy/section.jsx

@@ -4,9 +4,11 @@ import classnames from 'classnames';
 import _ from 'lodash';
 
 import {
-  Radio, Input, Select, Slider, CodeMirror
+  Radio, Input, Select, Slider
 } from 'components/Base';
 
+import CodeMirror from 'components/CodeMirror';
+
 import styles from './index.scss';
 
 export default class Section extends React.Component {

src/components/DetailCard/CopyId.jsx

@@ -20,7 +20,7 @@ export default class CopyId extends React.Component {
   componentDidMount() {
     const { t } = this.props;
 
-    this.clipboard = new ClipboardJS(this.refs.copyBtn);
+    this.clipboard = new ClipboardJS(this.copyBtn);
 
     this.clipboard.on('success', e => {
       this.props.rootStore.notify({
@@ -41,7 +41,13 @@ export default class CopyId extends React.Component {
     return (
       <div className={classnames(styles.copyOuter, className)}>
         id: {id}
-        <span className="copyId" data-clipboard-text={id} ref="copyBtn">
+        <span
+          className="copyId"
+          data-clipboard-text={id}
+          ref={node => {
+            this.copyBtn = node;
+          }}
+        >
           <Icon name="copy" type="dark" />
         </span>
       </div>

src/components/DetailCard/UserCard.jsx

@@ -26,7 +26,7 @@ export default class UserCard extends React.Component {
   };
 
   render() {
-    const { userDetail, user, t } = this.props;
+    const { userDetail, t } = this.props;
 
     return (
       <div className={styles.detailCard}>