refactor: with hooks (#195)

* chore: init with your father

* refactor: with tsx

* test: update cases

* chore: update demo

* chore: remove useless deps

* chore: remove useless deps

* chore: remove forcePopupAlign, use ResizeObserver in rc-trigger

* chore: fix type definition

* fix: lint & type definition

* ci: update

* perf: wrapper with forwardRef for access of ref

* test: update cases

* chore: upgrade rc-trigger to 4.0.0-alpha.5

Author: orzyyyy

.eslintrc.js

@@ -0,0 +1,15 @@
+const base = require('@umijs/fabric/dist/eslint');
+
+module.exports = {
+  ...base,
+  rules: {
+    ...base.rules,
+    'no-template-curly-in-string': 0,
+    'prefer-promise-reject-errors': 0,
+    'react/no-array-index-key': 0,
+    'react/sort-comp': 0,
+    '@typescript-eslint/no-explicit-any': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+    'jsx-a11y/label-has-for': 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
 *.log.*

.travis.yml

@@ -1,38 +1,17 @@
 language: node_js
 
-sudo: false
-
-notifications:
-  email:
-  - [email protected]
-  - [email protected]
-
 node_js:
-- 6
+  - 10
 
-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
-    npm install [email protected] -g
-    phantomjs --version
 script:
-- |
+  - |
     if [ "$TEST_TYPE" = test ]; then
-      npm test
+      npm run coverage && \
+      bash <(curl -s https://codecov.io/bash)
     else
       npm run $TEST_TYPE
     fi
 env:
   matrix:
-  - TEST_TYPE=lint
-  - TEST_TYPE=test
-  - TEST_TYPE=coverage
-
-
-matrix:
-  allow_failures:
-  - env: "TEST_TYPE=saucelabs"
+    - TEST_TYPE=lint
+    - TEST_TYPE=test

examples/arrowContent.html

@@ -1,7 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Tooltip from 'rc-tooltip';
-import 'rc-tooltip/assets/bootstrap_white.less';
+import Tooltip from '../src';
+import '../assets/bootstrap_white.less';
 
 const text = <span>Tooltip Text</span>;
 const styles = {
@@ -18,67 +17,82 @@ const rowStyle = {
   display: 'table-row',
 };
 
-
 const Test = () => (
-  <div style={{ display: 'table' }}>
+  <div style={{ display: 'table', padding: 120 }}>
     <div style={rowStyle}>
       <Tooltip
         placement="left"
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Left</a>
+        <a href="#" style={styles}>
+          Left
+        </a>
       </Tooltip>
       <Tooltip
         placement="top"
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Top</a>
+        <a href="#" style={styles}>
+          Top
+        </a>
       </Tooltip>
       <Tooltip
         placement="bottom"
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Bottom</a>
+        <a href="#" style={styles}>
+          Bottom
+        </a>
       </Tooltip>
       <Tooltip
         placement="right"
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Right</a>
+        <a href="#" style={styles}>
+          Right
+        </a>
       </Tooltip>
-    </ div>
+    </div>
     <div style={rowStyle}>
       <Tooltip
         placement="leftTop"
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Left Top</a>
+        <a href="#" style={styles}>
+          Left Top
+        </a>
       </Tooltip>
       <Tooltip
         placement="leftBottom"
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Left Bottom</a>
+        <a href="#" style={styles}>
+          Left Bottom
+        </a>
       </Tooltip>
       <Tooltip
         placement="rightTop"
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Right Top</a>
+        <a href="#" style={styles}>
+          Right Top
+        </a>
       </Tooltip>
       <Tooltip
         placement="rightBottom"
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Right Bottom</a>
+        <a href="#" style={styles}>
+          Right Bottom
+        </a>
       </Tooltip>
     </div>
     <div style={rowStyle}>
@@ -87,31 +101,39 @@ const Test = () => (
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Top Left</a>
+        <a href="#" style={styles}>
+          Top Left
+        </a>
       </Tooltip>
       <Tooltip
         placement="topRight"
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Top Right</a>
+        <a href="#" style={styles}>
+          Top Right
+        </a>
       </Tooltip>
       <Tooltip
         placement="bottomLeft"
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Bottom Left</a>
+        <a href="#" style={styles}>
+          Bottom Left
+        </a>
       </Tooltip>
       <Tooltip
         placement="bottomRight"
         overlay={text}
         arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
       >
-        <a href="#" style={styles}>Bottom Right</a>
+        <a href="#" style={styles}>
+          Bottom Right
+        </a>
       </Tooltip>
     </div>
   </div>
 );
 
-ReactDOM.render(<Test />, document.getElementById('__react-content'));
+export default Test;

examples/arrowContent.js

@@ -1,23 +1,25 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import Tooltip from 'rc-tooltip';
+import Tooltip from '../src';
 
-import 'rc-tooltip/assets/bootstrap.less';
+import '../assets/bootstrap.less';
 
 class Test extends Component {
   state = {
     visible: false,
   };
+
   handleDestroy = () => {
     this.setState({
       destroy: true,
     });
-  }
-  handleChange = (e) => {
+  };
+
+  handleChange = e => {
     this.setState({
       visible: !e.target.value,
     });
-  }
+  };
+
   render() {
     if (this.state.destroy) {
       return null;
@@ -32,13 +34,15 @@ class Test extends Component {
             overlayStyle={{ zIndex: 1000 }}
             overlay={<span>required!</span>}
           >
-            <input onChange={this.handleChange}/>
+            <input onChange={this.handleChange} />
           </Tooltip>
         </div>
-        <button onClick={this.handleDestroy}>destroy</button>
+        <button type="button" onClick={this.handleDestroy}>
+          destroy
+        </button>
       </div>
     );
   }
 }
 
-ReactDOM.render(<Test />, document.getElementById('__react-content'));
+export default Test;

examples/formError.html

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import Tooltip from 'rc-tooltip';
-import 'rc-tooltip/assets/bootstrap.less';
+import Tooltip from '../src';
+import '../assets/bootstrap.less';
 
 function preventDefault(e) {
   e.preventDefault();
@@ -11,35 +10,44 @@ class Test extends Component {
   state = {
     visible: false,
   };
-  onVisibleChange = (visible) => {
+
+  onVisibleChange = visible => {
     this.setState({
       visible,
     });
-  }
+  };
+
   onDestroy = () => {
     this.setState({
       destroy: true,
     });
-  }
+  };
+
   render() {
     if (this.state.destroy) {
       return null;
     }
-    return (<div>
-      <div style={{ marginTop: 300, marginLeft: 100, marginBottom: 100 }}>
-        <Tooltip
-          visible={this.state.visible}
-          animation="zoom"
-          onVisibleChange={this.onVisibleChange}
-          trigger="click"
-          overlay={<span>I am a tooltip</span>}
-        >
-          <a href="#" onClick={preventDefault}>trigger</a>
-        </Tooltip>
+    return (
+      <div>
+        <div style={{ marginTop: 300, marginLeft: 100, marginBottom: 100 }}>
+          <Tooltip
+            visible={this.state.visible}
+            animation="zoom"
+            onVisibleChange={this.onVisibleChange}
+            trigger="click"
+            overlay={<span>I am a tooltip</span>}
+          >
+            <a href="#" onClick={preventDefault}>
+              trigger
+            </a>
+          </Tooltip>
+        </div>
+        <button type="button" onClick={this.onDestroy}>
+          destroy
+        </button>
       </div>
-      <button onClick={this.onDestroy}>destroy</button>
-    </div>);
+    );
   }
 }
 
-ReactDOM.render(<Test />, document.getElementById('__react-content'));
+export default Test;