From 9f16d066af2bff2b95105c9e8754a204d1c9c444 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 22 Jun 2018 21:05:13 +0800 Subject: [PATCH] Fix lint problems from eslint-config-airbnb@17 --- .eslintrc.js | 2 + components/affix/__tests__/Affix.test.js | 4 +- components/button/__tests__/index.test.js | 12 +++-- .../date-picker/__tests__/DatePicker.test.js | 5 +- .../date-picker/__tests__/RangePicker.test.js | 6 +-- .../date-picker/__tests__/other.test.js | 2 +- .../date-picker/__tests__/showTime.test.js | 2 +- .../__tests__/dropdown-button.test.js | 2 +- components/input/__tests__/Search.test.js | 4 +- components/input/__tests__/index.test.js | 8 +-- components/list/__tests__/pagination.test.js | 2 +- .../locale-provider/__tests__/index.test.js | 6 ++- components/message/__tests__/index.test.js | 2 + components/modal/__tests__/Modal.test.js | 7 ++- .../table/__tests__/Table.filter.test.js | 3 +- .../__tests__/Table.rowSelection.test.js | 4 +- .../time-picker/__tests__/index.test.js | 2 +- components/tooltip/__tests__/tooltip.test.js | 12 +++-- components/transfer/__tests__/index.test.js | 8 +-- components/upload/__tests__/upload.test.js | 13 ++--- .../upload/__tests__/uploadlist.test.js | 25 +++++----- scripts/sort-api-table.js | 4 +- site/bisheng.config.js | 4 +- site/theme/index.js | 8 +-- site/theme/template/Color/ColorBlock.jsx | 2 + .../theme/template/Color/ColorPaletteTool.jsx | 7 +-- site/theme/template/Color/ColorPicker.jsx | 24 ++++++--- site/theme/template/Color/Palette.jsx | 4 +- site/theme/template/Content/Article.jsx | 35 +++++++------ site/theme/template/Content/ComponentDoc.jsx | 18 ++++--- site/theme/template/Content/Demo.jsx | 44 ++++++++-------- site/theme/template/Content/MainContent.jsx | 50 ++++++++++--------- site/theme/template/Content/index.jsx | 10 ++-- site/theme/template/Home/Banner.jsx | 5 +- site/theme/template/Home/BannerImage.jsx | 6 +-- site/theme/template/Home/Page1.jsx | 20 +++++--- site/theme/template/Home/Page2.jsx | 12 ++--- site/theme/template/Home/Page3.jsx | 8 +-- site/theme/template/Home/index.jsx | 3 +- site/theme/template/IconSet/CopyableIcon.jsx | 5 +- site/theme/template/Layout/Footer.jsx | 11 ++-- site/theme/template/Layout/Header.jsx | 4 +- site/theme/template/Layout/index.jsx | 9 ++-- site/theme/template/utils.jsx | 8 +-- tests/__mocks__/rc-trigger.js | 4 +- tests/__mocks__/rc-util/lib/Portal.js | 3 +- tests/dekko/dist.test.js | 1 - tests/dekko/lib.test.js | 7 +-- 48 files changed, 257 insertions(+), 190 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 76b261a1f0..928981c50d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -26,6 +26,8 @@ const eslintrc = { 'react/sort-comp': 0, 'react/prop-types': 0, 'react/jsx-first-prop-new-line': 0, + 'react/jsx-one-expression-per-line': 0, + 'react/forbid-prop-types': 0, 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }], 'import/extensions': 0, 'import/no-unresolved': 0, diff --git a/components/affix/__tests__/Affix.test.js b/components/affix/__tests__/Affix.test.js index f2737259ab..cd5124af55 100644 --- a/components/affix/__tests__/Affix.test.js +++ b/components/affix/__tests__/Affix.test.js @@ -11,9 +11,11 @@ class AffixMounter extends React.Component { events[event] = cb; }); } + getTarget = () => { return this.container; } + render() { return (
this.affix = ele} {...this.props} > - diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/index.test.js index 49ee1e676d..d6e2542294 100644 --- a/components/button/__tests__/index.test.js +++ b/components/button/__tests__/index.test.js @@ -44,7 +44,7 @@ describe('Button', () => { }); it('renders Chinese characters correctly in HOC', () => { - const Text = props => {props.children}; + const Text = ({ children }) => {children}; const wrapper = mount( ); @@ -74,11 +74,14 @@ describe('Button', () => { state = { loading: false, }; + enterLoading = () => { this.setState({ loading: true }); } + render() { - return ; + const { loading } = this.state; + return ; } } const wrapper = mount( @@ -94,11 +97,14 @@ describe('Button', () => { state = { loading: false, }; + enterLoading = () => { this.setState({ loading: { delay: 1000 } }); } + render() { - return ; + const { loading } = this.state; + return ; } } const wrapper = mount( diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js index d7de7f5316..10665e4d22 100644 --- a/components/date-picker/__tests__/DatePicker.test.js +++ b/components/date-picker/__tests__/DatePicker.test.js @@ -78,7 +78,7 @@ describe('DatePicker', () => { } onChange = (value) => { - let cleared = this.state.cleared; + let { cleared } = this.state; if (cleared) { value = moment(moment(value).format('YYYY-MM-DD 12:12:12')); @@ -93,10 +93,11 @@ describe('DatePicker', () => { } render() { + const { value } = this.state; return ( diff --git a/components/date-picker/__tests__/RangePicker.test.js b/components/date-picker/__tests__/RangePicker.test.js index 7f603ab54f..0678230a71 100644 --- a/components/date-picker/__tests__/RangePicker.test.js +++ b/components/date-picker/__tests__/RangePicker.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { mount, render } from 'enzyme'; import moment from 'moment'; -import DatePicker from '../'; +import DatePicker from '..'; import { setMockDate, resetMockDate } from '../../../tests/utils'; import { selectDate } from './utils'; import focusTest from '../../../tests/shared/focusTest'; @@ -211,8 +211,8 @@ describe('RangePicker', () => { selectDate(wrapper, moment('2017-09-18'), 0); selectDate(wrapper, moment('2017-10-18'), 1); wrapper.find('.ant-calendar-picker-input').simulate('click'); - expect(() => + expect(() => ( wrapper.find('.ant-calendar-input').at(1).simulate('change', { target: { value: '2016-01-01' } }) - ).not.toThrow(); + )).not.toThrow(); }); }); diff --git a/components/date-picker/__tests__/other.test.js b/components/date-picker/__tests__/other.test.js index 5423ee1ce1..e674637c84 100644 --- a/components/date-picker/__tests__/other.test.js +++ b/components/date-picker/__tests__/other.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { mount, render } from 'enzyme'; import moment from 'moment'; -import DatePicker from '../'; +import DatePicker from '..'; const { MonthPicker, WeekPicker } = DatePicker; diff --git a/components/date-picker/__tests__/showTime.test.js b/components/date-picker/__tests__/showTime.test.js index f9d1b812d6..3c0757c7b3 100644 --- a/components/date-picker/__tests__/showTime.test.js +++ b/components/date-picker/__tests__/showTime.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; -import DatePicker from '../'; +import DatePicker from '..'; const { RangePicker } = DatePicker; diff --git a/components/dropdown/__tests__/dropdown-button.test.js b/components/dropdown/__tests__/dropdown-button.test.js index edcd27eee9..534f3721b6 100644 --- a/components/dropdown/__tests__/dropdown-button.test.js +++ b/components/dropdown/__tests__/dropdown-button.test.js @@ -24,7 +24,7 @@ describe('DropdownButton', () => { const dropdownProps = wrapper.find(Dropdown).props(); Object.keys(props).forEach((key) => { - expect(dropdownProps[key]).toBe(props[key]); + expect(dropdownProps[key]).toBe(props[key]); // eslint-disable-line }); }); diff --git a/components/input/__tests__/Search.test.js b/components/input/__tests__/Search.test.js index 90d65acab6..21a7b31b4e 100644 --- a/components/input/__tests__/Search.test.js +++ b/components/input/__tests__/Search.test.js @@ -9,7 +9,7 @@ describe('Input.Search', () => { it('should support custom button', () => { const wrapper = mount( - ok} /> + ok} /> ); expect(wrapper.render()).toMatchSnapshot(); }); @@ -71,7 +71,7 @@ describe('Input.Search', () => { it('should trigger onSearch when click search button of native', () => { const onSearch = jest.fn(); const wrapper = mount( - antd button} onSearch={onSearch} /> + antd button} onSearch={onSearch} /> ); wrapper.find('button').simulate('click'); expect(onSearch).toHaveBeenCalledTimes(1); diff --git a/components/input/__tests__/index.test.js b/components/input/__tests__/index.test.js index 7f48b3ca18..3b511530b4 100644 --- a/components/input/__tests__/index.test.js +++ b/components/input/__tests__/index.test.js @@ -60,10 +60,12 @@ describe('As Form Control', () => { it('should be reset when wrapped in form.getFieldDecorator without initialValue', () => { class Demo extends React.Component { reset = () => { - this.props.form.resetFields(); + const { form } = this.props; + form.resetFields(); } + render() { - const { getFieldDecorator } = this.props.form; + const { form: { getFieldDecorator } } = this.props; return (
@@ -72,7 +74,7 @@ describe('As Form Control', () => { {getFieldDecorator('textarea')()} - + ); } diff --git a/components/list/__tests__/pagination.test.js b/components/list/__tests__/pagination.test.js index cf10379e9b..063387cb8d 100644 --- a/components/list/__tests__/pagination.test.js +++ b/components/list/__tests__/pagination.test.js @@ -19,7 +19,7 @@ describe('List.pagination', () => { pagination={pagination} dataSource={data} renderItem={item => ( - + {item.name} )} diff --git a/components/locale-provider/__tests__/index.test.js b/components/locale-provider/__tests__/index.test.js index 778840d982..b322a4cbff 100644 --- a/components/locale-provider/__tests__/index.test.js +++ b/components/locale-provider/__tests__/index.test.js @@ -4,7 +4,7 @@ import { mount } from 'enzyme'; import moment from 'moment'; import MockDate from 'mockdate'; import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar, - Popconfirm, Table, Modal, Select, Transfer } from '../../'; + Popconfirm, Table, Modal, Select, Transfer } from '../..'; import enGB from '../en_GB'; import frFR from '../fr_FR'; import nlBE from '../nl_BE'; @@ -113,6 +113,7 @@ describe('Locale Provider', () => { title: 'Hello World!', }); } + render() { return null; } @@ -142,8 +143,9 @@ describe('Locale Provider', () => { } render() { + const { locale } = this.state; return ( - +
diff --git a/components/message/__tests__/index.test.js b/components/message/__tests__/index.test.js index 7b39508892..6f86fb57dd 100644 --- a/components/message/__tests__/index.test.js +++ b/components/message/__tests__/index.test.js @@ -103,6 +103,7 @@ describe('message', () => { componentDidMount() { hide = message.loading('Action in progress..', 0); } + render() { return
test
; } @@ -123,6 +124,7 @@ describe('message', () => { message.loading('Action in progress2..', 0); setTimeout(() => message.destroy(), 1000); } + render() { return
test
; } diff --git a/components/modal/__tests__/Modal.test.js b/components/modal/__tests__/Modal.test.js index a7a0218671..c4410d9e5a 100644 --- a/components/modal/__tests__/Modal.test.js +++ b/components/modal/__tests__/Modal.test.js @@ -9,22 +9,27 @@ class ModalTester extends React.Component { super(props); this.state = { visible: false }; } + componentDidMount() { this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state } + saveContainer = (container) => { this.container = container; } + getContainer = () => { return this.container; } + render() { + const { visible } = this.state; return (
Here is content of Modal diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index ecc8f19ccd..af118d12f3 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/components/table/__tests__/Table.filter.test.js @@ -239,6 +239,7 @@ describe('Table.filter', () => { } render() { + const { filters } = this.state; return ( { { text: 'Jack', value: 'Jack' }, { text: 'Lucy', value: 'Lucy' }, ]} - filteredValue={this.state.filters.name} + filteredValue={filters.name} onFilter={filterFn} />
diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js index 015c080c0e..edf28d361b 100644 --- a/components/table/__tests__/Table.rowSelection.test.js +++ b/components/table/__tests__/Table.rowSelection.test.js @@ -306,13 +306,15 @@ describe('Table.rowSelection', () => { state = { disableName: 'Jack', }; + render() { + const { disableName } = this.state; return ( ({ disabled: record.name === this.state.disableName }), + getCheckboxProps: record => ({ disabled: record.name === disableName }), }} /> ); diff --git a/components/time-picker/__tests__/index.test.js b/components/time-picker/__tests__/index.test.js index 16e44445be..48084c6c11 100644 --- a/components/time-picker/__tests__/index.test.js +++ b/components/time-picker/__tests__/index.test.js @@ -8,7 +8,7 @@ describe('TimePicker', () => { focusTest(TimePicker); it('renders addon correctly', () => { - const addon = () => (); + const addon = () => (); const wrapper = mount(); const rcTimePicker = wrapper.find(RcTimePicker); const addonWrapper = render(rcTimePicker.props().addon()); diff --git a/components/tooltip/__tests__/tooltip.test.js b/components/tooltip/__tests__/tooltip.test.js index 063479ad09..fcfaad6582 100644 --- a/components/tooltip/__tests__/tooltip.test.js +++ b/components/tooltip/__tests__/tooltip.test.js @@ -14,7 +14,9 @@ describe('Tooltip', () => { mouseLeaveDelay={0} onVisibleChange={onVisibleChange} > -
Hello world!
+
+ Hello world! +
); @@ -60,7 +62,7 @@ describe('Tooltip', () => { mouseLeaveDelay={0} onVisibleChange={onVisibleChange} > - + ); @@ -122,7 +124,7 @@ describe('Tooltip', () => { mouseEnterDelay={0} mouseLeaveDelay={0} > - + ); @@ -143,7 +145,7 @@ describe('Tooltip', () => { mouseLeaveDelay={0} placement="bottomLeft" > - @@ -160,7 +162,7 @@ describe('Tooltip', () => { placement="bottomLeft" arrowPointAtCenter > - diff --git a/components/transfer/__tests__/index.test.js b/components/transfer/__tests__/index.test.js index dacb3ae9cc..d8b274191a 100644 --- a/components/transfer/__tests__/index.test.js +++ b/components/transfer/__tests__/index.test.js @@ -214,12 +214,12 @@ describe('Transfer', () => { }); it('should check correctly when there is a search text', () => { - const props = { ...listCommonProps }; - delete props.targetKeys; - delete props.selectedKeys; + const newProps = { ...listCommonProps }; + delete newProps.targetKeys; + delete newProps.selectedKeys; const handleSelectChange = jest.fn(); const wrapper = mount( - item.title} /> + item.title} /> ); wrapper.find(TransferItem).filterWhere(n => n.prop('item').key === 'b').simulate('click'); expect(handleSelectChange).toHaveBeenLastCalledWith(['b'], []); diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js index 6901294df6..40539bdb84 100644 --- a/components/upload/__tests__/upload.test.js +++ b/components/upload/__tests__/upload.test.js @@ -16,6 +16,7 @@ describe('Upload', () => { componentDidMount() { ref = this.refs.input; } + render() { return ( @@ -32,9 +33,9 @@ describe('Upload', () => { const data = jest.fn(); const props = { action: 'http://upload.com', - beforeUpload: () => new Promise(resolve => + beforeUpload: () => new Promise(resolve => ( setTimeout(() => resolve('success'), 100) - ), + )), data, onChange: ({ file }) => { if (file.status !== 'uploading') { @@ -46,7 +47,7 @@ describe('Upload', () => { const wrapper = mount( - + ); @@ -83,7 +84,7 @@ describe('Upload', () => { const wrapper = mount( - + ); @@ -118,7 +119,7 @@ describe('Upload', () => { const wrapper = mount( - + ); @@ -147,7 +148,7 @@ describe('Upload', () => { const wrapper = mount( - + ); diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js index c6e00c78ad..41d92301bc 100644 --- a/components/upload/__tests__/uploadlist.test.js +++ b/components/upload/__tests__/uploadlist.test.js @@ -29,7 +29,7 @@ describe('Upload List', () => { it('should use file.thumbUrl for in priority', () => { const wrapper = mount( - + ); fileList.forEach((file, i) => { @@ -57,7 +57,7 @@ describe('Upload List', () => { }]; const wrapper = mount( - + ); expect(wrapper.find('.ant-upload-list-item').length).toBe(2); @@ -84,7 +84,7 @@ describe('Upload List', () => { onChange={onChange} customRequest={successRequest} > - + ); wrapper.find('input').simulate('change', { @@ -110,7 +110,7 @@ describe('Upload List', () => { onChange={onChange} customRequest={errorRequest} > - + ); wrapper.find('input').simulate('change', { @@ -131,7 +131,7 @@ describe('Upload List', () => { onChange={handleChange} beforeUpload={() => false} > - + ); @@ -152,15 +152,14 @@ describe('Upload List', () => { let errors; class TestForm extends React.Component { handleSubmit = () => { - const { validateFields } = this.props.form; + const { form: { validateFields } } = this.props; validateFields((err) => { errors = err; }); } render() { - const { getFieldDecorator } = this.props.form; - + const { form: { getFieldDecorator } } = this.props; return (
@@ -183,7 +182,7 @@ describe('Upload List', () => { false} > - + )} @@ -216,7 +215,7 @@ describe('Upload List', () => { defaultFileList={fileList} onPreview={handlePreview} > - + ); wrapper.find('.anticon-eye-o').at(0).simulate('click'); @@ -235,7 +234,7 @@ describe('Upload List', () => { onRemove={handleRemove} onChange={handleChange} > - + ); wrapper.find('.anticon-delete').at(0).simulate('click'); @@ -258,7 +257,7 @@ describe('Upload List', () => { defaultFileList={newFileList} onPreview={handlePreview} > - + ); wrapper.setState({}); @@ -332,7 +331,7 @@ describe('Upload List', () => { listType="picture" defaultFileList={list} > - + ); expect(wrapper.render()).toMatchSnapshot(); diff --git a/scripts/sort-api-table.js b/scripts/sort-api-table.js index 7f6acf2c8e..a8853f9545 100644 --- a/scripts/sort-api-table.js +++ b/scripts/sort-api-table.js @@ -55,9 +55,9 @@ function alphabetSort(nodes) { function sizeSort(nodes) { return nodes.sort((...comparison) => { return asciiSort( - ...comparison.map(val => + ...comparison.map(val => ( sizeBreakPoints.indexOf(getCellValue(val).toLowerCase()) - ) + )) ); }); } diff --git a/site/bisheng.config.js b/site/bisheng.config.js index c01fefb01a..4d7bcaf3cd 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -13,9 +13,9 @@ function alertBabelConfig(rules) { if (rule.options.plugins.indexOf(replaceLib) === -1) { rule.options.plugins.push(replaceLib); } - rule.options.plugins = rule.options.plugins.filter(plugin => + rule.options.plugins = rule.options.plugins.filter(plugin => ( !plugin.indexOf || plugin.indexOf('babel-plugin-add-module-exports') === -1 - ); + )); } else if (rule.use) { alertBabelConfig(rule.use); } diff --git a/site/theme/index.js b/site/theme/index.js index ac1f865b4f..44f77e123d 100644 --- a/site/theme/index.js +++ b/site/theme/index.js @@ -10,8 +10,8 @@ function pickerGenerator(module) { const tester = new RegExp(`^docs/${module}`); return (markdownData) => { const { filename } = markdownData.meta; - if (tester.test(filename) && - !/\/demo$/.test(path.dirname(filename))) { + if (tester.test(filename) + && !/\/demo$/.test(path.dirname(filename))) { return { meta: markdownData.meta, }; @@ -29,8 +29,8 @@ module.exports = { pick: { components(markdownData) { const { filename } = markdownData.meta; - if (!/^components/.test(filename) || - /[/\\]demo$/.test(path.dirname(filename))) return; + if (!/^components/.test(filename) + || /[/\\]demo$/.test(path.dirname(filename))) return; return { meta: markdownData.meta, diff --git a/site/theme/template/Color/ColorBlock.jsx b/site/theme/template/Color/ColorBlock.jsx index 253fa4a266..8e9bfcd454 100644 --- a/site/theme/template/Color/ColorBlock.jsx +++ b/site/theme/template/Color/ColorBlock.jsx @@ -11,10 +11,12 @@ export default class ColorBlock extends Component { fontWeight: index === 6 ? 'bold' : 'normal', }; } + onCopied = () => { const { color } = this.props; message.success(`Copied: ${color}`); } + render() { const { color, index } = this.props; return ( diff --git a/site/theme/template/Color/ColorPaletteTool.jsx b/site/theme/template/Color/ColorPaletteTool.jsx index f7a4af067e..f9f3e59193 100644 --- a/site/theme/template/Color/ColorPaletteTool.jsx +++ b/site/theme/template/Color/ColorPaletteTool.jsx @@ -36,24 +36,25 @@ export default class ColorPaletteTool extends Component { } render() { + const { primaryColor } = this.state; return (
- +
- {this.state.primaryColor} + {primaryColor} {this.renderColorValidation()}
diff --git a/site/theme/template/Color/ColorPicker.jsx b/site/theme/template/Color/ColorPicker.jsx index b93a699f62..fa9aa37b89 100644 --- a/site/theme/template/Color/ColorPicker.jsx +++ b/site/theme/template/Color/ColorPicker.jsx @@ -22,34 +22,42 @@ export default class ColorPicker extends Component { color: props.color, }; } + componentWillReceiveProps(nextProps) { this.setState({ color: nextProps.color }); } + handleClick = () => { - this.setState({ displayColorPicker: !this.state.displayColorPicker }); + const { displayColorPicker } = this.state; + this.setState({ displayColorPicker: !displayColorPicker }); }; + handleClose = () => { this.setState({ displayColorPicker: false }); }; + handleChange = (color) => { + const { onChange } = this.props; this.setState({ color: color.hex }); - this.props.onChange(color.hex, color); + onChange(color.hex, color); }; + handleChangeComplete = (color) => { + const { onChangeComplete } = this.props; this.setState({ color: color.hex }); - this.props.onChangeComplete(color.hex); + onChangeComplete(color.hex); }; + render() { const { small, type, position } = this.props; - + const { color, displayColorPicker } = this.state; const Picker = pickers[type]; - const styles = { color: { width: small ? '80px' : '120px', height: small ? '16px' : '24px', borderRadius: '2px', - background: this.state.color, + background: color, }, swatch: { padding: '4px', @@ -86,13 +94,13 @@ export default class ColorPicker extends Component {
); - const picker = this.state.displayColorPicker ? ( + const picker = displayColorPicker ? (
diff --git a/site/theme/template/Color/Palette.jsx b/site/theme/template/Color/Palette.jsx index 6db0f294b1..8bf6a8390b 100644 --- a/site/theme/template/Color/Palette.jsx +++ b/site/theme/template/Color/Palette.jsx @@ -26,10 +26,10 @@ export default class Palette extends React.Component { }); this.forceUpdate(); } + render() { this.colorNodes = this.colorNodes || {}; - const { showTitle, direction } = this.props; - const { name, description, english, chinese } = this.props.color; + const { showTitle, direction, color: { name, description, english, chinese } } = this.props; const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette'; const colors = []; const colorName = `${english} / ${chinese}`; diff --git a/site/theme/template/Content/Article.jsx b/site/theme/template/Content/Article.jsx index 02b7e65dd5..80b19fe4e9 100644 --- a/site/theme/template/Content/Article.jsx +++ b/site/theme/template/Content/Article.jsx @@ -12,6 +12,7 @@ export default class Article extends React.Component { static contextTypes = { intl: PropTypes.object.isRequired, } + componentDidMount() { // Add ga event click this.delegation = delegate(this.node, '.resource-card', 'click', (e) => { @@ -21,6 +22,7 @@ export default class Article extends React.Component { }, false); this.componentDidUpdate(); } + componentDidUpdate() { const links = [...document.querySelectorAll('.outside-link.internal')]; if (links.length === 0) { @@ -34,12 +36,14 @@ export default class Article extends React.Component { } }); } + componentWillUnmount() { clearTimeout(this.pingTimer); if (this.delegation) { this.delegation.destroy(); } } + getArticle(article) { const { content } = this.props; const { meta } = content; @@ -64,13 +68,13 @@ export default class Article extends React.Component { children: {timelineItems}, }); } + render() { const { props } = this; const { content } = props; - const { meta, description } = content; const { title, subtitle, filename } = meta; - const { locale } = this.context.intl; + const { intl: { locale } } = this.context; const isNotTranslated = locale === 'en-US' && typeof title === 'object'; return ( @@ -89,26 +93,29 @@ export default class Article extends React.Component {

{title[locale] || title} { - !subtitle || locale === 'en-US' ? null : - {subtitle} + !subtitle || locale === 'en-US' + ? null + : {subtitle} } } filename={filename} />

{ - !description ? null : - props.utils.toReactComponent( + !description + ? null + : props.utils.toReactComponent( ['section', { className: 'markdown' }].concat(getChildren(description)) ) } { - (!content.toc || content.toc.length <= 1 || meta.toc === false) ? null : - - { - props.utils.toReactComponent( - ['ul', { className: 'toc' }].concat(getChildren(content.toc)) - ) - } - + (!content.toc || content.toc.length <= 1 || meta.toc === false) ? null : ( + + { + props.utils.toReactComponent( + ['ul', { className: 'toc' }].concat(getChildren(content.toc)) + ) + } + + ) } { this.getArticle(props.utils.toReactComponent( diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx index 963cbec2bb..ecd90d5241 100644 --- a/site/theme/template/Content/ComponentDoc.jsx +++ b/site/theme/template/Content/ComponentDoc.jsx @@ -22,8 +22,9 @@ export default class ComponentDoc extends React.Component { } handleExpandToggle = () => { + const { expandAll } = this.state; this.setState({ - expandAll: !this.state.expandAll, + expandAll: !expandAll, }); } @@ -31,15 +32,15 @@ export default class ComponentDoc extends React.Component { const { props } = this; const { doc, location } = props; const { content, meta } = doc; - const { locale } = this.context.intl; + const { intl: { locale } } = this.context; const demos = Object.keys(props.demos).map(key => props.demos[key]); - const expand = this.state.expandAll; + const { expandAll: { expand } } = this.state; const isSingleCol = meta.cols === 1; const leftChildren = []; const rightChildren = []; - const showedDemo = demos.some(demo => demo.meta.only) ? - demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview); + const showedDemo = demos.some(demo => demo.meta.only) + ? demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview); showedDemo.sort((a, b) => a.meta.order - b.meta.order) .forEach((demoData, index) => { const demoElem = ( @@ -109,9 +110,10 @@ export default class ComponentDoc extends React.Component {
{leftChildren} diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx index 410dc5a534..e34b57e586 100644 --- a/site/theme/template/Content/Demo.jsx +++ b/site/theme/template/Content/Demo.jsx @@ -43,9 +43,11 @@ export default class Demo extends React.Component { } shouldComponentUpdate(nextProps, nextState) { - return (this.state.codeExpand || this.props.expand) !== (nextState.codeExpand || nextProps.expand) - || this.state.copied !== nextState.copied - || this.state.copyTooltipVisible !== nextState.copyTooltipVisible; + const { codeExpand, copied, copyTooltipVisible } = this.state; + const { expand } = this.props; + return (codeExpand || expand) !== (nextState.codeExpand || nextProps.expand) + || copied !== nextState.copied + || copyTooltipVisible !== nextState.copyTooltipVisible; } componentDidMount() { @@ -65,7 +67,8 @@ export default class Demo extends React.Component { } handleCodeExpand = () => { - this.setState({ codeExpand: !this.state.codeExpand }); + const { codeExpand } = this.state; + this.setState({ codeExpand: !codeExpand }); } saveAnchor = (anchor) => { @@ -102,6 +105,7 @@ export default class Demo extends React.Component { highlightedStyle, expand, } = props; + const { showRiddleButton, copied } = state; if (!this.liveDemo) { this.liveDemo = meta.iframe ?