refactor: time-picker

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -17,7 +17,10 @@ import { PanelMode, RangeValue } from '../../vc-picker/interface';
 import { RangePickerSharedProps } from '../../vc-picker/RangePicker';
 import devWarning from '../../vc-util/devWarning';
 
-export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
+export default function generateRangePicker<DateType>(
+  generateConfig: GenerateConfig<DateType>,
+  extraProps: Record<string, any> = {},
+) {
   const RangePicker = defineComponent<RangePickerProps<DateType> & ExtraRangePickerProps<DateType>>(
     {
       name: 'ARangePicker',
@@ -25,6 +28,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
       props: {
         ...commonProps<DateType>(),
         ...rangePickerProps<DateType>(),
+        ...extraProps,
       } as any,
       slots: [
         'suffixIcon',
@@ -44,6 +48,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
         'ok',
         'openChange',
         'update:value',
+        'update:open',
         'calendarChange',
         'focus',
         'blur',
@@ -75,6 +80,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
           emit('change', values, dateStrings);
         };
         const onOpenChange = (open: boolean) => {
+          emit('update:open', open);
           emit('openChange', open);
         };
         const onFoucs = () => {

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -15,7 +15,10 @@ import classNames from '../../_util/classNames';
 import { commonProps, datePickerProps, ExtraDatePickerProps } from './props';
 import devWarning from '../../vc-util/devWarning';
 
-export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
+export default function generatePicker<DateType>(
+  generateConfig: GenerateConfig<DateType>,
+  extraProps: Record<string, any> = {},
+) {
   type DatePickerProps = PickerProps<DateType> & ExtraDatePickerProps<DateType>;
 
   function getPicker<InnerPickerProps extends DatePickerProps>(
@@ -28,6 +31,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
       props: {
         ...commonProps<DateType>(),
         ...datePickerProps<DateType>(),
+        ...extraProps,
       } as any,
       slots: [
         'suffixIcon',
@@ -41,7 +45,16 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         'renderExtraFooter',
         'monthCellRender',
       ],
-      emits: ['change', 'openChange', 'focus', 'blur', 'panelChange', 'ok', 'update:value'],
+      emits: [
+        'change',
+        'openChange',
+        'focus',
+        'blur',
+        'panelChange',
+        'ok',
+        'update:value',
+        'update:open',
+      ],
       setup(props, { slots, expose, attrs, emit }) {
         devWarning(
           !((props as any).monthCellContentRender || slots.monthCellContentRender),
@@ -73,6 +86,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           emit('change', value, dateString);
         };
         const onOpenChange = (open: boolean) => {
+          emit('update:open', open);
           emit('openChange', open);
         };
         const onFoucs = () => {

components/date-picker/generatePicker/index.tsx

@@ -125,13 +125,16 @@ export type RangePickerProps<DateType> =
   | RangePickerDateProps<DateType>
   | RangePickerTimeProps<DateType>;
 
-function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
+function generatePicker<DateType>(
+  generateConfig: GenerateConfig<DateType>,
+  extraProps: Record<string, any> = {},
+) {
   // =========================== Picker ===========================
   const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker } =
-    generateSinglePicker(generateConfig);
+    generateSinglePicker(generateConfig, extraProps);
 
   // ======================== Range Picker ========================
-  const RangePicker = generateRangePicker(generateConfig);
+  const RangePicker = generateRangePicker(generateConfig, extraProps);
 
   // =========================== Export ===========================
   type MergedDatePickerType = typeof DatePicker & {

components/time-picker/time-picker.tsx

@@ -20,20 +20,23 @@ export interface TimePickerLocale {
 
 const timpePickerProps = {
   format: String,
-  showNow: Boolean,
+  showNow: { type: Boolean, default: undefined },
-  showHour: Boolean,
+  showHour: { type: Boolean, default: undefined },
-  showMinute: Boolean,
+  showMinute: { type: Boolean, default: undefined },
-  showSecond: Boolean,
+  showSecond: { type: Boolean, default: undefined },
-  use12Hours: Boolean,
+  use12Hours: { type: Boolean, default: undefined },
   hourStep: Number,
   minuteStep: Number,
   secondStep: Number,
-  hideDisabledOptions: Boolean,
+  hideDisabledOptions: { type: Boolean, default: undefined },
   popupClassName: String,
 };
 
 function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
-  const DatePicker = generatePicker<DateType>(generateConfig);
+  const DatePicker = generatePicker<DateType>(generateConfig, {
+    ...timpePickerProps,
+    order: { type: Boolean, default: true },
+  });
   const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker as any;
   interface TimeRangePickerProps extends Omit<RangePickerTimeProps<DateType>, 'picker'> {
     popupClassName?: string;
@@ -52,7 +55,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
       ...timpePickerProps,
     } as any,
     slot: ['addon', 'renderExtraFooter', 'suffixIcon', 'clearIcon'],
-    emits: ['change', 'openChange', 'focus', 'blur', 'ok', 'update:value'],
+    emits: ['change', 'openChange', 'focus', 'blur', 'ok', 'update:value', 'update:open'],
     setup(props, { slots, expose, emit, attrs }) {
       devWarning(
         !slots.addon,
@@ -73,6 +76,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
         emit('change', value, dateString);
       };
       const onOpenChange = (open: boolean) => {
+        emit('update:open', open);
         emit('openChange', open);
       };
       const onFoucs = () => {
@@ -121,6 +125,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
       'ok',
       'openChange',
       'update:value',
+      'update:open',
       'calendarChange',
       'focus',
       'blur',
@@ -143,6 +148,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
         emit('change', values, dateStrings);
       };
       const onOpenChange = (open: boolean) => {
+        emit('update:open', open);
         emit('openChange', open);
       };
       const onFoucs = () => {

components/vc-picker/Picker.tsx

@@ -442,6 +442,8 @@ function Picker<DateType>() {
           // Remove `picker` & `format` here since TimePicker is little different with other panel
           ...(props as Omit<MergedPickerProps<DateType>, 'picker' | 'format'>),
           ...attrs,
+          class: undefined,
+          style: undefined,
           pickerValue: undefined,
           onPickerValueChange: undefined,
           onChange: null,

components/vc-picker/PickerPanel.tsx

@@ -139,7 +139,7 @@ function PickerPanel<DateType>() {
       showToday: Boolean,
       renderExtraFooter: Function,
       dateRender: Function,
-      hideHeader: Boolean,
+      hideHeader: { type: Boolean, default: undefined },
       onSelect: Function,
       onChange: Function,
       onPanelChange: Function,
@@ -417,8 +417,8 @@ function PickerPanel<DateType>() {
 
         // ============================ Panels ============================
         let panelNode: VueNode;
-
         const pickerProps = {
+          ...attrs,
           ...(props as MergedPickerPanelProps<DateType>),
           operationRef: panelRef,
           prefixCls,
@@ -540,7 +540,7 @@ function PickerPanel<DateType>() {
             prefixCls,
             components,
             needConfirmButton: needConfirmButton.value,
-            okDisabled: !mergedValue || (disabledDate && disabledDate(mergedValue.value)),
+            okDisabled: !mergedValue.value || (disabledDate && disabledDate(mergedValue.value)),
             locale,
             showNow,
             onNow: needConfirmButton.value && onNow,