Upgrade rc-trigger to 4.0 (#170)

* 🆙 upgrade rc-trigger and remove polyfill

* 🔧 use father over rc-tools

* ✅ fix test cases

* 🚮 remove prop-types and findDOMNode

* ✅ improve eslint rules

Author: afc163

.circleci/config.yml

@@ -0,0 +1,37 @@
+version: 2
+jobs:
+  lint:
+    docker:
+      - image: circleci/node:latest
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+      - run: npm install
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+      - run: npm run lint
+  test:
+    docker:
+      - image: circleci/node:latest
+    working_directory: ~/repo
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+      - run: npm install
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+      - run: npm test -- --coverage
+workflows:
+  version: 2
+  build_and_test:
+    jobs:
+      - lint
+      - test

.eslintrc.js

@@ -0,0 +1 @@
+module.exports= require('@umijs/fabric/dist/eslint');

.fatherrc.js

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

.gitignore

@@ -21,11 +21,19 @@ Thumbs.db
 node_modules
 .cache
 dist
-*.css
+assets/**/*.css
 build
 lib
-es
 coverage
-npm-debug.log.*
+.vscode
 yarn.lock
+es/
 package-lock.json
+src/*.js
+src/*.map
+.prettierrc
+tslint.json
+tsconfig.test.json
+.prettierignore
+.storybook
+storybook/index.js

README.md

@@ -1,20 +1,24 @@
 # TimePicker
 
-React TimePicker
+React Time Picker Control.
 
 [![NPM version][npm-image]][npm-url]
-[![build status][travis-image]][travis-url]
-[![Test coverage][codecov-image]][codecov-url]
+[![build status][circleci-image]][circleci-url]
+[![Test coverage][coveralls-image]][coveralls-url]
 [![Dependencies](https://img.shields.io/david/react-component/time-picker.svg?style=flat-square)](https://david-dm.org/react-component/time-picker)
 [![DevDependencies](https://img.shields.io/david/dev/react-component/time-picker.svg?style=flat-square)](https://david-dm.org/react-component/time-picker?type=dev)
 [![npm download][download-image]][download-url]
+[![Storybook](https://gw.alipayobjects.com/mdn/ob_info/afts/img/A*CQXNTZfK1vwAAAAAAAAAAABjAQAAAQ/original)](https://github.com/react-component/time-picker)
 
+[Storybook]: https://github.com/storybooks/press/blob/master/badges/storybook.svg
 [npm-image]: http://img.shields.io/npm/v/rc-time-picker.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-time-picker
-[travis-image]: https://img.shields.io/travis/react-component/time-picker.svg?style=flat-square
-[travis-url]: https://travis-ci.org/react-component/time-picker
-[codecov-image]: https://codecov.io/gh/react-component/time-picker/branch/master/graph/badge.svg
-[codecov-url]: https://codecov.io/gh/react-component/time-picker
+[circleci-image]: https://img.shields.io/circleci/react-component/time-picker.svg?style=flat-square
+[circleci-url]: https://circleci.com/gh/react-component/time-picker
+[coveralls-image]: https://img.shields.io/coveralls/react-component/time-picker.svg?style=flat-square
+[coveralls-url]: https://coveralls.io/r/react-component/time-picker?branch=maste
+[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
+[node-url]: http://nodejs.org/download/
 [download-image]: https://img.shields.io/npm/dm/rc-time-picker.svg?style=flat-square
 [download-url]: https://npmjs.org/package/rc-time-picker
 
@@ -70,8 +74,8 @@ API
 | disabledSeconds         | Function                          | - | disabled second options |
 | use12Hours              | Boolean                           | false | 12 hours display mode |
 | hideDisabledOptions     | Boolean                           | false | whether hide disabled options |
-| onChange                | Function                          | null | called when select a different value |
-| onAmPmChange            | Function                          | null | called when select an am/pm value |
+| onChange                | Function                          | null | called when time-picker a different value |
+| onAmPmChange            | Function                          | null | called when time-picker an am/pm value |
 | addon                   | Function                          | - | called from timepicker panel to render some addon to its bottom, like an OK button. Receives panel instance as parameter, to be able to close it like `panel.close()`.|
 | placement               | String                            | bottomLeft | one of ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
 | transitionName          | String                            | ''  |  |
@@ -83,14 +87,13 @@ API
 | secondStep              | Number                            | 1 | interval between seconds in picker  |
 | focusOnOpen             | Boolean                           | false | automatically focus the input when the picker opens |
 | inputReadOnly             | Boolean                           | false | set input to read only |
-| inputIcon             | ReactNode                           |  | specific the select icon. |
+| inputIcon             | ReactNode                           |  | specific the time-picker icon. |
 | clearIcon             | ReactNode                           |  | specific the clear icon. |
 
 ## Test Case
 
 ```
 npm test
-npm run chrome-test
 ```
 
 ## Coverage

examples/12hours.html

@@ -1,22 +1,20 @@
 /* eslint no-console:0 */
 
-import 'rc-time-picker/assets/index.less';
-
+import '../assets/index.less';
 import React from 'react';
-import ReactDom from 'react-dom';
-
 import moment from 'moment';
-
-import TimePicker from 'rc-time-picker';
+import TimePicker from '..';
 
 const showSecond = true;
 const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
 
-const now = moment().hour(14).minute(30);
+const now = moment()
+  .hour(14)
+  .minute(30);
 
 function generateOptions(length, excludedOptions) {
   const arr = [];
-  for (let value = 0; value < length; value++) {
+  for (let value = 0; value < length; value += 1) {
     if (excludedOptions.indexOf(value) < 0) {
       arr.push(value);
     }
@@ -44,17 +42,13 @@ function disabledMinutes(h) {
 }
 
 function disabledSeconds(h, m) {
-  return [h + m % 60];
+  return [h + (m % 60)];
 }
 
-ReactDom.render(
-  <div>
+const App = () => (
+  <>
     <h3>Disabled picker</h3>
-    <TimePicker
-      defaultValue={now}
-      disabled
-      onChange={onChange}
-    />
+    <TimePicker defaultValue={now} disabled onChange={onChange} />
     <h3>Disabled options</h3>
     <TimePicker
       showSecond={showSecond}
@@ -65,5 +59,7 @@ ReactDom.render(
       disabledMinutes={disabledMinutes}
       disabledSeconds={disabledSeconds}
     />
-  </div>
-, document.getElementById('__react-content'));
+  </>
+);
+
+export default App;

examples/disabled.html

@@ -1,17 +1,18 @@
-import 'rc-time-picker/assets/index.less';
+import '../assets/index.less';
 import React from 'react';
-import ReactDom from 'react-dom';
 import moment from 'moment';
-import TimePicker from 'rc-time-picker';
+import TimePicker from '..';
 
-ReactDom.render(
-  <div>
+const App = () => (
+  <>
     <TimePicker defaultValue={moment()} showHour={false} />
     <TimePicker defaultValue={moment()} showMinute={false} />
     <TimePicker defaultValue={moment()} showSecond={false} />
 
     <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
-    <TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
+    <TimePicker defaultValue={moment()} showHour={false} showSecond={false} />
     <TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
-  </div>
-, document.getElementById('__react-content'));
+  </>
+);
+
+export default App;

examples/disabled.js

@@ -1,13 +1,8 @@
 /* eslint no-console:0 */
-
-import 'rc-time-picker/assets/index.less';
-
+import '../assets/index.less';
 import React from 'react';
-import ReactDom from 'react-dom';
-
 import moment from 'moment';
-
-import TimePicker from 'rc-time-picker';
+import TimePicker from '..';
 
 const showSecond = true;
 const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
@@ -16,7 +11,7 @@ function onChange(value) {
   console.log(value && value.format(str));
 }
 
-ReactDom.render(
+const App = () => (
   <TimePicker
     format={str}
     showSecond={showSecond}
@@ -27,6 +22,7 @@ ReactDom.render(
     disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
     disabledMinutes={() => [0, 2, 4, 6, 8]}
     hideDisabledOptions
-  />,
-  document.getElementById('__react-content')
+  />
 );
+
+export default App;

examples/format.html

@@ -1,10 +1,8 @@
 /* eslint no-console:0 */
-
-import 'rc-time-picker/assets/index.less';
+import '../assets/index.less';
 import React from 'react';
-import ReactDom from 'react-dom';
-import TimePicker from 'rc-time-picker';
 import moment from 'moment';
+import TimePicker from '..';
 
 const iconStyle = {
   position: 'absolute',
@@ -51,32 +49,30 @@ class App extends React.Component {
     useIcon: false,
   };
 
-  getIcon = (path, style = {}) => {
-    return (
-      <i
-        style={{
-          fontSize: '12px',
-          fontStyle: 'normal',
-          color: '#aaa',
-          display: 'inline-block',
-          lineHeight: '1',
-          width: '20px',
-          transition: 'color 0.3s ease',
-          ...style,
-        }}
+  getIcon = (path, style = {}) => (
+    <i
+      style={{
+        fontSize: '12px',
+        fontStyle: 'normal',
+        color: '#aaa',
+        display: 'inline-block',
+        lineHeight: '1',
+        width: '20px',
+        transition: 'color 0.3s ease',
+        ...style,
+      }}
+    >
+      <svg
+        viewBox="0 0 1024 1024"
+        width="1em"
+        height="1em"
+        fill="currentColor"
+        style={{ verticalAlign: '-.125em' }}
       >
-        <svg
-          viewBox="0 0 1024 1024"
-          width="1em"
-          height="1em"
-          fill="currentColor"
-          style={{ verticalAlign: '-.125em' }}
-        >
-          <path d={path} p-id="5827" />
-        </svg>
-      </i>
-    );
-  };
+        <path d={path} p-id="5827" />
+      </svg>
+    </i>
+  );
 
   setOpen = ({ open }) => {
     this.setState({ open });
@@ -125,4 +121,4 @@ class App extends React.Component {
   }
 }
 
-ReactDom.render(<App />, document.getElementById('__react-content'));
+export default App;

examples/format.js

@@ -1,29 +1,24 @@
 /* eslint no-console:0 */
-
-import 'rc-time-picker/assets/index.less';
-
+import '../assets/index.less';
 import React from 'react';
-import ReactDom from 'react-dom';
-
 import moment from 'moment';
-
-import TimePicker from 'rc-time-picker';
+import TimePicker from '..';
 
 const showSecond = true;
 const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
 
-
 function onChange(value) {
   console.log(value && value.format(str));
 }
 
-ReactDom.render(
+const App = () => (
   <TimePicker
     style={{ width: 100 }}
     showSecond={showSecond}
     defaultValue={moment()}
     className="xxx"
     onChange={onChange}
-  />,
-  document.getElementById('__react-content')
+  />
 );
+
+export default App;

examples/hidden.html

@@ -1,10 +1,8 @@
-import 'rc-time-picker/assets/index.less';
-
+import '../assets/index.less';
 import React from 'react';
-import ReactDom from 'react-dom';
 import moment from 'moment';
-import TimePicker from 'rc-time-picker';
+import TimePicker from '..';
+
+const App = () => <TimePicker defaultValue={moment()} showSecond={false} minuteStep={15} />;
 
-ReactDom.render(
-  <TimePicker defaultValue={moment()} showSecond={false} minuteStep={15} />
-, document.getElementById('__react-content'));
+export default App;