upgrade father, fix eslint and prettier (#241)

* upgrade father, fix eslint and prettier

* use father

* upgrade father

Author: afc163

.eslintrc.js

@@ -1,9 +1,6 @@
-const base = require('@umijs/fabric/dist/eslint');
-
 module.exports = {
-  ...base,
+  extends: [require.resolve('@umijs/fabric/dist/eslint')],
   rules: {
-    ...base.rules,
     'default-case': 0,
     'import/no-extraneous-dependencies': 0,
     'react/no-find-dom-node': 0,

examples/case.tsx

@@ -1,8 +1,9 @@
 /* eslint no-console:0 */
 
 import React from 'react';
-import { CSSMotionProps } from 'rc-motion';
-import Trigger, { BuildInPlacements } from '../src';
+import type { CSSMotionProps } from 'rc-motion';
+import type { BuildInPlacements } from '../src';
+import Trigger from '../src';
 import './case.less';
 
 const builtinPlacements: BuildInPlacements = {
@@ -202,7 +203,7 @@ const Demo = () => {
             maskMotion={motion ? MaskMotion : null}
             maskClosable={maskClosable}
             stretch={stretch}
-            action={Object.keys(actions).filter(action => actions[action])}
+            action={Object.keys(actions).filter((action) => actions[action])}
             builtinPlacements={builtinPlacements}
             forceRender={forceRender}
             popupStyle={{

examples/click-nested.js

@@ -37,17 +37,7 @@ const popupBorderStyle = {
   background: 'rgba(255, 0, 0, 0.1)',
 };
 
-function saveRef(name, component) {
-  this[name] = component;
-}
-
 class Test extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.saveContainerRef = saveRef.bind(this, 'containerInstance');
-  }
-
   render() {
     return (
       <div style={{ margin: 200 }}>
@@ -68,7 +58,7 @@ class Test extends React.Component {
                   i am a click popup{' '}
                   <button
                     type="button"
-                    onMouseDown={e => {
+                    onMouseDown={(e) => {
                       e.stopPropagation();
                       e.preventDefault();
                     }}

examples/nested.js

@@ -36,16 +36,10 @@ const popupBorderStyle = {
   padding: 10,
 };
 
-function saveRef(name, component) {
-  this[name] = component;
-}
-
 class Test extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.saveContainerRef = saveRef.bind(this, 'containerInstance');
-  }
+  saveContainerRef = (node) => {
+    this.containerInstanceNode = node;
+  };
 
   render() {
     const innerTrigger = (
@@ -55,7 +49,7 @@ class Test extends React.Component {
           popupPlacement="bottom"
           action={['click']}
           builtinPlacements={builtinPlacements}
-          getPopupContainer={() => this.containerInstance}
+          getPopupContainer={() => this.containerInstanceNode}
           popup={<div style={popupBorderStyle}>I am inner Trigger Popup</div>}
         >
           <span href="#" style={{ margin: 20 }}>

examples/simple.tsx

@@ -35,7 +35,7 @@ function getPopupContainer(trigger) {
   return trigger.parentNode;
 }
 
-const InnerTarget = props => (
+const InnerTarget = (props) => (
   <div
     style={{
       margin: 20,
@@ -78,7 +78,7 @@ interface TestState {
   mobile?: boolean;
 }
 
-class Test extends React.Component<{}, TestState> {
+class Test extends React.Component<any, TestState> {
   state: TestState = {
     mask: true,
     maskClosable: true,
@@ -92,19 +92,19 @@ class Test extends React.Component<{}, TestState> {
     transitionName: 'rc-trigger-popup-zoom',
   };
 
-  onPlacementChange = e => {
+  onPlacementChange = (e) => {
     this.setState({
       placement: e.target.value,
     });
   };
 
-  onStretch = e => {
+  onStretch = (e) => {
     this.setState({
       stretch: e.target.value,
     });
   };
 
-  onTransitionChange = e => {
+  onTransitionChange = (e) => {
     this.setState({
       transitionName: e.target.checked ? e.target.value : '',
     });
@@ -126,31 +126,31 @@ class Test extends React.Component<{}, TestState> {
     });
   };
 
-  onOffsetXChange = e => {
+  onOffsetXChange = (e) => {
     const targetValue = e.target.value;
     this.setState({
       offsetX: targetValue || undefined,
     });
   };
 
-  onOffsetYChange = e => {
+  onOffsetYChange = (e) => {
     const targetValue = e.target.value;
     this.setState({
       offsetY: targetValue || undefined,
     });
   };
 
-  onVisibleChange = visible => {
+  onVisibleChange = (visible) => {
     console.log('tooltip', visible);
   };
 
-  onMask = e => {
+  onMask = (e) => {
     this.setState({
       mask: e.target.checked,
     });
   };
 
-  onMaskClosable = e => {
+  onMaskClosable = (e) => {
     this.setState({
       maskClosable: e.target.checked,
     });
@@ -173,13 +173,13 @@ class Test extends React.Component<{}, TestState> {
     });
   };
 
-  destroyPopupOnHide = e => {
+  destroyPopupOnHide = (e) => {
     this.setState({
       destroyPopupOnHide: e.target.checked,
     });
   };
 
-  autoDestroy = e => {
+  autoDestroy = (e) => {
     this.setState({
       autoDestroy: e.target.checked,
     });
@@ -374,7 +374,7 @@ class Test extends React.Component<{}, TestState> {
                       background: '#FFF',
                       textAlign: 'center',
                     },
-                    popupRender: node => (
+                    popupRender: (node) => (
                       <>
                         <div>
                           <input

package.json

@@ -50,12 +50,12 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.4.0",
     "eslint": "^7.0.0",
-    "father": "^2.13.2",
+    "father": "^2.30.2",
     "np": "^6.2.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "regenerator-runtime": "^0.13.7",
-    "typescript": "^3.5.2"
+    "typescript": "^4.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",

src/Popup/Mask.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import CSSMotion, { CSSMotionProps } from 'rc-motion';
-import { TransitionNameType, AnimationType } from '../interface';
+import type { CSSMotionProps } from 'rc-motion';
+import CSSMotion from 'rc-motion';
+import type { TransitionNameType, AnimationType } from '../interface';
 import { getMotion } from '../utils/legacyUtil';
 
 export interface MaskProps {

src/Popup/MobilePopupInner.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import CSSMotion from 'rc-motion';
 import classNames from 'classnames';
-import { PopupInnerProps, PopupInnerRef } from './PopupInner';
-import { MobileConfig } from '../interface';
+import type { PopupInnerProps, PopupInnerRef } from './PopupInner';
+import type { MobileConfig } from '../interface';
 
 interface MobilePopupInnerProps extends PopupInnerProps {
   mobile?: MobileConfig;

src/Popup/PopupInner.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
 import Align from 'rc-align';
-import { RefAlign } from 'rc-align/lib/Align';
-import CSSMotion, { CSSMotionProps, MotionEndEventHandler } from 'rc-motion';
+import type { RefAlign } from 'rc-align/lib/Align';
+import type { CSSMotionProps, MotionEndEventHandler } from 'rc-motion';
+import CSSMotion from 'rc-motion';
 import classNames from 'classnames';
-import {
+import type {
   Point,
   AlignType,
   StretchType,
@@ -97,7 +98,7 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
     const [status, goNextStatus] = useVisibleStatus(visible, doMeasure);
 
     // ======================== Aligns ========================
-    const prepareResolveRef = useRef<Function>();
+    const prepareResolveRef = useRef<(value?: unknown) => void>();
 
     // `target` on `rc-align` can accept as a function to get the bind element or a point.
     // ref: https://www.npmjs.com/package/rc-align
@@ -134,7 +135,7 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
 
     // ======================== Motion ========================
     const motion = { ...getMotion(props) };
-    ['onAppearEnd', 'onEnterEnd', 'onLeaveEnd'].forEach(eventName => {
+    ['onAppearEnd', 'onEnterEnd', 'onLeaveEnd'].forEach((eventName) => {
       const originHandler: MotionEndEventHandler = motion[eventName];
       motion[eventName] = (element, event) => {
         goNextStatus();
@@ -143,7 +144,7 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
     });
 
     function onShowPrepare() {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         prepareResolveRef.current = resolve;
       });
     }

src/Popup/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
-import { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from 'rc-motion';
 import isMobile from 'rc-util/lib/isMobile';
-import {
+import type {
   StretchType,
   AlignType,
   TransitionNameType,
@@ -11,7 +11,8 @@ import {
   MobileConfig,
 } from '../interface';
 import Mask from './Mask';
-import PopupInner, { PopupInnerRef } from './PopupInner';
+import type { PopupInnerRef } from './PopupInner';
+import PopupInner from './PopupInner';
 import MobilePopupInner from './MobilePopupInner';
 
 export interface PopupProps {
@@ -61,7 +62,7 @@ const Popup = React.forwardRef<PopupInnerRef, PopupProps>(
       if (visible && mobile) {
         setInMobile(isMobile());
       }
-    }, [visible, !!mobile]);
+    }, [visible, mobile]);
 
     const popupNode: React.ReactNode = inMobile ? (
       <MobilePopupInner {...cloneProps} mobile={mobile} ref={ref} />