From fcf9bafb1814c0a05702c921a67cefa7cca4a262 Mon Sep 17 00:00:00 2001
From: bang <sqibang@gmail.com>
Date: Sun, 19 Feb 2017 19:51:40 +0700
Subject: [PATCH] docs: Rewrite Transfer demos to ES6 component

---
 components/transfer/demo/advanced.md    | 30 ++++++++++++-------------
 components/transfer/demo/basic.md       | 27 +++++++++++-----------
 components/transfer/demo/custom-item.md | 30 ++++++++++++-------------
 components/transfer/demo/large-data.md  | 26 ++++++++++-----------
 components/transfer/demo/search.md      | 30 ++++++++++++-------------
 5 files changed, 68 insertions(+), 75 deletions(-)

diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md
index e6178d35fa..3474f426ec 100644
--- a/components/transfer/demo/advanced.md
+++ b/components/transfer/demo/advanced.md
@@ -18,17 +18,15 @@ You can customize the labels of the transfer buttons, the width and height of th
 ````jsx
 import { Transfer, Button } from 'antd';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      mockData: [],
-      targetKeys: [],
-    };
-  },
+class App extends React.Component {
+  state = {
+    mockData: [],
+    targetKeys: [],
+  }
   componentDidMount() {
     this.getMock();
-  },
-  getMock() {
+  }
+  getMock = () => {
     const targetKeys = [];
     const mockData = [];
     for (let i = 0; i < 20; i++) {
@@ -44,11 +42,11 @@ const App = React.createClass({
       mockData.push(data);
     }
     this.setState({ mockData, targetKeys });
-  },
-  handleChange(targetKeys) {
+  }
+  handleChange = (targetKeys) => {
     this.setState({ targetKeys });
-  },
-  renderFooter() {
+  }
+  renderFooter = () => {
     return (
       <Button size="small" style={{ float: 'right', margin: 5 }}
         onClick={this.getMock}
@@ -56,7 +54,7 @@ const App = React.createClass({
         reload
       </Button>
     );
-  },
+  }
   render() {
     return (
       <Transfer
@@ -73,8 +71,8 @@ const App = React.createClass({
         footer={this.renderFooter}
       />
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<App />, mountNode);
 ````
diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md
index ff4ae5facc..302d2b1f38 100644
--- a/components/transfer/demo/basic.md
+++ b/components/transfer/demo/basic.md
@@ -30,26 +30,27 @@ const targetKeys = mockData
         .filter(item => +item.key % 3 > 1)
         .map(item => item.key);
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      targetKeys,
-      selectedKeys: [],
-    };
-  },
-  handleChange(nextTargetKeys, direction, moveKeys) {
+class App extends React.Component {
+  state = {
+    targetKeys,
+    selectedKeys: [],
+  }
+
+  handleChange = (nextTargetKeys, direction, moveKeys) => {
     this.setState({ targetKeys: nextTargetKeys });
 
     console.log('targetKeys: ', targetKeys);
     console.log('direction: ', direction);
     console.log('moveKeys: ', moveKeys);
-  },
-  handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
+  }
+
+  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
     this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
 
     console.log('sourceSelectedKeys: ', sourceSelectedKeys);
     console.log('targetSelectedKeys: ', targetSelectedKeys);
-  },
+  }
+
   render() {
     const state = this.state;
     return (
@@ -63,8 +64,8 @@ const App = React.createClass({
         render={item => item.title}
       />
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<App />, mountNode);
 ````
diff --git a/components/transfer/demo/custom-item.md b/components/transfer/demo/custom-item.md
index dc0ce24c01..144fa0227d 100644
--- a/components/transfer/demo/custom-item.md
+++ b/components/transfer/demo/custom-item.md
@@ -16,17 +16,15 @@ Custom each Transfer Item, and in this way you can render a complex datasource.
 ````jsx
 import { Transfer } from 'antd';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      mockData: [],
-      targetKeys: [],
-    };
-  },
+class App extends React.Component {
+  state = {
+    mockData: [],
+    targetKeys: [],
+  }
   componentDidMount() {
     this.getMock();
-  },
-  getMock() {
+  }
+  getMock = () => {
     const targetKeys = [];
     const mockData = [];
     for (let i = 0; i < 20; i++) {
@@ -42,12 +40,12 @@ const App = React.createClass({
       mockData.push(data);
     }
     this.setState({ mockData, targetKeys });
-  },
-  handleChange(targetKeys, direction, moveKeys) {
+  }
+  handleChange = (targetKeys, direction, moveKeys) => {
     console.log(targetKeys, direction, moveKeys);
     this.setState({ targetKeys });
-  },
-  renderItem(item) {
+  }
+  renderItem = (item) => {
     const customLabel = (
       <span className="custom-item">
         {item.title} - {item.description}
@@ -58,7 +56,7 @@ const App = React.createClass({
       label: customLabel,  // for displayed item
       value: item.title,   // for title and filter matching
     };
-  },
+  }
   render() {
     return (
       <Transfer
@@ -72,8 +70,8 @@ const App = React.createClass({
         render={this.renderItem}
       />
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<App />, mountNode);
 ````
diff --git a/components/transfer/demo/large-data.md b/components/transfer/demo/large-data.md
index 090eba2266..75e1da8701 100644
--- a/components/transfer/demo/large-data.md
+++ b/components/transfer/demo/large-data.md
@@ -17,17 +17,15 @@ title:
 ````jsx
 import { Transfer } from 'antd';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      mockData: [],
-      targetKeys: [],
-    };
-  },
+class App extends React.Component {
+  state = {
+    mockData: [],
+    targetKeys: [],
+  }
   componentDidMount() {
     this.getMock();
-  },
-  getMock() {
+  }
+  getMock = () => {
     const targetKeys = [];
     const mockData = [];
     for (let i = 0; i < 2000; i++) {
@@ -43,11 +41,11 @@ const App = React.createClass({
       mockData.push(data);
     }
     this.setState({ mockData, targetKeys });
-  },
-  handleChange(targetKeys, direction, moveKeys) {
+  }
+  handleChange = (targetKeys, direction, moveKeys) => {
     console.log(targetKeys, direction, moveKeys);
     this.setState({ targetKeys });
-  },
+  }
   render() {
     return (
       <Transfer
@@ -57,8 +55,8 @@ const App = React.createClass({
         render={item => item.title}
       />
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<App />, mountNode);
 ````
diff --git a/components/transfer/demo/search.md b/components/transfer/demo/search.md
index a9a02df8cd..330aa7195b 100644
--- a/components/transfer/demo/search.md
+++ b/components/transfer/demo/search.md
@@ -16,17 +16,15 @@ Transfer with a search box.
 ````jsx
 import { Transfer } from 'antd';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      mockData: [],
-      targetKeys: [],
-    };
-  },
+class App extends React.Component {
+  state = {
+    mockData: [],
+    targetKeys: [],
+  }
   componentDidMount() {
     this.getMock();
-  },
-  getMock() {
+  }
+  getMock = () => {
     const targetKeys = [];
     const mockData = [];
     for (let i = 0; i < 20; i++) {
@@ -42,13 +40,13 @@ const App = React.createClass({
       mockData.push(data);
     }
     this.setState({ mockData, targetKeys });
-  },
-  filterOption(inputValue, option) {
+  }
+  filterOption = (inputValue, option) => {
     return option.description.indexOf(inputValue) > -1;
-  },
-  handleChange(targetKeys) {
+  }
+  handleChange = (targetKeys) => {
     this.setState({ targetKeys });
-  },
+  }
   render() {
     return (
       <Transfer
@@ -60,8 +58,8 @@ const App = React.createClass({
         render={item => item.title}
       />
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<App />, mountNode);
 ````