diff --git a/.eslintrc.js b/.eslintrc.js index 928981c50d..b104d2adb6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -8,13 +8,6 @@ const eslintrc = { es6: true, }, parser: 'babel-eslint', - parserOptions: { - ecmaVersion: 6, - ecmaFeatures: { - jsx: true, - experimentalObjectRestSpread: true, - }, - }, plugins: [ 'markdown', 'react', @@ -65,6 +58,8 @@ if (process.env.RUN_ENV === 'DEMO') { 'eol-last': 0, 'no-script-url': 0, 'prefer-rest-params': 0, + 'react/no-access-state-in-setstate': 0, + 'react/destructuring-assignment': 0, 'react/no-multi-comp': 0, 'react/prefer-stateless-function': 0, 'jsx-a11y/href-no-hash': 0, diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md index c1c45ce5fa..0d6e96d3e0 100644 --- a/components/affix/demo/basic.md +++ b/components/affix/demo/basic.md @@ -21,6 +21,7 @@ class Demo extends React.Component { top: 10, bottom: 10, } + render() { return (
@@ -54,8 +55,5 @@ class Demo extends React.Component { } } -ReactDOM.render( - , - mountNode -); +ReactDOM.render(, mountNode); ```` diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md index 7e3a30b573..0eb3feed1c 100644 --- a/components/alert/demo/banner.md +++ b/components/alert/demo/banner.md @@ -26,6 +26,6 @@ ReactDOM.render(
-
-, mountNode); + , + mountNode); ```` diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md index cf4d174a25..75f4a6818d 100644 --- a/components/alert/demo/basic.md +++ b/components/alert/demo/basic.md @@ -17,8 +17,8 @@ The simplest usage for short messages. import { Alert } from 'antd'; ReactDOM.render( - -, mountNode); + , + mountNode); ```` diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md index 2862b961ed..11cc076da5 100644 --- a/components/tabs/demo/basic.md +++ b/components/tabs/demo/basic.md @@ -15,6 +15,7 @@ Default activate first tab. ````jsx import { Tabs } from 'antd'; + const TabPane = Tabs.TabPane; function callback(key) { @@ -26,6 +27,6 @@ ReactDOM.render( Content of Tab Pane 1 Content of Tab Pane 2 Content of Tab Pane 3 - -, mountNode); + , + mountNode); ```` diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md index aa7c28ff0a..b8cee684de 100644 --- a/components/tabs/demo/card-top.md +++ b/components/tabs/demo/card-top.md @@ -15,6 +15,7 @@ Should be used at the top of container, needs to override styles. ````jsx import { Tabs } from 'antd'; + const TabPane = Tabs.TabPane; ReactDOM.render( @@ -36,8 +37,8 @@ ReactDOM.render(

Content of Tab Pane 3

- -, mountNode); + , + mountNode); ```` ````css diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md index debed6cb1c..51ce1676d1 100644 --- a/components/tabs/demo/card.md +++ b/components/tabs/demo/card.md @@ -16,6 +16,7 @@ Another type Tabs, which doesn't support vertical mode. ````jsx import { Tabs } from 'antd'; + const TabPane = Tabs.TabPane; function callback(key) { @@ -27,6 +28,6 @@ ReactDOM.render( Content of Tab Pane 1 Content of Tab Pane 2 Content of Tab Pane 3 - -, mountNode); + , + mountNode); ```` diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md index 46c9b76853..e9313b0440 100644 --- a/components/tabs/demo/custom-add-trigger.md +++ b/components/tabs/demo/custom-add-trigger.md @@ -15,6 +15,7 @@ Hide default plus icon, and bind event for customized trigger. ````jsx import { Tabs, Button } from 'antd'; + const TabPane = Tabs.TabPane; class Demo extends React.Component { @@ -34,15 +35,18 @@ class Demo extends React.Component { onChange = (activeKey) => { this.setState({ activeKey }); } + onEdit = (targetKey, action) => { this[action](targetKey); } + add = () => { const panes = this.state.panes; const activeKey = `newTab${this.newTabIndex++}`; panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey }); this.setState({ panes, activeKey }); } + remove = (targetKey) => { let activeKey = this.state.activeKey; let lastIndex; @@ -57,6 +61,7 @@ class Demo extends React.Component { } this.setState({ panes, activeKey }); } + render() { return (
diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md index 5e06d2c283..c469c964c4 100644 --- a/components/tabs/demo/disabled.md +++ b/components/tabs/demo/disabled.md @@ -15,6 +15,7 @@ Disabled a tab. ````jsx import { Tabs } from 'antd'; + const TabPane = Tabs.TabPane; ReactDOM.render( @@ -22,6 +23,6 @@ ReactDOM.render( Tab 1 Tab 2 Tab 3 - -, mountNode); + , + mountNode); ```` diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md index ff627cde28..af17573918 100644 --- a/components/tabs/demo/editable-card.md +++ b/components/tabs/demo/editable-card.md @@ -17,6 +17,7 @@ Only card type Tabs support adding & closable. ````jsx import { Tabs } from 'antd'; + const TabPane = Tabs.TabPane; class Demo extends React.Component { @@ -37,15 +38,18 @@ class Demo extends React.Component { onChange = (activeKey) => { this.setState({ activeKey }); } + onEdit = (targetKey, action) => { this[action](targetKey); } + add = () => { const panes = this.state.panes; const activeKey = `newTab${this.newTabIndex++}`; panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey }); this.setState({ panes, activeKey }); } + remove = (targetKey) => { let activeKey = this.state.activeKey; let lastIndex; @@ -60,6 +64,7 @@ class Demo extends React.Component { } this.setState({ panes, activeKey }); } + render() { return ( Extra Action; @@ -25,6 +26,6 @@ ReactDOM.render( Content of tab 1 Content of tab 2 Content of tab 3 - -, mountNode); + , + mountNode); ```` diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md index 2e9073ac55..685597ec33 100644 --- a/components/tabs/demo/icon.md +++ b/components/tabs/demo/icon.md @@ -16,6 +16,7 @@ The Tab with Icon. ````jsx import { Tabs, Icon } from 'antd'; + const TabPane = Tabs.TabPane; ReactDOM.render( @@ -26,6 +27,6 @@ ReactDOM.render( Tab 2} key="2"> Tab 2 - -, mountNode); + , + mountNode); ```` diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md index 72f3831079..4913ed7061 100644 --- a/components/tabs/demo/position.md +++ b/components/tabs/demo/position.md @@ -15,6 +15,7 @@ Tab's position: left, right, top or bottom. ````jsx import { Tabs, Select } from 'antd'; + const TabPane = Tabs.TabPane; const Option = Select.Option; @@ -23,9 +24,11 @@ class Demo extends React.Component { state = { tabPosition: 'top', } + changeTabPosition = (tabPosition) => { this.setState({ tabPosition }); } + render() { return (
diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md index 763d99098d..b5be97c710 100644 --- a/components/tabs/demo/size.md +++ b/components/tabs/demo/size.md @@ -15,13 +15,16 @@ Large size tabs are usally used in page header, and small size could be used in ````jsx import { Tabs, Radio } from 'antd'; + const { TabPane } = Tabs; class Demo extends React.Component { state = { size: 'small' }; + onChange = (e) => { this.setState({ size: e.target.value }); } + render() { const { size } = this.state; return ( diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md index e74265ebb4..506afe5d48 100644 --- a/components/tabs/demo/slide.md +++ b/components/tabs/demo/slide.md @@ -15,6 +15,7 @@ In order to fit in more tabs, they can slide left and right (or up and down). ````jsx import { Tabs, Radio } from 'antd'; + const TabPane = Tabs.TabPane; class SlidingTabsDemo extends React.Component { @@ -24,10 +25,12 @@ class SlidingTabsDemo extends React.Component { mode: 'top', }; } + handleModeChange = (e) => { const mode = e.target.value; this.setState({ mode }); } + render() { const { mode } = this.state; return ( diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md index 30ce86335e..8b481b5c13 100644 --- a/components/tag/demo/checkable.md +++ b/components/tag/demo/checkable.md @@ -19,13 +19,16 @@ title: ````jsx import { Tag } from 'antd'; + const { CheckableTag } = Tag; class MyTag extends React.Component { state = { checked: true }; + handleChange = (checked) => { this.setState({ checked }); } + render() { return ; } @@ -36,6 +39,6 @@ ReactDOM.render( Tag1 Tag2 Tag3 -
-, mountNode); +
, + mountNode); ```` diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md index b6f68bd447..15bc4f0ae5 100644 --- a/components/tag/demo/colorful.md +++ b/components/tag/demo/colorful.md @@ -40,8 +40,8 @@ ReactDOM.render( #87d068 #108ee9 - -, mountNode); + , + mountNode); ```` ````css diff --git a/components/tag/demo/hot-tags.md b/components/tag/demo/hot-tags.md index 6469e876e3..3e50f4dce6 100644 --- a/components/tag/demo/hot-tags.md +++ b/components/tag/demo/hot-tags.md @@ -15,6 +15,7 @@ Select your favourite topics. ````jsx import { Tag } from 'antd'; + const CheckableTag = Tag.CheckableTag; const tagsFromServer = ['Movies', 'Books', 'Music', 'Sports']; @@ -26,9 +27,9 @@ class HotTags extends React.Component { handleChange(tag, checked) { const { selectedTags } = this.state; - const nextSelectedTags = checked ? - [...selectedTags, tag] : - selectedTags.filter(t => t !== tag); + const nextSelectedTags = checked + ? [...selectedTags, tag] + : selectedTags.filter(t => t !== tag); console.log('You are interested in: ', nextSelectedTags); this.setState({ selectedTags: nextSelectedTags }); } diff --git a/components/time-picker/demo/12hours.md b/components/time-picker/demo/12hours.md index f971624d21..6c914bdd2a 100644 --- a/components/time-picker/demo/12hours.md +++ b/components/time-picker/demo/12hours.md @@ -25,6 +25,6 @@ ReactDOM.render( - -, mountNode); + , + mountNode); ```` diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md index 9da9857bfc..4f765f62c8 100644 --- a/components/time-picker/demo/disabled.md +++ b/components/time-picker/demo/disabled.md @@ -19,6 +19,6 @@ import { TimePicker } from 'antd'; import moment from 'moment'; ReactDOM.render( - -, mountNode); + , + mountNode); ```` diff --git a/components/time-picker/demo/hide-column.md b/components/time-picker/demo/hide-column.md index 69595e0cfe..b204231d0c 100644 --- a/components/time-picker/demo/hide-column.md +++ b/components/time-picker/demo/hide-column.md @@ -20,6 +20,6 @@ import moment from 'moment'; const format = 'HH:mm'; ReactDOM.render( - -, mountNode); + , + mountNode); ```` diff --git a/components/time-picker/demo/interval-options.md b/components/time-picker/demo/interval-options.md index 1acff0880b..7ef4d8adfb 100644 --- a/components/time-picker/demo/interval-options.md +++ b/components/time-picker/demo/interval-options.md @@ -16,6 +16,6 @@ Show stepped options by `hourStep` `minuteStep` `secondStep`. import { TimePicker } from 'antd'; ReactDOM.render( - -, mountNode); + , + mountNode); ```` diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md index 39e1e14a31..cfb39a6aa1 100644 --- a/components/time-picker/demo/size.md +++ b/components/time-picker/demo/size.md @@ -22,6 +22,6 @@ ReactDOM.render( - -, mountNode); + , + mountNode); ```` diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md index cb5d6b2e7d..0af7e801ec 100644 --- a/components/timeline/demo/basic.md +++ b/components/timeline/demo/basic.md @@ -22,6 +22,6 @@ ReactDOM.render( Solve initial network problems 2015-09-01 Technical testing 2015-09-01 Network problems being solved 2015-09-01 - -, mountNode); + , + mountNode); ```` diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md index dd8d2d14f5..1bc8b4db41 100644 --- a/components/timeline/demo/color.md +++ b/components/timeline/demo/color.md @@ -30,6 +30,6 @@ ReactDOM.render(

Technical testing 2

Technical testing 3 2015-09-01

- -, mountNode); + , + mountNode); ```` diff --git a/components/timeline/demo/custom.md b/components/timeline/demo/custom.md index 39b73d9cdb..d2c5f1c736 100644 --- a/components/timeline/demo/custom.md +++ b/components/timeline/demo/custom.md @@ -22,6 +22,6 @@ ReactDOM.render( Solve initial network problems 2015-09-01 } color="red">Technical testing 2015-09-01 Network problems being solved 2015-09-01 - -, mountNode); + , + mountNode); ```` diff --git a/components/tooltip/demo/arrow-point-at-center.md b/components/tooltip/demo/arrow-point-at-center.md index c0fea126b0..9e5acdbbfd 100644 --- a/components/tooltip/demo/arrow-point-at-center.md +++ b/components/tooltip/demo/arrow-point-at-center.md @@ -24,8 +24,8 @@ ReactDOM.render( - -, mountNode); + , + mountNode); ````