Merge pull request #473 from Yoctol/refactor/date-picker-date-fns

.eslintrc.js

@@ -23,6 +23,9 @@ module.exports = {
     jasmine: true,
   },
   rules: {
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
+
     'react/jsx-filename-extension': 'off',
     'react/prop-types': 'off',
     'react/sort-comp': 'off',

package.json

@@ -17,7 +17,7 @@
   ],
   "scripts": {
     "bootstrap": "npx lerna bootstrap",
-    "build": "yarn type-check && lerna run build",
+    "build": "yarn type-check && lerna run build --ignore=tailor-ui-website",
     "clean": "yarn clean:lib && npx lerna clean",
     "clean:lib": "rimraf packages/**/{lib,*.tsbuildinfo}",
     "docs:build": "yarn workspace tailor-ui-website build",

packages/tailor-ui/.size-snapshot.json

@@ -5,8 +5,8 @@
     "gzipped": 135785
   },
   "index.cjs.js": {
-    "bundled": 466594,
-    "minified": 308174,
-    "gzipped": 136244
+    "bundled": 466417,
+    "minified": 314690,
+    "gzipped": 136086
   }
 }

packages/tailor-ui/package.json

@@ -34,13 +34,14 @@
     "@tailor-ui/hooks": "^0.7.0",
     "@tailor-ui/theme": "^0.4.8",
     "@tailor-ui/utils": "^0.3.6",
+    "date-fns": "^2.16.1",
     "downshift": "3.2.12",
     "fuzzaldrin-plus": "^0.6.0",
-    "moment": "^2.27.0",
     "polished": "^3.6.6",
     "prop-types": "^15.7.1",
     "ramda": "^0.27.1",
     "rc-calendar": "^9.15.11",
+    "rc-picker": "^2.2.1",
     "rc-time-picker": "^3.7.3",
     "react-autosize-textarea": "^7.0.0",
     "react-dropzone": "11.0.3",

packages/tailor-ui/src/DatePicker/DatePicker.tsx

@@ -1,204 +1,23 @@
-import RcCalendar from 'rc-calendar';
-import RcRangeCalendar from 'rc-calendar/lib/RangeCalendar';
-import React, { FC, useCallback, useMemo, useState } from 'react';
-import TimePickerPanel from 'rc-time-picker/lib/Panel';
-import { Moment } from 'moment';
+import Picker from 'rc-picker';
+import React, { FC } from 'react';
+import { PickerDateProps } from 'rc-picker/lib/Picker';
 
-import { useOwnValue } from '@tailor-ui/hooks';
+import useSharedProps from './hooks/useSharedProps';
+import { DatePickerStyle } from './styles';
 
-import { InputProps } from '../Input';
-import { Popover } from '../Popover';
-import { Position } from '../constants';
-import { useLocale } from '../locale';
+export type DatePickerProps = Omit<
+  PickerDateProps<Date>,
+  'generateConfig' | 'locale' | 'prefixCls' | 'picker'
+>;
 
-import DatePickerInput from './DatePickerInput';
-import DatePickerStyle from './styles';
-import DatePresets, { Presets } from './DatePresets';
-
-export interface DatePickerProps {
-  clearable?: boolean;
-  range?: boolean;
-  presets?: Presets;
-  width?: string | number;
-  /**
-   * to set date
-   */
-  value?: Moment | Moment[];
-  /**
-   * to set default date, if start time or end time is null or undefined, the date range will be an open interval
-   */
-  defaultValue?: Moment | Moment[];
-  /**
-   * The props of datepicker input
-   */
-  inputProps?: InputProps;
-  /**
-   * a callback function, can be executed when the selected time is changing
-   */
-  onChange?: (date: Moment | Moment[] | null) => void;
-  /**
-   * to provide an additional time selection
-   */
-  showTime?: boolean;
-  /**
-   * Whether show second
-   */
-  showSecond?: boolean;
-  /**
-   * Interval between minutes in picker
-   */
-  minuteStep?: number;
-  /**
-   * to set the date format, refer to moment.js
-   */
-  format?: string;
-  /**
-   * specify the date that cannot be selected
-   */
-  disabledDate?: (current: Moment) => boolean;
-  /**
-   * to specify the time that cannot be selected
-   */
-  disabledTime?: (current: Moment, type: 'start' | 'end') => boolean;
-  /**
-   * placeholder of date input
-   */
-  placeholder?: string;
-}
-
-const DatePicker: FC<DatePickerProps> = ({
-  defaultValue,
-  value,
-  onChange,
-  showTime = false,
-  range = false,
-  width = range ? '380px' : '240px',
-  clearable = false,
-  showSecond,
-  minuteStep,
-  format: formatFromProps,
-  disabledDate,
-  disabledTime,
-  placeholder,
-  inputProps = {},
-  presets,
-  ...props
-}) => {
-  const { locale } = useLocale();
-  const [ownValue, handleOwnValueChange] = useOwnValue(
-    {
-      value,
-      defaultValue,
-      onChange,
-    },
-    {
-      fallbackValue: range ? [] : null,
-    }
-  );
-
-  const [displayDate, setDisplayDate] = useState(ownValue);
-
-  const handleChange = useCallback(
-    (newValue) => {
-      handleOwnValueChange(newValue);
-      setDisplayDate(newValue);
-    },
-    [handleOwnValueChange]
-  );
-
-  const format = useMemo(
-    () =>
-      formatFromProps ||
-      `YYYY-MM-DD${showTime ? ' HH:mm' : ''}${
-        showTime && showSecond ? ':ss' : ''
-      }`,
-    [formatFromProps, showSecond, showTime]
-  );
-
-  const RenderCalendar = useMemo(() => (range ? RcRangeCalendar : RcCalendar), [
-    range,
-  ]);
-
-  const handleClear = useCallback(() => handleChange(range ? [] : null), [
-    handleChange,
-    range,
-  ]);
-
-  const valueProps = range
-    ? {
-        selectedValue: displayDate,
-      }
-    : {
-        value: displayDate,
-        selectedValue: displayDate,
-      };
-
-  const displayValue = useMemo(() => {
-    if (!ownValue) {
-      return '';
-    }
-
-    if (Array.isArray(ownValue)) {
-      return ownValue.map((val) => val.format(format)).join(' ~ ');
-    }
-
-    return ownValue.format(format);
-  }, [format, ownValue]);
+const DatePicker: FC<DatePickerProps> = (props) => {
+  const sharedProps = useSharedProps(props);
 
   return (
-    <Popover
-      position={Position.BOTTOM_LEFT}
-      p="0"
-      content={(handleClose) => (
-        <>
-          <DatePickerStyle />
-          <RenderCalendar
-            showWeekNumber={false}
-            showDateInput={false}
-            showOk={showTime}
-            format={format}
-            disabledDate={disabledDate}
-            disabledTime={disabledTime}
-            locale={locale.DatePicker}
-            onOk={handleClose}
-            timePicker={
-              showTime ? (
-                <TimePickerPanel
-                  minuteStep={minuteStep}
-                  showSecond={showSecond}
-                />
-              ) : null
-            }
-            renderSidebar={() => (
-              <DatePresets
-                key="sidebar"
-                presets={presets}
-                onDateClick={handleChange}
-              />
-            )}
-            {...props}
-            {...valueProps}
-            onChange={setDisplayDate}
-            onSelect={(newValue: Moment | Moment[]) => {
-              handleChange(newValue);
-
-              if (!showTime) {
-                handleClose();
-              }
-            }}
-          />
-        </>
-      )}
-    >
-      <DatePickerInput
-        width={width}
-        value={displayValue}
-        inputProps={inputProps}
-        clearable={clearable}
-        placeholder={placeholder}
-        handleClear={handleClear}
-      />
-    </Popover>
+    <>
+      <DatePickerStyle />
+      <Picker<Date> {...sharedProps} />
+    </>
   );
 };