refator: Use father (#641)

* init father

* rm warning deps

* fix lint

* slider tsx

* Slider tsx

* Range tsx

* handle tsx

* createSliderWithTooltip

* rest

* fix lint

* examples

* fix ts

* fix ci

Author: zombieJ

.eslintrc

@@ -0,0 +1,19 @@
+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,
+    '@typescript-eslint/no-empty-interface': 1,
+    '@typescript-eslint/no-inferrable-types': 0,
+    'react/no-find-dom-node': 1,
+    'react/require-default-props': 0,
+    'no-confusing-arrow': 0,
+    'import/no-named-as-default-member': 0,
+    'jsx-a11y/label-has-for': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+  },
+};

.eslintrc.js

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

.fatherrc.js

@@ -28,3 +28,6 @@ lib
 es
 /coverage
 yarn.lock
+package-lock.json
+.doc
+.storybook

.gitignore

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "proseWrap": "never",
+  "printWidth": 100
+}

.prettierrc

@@ -1,43 +1,18 @@
 language: node_js
 
-sudo: false
-
-notifications:
-  email:
-  - [email protected]
-  - [email protected]
-
 node_js:
-- 6.0.0
-
-before_install:
-- |
-    if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
-    then
-      echo "Only docs were updated, stopping build process."
-      exit
-    fi
-    phantomjs --version
+  - 10
 
 script:
-- |
+  - |
     if [ "$TEST_TYPE" = test ]; then
       npm test -- --coverage && \
       bash <(curl -s https://codecov.io/bash)
     else
       npm run $TEST_TYPE
     fi
-
 env:
   matrix:
-  - TEST_TYPE=lint
-  - TEST_TYPE=test
-  - TEST_TYPE=saucelabs
-  global:
-  - secure: S1VwbaPzLnSH/IUT/wlJulxAX5VHRIDmSt53h/ycHcZsszUpWcLCJRQAe0fTVB2dAx5MdBbSZ+o+tr3tRwVB5TRAYm0oTCsYAkOZaWOB28RuUQtdGt3wf9xxTG1UiPiaLLUW3waX9zAaf3yqKBcJGf1op0RD8dksxbCFw/7xVbU=
-  - secure: EBEDg8k///IlEsnx0AE8X3mbFl0QE5+xGKbG4AxXlGZda12uTIPUSMKJzdZQ2hVbZXduTzf1cQl9rcu9nGoSnkL/DWnIax9cvHi+1orx5+YPlxPHNWAwWByTnHosBn2MJhfy1s5paJfHC9cUzmmEL6x4fYthWxjsPUo+irEZH6E=
-
-
-matrix:
-  allow_failures:
-  - env: "TEST_TYPE=saucelabs"
+    - TEST_TYPE=lint
+    - TEST_TYPE=test
+    - TEST_TYPE=compile

.travis.yml

@@ -1,15 +1,14 @@
-import 'rc-slider/assets/index.less';
+import '../assets/index.less';
 import 'rc-tooltip/assets/bootstrap.css';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import Tooltip from 'rc-tooltip';
-import Slider from 'rc-slider';
+import Slider from '../src';
 
-const createSliderWithTooltip = Slider.createSliderWithTooltip;
+const { createSliderWithTooltip } = Slider;
 const Range = createSliderWithTooltip(Slider.Range);
-const Handle = Slider.Handle;
+const { Handle } = Slider;
 
-const handle = (props) => {
+const handle = props => {
   const { value, dragging, index, ...restProps } = props;
   return (
     <Tooltip
@@ -25,7 +24,8 @@ const handle = (props) => {
 };
 
 const wrapperStyle = { width: 400, margin: 50 };
-ReactDOM.render(
+
+export default () => (
   <div>
     <div style={wrapperStyle}>
       <p>Slider with custom handle</p>
@@ -43,6 +43,5 @@ ReactDOM.render(
       <p>Range with custom tooltip</p>
       <Range min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
     </div>
-  </div>,
-  document.getElementById('__react-content')
+  </div>
 );

examples/handle.html

@@ -1,8 +1,7 @@
-import 'rc-slider/assets/index.less';
+import '../assets/index.less';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Slider from 'rc-slider';
+import Slider from '../src';
 
 const style = { width: 400, margin: 50 };
 const marks = {
@@ -23,7 +22,7 @@ function log(value) {
   console.log(value); //eslint-disable-line
 }
 
-ReactDOM.render(
+export default () => (
   <div>
     <div style={style}>
       <p>Slider with marks, `step=null`</p>
@@ -57,4 +56,4 @@ ReactDOM.render(
       <Slider.Range min={-10} marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
     </div>
   </div>
-  , document.getElementById('__react-content'));
+);

examples/handle.js renamed to examples/handle.jsx

@@ -1,11 +1,10 @@
 /* eslint react/no-multi-comp: 0, no-console: 0 */
-import 'rc-slider/assets/index.less';
+import '../assets/index.less';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Slider from 'rc-slider';
+import Slider from '../src';
 
-const Range = Slider.Range;
+const { Range } = Slider;
 
 const style = { width: 400, margin: 50 };
 
@@ -22,22 +21,27 @@ class CustomizedRange extends React.Component {
       value: [20, 40],
     };
   }
-  onLowerBoundChange = (e) => {
+
+  onLowerBoundChange = e => {
     this.setState({ lowerBound: +e.target.value });
-  }
-  onUpperBoundChange = (e) => {
+  };
+
+  onUpperBoundChange = e => {
     this.setState({ upperBound: +e.target.value });
-  }
-  onSliderChange = (value) => {
+  };
+
+  onSliderChange = value => {
     log(value);
     this.setState({
       value,
     });
-  }
+  };
+
   handleApply = () => {
     const { lowerBound, upperBound } = this.state;
     this.setState({ value: [lowerBound, upperBound] });
-  }
+  };
+
   render() {
     return (
       <div>
@@ -47,8 +51,11 @@ class CustomizedRange extends React.Component {
         <label>UpperBound: </label>
         <input type="number" value={this.state.upperBound} onChange={this.onUpperBoundChange} />
         <br />
-        <button onClick={this.handleApply}>Apply</button>
-        <br /><br />
+        <button type="button" onClick={this.handleApply}>
+          Apply
+        </button>
+        <br />
+        <br />
         <Range allowCross={false} value={this.state.value} onChange={this.onSliderChange} />
       </div>
     );
@@ -63,19 +70,23 @@ class DynamicBounds extends React.Component {
       max: 100,
     };
   }
-  onSliderChange = (value) => {
+
+  onSliderChange = value => {
     log(value);
-  }
-  onMinChange = (e) => {
+  };
+
+  onMinChange = e => {
     this.setState({
       min: +e.target.value || 0,
     });
-  }
-  onMaxChange = (e) => {
+  };
+
+  onMaxChange = e => {
     this.setState({
       max: +e.target.value || 100,
     });
-  }
+  };
+
   render() {
     return (
       <div>
@@ -84,8 +95,12 @@ class DynamicBounds extends React.Component {
         <br />
         <label>Max: </label>
         <input type="number" value={this.state.max} onChange={this.onMaxChange} />
-        <br /><br />
-        <Range defaultValue={[20, 50]} min={this.state.min} max={this.state.max}
+        <br />
+        <br />
+        <Range
+          defaultValue={[20, 50]}
+          min={this.state.min}
+          max={this.state.max}
           onChange={this.onSliderChange}
         />
       </div>
@@ -100,15 +115,15 @@ class ControlledRange extends React.Component {
       value: [20, 40, 60, 80],
     };
   }
-  handleChange = (value) => {
+
+  handleChange = value => {
     this.setState({
       value,
     });
-  }
+  };
+
   render() {
-    return (
-      <Range value={this.state.value} onChange={this.handleChange} />
-    );
+    return <Range value={this.state.value} onChange={this.handleChange} />;
   }
 }
 
@@ -119,11 +134,13 @@ class ControlledRangeDisableAcross extends React.Component {
       value: [20, 40, 60, 80],
     };
   }
-  handleChange = (value) => {
+
+  handleChange = value => {
     this.setState({
       value,
     });
-  }
+  };
+
   render() {
     return (
       <Range
@@ -144,20 +161,20 @@ class PureRenderRange extends React.Component {
       foo: false,
     };
   }
-  handleChange = (value) => {
+
+  handleChange = value => {
     console.log(value);
-    this.setState({
-      foo: !this.state.foo,
-    });
-  }
+    this.setState(({ foo }) => ({ foo: !foo }));
+  };
+
   render() {
     return (
       <Range defaultValue={[20, 40, 60, 80]} onChange={this.handleChange} allowCross={false} />
     );
   }
 }
 
-ReactDOM.render(
+export default () => (
   <div>
     <div style={style}>
       <p>Basic Range，`allowCross=false`</p>
@@ -197,7 +214,10 @@ ReactDOM.render(
     </div>
     <div style={style}>
       <p>Multi Range with custom track and handle style</p>
-      <Range count={3} defaultValue={[20, 40, 60, 80]} pushable
+      <Range
+        count={3}
+        defaultValue={[20, 40, 60, 80]}
+        pushable
         trackStyle={[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]}
         handleStyle={[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]}
         railStyle={{ backgroundColor: 'black' }}
@@ -216,4 +236,4 @@ ReactDOM.render(
       <PureRenderRange />
     </div>
   </div>
-  , document.getElementById('__react-content'));
+);