chore: Use father and fix lint (#287)

* init father

* clean up

* clean deps

* update to storybook

* fix selectKeys lint

* fix example lint

* fix util lint

* fix inner lint

* fix subPopup lint

* fix class define

* all lint

* fix ci

* revert export

* add miss typo

* inline isMobile

.eslintrc.js

@@ -0,0 +1,18 @@
+const base = require('@umijs/fabric/dist/eslint');
+
+module.exports = {
+  ...base,
+  rules: {
+    ...base.rules,
+    'import/no-named-as-default': 0,
+    'no-template-curly-in-string': 0,
+    'prefer-promise-reject-errors': 0,
+    'react/no-array-index-key': 0,
+    'react/require-default-props': 0,
+    'react/sort-comp': 0,
+    'react/no-find-dom-node': 1,
+    '@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
 .idea/

.travis.yml

@@ -1,32 +1,17 @@
 language: node_js
 
-sudo: false
-
-notifications:
-  email:
-  - [email protected]
-
 node_js:
-- 6.0.0
+  - 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
+  - TEST_TYPE=test

examples/antd.js

@@ -1,11 +1,10 @@
-/* eslint no-console:0 */
+/* eslint-disable no-console, react/require-default-props, no-param-reassign */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import Menu, { SubMenu, Item as MenuItem, Divider } from 'rc-menu';
-import 'rc-menu/assets/index.less';
 import animate from 'css-animation';
+import PropTypes from 'prop-types';
+import Menu, { SubMenu, Item as MenuItem, Divider } from '../src';
+import '../assets/index.less';
 
 function handleClick(info) {
   console.log(`clicked ${info.key}`);
@@ -30,8 +29,8 @@ const animation = {
     });
   },
 
-  appear() {
-    return this.enter.apply(this, arguments);
+  appear(...args) {
+    return this.enter(...args);
   },
 
   leave(node, done) {
@@ -50,32 +49,37 @@ const animation = {
   },
 };
 
-const reactContainer = document.getElementById('__react-content');
-
 const nestSubMenu = (
   <SubMenu
-    title={
-      <span className="submenu-title-wrapper">offset sub menu 2</span>
-    }
+    title={<span className="submenu-title-wrapper">offset sub menu 2</span>}
     key="4"
     popupOffset={[10, 15]}
   >
     <MenuItem key="4-1">inner inner</MenuItem>
-    <Divider/>
+    <Divider />
     <SubMenu
       key="4-2"
       title={<span className="submenu-title-wrapper">sub menu 1</span>}
     >
-      <SubMenu title={<span className="submenu-title-wrapper">sub 4-2-0</span>} key="4-2-0">
+      <SubMenu
+        title={<span className="submenu-title-wrapper">sub 4-2-0</span>}
+        key="4-2-0"
+      >
         <MenuItem key="4-2-0-1">inner inner</MenuItem>
         <MenuItem key="4-2-0-2">inner inner2</MenuItem>
       </SubMenu>
       <MenuItem key="4-2-1">inn</MenuItem>
-      <SubMenu title={<span className="submenu-title-wrapper">sub menu 4</span>} key="4-2-2">
+      <SubMenu
+        title={<span className="submenu-title-wrapper">sub menu 4</span>}
+        key="4-2-2"
+      >
         <MenuItem key="4-2-2-1">inner inner</MenuItem>
         <MenuItem key="4-2-2-2">inner inner2</MenuItem>
       </SubMenu>
-      <SubMenu title={<span className="submenu-title-wrapper">sub menu 3</span>} key="4-2-3">
+      <SubMenu
+        title={<span className="submenu-title-wrapper">sub menu 3</span>}
+        key="4-2-3"
+      >
         <MenuItem key="4-2-3-1">inner inner</MenuItem>
         <MenuItem key="4-2-3-2">inner inner2</MenuItem>
       </SubMenu>
@@ -88,19 +92,27 @@ function onOpenChange(value) {
 }
 
 const children1 = [
-  <SubMenu title={<span className="submenu-title-wrapper">sub menu</span>} key="1">
+  <SubMenu
+    title={<span className="submenu-title-wrapper">sub menu</span>}
+    key="1"
+  >
     <MenuItem key="1-1">0-1</MenuItem>
     <MenuItem key="1-2">0-2</MenuItem>
   </SubMenu>,
   nestSubMenu,
   <MenuItem key="2">1</MenuItem>,
   <MenuItem key="3">outer</MenuItem>,
-  <MenuItem key="5" disabled>disabled</MenuItem>,
+  <MenuItem key="5" disabled>
+    disabled
+  </MenuItem>,
   <MenuItem key="6">outer3</MenuItem>,
 ];
 
 const children2 = [
-  <SubMenu title={<span className="submenu-title-wrapper">sub menu</span>} key="1">
+  <SubMenu
+    title={<span className="submenu-title-wrapper">sub menu</span>}
+    key="1"
+  >
     <MenuItem key="1-1">0-1</MenuItem>
     <MenuItem key="1-2">0-2</MenuItem>
   </SubMenu>,
@@ -111,32 +123,39 @@ const children2 = [
 const customizeIndicator = <span>Add More Items</span>;
 
 class CommonMenu extends React.Component {
-  state={
+  state = {
     children: children1,
     overflowedIndicator: undefined,
-  }
+  };
+
   toggleChildren = () => {
-    this.setState({
-      children: this.state.children === children1 ? children2 : children1,
-    });
-  }
+    this.setState(({ children }) => ({
+      children: children === children1 ? children2 : children1,
+    }));
+  };
+
   toggleOverflowedIndicator = () => {
-    this.setState({
+    this.setState(({ overflowedIndicator }) => ({
       overflowedIndicator:
-        this.state.overflowedIndicator === undefined ?
-          customizeIndicator :
-          undefined,
-    });
-  }
+        overflowedIndicator === undefined ? customizeIndicator : undefined,
+    }));
+  };
+
   render() {
     const { triggerSubMenuAction } = this.props;
     const { children, overflowedIndicator } = this.state;
     return (
       <div>
-        {this.props.updateChildrenAndOverflowedIndicator && <div>
-          <button onClick={this.toggleChildren}>toggle children</button>
-          <button onClick={this.toggleOverflowedIndicator}>toggle overflowedIndicator</button>
-        </div>}
+        {this.props.updateChildrenAndOverflowedIndicator && (
+          <div>
+            <button type="button" onClick={this.toggleChildren}>
+              toggle children
+            </button>
+            <button type="button" onClick={this.toggleOverflowedIndicator}>
+              toggle overflowedIndicator
+            </button>
+          </div>
+        )}
         <Menu
           onClick={handleClick}
           triggerSubMenuAction={triggerSubMenuAction}
@@ -162,7 +181,7 @@ CommonMenu.propTypes = {
   updateChildrenAndOverflowedIndicator: PropTypes.bool,
 };
 
-function render(container) {
+function Demo() {
   const horizontalMenu = (
     <CommonMenu
       mode="horizontal"
@@ -181,12 +200,7 @@ function render(container) {
     />
   );
 
-  const verticalMenu = (
-    <CommonMenu
-      mode="vertical"
-      openAnimation="zoom"
-    />
-  );
+  const verticalMenu = <CommonMenu mode="vertical" openAnimation="zoom" />;
 
   const inlineMenu = (
     <CommonMenu
@@ -196,23 +210,26 @@ function render(container) {
     />
   );
 
-  ReactDOM.render(<div style={{ margin: 20 }}>
-    <h2>antd menu</h2>
-    <div>
-      <h3>horizontal</h3>
+  return (
+    <div style={{ margin: 20 }}>
+      <h2>antd menu</h2>
+      <div>
+        <h3>horizontal</h3>
 
-      <div style={{ margin: 20 }}>{horizontalMenu}</div>
-      <h3>horizontal and click</h3>
+        <div style={{ margin: 20 }}>{horizontalMenu}</div>
+        <h3>horizontal and click</h3>
 
-      <div style={{ margin: 20 }}>{horizontalMenu2}</div>
-      <h3>vertical</h3>
+        <div style={{ margin: 20 }}>{horizontalMenu2}</div>
+        <h3>vertical</h3>
 
-      <div style={{ margin: 20, width: 200 }}>{verticalMenu}</div>
-      <h3>inline</h3>
+        <div style={{ margin: 20, width: 200 }}>{verticalMenu}</div>
+        <h3>inline</h3>
 
-      <div style={{ margin: 20, width: 400 }}>{inlineMenu}</div>
+        <div style={{ margin: 20, width: 400 }}>{inlineMenu}</div>
+      </div>
     </div>
-  </div>, container);
+  );
 }
 
-render(reactContainer);
+export default Demo;
+/* eslint-enable */