refactor: Use defualtOpenValue (#742)

* chore: defaultPickerValue working

* test: test driven

* chore: align logic

* chore: fix defaultOpen logic

* fix: merge logic

* test: update test case

* chore: fix lint

Author: zombieJ

docs/examples/debug.tsx

@@ -155,8 +155,12 @@ export default () => {
         //   disabledMinutes: () => [0, 1, 2, 3, 4, 5],
         //   disabledSeconds: () => [0, 1, 2, 3, 4, 5],
         // })}
-        open
+        defaultOpenValue={dayjs()}
+        // open
         picker="time"
+        // showTime={{
+        //   defaultValue: dayjs(),
+        // }}
         ref={singleRef}
         suffixIcon="🧶"
         // showTime={{
@@ -185,11 +189,13 @@ export default () => {
         }}
       />
       <br />
-      {/* <RangePicker
+      <RangePicker
         {...sharedLocale}
-        value={rangeValue}
-        open
-        picker="week"
+        // value={rangeValue}
+        // open
+        showTime={{
+          defaultOpenValue: [dayjs()],
+        }}
         panelRender={(ori) => <>2333{ori}</>}
         onChange={(val, text) => {
           console.log('🔥 Change:', val, text);
@@ -210,7 +216,7 @@ export default () => {
             info,
           );
         }}
-      /> */}
+      />
       <br />
 
       <button

src/PickerInput/Popup/Footer.tsx

@@ -18,7 +18,7 @@ export interface FooterProps<DateType extends object = any> {
   showNow: boolean;
   generateConfig: GenerateConfig<DateType>;
   disabledDate: DisabledDate<DateType>;
-  showTime?: Omit<RangeTimeProps<DateType>, 'defaultValue'>;
+  showTime?: Omit<RangeTimeProps<DateType>, 'defaultValue' | 'defaultOpenValue'>;
 
   // Invalid
   /** From Footer component used only. Check if can OK button click */

src/PickerInput/Popup/index.tsx

@@ -25,6 +25,10 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
   // Direction
   direction?: 'ltr' | 'rtl';
 
+  // Fill
+  /** TimePicker or showTime only */
+  defaultOpenValue: DateType;
+
   // Change
   needConfirm: boolean;
   isInvalid: (date: DateType | DateType[]) => boolean;
@@ -59,7 +63,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     value,
     onSelect,
     isInvalid,
-    pickerValue,
+    defaultOpenValue,
     onOk,
     onSubmit,
   } = props;
@@ -101,15 +105,16 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
 
   const valueList = React.useMemo(() => filterEmpty(toArray(value)), [value]);
 
-  const isTimePicker = picker === 'time';
-  const isEmptyValue = !valueList.length;
+  const isTimePickerEmptyValue = picker === 'time' && !valueList.length;
 
   const footerSubmitValue = React.useMemo(() => {
-    if (isTimePicker && isEmptyValue) {
-      return filterEmpty([pickerValue]);
+    if (isTimePickerEmptyValue) {
+      return filterEmpty([defaultOpenValue]);
     }
     return valueList;
-  }, [isTimePicker, valueList, isEmptyValue, pickerValue]);
+  }, [isTimePickerEmptyValue, valueList, defaultOpenValue]);
+
+  const popupPanelValue = isTimePickerEmptyValue ? defaultOpenValue : valueList;
 
   const disableSubmit = React.useMemo(() => {
     // Empty is invalid
@@ -122,8 +127,8 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
 
   const onFooterSubmit = () => {
     // For TimePicker, we will additional trigger the value update
-    if (isTimePicker && isEmptyValue) {
-      onSelect(pickerValue);
+    if (isTimePickerEmptyValue) {
+      onSelect(defaultOpenValue);
     }
 
     onOk();
@@ -140,7 +145,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
         onHover={onPresetHover}
       />
       <div>
-        <PopupPanel {...props} />
+        <PopupPanel {...props} value={popupPanelValue} />
         <Footer
           {...props}
           showNow={multiple ? false : showNow}

src/PickerInput/RangePicker.tsx

@@ -20,7 +20,7 @@ import type {
 import type { PickerPanelProps } from '../PickerPanel';
 import PickerTrigger from '../PickerTrigger';
 import { pickTriggerProps } from '../PickerTrigger/util';
-import { fillIndex } from '../utils/miscUtil';
+import { fillIndex, toArray } from '../utils/miscUtil';
 import PickerContext from './context';
 import useCellRender from './hooks/useCellRender';
 import useFieldsInvalidate from './hooks/useFieldsInvalidate';
@@ -128,7 +128,7 @@ export interface BaseRangePickerProps<DateType extends object>
 
 export interface RangePickerProps<DateType extends object>
   extends BaseRangePickerProps<DateType>,
-    Omit<RangeTimeProps<DateType>, 'format' | 'defaultValue'> {}
+    Omit<RangeTimeProps<DateType>, 'format' | 'defaultValue' | 'defaultOpenValue'> {}
 
 function getActiveRange(activeIndex: number) {
   return activeIndex === 1 ? 'end' : 'start';
@@ -357,7 +357,7 @@ function RangePicker<DateType extends object = any>(
     multiplePanel,
     defaultPickerValue,
     pickerValue,
-    mergedShowTime?.defaultValue,
+    mergedShowTime?.defaultOpenValue,
     onPickerValueChange,
     minDate,
     maxDate,
@@ -572,6 +572,7 @@ function RangePicker<DateType extends object = any>(
       onSelect={onPanelSelect}
       // PickerValue
       pickerValue={currentPickerValue}
+      defaultOpenValue={toArray(showTime?.defaultOpenValue)[activeIndex]}
       onPickerValueChange={setCurrentPickerValue}
       // Hover
       hoverValue={hoverValues}

src/PickerInput/SinglePicker.tsx

@@ -323,7 +323,7 @@ function Picker<DateType extends object = any>(
     false, // multiplePanel,
     defaultPickerValue,
     pickerValue,
-    toArray(showTime?.defaultValue),
+    toArray(showTime?.defaultOpenValue),
     onInternalPickerValueChange,
     minDate,
     maxDate,
@@ -503,6 +503,7 @@ function Picker<DateType extends object = any>(
       onSelect={onPanelSelect}
       // PickerValue
       pickerValue={currentPickerValue}
+      defaultOpenValue={showTime?.defaultOpenValue}
       onPickerValueChange={setCurrentPickerValue}
       // Hover
       hoverValue={hoverValues}

src/PickerInput/hooks/useFilledProps.ts

@@ -116,14 +116,12 @@ export default function useFilledProps<
     defaultValue,
     pickerValue,
     defaultPickerValue,
-    defaultOpenValue,
   } = props;
 
   const values = useList(value);
   const defaultValues = useList(defaultValue);
-  const defaultOpenValues = useList(defaultOpenValue, true);
   const pickerValues = useList(pickerValue);
-  const defaultPickerValues = useList(defaultPickerValue) || defaultOpenValues;
+  const defaultPickerValues = useList(defaultPickerValue);
 
   // ======================== Picker ========================
   /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */
@@ -156,11 +154,6 @@ export default function useFilledProps<
         `'disabledHours', 'disabledMinutes', 'disabledSeconds' will be removed in the next major version, please use 'disabledTime' instead.`,
       );
     }
-
-    warning(
-      !defaultOpenValue,
-      `'defaultOpenValue' is deprecated which merged into 'defaultPickerValue' instead.`,
-    );
   }
 
   // ======================== Props =========================

src/hooks/useTimeConfig.ts

@@ -26,6 +26,7 @@ const showTimeKeys = [
   'disabledMilliseconds',
   'disabledTime',
   'changeOnScroll',
+  'defaultOpenValue',
 ] as const;
 
 /**
@@ -83,6 +84,7 @@ export function getTimeProps<DateType extends object>(
 
   const showTimeConfig = showTime && typeof showTime === 'object' ? showTime : {};
   const timeConfig = {
+    defaultOpenValue: showTimeConfig.defaultOpenValue || showTimeConfig.defaultValue,
     ...pickedProps,
     ...showTimeConfig,
   };

src/interface.tsx

@@ -162,9 +162,12 @@ export interface SharedTimeProps<DateType extends object = any> {
   /** Only work in picker is `time` */
   hideDisabledOptions?: boolean;
 
-  /** Set default value template when empty selection */
+  /** @deprecated Use `defaultOpenValue` instead */
   defaultValue?: DateType;
 
+  /** Set default value template when empty selection */
+  defaultOpenValue?: DateType;
+
   /** @deprecated Please use `disabledTime` instead. */
   disabledHours?: DisabledTimes['disabledHours'];
   /** @deprecated Please use `disabledTime` instead. */
@@ -181,9 +184,11 @@ export interface SharedTimeProps<DateType extends object = any> {
 
 export type RangeTimeProps<DateType extends object = any> = Omit<
   SharedTimeProps<DateType>,
-  'defaultValue'
+  'defaultValue' | 'defaultOpenValue'
 > & {
-  defaultValue?: [DateType, DateType];
+  /** @deprecated Use `defaultOpenValue` instead. */
+  defaultValue?: DateType[];
+  defaultOpenValue?: DateType[];
 };
 
 // ======================= Components =======================
@@ -369,7 +374,6 @@ export interface SharedPickerProps<DateType extends object = any>
   maxDate?: DateType;
 
   // Open
-  /** @deprecated Please use `defaultPickerValue` instead */
   defaultOpenValue?: DateType;
   defaultOpen?: boolean;
   open?: boolean;

tests/picker.spec.tsx

@@ -812,10 +812,6 @@ describe('Picker.Basic', () => {
       />,
     );
 
-    expect(errSpy).toHaveBeenCalledWith(
-      "Warning: 'defaultOpenValue' is deprecated which merged into 'defaultPickerValue' instead.",
-    );
-
     openPicker(container);
     fireEvent.click(document.querySelector('.rc-picker-ok button'));
 
@@ -1377,17 +1373,60 @@ describe('Picker.Basic', () => {
     ).toEqual('01');
   });
 
-  it('time picker should align to 0', () => {
-    jest.useFakeTimers().setSystemTime(getDay('1990-09-03 01:03:05').valueOf());
+  describe('time with defaultPickerValue', () => {
+    beforeEach(() => {
+      jest.useFakeTimers().setSystemTime(getDay('1990-09-03 01:03:05').valueOf());
+    });
 
-    const onCalendarChange = jest.fn();
-    render(<DayPicker picker="time" open showNow onCalendarChange={onCalendarChange} />);
+    it('time picker should align to 0', () => {
+      const onCalendarChange = jest.fn();
+      render(<DayPicker picker="time" open showNow onCalendarChange={onCalendarChange} />);
+
+      const submitBtn = document.querySelector('.rc-picker-ok button');
+      expect(submitBtn).toHaveAttribute('disabled');
+
+      selectCell('00');
+      expect(submitBtn).not.toHaveAttribute('disabled');
+      expect(onCalendarChange).toHaveBeenCalledWith(
+        expect.anything(),
+        '00:00:00',
+        expect.anything(),
+      );
+      onCalendarChange.mockReset();
+
+      fireEvent.click(document.querySelector('.rc-picker-now-btn'));
+      expect(submitBtn).not.toHaveAttribute('disabled');
+      expect(onCalendarChange).toHaveBeenCalledWith(
+        expect.anything(),
+        '01:03:05',
+        expect.anything(),
+      );
+    });
 
-    selectCell('00');
-    expect(onCalendarChange).toHaveBeenCalledWith(expect.anything(), '00:00:00', expect.anything());
-    onCalendarChange.mockReset();
+    function testPropsName(propName: string) {
+      it(`${propName} with showTime`, () => {
+        const onCalendarChange = jest.fn();
+        render(
+          <DayPicker
+            showTime={{
+              [propName]: dayjs(),
+            }}
+            open
+            onCalendarChange={onCalendarChange}
+            defaultPickerValue={dayjs()}
+          />,
+        );
+
+        selectCell(15);
+        expect(onCalendarChange).toHaveBeenCalledWith(
+          expect.anything(),
+          '1990-09-15 01:03:05',
+          expect.anything(),
+        );
+      });
+    }
 
-    fireEvent.click(document.querySelector('.rc-picker-now-btn'));
-    expect(onCalendarChange).toHaveBeenCalledWith(expect.anything(), '01:03:05', expect.anything());
+    testPropsName('defaultValue');
+    testPropsName('defaultOpenValue');
   });
 });