Merge pull request #169 from react-component/next

Refactor

Author: yesmeck

examples/dropdown.js

@@ -18,35 +18,34 @@ for (let i = 0; i < 10; i++) {
   });
 }
 
-const Test = React.createClass({
-  getInitialState() {
-    this.filters = [];
-    return {
-      visible: false,
-    };
-  },
+class Demo extends React.Component {
+  state = {
+    visible: false,
+  }
+
+  filters = []
 
-  handleVisibleChange(visible) {
+  handleVisibleChange = (visible) => {
     this.setState({ visible });
-  },
+  }
 
-  handleSelect(selected) {
+  handleSelect = (selected) => {
     this.filters.push(selected);
-  },
+  }
 
-  handleDeselect(key) {
+  handleDeselect = (key) => {
     const index = this.filters.indexOf(key);
     if (index !== -1) {
       this.filters.splice(index, 1);
     }
-  },
+  }
 
-  confirmFilter() {
+  confirmFilter = () => {
     console.log(this.filters.join(','));
     this.setState({
       visible: false,
     });
-  },
+  }
 
   render() {
     const menu = (
@@ -100,13 +99,13 @@ const Test = React.createClass({
         rowKey={record => record.key}
       />
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(
   <div>
     <h2>use dropdown</h2>
-    <Test />
+    <Demo />
   </div>,
   document.getElementById('__react-content')
 );

examples/expandedRowRender.js

@@ -10,43 +10,42 @@ const tableData = [
   { key: 2, a: '1333', c: 'eee', d: 2 },
 ];
 
-const App = React.createClass({
-  getInitialState() {
-    this.columns = [
-      { title: 'title 1', dataIndex: 'a', key: 'a', width: 100 },
-      { title: 'title 2', dataIndex: 'b', key: 'b', width: 100 },
-      { title: 'title 3', dataIndex: 'c', key: 'c', width: 200 },
-      { title: 'Operation', dataIndex: '', key: 'x', render: this.renderAction },
-    ];
-    return {
-      data: tableData,
-      expandedRowKeys: [],
-      expandIconAsCell: true,
-      expandRowByClick: false,
-    };
-  },
+class Demo extends React.Component {
+  state = {
+    data: tableData,
+    expandedRowKeys: [],
+    expandIconAsCell: true,
+    expandRowByClick: false,
+  }
 
-  onExpand(expanded, record) {
+  onExpand = (expanded, record) => {
     console.log('onExpand', expanded, record);
-  },
+  }
 
-  onExpandedRowsChange(rows) {
+  onExpandedRowsChange = (rows) => {
     this.setState({
       expandedRowKeys: rows,
     });
-  },
+  }
 
-  onExpandIconAsCellChange(e) {
+  onExpandIconAsCellChange = (e) => {
     this.setState({
       expandIconAsCell: e.target.checked,
     });
-  },
+  }
 
-  onExpandRowByClickChange(e) {
+  onExpandRowByClickChange = (e) => {
     this.setState({
       expandRowByClick: e.target.checked,
     });
-  },
+  }
+
+  columns = [
+    { title: 'title 1', dataIndex: 'a', key: 'a', width: 100 },
+    { title: 'title 2', dataIndex: 'b', key: 'b', width: 100 },
+    { title: 'title 3', dataIndex: 'c', key: 'c', width: 200 },
+    { title: 'Operation', dataIndex: '', key: 'x', render: this.renderAction },
+  ]
 
   toggleButton() {
     if (this.state.expandedRowKeys.length) {
@@ -55,22 +54,22 @@ const App = React.createClass({
     }
     const openAll = () => this.setState({ expandedRowKeys: [0, 1, 2] });
     return <button onClick={openAll}>Expand All</button>;
-  },
+  }
 
   remove(index) {
     const data = this.state.data;
     data.splice(index, 1);
     this.setState({ data });
-  },
+  }
 
   expandedRowRender(record) {
-    console.log(record);
+    // console.log(record);
     return <p>extra: {record.a}</p>;
-  },
+  }
 
   renderAction(o, row, index) {
     return <a href="#" onClick={() => this.remove(index)}>Delete</a>;
-  },
+  }
 
   render() {
     const { expandIconAsCell, expandRowByClick, expandedRowKeys, data } = this.state;
@@ -103,13 +102,13 @@ const App = React.createClass({
         />
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(
   <div>
     <h2>expandedRowRender</h2>
-    <App />
+    <Demo />
   </div>,
   document.getElementById('__react-content')
 );

examples/fixedColumns-auto-height.js

@@ -21,15 +21,15 @@ const columns = [
 ];
 
 const data = [
-  { a: '123', b: 'xxxxxxxx', d: 3, key: '1' },
-  { a: 'cdd', b: 'edd12221', d: 3, key: '2' },
-  { a: '133', c: 'edd12221', d: 2, key: '3' },
-  { a: '133', c: 'edd12221', d: 2, key: '4' },
-  { a: '133', c: 'edd12221', d: 2, key: '5' },
-  { a: '133', c: 'edd12221', d: 2, key: '6' },
-  { a: '133', c: 'edd12221', d: 2, key: '7' },
-  { a: '133', c: 'edd12221', d: 2, key: '8' },
-  { a: '133', c: 'edd12221', d: 2, key: '9' },
+  { a: '123', b: 'xxxxxxxx', d: 3, key: '1', title: 'hello' },
+  { a: 'cdd', b: 'edd12221', d: 3, key: '2', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '3', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '4', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '5', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '6', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '7', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '8', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '9', title: 'hello' },
 ];
 
 ReactDOM.render(

examples/fixedColumnsAndHeader.js

@@ -34,6 +34,6 @@ const data = [
 ReactDOM.render(
   <div>
     <h2>Fixed columns and header</h2>
-    <Table columns={columns} scroll={{ x: true, y: 300 }} data={data} style={{ width: 800 }} />
+    <Table columns={columns} scroll={{ x: 1650, y: 300 }} data={data} style={{ width: 800 }} />
   </div>
 , document.getElementById('__react-content'));

examples/key.js

@@ -1,51 +1,49 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import Table from 'rc-table';
 import 'rc-table/assets/index.less';
 
-const CheckBox = React.createClass({
-  render() {
-    const props = this.props;
-    return (
-      <label>
-        <input type="checkbox" />
-        {props.id}
-      </label>
-    );
-  },
-});
+const CheckBox = ({ id }) => (
+  <label>
+    <input type="checkbox" />
+    {id}
+  </label>
+);
 
-const MyTable = React.createClass({
-  getInitialState() {
-    const props = this.props;
-    return {
+class Demo extends React.Component {
+  static propTypes = {
+    data: PropTypes.array.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
       data: props.data,
     };
-  },
+  }
 
   remove(index) {
     const rows = this.state.data;
     rows.splice(index, 1);
     this.setState({
       data: rows,
     });
-  },
+  }
 
-  handleClick(index) {
-    const self = this;
-    return () => {
-      self.remove(index);
-    };
-  },
+  handleClick = (index) => () => {
+    this.remove(index);
+  }
 
   checkbox(a) {
     return <CheckBox id={a} />;
-  },
+  }
 
-  renderAction(o, row, index) {
+  renderAction = (o, row, index) => {
     return <a href="#" onClick={this.handleClick(index)}>Delete</a>;
-  },
+  }
 
   render() {
     const state = this.state;
@@ -58,15 +56,15 @@ const MyTable = React.createClass({
     return (
       <Table columns={columns} data={state.data} className="table" rowKey={record => record.a} />
     );
-  },
-});
+  }
+}
 
 const data = [{ a: '123' }, { a: 'cdd', b: 'edd' }, { a: '1333', c: 'eee', d: 2 }];
 
 ReactDOM.render(
   <div>
     <h2>specify key</h2>
-    <MyTable data={data} />
+    <Demo data={data} />
   </div>,
   document.getElementById('__react-content')
 );

examples/scrollY.js

@@ -14,18 +14,16 @@ for (let i = 0; i < 10; i++) {
   });
 }
 
-const Test = React.createClass({
-  getInitialState() {
-    return {
-      showBody: true,
-    };
-  },
+class Demo extends React.Component {
+  state = {
+    showBody: true,
+  }
 
-  toggleBody() {
+  toggleBody = () => {
     this.setState({
       showBody: !this.state.showBody,
     });
-  },
+  }
 
   render() {
     const columns = [
@@ -52,13 +50,13 @@ const Test = React.createClass({
         }}
       />
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(
   <div>
     <h2>scroll body table</h2>
-    <Test/>
+    <Demo />
   </div>,
   document.getElementById('__react-content')
 );

examples/subTable.js

@@ -29,11 +29,12 @@ const data = [
   },
 ];
 
-const MyTable = React.createClass({
-  handleClick(record, e) {
+class Demo extends React.Component {
+  handleClick = (record, e) => {
     e.preventDefault();
     console.log(record.a);
-  },
+  }
+
   render() {
     const columns = [
       { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
@@ -56,7 +57,7 @@ const MyTable = React.createClass({
         />
       </div>
     );
-  },
-});
+  }
+}
 
-ReactDOM.render(<MyTable />, document.getElementById('__react-content'));
+ReactDOM.render(<Demo />, document.getElementById('__react-content'));