refactor: Use father & typescript

.eslintrc.js

@@ -0,0 +1,16 @@
+const base = require('@umijs/fabric/dist/eslint');
+
+module.exports = {
+  ...base,
+  rules: {
+    ...base.rules,
+    'react/no-array-index-key': 0,
+    'react/sort-comp': 0,
+    '@typescript-eslint/no-explicit-any': 1,
+    'react/no-find-dom-node': 1,
+    'react/require-default-props': 0,
+    'no-confusing-arrow': 0,
+    'jsx-a11y/label-has-for': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+  },
+};

.fatherrc.js

@@ -0,0 +1,8 @@
+export default {
+  cjs: 'babel',
+  esm: { type: 'babel', importLibToEs: true },
+  preCommit: {
+    eslint: true,
+    prettier: true,
+  },
+};

.gitignore

@@ -1,3 +1,4 @@
+.storybook
 *.iml
 *.log
 .idea/

.travis.yml

@@ -9,7 +9,7 @@ notifications:
   - yesmeck@gmail.com
 
 node_js:
-- 8
+- 10
 
 script:
 - |

assets/bordered.less

@@ -1,11 +1,55 @@
-@tablePrefixCls: rc-table;
-@table-border-color: #e9e9e9;
-
-.@{tablePrefixCls}.bordered {
-  table {
-    border-collapse: collapse;
-  }
-  th, td {
-    border: 1px solid @table-border-color;
+.move-enter,
+.move-appear {
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-duration: 2.5s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-leave {
+  animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  animation-duration: 0.5s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.move-enter.move-enter-active,
+.move-appear.move-enter-active {
+  animation-name: moveLeftIn;
+  animation-play-state: running;
+}
+.move-leave.move-leave-active {
+  animation-name: moveRightOut;
+  animation-play-state: running;
+}
+@keyframes moveLeftIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(30px);
+    opacity: 0;
+    background: #fff6de;
+  }
+  20% {
+    transform-origin: 0 0;
+    transform: translateX(0);
+    opacity: 1;
+  }
+  80% {
+    background: #fff6de;
+  }
+  100% {
+    background: transparent;
+    opacity: 1;
+  }
+}
+@keyframes moveRightOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(-30px);
+    opacity: 0;
   }
 }

examples/animation.js

@@ -1,10 +1,9 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
 import Animate from 'rc-animate';
-import 'rc-table/assets/index.less';
-import 'rc-table/assets/animation.less';
+import Table from '../src';
+import '../assets/index.less';
+import '../assets/animation.less';
 
 const AnimateBody = props => <Animate transitionName="move" component="tbody" {...props} />;
 
@@ -38,26 +37,32 @@ class Demo extends React.Component {
   onDelete(key, e) {
     console.log('Delete', key);
     e.preventDefault();
-    const data = this.state.data.filter(item => item.key !== key);
-    this.setState({ data });
+    this.setState(({ data }) => ({
+      data: data.filter(item => item.key !== key),
+    }));
   }
 
   onAdd() {
-    const data = [...this.state.data];
-    data.push({
-      a: 'new data',
-      b: 'new data',
-      c: 'new data',
-      key: Date.now(),
-    });
-    this.setState({ data });
+    this.setState(({ data }) => ({
+      data: [
+        ...data,
+        {
+          a: 'new data',
+          b: 'new data',
+          c: 'new data',
+          key: Date.now(),
+        },
+      ],
+    }));
   }
 
   render() {
     return (
       <div style={{ margin: 20 }}>
         <h2>Table row with animation</h2>
-        <button onClick={() => this.onAdd()}>添加</button>
+        <button type="button" onClick={() => this.onAdd()}>
+          添加
+        </button>
         <Table
           columns={this.columns}
           data={this.state.data}
@@ -69,4 +74,6 @@ class Demo extends React.Component {
     );
   }
 }
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+
+export default Demo;
+/* eslint-enable */

examples/childrenIndent.js

@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   {
@@ -100,7 +99,9 @@ function onExpand(expanded, record) {
   console.log('onExpand', expanded, record);
 }
 
-ReactDOM.render(
-  <Table defaultExpandAllRows columns={columns} data={data} indentSize={30} onExpand={onExpand} />,
-  document.getElementById('__react-content'),
+const Demo = () => (
+  <Table defaultExpandAllRows columns={columns} data={data} indentSize={30} onExpand={onExpand} />
 );
+
+export default Demo;
+/* eslint-enable */

examples/className.js

@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   {
@@ -44,7 +43,7 @@ const data = [
   { a: '1333', c: 'eee', d: 2, key: '3' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>rowClassName and className</h2>
     <Table
@@ -55,6 +54,8 @@ ReactDOM.render(
       data={data}
       className="table"
     />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */

examples/colspan-rowspan.js

@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   {
@@ -128,10 +127,12 @@ const data = [
   { a: '资料统计完毕于xxxx年xxx月xxx日', key: '6' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>colSpan & rowSpan</h2>
     <Table columns={columns} data={data} className="table" />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */

examples/column-resize.js

@@ -1,10 +1,9 @@
 /* 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';
 import { Resizable } from 'react-resizable';
+import Table from '../src';
+import '../assets/index.less';
 import 'react-resizable/css/styles.css';
 
 const ResizeableTitle = props => {
@@ -84,4 +83,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById('__react-content'));
+export default Demo;
+/* eslint-enable */

examples/dropdown.js

@@ -1,15 +1,14 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
 import Menu, { Item, Divider } from 'rc-menu';
 import DropDown from 'rc-dropdown';
-import 'rc-table/assets/index.less';
 import 'rc-dropdown/assets/index.css';
 import 'rc-menu/assets/index.css';
+import Table from '../src';
+import '../assets/index.less';
 
 const data = [];
-for (let i = 0; i < 10; i++) {
+for (let i = 0; i < 10; i += 1) {
   data.push({
     key: i,
     a: `a${i}`,
@@ -61,6 +60,7 @@ class Demo extends React.Component {
         <Divider />
         <Item disabled>
           <button
+            type="button"
             style={{
               cursor: 'pointer',
               color: '#000',
@@ -101,10 +101,12 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(
+const Test = () => (
   <div>
     <h2>use dropdown</h2>
     <Demo />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Test;
+/* eslint-enable */

examples/ellipsis.js

@@ -1,8 +1,7 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const columns = [
   { title: 'name', dataIndex: 'name', width: 100, ellipsis: true },
@@ -32,10 +31,12 @@ const data = [
   { name: 'jack nickson', descrption: 'descrption descrption', key: '4' },
 ];
 
-ReactDOM.render(
+const Demo = () => (
   <div>
     <h2>Table ellipsis</h2>
     <Table columns={columns} data={data} />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Demo;
+/* eslint-enable */

examples/expandIcon.js

@@ -1,8 +1,7 @@
 /* eslint-disable no-console,react/prop-types,react/no-danger */
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Table from 'rc-table';
-import 'rc-table/assets/index.less';
+import Table from '../src';
+import '../assets/index.less';
 
 const data = [
   { key: 0, a: '123' },
@@ -54,10 +53,12 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(
+const Test = () => (
   <div>
     <h2>expandIcon</h2>
     <Demo />
-  </div>,
-  document.getElementById('__react-content'),
+  </div>
 );
+
+export default Test;
+/* eslint-enable */