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]>

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', () => {