feat: preset value support callback function (#654)

* feat: preset value support callback function

* test: add case

* chore: update demo

* Update docs/examples/basic.tsx

Co-authored-by: zombieJ <[email protected]>

* test: add rangePicker presets case

* style: format code

* chore: update case

* refactor: optimize value execution logic

---------

Co-authored-by: zombieJ <[email protected]>

Author: Wxh16144

docs/examples/basic.tsx

@@ -33,6 +33,10 @@ export default () => {
         label: 'Hello World!',
         value: moment(),
       },
+      {
+        label: 'Now',
+        value: () => moment(),
+      }
     ],
   };
 

docs/examples/range.tsx

@@ -62,6 +62,16 @@ export default () => {
             defaultValue={[moment('1990-09-03'), moment('1989-11-28')]}
             clearIcon={<span>X</span>}
             suffixIcon={<span>O</span>}
+            presets={[
+              {
+                label: 'Last week',
+                value: [moment().subtract(1, 'week'), moment()],
+              },
+              {
+                label: 'Last 3 days',
+                value: () => [moment().subtract(3, 'days'), moment().add(3, 'days')],
+              },
+            ]}
           />
           <RangePicker<Moment>
             {...sharedProps}

src/PresetPanel.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { PresetDate } from './interface';
+import { executeValue } from './utils/miscUtil';
 
 export interface PresetPanelProps<T> {
   prefixCls: string;
@@ -21,20 +22,14 @@ export default function PresetPanel<T>(props: PresetPanelProps<T>) {
         {presets.map(({ label, value }, index) => (
           <li
             key={index}
-            onClick={() => {
-              onClick(value);
-            }}
-            onMouseEnter={() => {
-              onHover?.(value);
-            }}
-            onMouseLeave={() => {
-              onHover?.(null);
-            }}
+            onClick={() => onClick?.(executeValue(value))}
+            onMouseEnter={() => onHover?.(executeValue(value))}
+            onMouseLeave={() => onHover?.(null)}
           >
             {label}
           </li>
         ))}
       </ul>
-    </div>
+    </div >
   );
 }

src/hooks/usePresets.ts

@@ -14,17 +14,10 @@ export default function usePresets<T>(
     if (legacyRanges) {
       warning(false, '`ranges` is deprecated. Please use `presets` instead.');
 
-      const rangeLabels = Object.keys(legacyRanges);
-
-      return rangeLabels.map((label) => {
-        const range = legacyRanges[label];
-        const newValues = typeof range === 'function' ? (range as any)() : range;
-
-        return {
-          label,
-          value: newValues,
-        };
-      });
+      return Object.entries(legacyRanges).map(([label, value]) => ({
+        label,
+        value,
+      }));
     }
 
     return [];

src/interface.ts

@@ -123,7 +123,7 @@ export type CustomFormat<DateType> = (value: DateType) => string;
 
 export interface PresetDate<T> {
   label: React.ReactNode;
-  value: T;
+  value: T | (() => T);
 }
 
 // https://stackoverflow.com/a/39495173; need TypeScript >= 4.5

src/utils/miscUtil.ts

@@ -50,3 +50,7 @@ export function updateValues<T, R = [T | null, T | null] | null>(
 
   return (newValues as unknown) as R;
 }
+
+export function executeValue<T>(value: T | (() => T)): T {
+  return typeof value === 'function' ? (value as () => T)() : value;
+}

tests/picker.spec.tsx

@@ -1030,4 +1030,39 @@ describe('Picker.Basic', () => {
 
     expect(onChange.mock.calls[0][0].format('YYYY-MM-DD')).toEqual('2000-09-03');
   });
+
+  it('presets support callback', () => {
+    const onChange = jest.fn();
+    const mockPresetValue = jest.fn().mockImplementationOnce(() => moment('2000-09-03'));
+
+    render(
+      <MomentPicker
+        onChange={onChange}
+        open
+        presets={[
+          {
+            label: 'Bamboo',
+            value: mockPresetValue,
+          },
+        ]}
+      />,
+    );
+
+    const firstPreset = document.querySelector('.rc-picker-presets li');
+    expect(firstPreset.textContent).toBe('Bamboo');
+
+    fireEvent.click(firstPreset);
+
+    expect(mockPresetValue).toHaveBeenCalled();
+    expect(onChange.mock.calls[0][0].format('YYYY-MM-DD')).toEqual('2000-09-03');
+
+    mockPresetValue.mockImplementationOnce(() => moment('2023-05-01 12:34:56'));
+
+    fireEvent.click(firstPreset);
+
+    expect(mockPresetValue).toBeCalledTimes(2);
+    expect(onChange).toBeCalledTimes(2);
+
+    expect(onChange.mock.calls[1][0].format('YYYY-MM-DD HH:mm:ss')).toEqual('2023-05-01 12:34:56');
+  });
 });

tests/range.spec.tsx

@@ -1,5 +1,6 @@
 import { act, createEvent, fireEvent, render } from '@testing-library/react';
-import moment, { Moment } from 'moment';
+import type { Moment } from 'moment';
+import moment from 'moment';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import React from 'react';
@@ -18,6 +19,7 @@ import {
   openPicker,
   selectCell,
 } from './util/commonUtil';
+import type { RangePickerProps } from '../src/RangePicker';
 
 describe('Picker.Range', () => {
   function matchValues(container: HTMLElement, value1: string, value2: string) {
@@ -331,15 +333,32 @@ describe('Picker.Range', () => {
     });
   });
 
-  describe('ranges', () => {
-    it('work', () => {
+  function testRangePickerPresetRange(propsType: 'ranges' | 'presets') {
+
+    const genProps = (ranges: Record<string, any>) => {
+      const props: Partial<RangePickerProps<Moment>> = {};
+      if (propsType === 'ranges') {
+        // ranges is deprecated, but the case needs to be retained for a while
+        props.ranges = ranges;
+      } else if (propsType === 'presets') {
+        props.presets = [];
+        Object.entries(ranges).forEach(([label, value]) => {
+          props.presets.push({ label, value });
+        })
+      }
+      return props as RangePickerProps<Moment>;
+    }
+
+    it(`${propsType} work`, () => {
       const onChange = jest.fn();
       const { container } = render(
         <MomentRangePicker
-          ranges={{
-            test: [getMoment('1989-11-28'), getMoment('1990-09-03')],
-            func: () => [getMoment('2000-01-01'), getMoment('2010-11-11')],
-          }}
+          {...genProps(
+            {
+              test: [getMoment('1989-11-28'), getMoment('1990-09-03')],
+              func: () => [getMoment('2000-01-01'), getMoment('2010-11-11')],
+            }
+          )}
           onChange={onChange}
         />,
       );
@@ -371,12 +390,14 @@ describe('Picker.Range', () => {
       expect(isOpen()).toBeFalsy();
     });
 
-    it('hover className', () => {
+    it(`${propsType} hover className`, () => {
       const { container } = render(
         <MomentRangePicker
-          ranges={{
-            now: [getMoment('1990-09-11'), getMoment('1990-09-13')],
-          }}
+          {...genProps(
+            {
+              now: [getMoment('1990-09-11'), getMoment('1990-09-13')],
+            }
+          )}
         />,
       );
 
@@ -391,6 +412,12 @@ describe('Picker.Range', () => {
       expect(findCell(12)).not.toHaveClass('rc-picker-cell-in-range');
       expect(findCell(13)).not.toHaveClass('rc-picker-cell-range-end');
     });
+
+  }
+
+  describe('ranges or presets', () => {
+    testRangePickerPresetRange('ranges');
+    testRangePickerPresetRange('presets');
   });
 
   it('placeholder', () => {