feat: add Picker

.eslintrc.js

@@ -13,5 +13,7 @@ module.exports = {
     'jsx-a11y/label-has-for': 0,
     'react/sort-comp': 0,
     'react/prefer-stateless-function': 0,
+    '@typescript-eslint/consistent-type-imports': 0,
+    '@typescript-eslint/consistent-type-definitions': 0,
   },
 };

.gitignore

@@ -19,6 +19,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 yarn.lock
+package-lock.json
 
 # IDE
 /.idea

.prettierrc

@@ -3,5 +3,6 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "arrowParens": "avoid"
 }

assets/index.less

@@ -1,2 +1,4 @@
 @import '../lib/form/style/index.less';
 @import '../lib/mention/style/index.less';
+@import '../lib/date-picker/style/index.less';
+@import '../lib/time-picker/style/index.less';

examples/date-picker.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import DatePicker from '../src/date-picker';
+import 'antd/dist/antd.css';
+import '../assets/index.css';
+
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+export default function Demo() {
+  function onChange(date, dateString) {
+    console.log(date, dateString);
+  }
+  return (
+    <div>
+      <DatePicker onChange={onChange} />
+      <br />
+      <DatePicker onChange={onChange} showTime />
+      <br />
+      <MonthPicker onChange={onChange} placeholder="Select month" />
+      <br />
+      <RangePicker onChange={onChange} />
+      <br />
+      <WeekPicker onChange={onChange} placeholder="Select week" />
+    </div>
+  );
+}

examples/time-picker.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import moment from 'moment';
+import TimePicker from '../src/time-picker';
+import 'antd/dist/antd.css';
+import '../assets/index.css';
+
+export default function Demo() {
+  function onChange(time, timeString) {
+    console.log(time, timeString);
+  }
+  return (
+    <div>
+      <TimePicker
+        onChange={onChange}
+        defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+      />
+    </div>
+  );
+}

package.json

@@ -39,11 +39,16 @@
     "classnames": "^2.2.6",
     "lodash.camelcase": "^4.3.0",
     "lodash.upperfirst": "^4.3.1",
+    "moment": "^2.29.1",
     "omit.js": "^1.0.2",
     "rc-animate": "^2.10.2",
+    "rc-calendar": "^9.15.11",
     "rc-editor-mention": "^1.1.13",
     "rc-form": "^2.4.10",
-    "rc-util": "^4.10.0"
+    "rc-time-picker": "^3.7.3",
+    "rc-util": "^4.10.0",
+    "react-lifecycles-compat": "^3.0.4",
+    "shallowequal": "^1.1.0"
   },
   "peerDependencies": {
     "antd": ">=3.0.0",
@@ -54,6 +59,7 @@
     "@types/jest": "^25.2.2",
     "@types/lodash": "^4.14.137",
     "@types/react": "^16.9.2",
+    "@umijs/fabric": "^2.4.11",
     "antd": "^4.0.4",
     "cross-env": "^5.2.0",
     "enzyme": "^3.10.0",
@@ -62,6 +68,6 @@
     "father": "^2.14.0",
     "less": "^3.10.3",
     "np": "^5.0.3",
-    "typescript": "^3.3.3"
+    "typescript": "^4.1.3"
   }
 }

src/CompatibleConsumer.tsx

@@ -4,6 +4,6 @@ import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider';
 export { ConfigConsumerProps };
 
 const MergedConfigConsumer =
-  ConfigProvider?.ConfigContext?.Consumer || ConfigConsumer;
+  (ConfigProvider as any)?.ConfigContext?.Consumer || ConfigConsumer;
 
 export default MergedConfigConsumer;

src/_util/getDataOrAriaProps.ts

@@ -0,0 +1,14 @@
+export default function getDataOrAriaProps(props: any) {
+  return Object.keys(props).reduce((prev: any, key: string) => {
+    if (
+      (key.substr(0, 5) === 'data-' ||
+        key.substr(0, 5) === 'aria-' ||
+        key === 'role') &&
+      key.substr(0, 7) !== 'data-__'
+    ) {
+      // eslint-disable-next-line no-param-reassign
+      prev[key] = props[key];
+    }
+    return prev;
+  }, {});
+}

src/_util/interopDefault.ts

@@ -0,0 +1,5 @@
+// https://github.com/moment/moment/issues/3650
+// since we are using ts 3.5.1, it should be safe to remove.
+export default function interopDefault(m: any) {
+  return m.default || m;
+}

src/_util/type.ts

@@ -0,0 +1,5 @@
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
+export const tuple = <T extends string[]>(...args: T) => args;
+
+export const tupleNum = <T extends number[]>(...args: T) => args;

src/date-picker/InputIcon.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Icon from '../icon';
+
+export default function InputIcon(props: {
+  suffixIcon: React.ReactNode;
+  prefixCls: string;
+}) {
+  const { suffixIcon, prefixCls } = props;
+  return (
+    (suffixIcon &&
+      (React.isValidElement<{ className?: string }>(suffixIcon) ? (
+        React.cloneElement(suffixIcon, {
+          className: classNames({
+            [suffixIcon.props.className!]: suffixIcon.props.className,
+            [`${prefixCls}-picker-icon`]: true,
+          }),
+        })
+      ) : (
+        <span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
+      ))) || <Icon type="calendar" className={`${prefixCls}-picker-icon`} />
+  );
+}