fix: Fix disabledTime not working on prop directly (#740)

* fix: disabled logic should work

* test: add test case

* fix: merge logic

Author: zombieJ

docs/examples/debug.tsx

@@ -150,9 +150,22 @@ export default () => {
         // Shared
         {...sharedLocale}
         disabledDate={(date) => date.isBefore(dayjs())}
+        // disabledTime={() => ({
+        //   disabledHours: () => [0, 1, 2, 3, 4, 5],
+        //   disabledMinutes: () => [0, 1, 2, 3, 4, 5],
+        //   disabledSeconds: () => [0, 1, 2, 3, 4, 5],
+        // })}
         open
         ref={singleRef}
         suffixIcon="🧶"
+        // showTime={{
+        //   disabledTime: () => ({
+        //     disabledHours: () => [0, 1, 2, 3, 4, 5],
+        //     disabledMinutes: () => [0, 1, 2, 3, 4, 5],
+        //     disabledSeconds: () => [0, 1, 2, 3, 4, 5],
+        //   }),
+        // }}
+        showTime={{}}
         onChange={(...args) => {
           console.log('🔥 Change:', ...args);
         }}

src/hooks/useTimeConfig.ts

@@ -7,7 +7,7 @@ function checkShow(format: string, keywords: string[], show?: boolean) {
 }
 
 const showTimeKeys = [
-  'format',
+  // 'format',
   'showNow',
   'showHour',
   'showMinute',
@@ -31,18 +31,27 @@ const showTimeKeys = [
 /**
  * Get SharedTimeProps from props.
  */
-function pickTimeProps<DateType extends object = any>(props: any): SharedTimeProps<DateType> {
+function pickTimeProps<DateType extends object = any>(
+  props: any,
+): [timeProps: SharedTimeProps<DateType>, propFormat: string] {
   const timeProps: any = pickProps(props, showTimeKeys);
+  const { format, picker } = props;
 
-  if (timeProps.format) {
-    let format = timeProps.format;
-    if (Array.isArray(format)) {
-      format = format[0];
+  let propFormat: typeof format = null;
+  if (format) {
+    propFormat = format;
+
+    if (Array.isArray(propFormat)) {
+      propFormat = propFormat[0];
     }
-    timeProps.format = typeof format === 'object' ? format.format : format;
+    propFormat = typeof propFormat === 'object' ? propFormat.format : propFormat;
+  }
+
+  if (picker === 'time') {
+    timeProps.format = propFormat;
   }
 
-  return timeProps;
+  return [timeProps, propFormat];
 }
 
 function isStringFormat(format: any): format is string {
@@ -68,11 +77,15 @@ export function getTimeProps<DateType extends object>(
   showTimeFormat: string,
   propFormat: string,
 ] {
-  const { showTime, picker } = componentProps;
+  const { showTime } = componentProps;
 
-  const pickedProps = pickTimeProps(componentProps);
-  const isShowTimeConfig = showTime && typeof showTime === 'object';
-  const timeConfig = isShowTimeConfig ? showTime : pickedProps;
+  const [pickedProps, propFormat] = pickTimeProps(componentProps);
+
+  const showTimeConfig = showTime && typeof showTime === 'object' ? showTime : {};
+  const timeConfig = {
+    ...pickedProps,
+    ...showTimeConfig,
+  };
 
   const { showMillisecond } = timeConfig;
   let { showHour, showMinute, showSecond } = timeConfig;
@@ -83,12 +96,6 @@ export function getTimeProps<DateType extends object>(
     showSecond = true;
   }
 
-  const mergedFormat = isShowTimeConfig
-    ? showTime.format
-    : picker === 'time'
-    ? pickedProps.format
-    : null;
-
   return [
     timeConfig,
     {
@@ -98,8 +105,8 @@ export function getTimeProps<DateType extends object>(
       showSecond,
       showMillisecond,
     },
-    mergedFormat,
-    pickedProps.format,
+    timeConfig.format,
+    propFormat,
   ];
 }
 

tests/picker.spec.tsx

@@ -605,7 +605,7 @@ describe('Picker.Basic', () => {
     it('time should display now', () => {
       const onCalendarChange = jest.fn();
       const { container } = render(<DayPicker onCalendarChange={onCalendarChange} picker="time" />);
-      
+
       openPicker(container);
       expect(document.querySelector('.rc-picker-header')).toBeFalsy();
 
@@ -1356,4 +1356,24 @@ describe('Picker.Basic', () => {
     expect(inputEle.size).toBe(12);
     expect(inputEle).toHaveValue('06:03:04 PM');
   });
+
+  it('compatible with disabledTime on prop directly', () => {
+    render(
+      <DayPicker
+        disabledTime={() => ({
+          disabledHours: () => [0],
+        })}
+        hideDisabledOptions
+        showTime
+        open
+      />,
+    );
+
+    expect(document.querySelectorAll('.rc-picker-time-panel-column:first-child li')).toHaveLength(
+      23,
+    );
+    expect(
+      document.querySelector('.rc-picker-time-panel-column:first-child li').textContent,
+    ).toEqual('01');
+  });
 });