feat(range-picker): preset value support callback function (#43476)

* chore(deps): bump rc-picker@3.11.0

* feat(range-picker): preset value support callback function

* docs: update docs

* docs: update since version

* test: update snapshot

components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -32579,6 +32579,13 @@ exports[`renders components/date-picker/demo/preset-ranges.tsx extend context co
               class="ant-picker-presets"
             >
               <ul>
+                <li>
+                  <span
+                    aria-label="Current Time to End of Day"
+                  >
+                    Now ~ EOD
+                  </span>
+                </li>
                 <li>
                   Last 7 Days
                 </li>

components/date-picker/__tests__/__snapshots__/other.test.tsx.snap

@@ -436,7 +436,7 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
                 </thead>
                 <tbody>
                   <tr
-                    class="ant-picker-week-panel-row ant-picker-week-panel-row-selected"
+                    class="ant-picker-week-panel-row"
                   >
                     <td
                       class="ant-picker-cell ant-picker-cell-week"

components/date-picker/demo/preset-ranges.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-可以预设常用的日期范围以提高用户体验。
+可以预设常用的日期范围以提高用户体验。自 `5.8.0` 开始，preset value 支持回调函数返回值方式。
 
 ## en-US
 
-We can set preset ranges to RangePicker to improve user experience.
+We can set preset ranges to RangePicker to improve user experience. Since `5.8.0`, preset value supports callback function.

components/date-picker/demo/preset-ranges.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DatePicker, Space } from 'antd';
 import dayjs from 'dayjs';
+import type { TimeRangePickerProps } from 'antd';
 import type { Dayjs } from 'dayjs';
 
 const { RangePicker } = DatePicker;
@@ -21,10 +22,7 @@ const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) =>
   }
 };
 
-const rangePresets: {
-  label: string;
-  value: [Dayjs, Dayjs];
-}[] = [
+const rangePresets: TimeRangePickerProps['presets'] = [
   { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
   { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
   { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
@@ -43,7 +41,13 @@ const App: React.FC = () => (
     />
     <RangePicker presets={rangePresets} onChange={onRangeChange} />
     <RangePicker
-      presets={rangePresets}
+      presets={[
+        {
+          label: <span aria-label="Current Time to End of Day">Now ~ EOD</span>,
+          value: () => [dayjs(), dayjs().endOf('day')], // 5.8.0+ support function
+        },
+        ...rangePresets,
+      ]}
       showTime
       format="YYYY/MM/DD HH:mm:ss"
       onChange={onRangeChange}

components/date-picker/index.en-US.md

@@ -99,7 +99,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | placeholder | The placeholder of date input | string \| \[string,string] | - |  |
 | placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupStyle | To customize the style of the popup calendar | CSSProperties | {} |  |
-| presets | The preset ranges for quick selection | { label: React.ReactNode, value: [dayjs](https://day.js.org/) }[] | - |  |
+| presets | The preset ranges for quick selection, Since `5.8.0`, preset value supports callback function. | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }\[] | - |  |
 | prevIcon | The custom prev icon | ReactNode | - | 4.17.0 |
 | size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - |  |
 | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
@@ -193,7 +193,7 @@ Added in `4.1.0`.
 | disabled | If disable start or end | \[boolean, boolean] | - |  |
 | disabledTime | To specify the time that cannot be selected | function(date: dayjs, partial: `start` \| `end`) | - |  |
 | format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-MM-DD HH:mm:ss` |  |
-| presets | The preset ranges for quick selection | { label: React.ReactNode, value: [dayjs](https://day.js.org/)\[] }[] | - |  |
+| presets | The preset ranges for quick selection, Since `5.8.0`, preset value supports callback function. | { label: React.ReactNode, value: (Dayjs \| (() => Dayjs))\[] }\[] | - |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
 | separator | Set separator between inputs | React.ReactNode | `<SwapRightOutlined />` |  |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) |  |

components/date-picker/index.zh-CN.md

@@ -101,7 +101,7 @@ import locale from 'antd/locale/zh_CN';
 | placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupStyle | 额外的弹出日历样式 | CSSProperties | {} |  |
 | prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
-| presets | 预设时间范围快捷选择 | { label: React.ReactNode, value: [dayjs](https://day.js.org/) }[] | - |  |
+| presets | 预设时间范围快捷选择, 自 `5.8.0` 起 value 支持函数返回值 | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }\[] | - |  |
 | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - |  |
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
 | style | 自定义输入框样式 | CSSProperties | {} |  |
@@ -194,7 +194,7 @@ import locale from 'antd/locale/zh_CN';
 | disabled | 禁用起始项 | \[boolean, boolean] | - |  |
 | disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`) | - |  |
 | format | 展示的日期格式，配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。 | [formatType](#formattype) | `YYYY-MM-DD HH:mm:ss` |  |
-| presets | 预设时间范围快捷选择 | { label: React.ReactNode, value: [dayjs](https://day.js.org/)\[] }[] | - |  |
+| presets | 预设时间范围快捷选择，自 `5.8.0` 起 value 支持函数返回值 | { label: React.ReactNode, value: (Dayjs \| (() => Dayjs))\[] }\[] | - |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
 | separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` |  |
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker-cn#api) |  |

package.json

@@ -137,7 +137,7 @@
     "rc-motion": "^2.7.3",
     "rc-notification": "~5.0.4",
     "rc-pagination": "~3.5.0",
-    "rc-picker": "~3.10.0",
+    "rc-picker": "~3.11.0",
     "rc-progress": "~3.4.1",
     "rc-rate": "~2.12.0",
     "rc-resize-observer": "^1.2.0",