@rc-component/picker 1.0.0

package/es/generate/moment.js

@@ -0,0 +1,152 @@
+import moment from 'moment';
+import { noteOnce } from "@rc-component/util/es/warning";
+var generateConfig = {
+  // get
+  getNow: function getNow() {
+    return moment();
+  },
+  getFixedDate: function getFixedDate(string) {
+    return moment(string, 'YYYY-MM-DD');
+  },
+  getEndDate: function getEndDate(date) {
+    var clone = date.clone();
+    return clone.endOf('month');
+  },
+  getWeekDay: function getWeekDay(date) {
+    var clone = date.clone().locale('en_US');
+    return clone.weekday() + clone.localeData().firstDayOfWeek();
+  },
+  getYear: function getYear(date) {
+    return date.year();
+  },
+  getMonth: function getMonth(date) {
+    return date.month();
+  },
+  getDate: function getDate(date) {
+    return date.date();
+  },
+  getHour: function getHour(date) {
+    return date.hour();
+  },
+  getMinute: function getMinute(date) {
+    return date.minute();
+  },
+  getSecond: function getSecond(date) {
+    return date.second();
+  },
+  getMillisecond: function getMillisecond(date) {
+    return date.millisecond();
+  },
+  // set
+  addYear: function addYear(date, diff) {
+    var clone = date.clone();
+    return clone.add(diff, 'year');
+  },
+  addMonth: function addMonth(date, diff) {
+    var clone = date.clone();
+    return clone.add(diff, 'month');
+  },
+  addDate: function addDate(date, diff) {
+    var clone = date.clone();
+    return clone.add(diff, 'day');
+  },
+  setYear: function setYear(date, year) {
+    var clone = date.clone();
+    return clone.year(year);
+  },
+  setMonth: function setMonth(date, month) {
+    var clone = date.clone();
+    return clone.month(month);
+  },
+  setDate: function setDate(date, num) {
+    var clone = date.clone();
+    return clone.date(num);
+  },
+  setHour: function setHour(date, hour) {
+    var clone = date.clone();
+    return clone.hour(hour);
+  },
+  setMinute: function setMinute(date, minute) {
+    var clone = date.clone();
+    return clone.minute(minute);
+  },
+  setSecond: function setSecond(date, second) {
+    var clone = date.clone();
+    return clone.second(second);
+  },
+  setMillisecond: function setMillisecond(date, millisecond) {
+    var clone = date.clone();
+    return clone.millisecond(millisecond);
+  },
+  // Compare
+  isAfter: function isAfter(date1, date2) {
+    return date1.isAfter(date2);
+  },
+  isValidate: function isValidate(date) {
+    return date.isValid();
+  },
+  locale: {
+    getWeekFirstDay: function getWeekFirstDay(locale) {
+      var date = moment().locale(locale);
+      return date.localeData().firstDayOfWeek();
+    },
+    getWeekFirstDate: function getWeekFirstDate(locale, date) {
+      var clone = date.clone();
+      var result = clone.locale(locale);
+      return result.weekday(0);
+    },
+    getWeek: function getWeek(locale, date) {
+      var clone = date.clone();
+      var result = clone.locale(locale);
+      return result.week();
+    },
+    getShortWeekDays: function getShortWeekDays(locale) {
+      var date = moment().locale(locale);
+      return date.localeData().weekdaysMin();
+    },
+    getShortMonths: function getShortMonths(locale) {
+      var date = moment().locale(locale);
+      return date.localeData().monthsShort();
+    },
+    format: function format(locale, date, _format) {
+      var clone = date.clone();
+      var result = clone.locale(locale);
+      return result.format(_format);
+    },
+    parse: function parse(locale, text, formats) {
+      var fallbackFormatList = [];
+      for (var i = 0; i < formats.length; i += 1) {
+        var format = formats[i];
+        var formatText = text;
+        if (format.includes('wo') || format.includes('Wo')) {
+          format = format.replace(/wo/g, 'w').replace(/Wo/g, 'W');
+          var matchFormat = format.match(/[-YyMmDdHhSsWwGg]+/g);
+          var matchText = formatText.match(/[-\d]+/g);
+          if (matchFormat && matchText) {
+            format = matchFormat.join('');
+            formatText = matchText.join('');
+          } else {
+            fallbackFormatList.push(format.replace(/o/g, ''));
+          }
+        }
+        var date = moment(formatText, format, locale, true);
+        if (date.isValid()) {
+          return date;
+        }
+      }
+
+      // Fallback to fuzzy matching, this should always not reach match or need fire a issue
+      for (var _i = 0; _i < fallbackFormatList.length; _i += 1) {
+        var _date = moment(text, fallbackFormatList[_i], locale, false);
+
+        /* istanbul ignore next */
+        if (_date.isValid()) {
+          noteOnce(false, 'Not match any format strictly and fallback to fuzzy match. Please help to fire a issue about this.');
+          return _date;
+        }
+      }
+      return null;
+    }
+  }
+};
+export default generateConfig;

package/es/hooks/useLocale.d.ts

@@ -0,0 +1,6 @@
+import type { Locale, SharedTimeProps } from '../interface';
+export declare function fillTimeFormat(showHour: boolean, showMinute: boolean, showSecond: boolean, showMillisecond: boolean, showMeridiem: boolean): string;
+/**
+ * Fill locale format as start up
+ */
+export default function useLocale<DateType extends object>(locale: Locale, showProps: Pick<SharedTimeProps<DateType>, 'showHour' | 'showMinute' | 'showSecond' | 'showMillisecond' | 'use12Hours'>): Locale;

package/es/hooks/useLocale.js

@@ -0,0 +1,82 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+export function fillTimeFormat(showHour, showMinute, showSecond, showMillisecond, showMeridiem) {
+  var timeFormat = '';
+
+  // Base HH:mm:ss
+  var cells = [];
+  if (showHour) {
+    cells.push(showMeridiem ? 'hh' : 'HH');
+  }
+  if (showMinute) {
+    cells.push('mm');
+  }
+  if (showSecond) {
+    cells.push('ss');
+  }
+  timeFormat = cells.join(':');
+
+  // Millisecond
+  if (showMillisecond) {
+    timeFormat += '.SSS';
+  }
+
+  // Meridiem
+  if (showMeridiem) {
+    timeFormat += ' A';
+  }
+  return timeFormat;
+}
+
+/**
+ * Used for `useFilledProps` since it already in the React.useMemo
+ */
+function fillLocale(locale, showHour, showMinute, showSecond, showMillisecond, use12Hours) {
+  // Not fill `monthFormat` since `locale.shortMonths` handle this
+  // Not fill `cellMeridiemFormat` since AM & PM by default
+  var fieldDateTimeFormat = locale.fieldDateTimeFormat,
+    fieldDateFormat = locale.fieldDateFormat,
+    fieldTimeFormat = locale.fieldTimeFormat,
+    fieldMonthFormat = locale.fieldMonthFormat,
+    fieldYearFormat = locale.fieldYearFormat,
+    fieldWeekFormat = locale.fieldWeekFormat,
+    fieldQuarterFormat = locale.fieldQuarterFormat,
+    yearFormat = locale.yearFormat,
+    cellYearFormat = locale.cellYearFormat,
+    cellQuarterFormat = locale.cellQuarterFormat,
+    dayFormat = locale.dayFormat,
+    cellDateFormat = locale.cellDateFormat;
+  var timeFormat = fillTimeFormat(showHour, showMinute, showSecond, showMillisecond, use12Hours);
+  return _objectSpread(_objectSpread({}, locale), {}, {
+    fieldDateTimeFormat: fieldDateTimeFormat || "YYYY-MM-DD ".concat(timeFormat),
+    fieldDateFormat: fieldDateFormat || 'YYYY-MM-DD',
+    fieldTimeFormat: fieldTimeFormat || timeFormat,
+    fieldMonthFormat: fieldMonthFormat || 'YYYY-MM',
+    fieldYearFormat: fieldYearFormat || 'YYYY',
+    fieldWeekFormat: fieldWeekFormat || 'gggg-wo',
+    fieldQuarterFormat: fieldQuarterFormat || 'YYYY-[Q]Q',
+    yearFormat: yearFormat || 'YYYY',
+    cellYearFormat: cellYearFormat || 'YYYY',
+    cellQuarterFormat: cellQuarterFormat || '[Q]Q',
+    cellDateFormat: cellDateFormat || dayFormat || 'D'
+  });
+}
+
+/**
+ * Fill locale format as start up
+ */
+export default function useLocale(locale, showProps) {
+  var showHour = showProps.showHour,
+    showMinute = showProps.showMinute,
+    showSecond = showProps.showSecond,
+    showMillisecond = showProps.showMillisecond,
+    use12Hours = showProps.use12Hours;
+  return React.useMemo(function () {
+    return fillLocale(locale, showHour, showMinute, showSecond, showMillisecond, use12Hours);
+  }, [locale, showHour, showMinute, showSecond, showMillisecond, use12Hours]);
+}

package/es/hooks/useSyncState.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Sync value with state.
+ * This should only used for internal which not affect outside calculation.
+ * Since it's not safe for suspense.
+ */
+export default function useSyncState<T>(defaultValue: T, controlledValue?: T): [getter: (useControlledValueFirst?: boolean) => T, setter: (nextValue: T) => void, value: T];

package/es/hooks/useSyncState.js

@@ -0,0 +1,27 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from 'react';
+
+/**
+ * Sync value with state.
+ * This should only used for internal which not affect outside calculation.
+ * Since it's not safe for suspense.
+ */
+export default function useSyncState(defaultValue, controlledValue) {
+  var valueRef = React.useRef(defaultValue);
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    forceUpdate = _React$useState2[1];
+  var getter = function getter(useControlledValueFirst) {
+    return useControlledValueFirst && controlledValue !== undefined ? controlledValue : valueRef.current;
+  };
+  var setter = function setter(nextValue) {
+    valueRef.current = nextValue;
+    forceUpdate({});
+  };
+  return [getter, setter, getter(true)];
+}

package/es/hooks/useTimeConfig.d.ts

@@ -0,0 +1,18 @@
+import type { InternalMode, Locale, SharedPickerProps, SharedTimeProps } from '../interface';
+export interface ComponentProps<DateType extends object> {
+    picker?: InternalMode;
+    showTime?: boolean | Partial<SharedTimeProps<DateType>>;
+    locale: Locale;
+    format?: SharedPickerProps['format'];
+}
+/**
+ * Get `showHour`, `showMinute`, `showSecond` or other from the props.
+ * This is pure function, will not get `showXXX` from the `format` prop.
+ */
+export declare function getTimeProps<DateType extends object>(componentProps: ComponentProps<DateType>): [
+    showTimeProps: SharedTimeProps<DateType>,
+    showTimePropsForLocale: SharedTimeProps<DateType>,
+    showTimeFormat: string,
+    propFormat: string
+];
+export declare function fillShowTimeConfig<DateType extends object>(picker: InternalMode, showTimeFormat: string, propFormat: string, timeConfig: SharedTimeProps<DateType>, locale: Locale): SharedTimeProps<DateType>;

package/es/hooks/useTimeConfig.js

@@ -0,0 +1,166 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import { getRowFormat, pickProps, toArray } from "../utils/miscUtil";
+import { fillTimeFormat } from "./useLocale";
+function checkShow(format, keywords, show) {
+  return show !== null && show !== void 0 ? show : keywords.some(function (keyword) {
+    return format.includes(keyword);
+  });
+}
+var showTimeKeys = [
+// 'format',
+'showNow', 'showHour', 'showMinute', 'showSecond', 'showMillisecond', 'use12Hours', 'hourStep', 'minuteStep', 'secondStep', 'millisecondStep', 'hideDisabledOptions', 'defaultValue', 'disabledHours', 'disabledMinutes', 'disabledSeconds', 'disabledMilliseconds', 'disabledTime', 'changeOnScroll', 'defaultOpenValue'];
+
+/**
+ * Get SharedTimeProps from props.
+ */
+function pickTimeProps(props) {
+  var timeProps = pickProps(props, showTimeKeys);
+  var format = props.format,
+    picker = props.picker;
+  var propFormat = null;
+  if (format) {
+    propFormat = format;
+    if (Array.isArray(propFormat)) {
+      propFormat = propFormat[0];
+    }
+    propFormat = _typeof(propFormat) === 'object' ? propFormat.format : propFormat;
+  }
+  if (picker === 'time') {
+    timeProps.format = propFormat;
+  }
+  return [timeProps, propFormat];
+}
+function isStringFormat(format) {
+  return format && typeof format === 'string';
+}
+/** Check if all the showXXX is `undefined` */
+function existShowConfig(showHour, showMinute, showSecond, showMillisecond) {
+  return [showHour, showMinute, showSecond, showMillisecond].some(function (show) {
+    return show !== undefined;
+  });
+}
+
+/** Fill the showXXX if needed */
+function fillShowConfig(hasShowConfig, showHour, showMinute, showSecond, showMillisecond) {
+  var parsedShowHour = showHour;
+  var parsedShowMinute = showMinute;
+  var parsedShowSecond = showSecond;
+  if (!hasShowConfig && !parsedShowHour && !parsedShowMinute && !parsedShowSecond && !showMillisecond) {
+    parsedShowHour = true;
+    parsedShowMinute = true;
+    parsedShowSecond = true;
+  } else if (hasShowConfig) {
+    var _parsedShowHour, _parsedShowMinute, _parsedShowSecond;
+    var existFalse = [parsedShowHour, parsedShowMinute, parsedShowSecond].some(function (show) {
+      return show === false;
+    });
+    var existTrue = [parsedShowHour, parsedShowMinute, parsedShowSecond].some(function (show) {
+      return show === true;
+    });
+    var defaultShow = existFalse ? true : !existTrue;
+    parsedShowHour = (_parsedShowHour = parsedShowHour) !== null && _parsedShowHour !== void 0 ? _parsedShowHour : defaultShow;
+    parsedShowMinute = (_parsedShowMinute = parsedShowMinute) !== null && _parsedShowMinute !== void 0 ? _parsedShowMinute : defaultShow;
+    parsedShowSecond = (_parsedShowSecond = parsedShowSecond) !== null && _parsedShowSecond !== void 0 ? _parsedShowSecond : defaultShow;
+  }
+  return [parsedShowHour, parsedShowMinute, parsedShowSecond, showMillisecond];
+}
+
+/**
+ * Get `showHour`, `showMinute`, `showSecond` or other from the props.
+ * This is pure function, will not get `showXXX` from the `format` prop.
+ */
+export function getTimeProps(componentProps) {
+  var showTime = componentProps.showTime;
+  var _pickTimeProps = pickTimeProps(componentProps),
+    _pickTimeProps2 = _slicedToArray(_pickTimeProps, 2),
+    pickedProps = _pickTimeProps2[0],
+    propFormat = _pickTimeProps2[1];
+  var showTimeConfig = showTime && _typeof(showTime) === 'object' ? showTime : {};
+  var timeConfig = _objectSpread(_objectSpread({
+    defaultOpenValue: showTimeConfig.defaultOpenValue || showTimeConfig.defaultValue
+  }, pickedProps), showTimeConfig);
+  var showMillisecond = timeConfig.showMillisecond;
+  var showHour = timeConfig.showHour,
+    showMinute = timeConfig.showMinute,
+    showSecond = timeConfig.showSecond;
+  var hasShowConfig = existShowConfig(showHour, showMinute, showSecond, showMillisecond);
+  var _fillShowConfig = fillShowConfig(hasShowConfig, showHour, showMinute, showSecond, showMillisecond);
+  var _fillShowConfig2 = _slicedToArray(_fillShowConfig, 3);
+  showHour = _fillShowConfig2[0];
+  showMinute = _fillShowConfig2[1];
+  showSecond = _fillShowConfig2[2];
+  return [timeConfig, _objectSpread(_objectSpread({}, timeConfig), {}, {
+    showHour: showHour,
+    showMinute: showMinute,
+    showSecond: showSecond,
+    showMillisecond: showMillisecond
+  }), timeConfig.format, propFormat];
+}
+export function fillShowTimeConfig(picker, showTimeFormat, propFormat, timeConfig, locale) {
+  var isTimePicker = picker === 'time';
+  if (picker === 'datetime' || isTimePicker) {
+    var pickedProps = timeConfig;
+
+    // ====================== BaseFormat ======================
+    var defaultLocaleFormat = getRowFormat(picker, locale, null);
+    var baselineFormat = defaultLocaleFormat;
+    var formatList = [showTimeFormat, propFormat];
+    for (var i = 0; i < formatList.length; i += 1) {
+      var format = toArray(formatList[i])[0];
+      if (isStringFormat(format)) {
+        baselineFormat = format;
+        break;
+      }
+    }
+
+    // ========================= Show =========================
+    var showHour = pickedProps.showHour,
+      showMinute = pickedProps.showMinute,
+      showSecond = pickedProps.showSecond,
+      showMillisecond = pickedProps.showMillisecond;
+    var use12Hours = pickedProps.use12Hours;
+    var showMeridiem = checkShow(baselineFormat, ['a', 'A', 'LT', 'LLL', 'LTS'], use12Hours);
+    var hasShowConfig = existShowConfig(showHour, showMinute, showSecond, showMillisecond);
+
+    // Fill with format, if needed
+    if (!hasShowConfig) {
+      showHour = checkShow(baselineFormat, ['H', 'h', 'k', 'LT', 'LLL']);
+      showMinute = checkShow(baselineFormat, ['m', 'LT', 'LLL']);
+      showSecond = checkShow(baselineFormat, ['s', 'LTS']);
+      showMillisecond = checkShow(baselineFormat, ['SSS']);
+    }
+
+    // Fallback if all can not see
+    // ======================== Format ========================
+    var _fillShowConfig3 = fillShowConfig(hasShowConfig, showHour, showMinute, showSecond, showMillisecond);
+    var _fillShowConfig4 = _slicedToArray(_fillShowConfig3, 3);
+    showHour = _fillShowConfig4[0];
+    showMinute = _fillShowConfig4[1];
+    showSecond = _fillShowConfig4[2];
+    var timeFormat = showTimeFormat || fillTimeFormat(showHour, showMinute, showSecond, showMillisecond, showMeridiem);
+
+    // ======================== Props =========================
+    return _objectSpread(_objectSpread({}, pickedProps), {}, {
+      // Format
+      format: timeFormat,
+      // Show Config
+      showHour: showHour,
+      showMinute: showMinute,
+      showSecond: showSecond,
+      showMillisecond: showMillisecond,
+      use12Hours: showMeridiem
+    });
+  }
+  return null;
+}

package/es/hooks/useTimeInfo.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { GenerateConfig } from '../generate';
+import type { SharedTimeProps } from '../interface';
+export type Unit<ValueType = number | string> = {
+    label: React.ReactText;
+    value: ValueType;
+    disabled?: boolean;
+};
+/**
+ * Parse time props to get util info
+ */
+export default function useTimeInfo<DateType extends object = any>(generateConfig: GenerateConfig<DateType>, props?: SharedTimeProps<DateType>, date?: DateType): readonly [(nextTime: DateType, certainDate?: DateType) => DateType, Unit<number>[], (nextHour: number) => Unit<number>[], (nextHour: number, nextMinute: number) => Unit<number>[], (nextHour: number, nextMinute: number, nextSecond: number) => Unit<number>[]];

package/es/hooks/useTimeInfo.js

@@ -0,0 +1,164 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { warning } from '@rc-component/util';
+import * as React from 'react';
+import { findValidateTime } from "../PickerPanel/TimePanel/TimePanelBody/util";
+import { leftPad } from "../utils/miscUtil";
+function emptyDisabled() {
+  return [];
+}
+function generateUnits(start, end) {
+  var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var hideDisabledOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var disabledUnits = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  var pad = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 2;
+  var units = [];
+  var integerStep = step >= 1 ? step | 0 : 1;
+  for (var i = start; i <= end; i += integerStep) {
+    var disabled = disabledUnits.includes(i);
+    if (!disabled || !hideDisabledOptions) {
+      units.push({
+        label: leftPad(i, pad),
+        value: i,
+        disabled: disabled
+      });
+    }
+  }
+  return units;
+}
+
+/**
+ * Parse time props to get util info
+ */
+export default function useTimeInfo(generateConfig) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var date = arguments.length > 2 ? arguments[2] : undefined;
+  var _ref = props || {},
+    use12Hours = _ref.use12Hours,
+    _ref$hourStep = _ref.hourStep,
+    hourStep = _ref$hourStep === void 0 ? 1 : _ref$hourStep,
+    _ref$minuteStep = _ref.minuteStep,
+    minuteStep = _ref$minuteStep === void 0 ? 1 : _ref$minuteStep,
+    _ref$secondStep = _ref.secondStep,
+    secondStep = _ref$secondStep === void 0 ? 1 : _ref$secondStep,
+    _ref$millisecondStep = _ref.millisecondStep,
+    millisecondStep = _ref$millisecondStep === void 0 ? 100 : _ref$millisecondStep,
+    hideDisabledOptions = _ref.hideDisabledOptions,
+    disabledTime = _ref.disabledTime,
+    disabledHours = _ref.disabledHours,
+    disabledMinutes = _ref.disabledMinutes,
+    disabledSeconds = _ref.disabledSeconds;
+  var mergedDate = React.useMemo(function () {
+    return date || generateConfig.getNow();
+  }, [date, generateConfig]);
+
+  // ======================== Warnings ========================
+  if (process.env.NODE_ENV !== 'production') {
+    var isHourStepValid = 24 % hourStep === 0;
+    var isMinuteStepValid = 60 % minuteStep === 0;
+    var isSecondStepValid = 60 % secondStep === 0;
+    warning(isHourStepValid, "`hourStep` ".concat(hourStep, " is invalid. It should be a factor of 24."));
+    warning(isMinuteStepValid, "`minuteStep` ".concat(minuteStep, " is invalid. It should be a factor of 60."));
+    warning(isSecondStepValid, "`secondStep` ".concat(secondStep, " is invalid. It should be a factor of 60."));
+  }
+
+  // ======================== Disabled ========================
+  var getDisabledTimes = React.useCallback(function (targetDate) {
+    var disabledConfig = (disabledTime === null || disabledTime === void 0 ? void 0 : disabledTime(targetDate)) || {};
+    return [disabledConfig.disabledHours || disabledHours || emptyDisabled, disabledConfig.disabledMinutes || disabledMinutes || emptyDisabled, disabledConfig.disabledSeconds || disabledSeconds || emptyDisabled, disabledConfig.disabledMilliseconds || emptyDisabled];
+  }, [disabledTime, disabledHours, disabledMinutes, disabledSeconds]);
+  var _React$useMemo = React.useMemo(function () {
+      return getDisabledTimes(mergedDate);
+    }, [mergedDate, getDisabledTimes]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 4),
+    mergedDisabledHours = _React$useMemo2[0],
+    mergedDisabledMinutes = _React$useMemo2[1],
+    mergedDisabledSeconds = _React$useMemo2[2],
+    mergedDisabledMilliseconds = _React$useMemo2[3];
+
+  // ========================= Column =========================
+  var getAllUnits = React.useCallback(function (getDisabledHours, getDisabledMinutes, getDisabledSeconds, getDisabledMilliseconds) {
+    var hours = generateUnits(0, 23, hourStep, hideDisabledOptions, getDisabledHours());
+
+    // Hours
+    var rowHourUnits = use12Hours ? hours.map(function (unit) {
+      return _objectSpread(_objectSpread({}, unit), {}, {
+        label: leftPad(unit.value % 12 || 12, 2)
+      });
+    }) : hours;
+
+    // Minutes
+    var getMinuteUnits = function getMinuteUnits(nextHour) {
+      return generateUnits(0, 59, minuteStep, hideDisabledOptions, getDisabledMinutes(nextHour));
+    };
+
+    // Seconds
+    var getSecondUnits = function getSecondUnits(nextHour, nextMinute) {
+      return generateUnits(0, 59, secondStep, hideDisabledOptions, getDisabledSeconds(nextHour, nextMinute));
+    };
+
+    // Milliseconds
+    var getMillisecondUnits = function getMillisecondUnits(nextHour, nextMinute, nextSecond) {
+      return generateUnits(0, 999, millisecondStep, hideDisabledOptions, getDisabledMilliseconds(nextHour, nextMinute, nextSecond), 3);
+    };
+    return [rowHourUnits, getMinuteUnits, getSecondUnits, getMillisecondUnits];
+  }, [hideDisabledOptions, hourStep, use12Hours, millisecondStep, minuteStep, secondStep]);
+  var _React$useMemo3 = React.useMemo(function () {
+      return getAllUnits(mergedDisabledHours, mergedDisabledMinutes, mergedDisabledSeconds, mergedDisabledMilliseconds);
+    }, [getAllUnits, mergedDisabledHours, mergedDisabledMinutes, mergedDisabledSeconds, mergedDisabledMilliseconds]),
+    _React$useMemo4 = _slicedToArray(_React$useMemo3, 4),
+    rowHourUnits = _React$useMemo4[0],
+    getMinuteUnits = _React$useMemo4[1],
+    getSecondUnits = _React$useMemo4[2],
+    getMillisecondUnits = _React$useMemo4[3];
+
+  // ======================== Validate ========================
+  /**
+   * Get validate time with `disabledTime`, `certainDate` to specific the date need to check
+   */
+  var getValidTime = function getValidTime(nextTime, certainDate) {
+    var getCheckHourUnits = function getCheckHourUnits() {
+      return rowHourUnits;
+    };
+    var getCheckMinuteUnits = getMinuteUnits;
+    var getCheckSecondUnits = getSecondUnits;
+    var getCheckMillisecondUnits = getMillisecondUnits;
+    if (certainDate) {
+      var _getDisabledTimes = getDisabledTimes(certainDate),
+        _getDisabledTimes2 = _slicedToArray(_getDisabledTimes, 4),
+        targetDisabledHours = _getDisabledTimes2[0],
+        targetDisabledMinutes = _getDisabledTimes2[1],
+        targetDisabledSeconds = _getDisabledTimes2[2],
+        targetDisabledMilliseconds = _getDisabledTimes2[3];
+      var _getAllUnits = getAllUnits(targetDisabledHours, targetDisabledMinutes, targetDisabledSeconds, targetDisabledMilliseconds),
+        _getAllUnits2 = _slicedToArray(_getAllUnits, 4),
+        targetRowHourUnits = _getAllUnits2[0],
+        targetGetMinuteUnits = _getAllUnits2[1],
+        targetGetSecondUnits = _getAllUnits2[2],
+        targetGetMillisecondUnits = _getAllUnits2[3];
+      getCheckHourUnits = function getCheckHourUnits() {
+        return targetRowHourUnits;
+      };
+      getCheckMinuteUnits = targetGetMinuteUnits;
+      getCheckSecondUnits = targetGetSecondUnits;
+      getCheckMillisecondUnits = targetGetMillisecondUnits;
+    }
+    var validateDate = findValidateTime(nextTime, getCheckHourUnits, getCheckMinuteUnits, getCheckSecondUnits, getCheckMillisecondUnits, generateConfig);
+    return validateDate;
+  };
+  return [
+  // getValidTime
+  getValidTime,
+  // Units
+  rowHourUnits, getMinuteUnits, getSecondUnits, getMillisecondUnits];
+}

package/es/hooks/useToggleDates.d.ts

@@ -0,0 +1,8 @@
+import type { GenerateConfig } from '../generate';
+import type { InternalMode, Locale } from '../interface';
+/**
+ * Toggles the presence of a value in an array.
+ * If the value exists in the array, removed it.
+ * Else add it.
+ */
+export default function useToggleDates<DateType>(generateConfig: GenerateConfig<DateType>, locale: Locale, panelMode: InternalMode): (list: DateType[], target: DateType) => DateType[];