From fc9c88a1fa2d829a59042bfa6ce2c5abd6980676 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=84=9A=E9=81=93?= Date: Wed, 29 Aug 2018 09:56:07 +0800 Subject: [PATCH] fix: add lint react/sort-comp rule and fix it --- .eslintrc.js | 1 + src/components/CountDown/index.js | 25 +++++++++--------- src/components/TagSelect/index.js | 14 +++++----- src/layouts/BasicLayout.js | 41 +++++++++++++++++------------- src/pages/Account/Settings/Info.js | 18 ++++++------- src/pages/Forms/TableForm.js | 7 ++--- src/pages/List/BasicList.js | 9 ++++--- src/pages/List/TableList.js | 32 +++++++++++------------ 8 files changed, 79 insertions(+), 68 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 3d024694..9c1cf5f7 100755 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -10,6 +10,7 @@ module.exports = { }, rules: { 'jsx-a11y/href-no-hash': [0], + 'react/sort-comp': 1, }, settings: { polyfills: ['fetch', 'promises'], diff --git a/src/components/CountDown/index.js b/src/components/CountDown/index.js index 4d63d356..53815c9e 100644 --- a/src/components/CountDown/index.js +++ b/src/components/CountDown/index.js @@ -23,9 +23,6 @@ const initTime = props => { }; class CountDown extends Component { - timer = 0; - - interval = 1000; constructor(props) { super(props); @@ -35,6 +32,16 @@ class CountDown extends Component { }; } + static getDerivedStateFromProps(nextProps, preState) { + const { lastTime } = initTime(nextProps); + if (preState.lastTime !== lastTime) { + return { + lastTime, + }; + } + return null; + } + componentDidMount() { this.tick(); } @@ -51,15 +58,9 @@ class CountDown extends Component { clearTimeout(this.timer); } - static getDerivedStateFromProps(nextProps, preState) { - const { lastTime } = initTime(nextProps); - if (preState.lastTime !== lastTime) { - return { - lastTime, - }; - } - return null; - } + timer = 0; + + interval = 1000; // defaultFormat = time => ( // {moment(time).format('hh:mm:ss')} diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js index b7aea130..dff38242 100644 --- a/src/components/TagSelect/index.js +++ b/src/components/TagSelect/index.js @@ -26,6 +26,13 @@ class TagSelect extends Component { }; } + static getDerivedStateFromProps(nextProps) { + if ('value' in nextProps && nextProps.value) { + return { value: nextProps.value }; + } + return null; + } + onChange = value => { const { onChange } = this.props; if (!('value' in this.props)) { @@ -44,13 +51,6 @@ class TagSelect extends Component { this.onChange(checkedTags); }; - static getDerivedStateFromProps(nextProps) { - if ('value' in nextProps && nextProps.value) { - return { value: nextProps.value }; - } - return null; - } - getAllTags() { let { children } = this.props; children = React.Children.toArray(children); diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 148092c9..9754ebd2 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -64,9 +64,6 @@ const query = { }; class BasicLayout extends React.PureComponent { - state = { - rendering: true, - }; constructor(props) { super(props); const { menuData } = this.props; @@ -74,6 +71,28 @@ class BasicLayout extends React.PureComponent { // Because there are many places to be. So put it here this.breadcrumbNameMap = getBreadcrumbNameMap(menuData); } + + state = { + rendering: true, + }; + + componentDidMount() { + this.renderRef = requestAnimationFrame(() => { + this.setState({ + rendering: false, + }); + }); + } + + componentDidUpdate() { + const { menuData } = this.props; + this.breadcrumbNameMap = getBreadcrumbNameMap(menuData); + } + + componentWillUnmount() { + cancelAnimationFrame(this.renderRef); + } + getContext() { const { location } = this.props; return { @@ -81,10 +100,7 @@ class BasicLayout extends React.PureComponent { breadcrumbNameMap: this.breadcrumbNameMap, }; } - componentDidUpdate() { - const { menuData } = this.props; - this.breadcrumbNameMap = getBreadcrumbNameMap(menuData); - } + getPageTitle = pathname => { let currRouterData = null; // match params path @@ -149,16 +165,7 @@ class BasicLayout extends React.PureComponent { payload: collapsed, }); }; - componentDidMount() { - this.renderRef = requestAnimationFrame(() => { - this.setState({ - rendering: false, - }); - }); - } - componentWillUnmount() { - cancelAnimationFrame(this.renderRef); - } + render() { const { isMobile, diff --git a/src/pages/Account/Settings/Info.js b/src/pages/Account/Settings/Info.js index 23cedd8d..948349b7 100644 --- a/src/pages/Account/Settings/Info.js +++ b/src/pages/Account/Settings/Info.js @@ -41,15 +41,6 @@ export default class Info extends Component { }); } - componentDidMount() { - window.addEventListener('resize', this.resize); - this.resize(); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.resize); - } - static getDerivedStateFromProps(props, state) { const { match, location } = props; let selectKey = location.pathname.replace(`${match.path}/`, ''); @@ -60,6 +51,15 @@ export default class Info extends Component { return null; } + componentDidMount() { + window.addEventListener('resize', this.resize); + this.resize(); + } + + componentWillUnmount() { + window.removeEventListener('resize', this.resize); + } + getmenu = () => { const { menuMap } = this.state; return Object.keys(menuMap).map(item => {menuMap[item]}); diff --git a/src/pages/Forms/TableForm.js b/src/pages/Forms/TableForm.js index 068fe015..3ad0a791 100644 --- a/src/pages/Forms/TableForm.js +++ b/src/pages/Forms/TableForm.js @@ -4,9 +4,6 @@ import isEqual from 'lodash.isequal'; import styles from './style.less'; export default class TableForm extends PureComponent { - index = 0; - - cacheOriginData = {}; constructor(props) { super(props); @@ -29,6 +26,10 @@ export default class TableForm extends PureComponent { }; } + index = 0; + + cacheOriginData = {}; + getRowByKey(key, newData) { const { data } = this.state; return (newData || data).filter(item => item.key === key)[0]; diff --git a/src/pages/List/BasicList.js b/src/pages/List/BasicList.js index 3e95a1f3..3c80c72a 100644 --- a/src/pages/List/BasicList.js +++ b/src/pages/List/BasicList.js @@ -38,10 +38,6 @@ const { Search, TextArea } = Input; })) @Form.create() export default class BasicList extends PureComponent { - formLayout = { - labelCol: { span: 7 }, - wrapperCol: { span: 13 }, - }; state = { visible: false, done: false }; @@ -55,6 +51,11 @@ export default class BasicList extends PureComponent { }); } + formLayout = { + labelCol: { span: 7 }, + wrapperCol: { span: 13 }, + }; + showModal = () => { this.setState({ visible: true, diff --git a/src/pages/List/TableList.js b/src/pages/List/TableList.js index 531fc7c7..60c5abeb 100644 --- a/src/pages/List/TableList.js +++ b/src/pages/List/TableList.js @@ -272,6 +272,22 @@ class UpdateForm extends PureComponent { })) @Form.create() export default class TableList extends PureComponent { + state = { + modalVisible: false, + updateModalVisible: false, + expandForm: false, + selectedRows: [], + formValues: {}, + stepFormValues: {}, + }; + + componentDidMount() { + const { dispatch } = this.props; + dispatch({ + type: 'rule/fetch', + }); + } + columns = [ { title: '规则名称', @@ -333,22 +349,6 @@ export default class TableList extends PureComponent { }, ]; - state = { - modalVisible: false, - updateModalVisible: false, - expandForm: false, - selectedRows: [], - formValues: {}, - stepFormValues: {}, - }; - - componentDidMount() { - const { dispatch } = this.props; - dispatch({ - type: 'rule/fetch', - }); - } - handleStandardTableChange = (pagination, filtersArg, sorter) => { const { dispatch } = this.props; const { formValues } = this.state; -- GitLab