fix: 修复 Proptype 的错误, 优化开发体验 (#73)

* fix: 修复 Proptype 的错误, 优化开发体验

* fix: ci with node 10

Author: doxiaodong

.npmrc

@@ -0,0 +1 @@
+package-lock=false

.travis.yml

@@ -7,7 +7,7 @@ notifications:
   - [email protected]
 
 node_js:
-- 6
+- 10
 
 before_install:
 - |
@@ -29,4 +29,4 @@ env:
   matrix:
   - TEST_TYPE=lint
   - TEST_TYPE=test
-  - TEST_TYPE=coverage
+  - TEST_TYPE=coverage

examples/base.js

@@ -1,7 +1,7 @@
 import '../assets/index.less';
 import PullToRefresh from '../src';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
 class App extends React.Component {
   state = {

examples/base1.js

@@ -1,7 +1,7 @@
 import '../assets/index.less';
 import PullToRefresh from '../src';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
 class Lv extends React.Component {
   componentDidMount() {

package.json

@@ -38,12 +38,14 @@
     "prepublishOnly": "rc-tools run guard",
     "pub": "rc-tools run pub --babel-runtime",
     "lint": "rc-tools run lint --no-js-lint",
-    "test": "jest",
-    "coverage": "jest --coverage"
+    "test": "tsc && jest",
+    "coverage": "npm run test -- --coverage"
   },
   "jest": {
+    "setupFiles": [
+      "./tests/setup.js"
+    ],
     "testMatch": [
-      "**/__tests__/**/*.ts?(x)",
       "**/?(*.)(spec|test).ts?(x)"
     ],
     "coverageDirectory": "./coverage/",
@@ -65,21 +67,19 @@
     "classnames": "^2.2.5"
   },
   "devDependencies": {
-    "@types/classnames": "^2.2.3",
-    "@types/enzyme": "^2.8.6",
-    "@types/enzyme-to-json": "^1.5.0",
-    "@types/jest": "^20.0.7",
-    "@types/react": "^15.0.27",
-    "@types/react-dom": "^15.5.0",
+    "@types/classnames": "^2.2.7",
+    "@types/enzyme": "^3.9.0",
+    "@types/jest": "^24.0.11",
+    "@types/react": "^16.8.8",
+    "@types/react-dom": "^16.8.2",
     "coveralls": "^2.13.1",
-    "enzyme": "^2.9.1",
-    "enzyme-to-json": "^1.5.1",
-    "jest": "^20.0.4",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.11.2",
+    "jest": "^24.5.0",
     "pre-commit": "1.x",
-    "rc-tools": "6.x",
+    "rc-tools": "9.x",
     "react": "16.x",
-    "react-dom": "16.x",
-    "react-test-renderer": "^15.5.0"
+    "react-dom": "16.x"
   },
   "pre-commit": [
     "lint"

src/PropsType.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export interface Indicator {
   activate?: React.ReactNode;
@@ -7,15 +7,15 @@ export interface Indicator {
   finish?: React.ReactNode;
 }
 
-export interface PropsType {
-  getScrollContainer: () => React.ReactNode;
-  direction: 'down' | 'up';
-  refreshing?: boolean;
-  distanceToRefresh: number;
+export interface IPropsType {
   onRefresh: () => void;
-  indicator: Indicator;
+  getScrollContainer?: () => React.ReactNode;
+  direction?: 'down' | 'up';
+  refreshing?: boolean;
+  distanceToRefresh?: number;
+  indicator?: Indicator;
   prefixCls?: string;
   className?: string;
+  damping?: number;
   style?: React.CSSProperties;
-  damping: number;
 }

src/PullToRefresh.tsx

@@ -1,15 +1,7 @@
-import React from 'react';
 import classNames from 'classnames';
-import { PropsType, Indicator } from './PropsType';
-
-class StaticRenderer extends React.Component<any, any> {
-  shouldComponentUpdate(nextProps: any) {
-    return nextProps.shouldUpdate;
-  }
-  render() {
-    return <div>{this.props.render()}</div>;
-  }
-}
+import * as React from 'react';
+import { IPropsType } from './PropsType';
+import StaticRenderer from './StaticRenderer';
 
 function setTransform(nodeStyle: any, value: any) {
   nodeStyle.transform = value;
@@ -37,20 +29,27 @@ try {
 const willPreventDefault = supportsPassive ? { passive: false } : false;
 // const willNotPreventDefault = supportsPassive ? { passive: true } : false;
 
-export default class PullToRefresh extends React.Component<PropsType, any> {
+type ICurrSt = 'activate' | 'deactivate' | 'release' | 'finish';
+
+interface IState {
+  currSt: ICurrSt;
+  dragOnEdge: boolean;
+}
+
+export default class PullToRefresh extends React.Component<IPropsType, IState> {
   static defaultProps = {
     prefixCls: 'rmc-pull-to-refresh',
     getScrollContainer: () => undefined,
     direction: DOWN,
     distanceToRefresh: 25,
     damping: 100,
-    indicator: INDICATOR as Indicator,
-  } as PropsType;
+    indicator: INDICATOR,
+  };
 
   // https://github.com/yiminghe/zscroller/blob/2d97973287135745818a0537712235a39a6a62a1/src/Scroller.js#L355
   // currSt: `activate` / `deactivate` / `release` / `finish`
   state = {
-    currSt: 'deactivate',
+    currSt: 'deactivate' as ICurrSt,
     dragOnEdge: false,
   };
 
@@ -163,6 +162,8 @@ export default class PullToRefresh extends React.Component<PropsType, any> {
     if (direction === DOWN) {
       return ele.scrollTop <= 0;
     }
+    // 补全 branch, test 才过的了，但是实际上代码永远不会走到这里，这里为了保证代码的一致性，返回 undefined
+    return undefined;
   }
 
   damping = (dy: number): number => {
@@ -263,7 +264,7 @@ export default class PullToRefresh extends React.Component<PropsType, any> {
 
     const {
       className, prefixCls, children, getScrollContainer,
-      direction, onRefresh, refreshing, indicator, distanceToRefresh, ...restProps,
+      direction, onRefresh, refreshing, indicator, distanceToRefresh, ...restProps
     } = props;
 
     const renderChildren = <StaticRenderer
@@ -276,7 +277,7 @@ export default class PullToRefresh extends React.Component<PropsType, any> {
           <div className={cla} ref={el => this.contentRef = el}>
             {direction === UP ? renderChildren : null}
             <div className={`${prefixCls}-indicator`}>
-              {(indicator as any)[this.state.currSt] || (INDICATOR as any)[this.state.currSt]}
+              {indicator[this.state.currSt] || INDICATOR[this.state.currSt]}
             </div>
             {direction === DOWN ? renderChildren : null}
           </div>

src/StaticRenderer.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export default class StaticRenderer extends React.Component<any, any> {
+  shouldComponentUpdate(nextProps: any) {
+    return nextProps.shouldUpdate;
+  }
+  render() {
+    return <div>{this.props.render()}</div>;
+  }
+}

tests/PullToRefresh.spec.js

@@ -0,0 +1,38 @@
+import { render } from 'enzyme';
+import * as React from 'react';
+import PullToRefresh from '../src';
+
+describe('basic', () => {
+  it('base.', () => {
+    const wrapper = render(
+      <PullToRefresh
+        onRefresh={() => null}
+      >
+        <div style={{ height: 50 }}>Item 1</div>
+      </PullToRefresh>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('all props', () => {
+    const noop = () => null;
+    const style = { width: 100 };
+
+    const wrapper = render(
+      <PullToRefresh
+        onRefresh={noop}
+        getScrollContainer={noop}
+        direction="up"
+        refreshing={false}
+        distanceToRefresh={1}
+        indicator={{}}
+        prefixCls="rmc"
+        className="rmc"
+        damping={2}
+        style={style}
+      >
+        <span>111</span>
+      </PullToRefresh>
+    );
+    expect(wrapper).toMatchSnapshot();
+  })
+});