docs: Rewrite Transfer demos to ES6 component

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);
 ````

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);
 ````

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);
 ````

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);
 ````

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);
 ````