feat: DatePicker add date range picker

.eslintignore

@@ -15,3 +15,4 @@ sites/pc/static/js/
 sites/pc/pages/
 sites/pages/
 packages/arcodesign/tools/*.js
+**/*.js

packages/arcodesign/components/date-picker/README.en-US.md

@@ -10,19 +10,21 @@ Date picker, based on the `Picker` component, supports the specified range, the
 
 |Property|Description|Type|DefaultValue|
 |----------|-------------|------|------|
-|onOk|Callback when clicking OK|(timestamp: number, obj: IDateObj) =\> void|-|
-|currentTs|The currently selected time, timestamp|number|Date.now()|
-|onChange|Callback when value is changed|(timestamp: number, obj: IDateObj) =\> void|-|
+|onOk|Callback when clicking OK|(timestamp: number \| \[number, number\], obj: IDateObj \| \[IDateObj, IDateObj\]) =\> void|-|
+|currentTs|The currently selected time, timestamp|number \| \[number, number\]|Date.now()|
+|onChange|Callback when value is changed|(timestamp: number \| \[number, number\], obj: IDateObj \| \[IDateObj, IDateObj\]) =\> void|-|
 |onValueChange|The callback function after each column data selection changes|(timestamp: number, obj: IDateObj, index: number) =\> void|-|
 |mode|Optional column type, date means year, month and day, time means hour, minute and second, datetime means year, month, day, hour, minute and second|"date" \| "time" \| "datetime"|"datetime"|
 |typeArr|optional column list|ItemType\[\]|[]|
-|minTs|Minimum selectable date, timestamp|number|10 years ago from the current time|
-|maxTs|Maximum selectable date, timestamp|number|Next decade from current time|
+|minTs|Minimum selectable date, timestamp|number \| \{ startTs: number; endTs: number; \}|10 years ago from the current time|
+|maxTs|Maximum selectable date, timestamp|number \| \{ startTs: number; endTs: number; \}|Next decade from current time|
 |useUTC|Whether to use UTC|boolean|false|
+|rangeItemFormat|Time range picker display format|string|-|
 |formatter|The formatting method of each optional item, the parameter type is ItemTypes, the parameter value is the value of the current row, and the displayed text is returned\.|(value: number, type: ItemType) =\> string|(value: number) => (value < 10 ? \`0${value}\` : String(value))|
 |valueFilter|Row filtering method, the parameter type is ItemType, the parameter value is the value of the current row, and returns true to indicate that the row can be selected|(type: ItemType, value: number) =\> boolean|() => true|
 |columnsProcessor|Selector list item intervention to insert custom options\.|(columns: PickerData\[\]\[\], currentDateObj: IDateObj) =\> PickerData\[\]\[\]|-|
-|renderLinkedContainer|Associate the hidden state of the picker and the display of the selected value with a container\. After passing it in, the container and the picker component will be rendered at the same time\. At this time, the visible and onHide attributes of the picker component are optional values\. Clicking the container will evoke the picker|(currentTs: number, itemTypes: ItemType\[\]) =\> ReactNode|-|
+|renderSeparator|Defined separator area|() =\> ReactNode|-|
+|renderLinkedContainer|Associate the hidden state of the picker and the display of the selected value with a container\. After passing it in, the container and the picker component will be rendered at the same time\. At this time, the visible and onHide attributes of the picker component are optional values\. Clicking the container will evoke the picker|(currentTs: number \| \[number, number\], itemTypes: ItemType\[\]) =\> ReactNode|-|
 |visible|whether to show the picker|boolean|false|
 |maskClosable|Whether to click the mask to close the menu|boolean|false|
 |needBottomOffset|Whether the content of the menu that slides out from the bottom fits the bottom of ipx|boolean|false|
@@ -59,6 +61,7 @@ Date picker, based on the `Picker` component, supports the specified range, the
 |hideEmptyCols|Whether to hide empty columns without data, often used for cascading selection|boolean|false|
 |title|Picker title|string|""|
 |touchToStop|Whether to stop sliding by long\-pressing, inputing in the number x means that the touch exceeds x milliseconds to count as long\-pressing, inputing true means that x=100, the long\-press event and the click event are mutually exclusive|number \| boolean|false|
+|renderExtraHeader|Define the area of extra header|() =\> ReactNode|-|
 
 > Refs
 

packages/arcodesign/components/date-picker/README.md

@@ -10,19 +10,21 @@
 
 |参数|描述|类型|默认值|
 |----------|-------------|------|------|
-|onOk|点击选中时执行的回调|(timestamp: number, obj: IDateObj) =\> void|-|
-|currentTs|当前选中的时间，timestamp|number|Date.now()|
-|onChange|选中后的回调|(timestamp: number, obj: IDateObj) =\> void|-|
+|onOk|点击选中时执行的回调|(timestamp: number \| \[number, number\], obj: IDateObj \| \[IDateObj, IDateObj\]) =\> void|-|
+|currentTs|当前选中的时间，timestamp|number \| \[number, number\]|Date.now()|
+|onChange|选中后的回调|(timestamp: number \| \[number, number\], obj: IDateObj \| \[IDateObj, IDateObj\]) =\> void|-|
 |onValueChange|每列数据选择变化后的回调函数|(timestamp: number, obj: IDateObj, index: number) =\> void|-|
 |mode|可选列类型，date \- 年月日，time \- 时分秒，datetime \- 年月日时分秒|"date" \| "time" \| "datetime"|"datetime"|
 |typeArr|可选列数组|ItemType\[\]|[]|
-|minTs|最小可选日期，timestamp|number|当前时间的前十年|
-|maxTs|最大可选日期，timestamp|number|当前时间的后十年|
+|minTs|最小可选日期，timestamp|number \| \{ startTs: number; endTs: number; \}|当前时间的前十年|
+|maxTs|最大可选日期，timestamp|number \| \{ startTs: number; endTs: number; \}|当前时间的后十年|
 |useUTC|是否使用 UTC 时间|boolean|false|
+|rangeItemFormat|日期时间范围选择展示格式|string|-|
 |formatter|各可选项展示的格式化方法，参数type为ItemTypes，参数value为当前行的值，返回展示的文字|(value: number, type: ItemType) =\> string|(value: number) => (value < 10 ? \`0${value}\` : String(value))|
 |valueFilter|可选择行过滤方法，参数type为ItemType，参数value为当前行的值，返回true表示该行可选择|(type: ItemType, value: number) =\> boolean|() => true|
 |columnsProcessor|选择器列表项干预，可插入自定义选项|(columns: PickerData\[\]\[\], currentDateObj: IDateObj) =\> PickerData\[\]\[\]|-|
-|renderLinkedContainer|将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器|(currentTs: number, itemTypes: ItemType\[\]) =\> ReactNode|-|
+|renderSeparator|自定义分隔符|() =\> ReactNode|-|
+|renderLinkedContainer|将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器|(currentTs: number \| \[number, number\], itemTypes: ItemType\[\]) =\> ReactNode|-|
 |visible|是否展示选择器|boolean|false|
 |maskClosable|点击蒙层是否关闭菜单|boolean|false|
 |needBottomOffset|从底部滑出的菜单内容是否适配ipx底部|boolean|false|
@@ -59,6 +61,7 @@
 |hideEmptyCols|是否隐藏无数据的空列，常用于级联选择|boolean|false|
 |title|选择器标题|string|""|
 |touchToStop|是否通过长按停止滑动，传入数字 x 表示触摸超过 x 毫秒算长按，传 true 表示 x=100，长按事件与 click 事件互斥|number \| boolean|false|
+|renderExtraHeader|自定义头部扩展区域|() =\> ReactNode|-|
 
 > 引用/Refs
 

packages/arcodesign/components/date-picker/__ast__/index.ast.json

@@ -25,7 +25,7 @@
             },
             "required": false,
             "type": {
-                "name": "(timestamp: number, obj: IDateObj) => void"
+                "name": "(timestamp: number | [number, number], obj: IDateObj | [IDateObj, IDateObj]) => void"
             }
         },
         "currentTs": {
@@ -45,7 +45,7 @@
             },
             "required": false,
             "type": {
-                "name": "number"
+                "name": "number | [number, number]"
             }
         },
         "onChange": {
@@ -62,7 +62,7 @@
             },
             "required": false,
             "type": {
-                "name": "(timestamp: number, obj: IDateObj) => void"
+                "name": "(timestamp: number | [number, number], obj: IDateObj | [IDateObj, IDateObj]) => void"
             }
         },
         "onValueChange": {
@@ -152,7 +152,7 @@
             },
             "required": false,
             "type": {
-                "name": "number"
+                "name": "number | { startTs: number; endTs: number; }"
             }
         },
         "maxTs": {
@@ -173,7 +173,7 @@
             },
             "required": false,
             "type": {
-                "name": "number"
+                "name": "number | { startTs: number; endTs: number; }"
             }
         },
         "useUTC": {
@@ -196,6 +196,23 @@
                 "name": "boolean"
             }
         },
+        "rangeItemFormat": {
+            "defaultValue": null,
+            "description": "日期时间范围选择展示格式\n@en Time range picker display format",
+            "name": "rangeItemFormat",
+            "tags": {
+                "en": "Time range picker display format"
+            },
+            "descWithTags": "日期时间范围选择展示格式",
+            "parent": {
+                "fileName": "arcom-github/packages/arcodesign/components/date-picker/type.ts",
+                "name": "DatePickerProps"
+            },
+            "required": false,
+            "type": {
+                "name": "string"
+            }
+        },
         "formatter": {
             "defaultValue": {
                 "value": "(value: number) => (value < 10 ? \\`0${value}\\` : String(value))"
@@ -253,6 +270,23 @@
                 "name": "(columns: PickerData[][], currentDateObj: IDateObj) => PickerData[][]"
             }
         },
+        "renderSeparator": {
+            "defaultValue": null,
+            "description": "自定义分隔符\n@en Defined separator area",
+            "name": "renderSeparator",
+            "tags": {
+                "en": "Defined separator area"
+            },
+            "descWithTags": "自定义分隔符",
+            "parent": {
+                "fileName": "arcom-github/packages/arcodesign/components/date-picker/type.ts",
+                "name": "DatePickerProps"
+            },
+            "required": false,
+            "type": {
+                "name": "() => ReactNode"
+            }
+        },
         "renderLinkedContainer": {
             "defaultValue": null,
             "description": "将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器\n@en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker",
@@ -267,7 +301,7 @@
             },
             "required": false,
             "type": {
-                "name": "(currentTs: number, itemTypes: ItemType[]) => ReactNode"
+                "name": "(currentTs: number | [number, number], itemTypes: ItemType[]) => ReactNode"
             }
         },
         "visible": {
@@ -952,6 +986,23 @@
                 "name": "number | boolean"
             }
         },
+        "renderExtraHeader": {
+            "defaultValue": null,
+            "description": "自定义头部扩展区域\n@en Define the area of extra header",
+            "name": "renderExtraHeader",
+            "tags": {
+                "en": "Define the area of extra header"
+            },
+            "descWithTags": "自定义头部扩展区域",
+            "parent": {
+                "fileName": "arcom-github/packages/arcodesign/components/picker/type.ts",
+                "name": "PickerProps"
+            },
+            "required": false,
+            "type": {
+                "name": "() => ReactNode"
+            }
+        },
         "ref": {
             "defaultValue": null,
             "description": "",

packages/arcodesign/components/date-picker/__test__/__snapshots__/index.spec.js.snap

@@ -166,6 +166,89 @@ exports[`date-picker demo test date-picker demo: index.md renders correctly 1`]
 </DocumentFragment>
 `;
 
+exports[`date-picker demo test date-picker demo: range.md renders correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="arco-cell-group all-border-box"
+  >
+    <div
+      class="cell-group-body"
+    >
+      <div
+        class="arco-cell all-border-box bordered"
+      >
+        <div
+          class="arco-cell-inner"
+        >
+          <div
+            class="cell-label"
+          >
+            <div
+              class="cell-title"
+            >
+              Select time range
+            </div>
+          </div>
+          <div
+            class="cell-content has-label"
+          />
+          <div
+            class="cell-arrow-icon"
+          >
+            <svg
+              class="arrow-icon-svg"
+              fill="none"
+              viewBox="0 0 8 14"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M0.594858 1.24219C0.399596 1.43745 0.399596 1.75403 0.594859 1.94929L5.59905 6.95348L0.636039 11.9165C0.440776 12.1118 0.440776 12.4283 0.636038 12.6236L0.989592 12.9771C1.18485 13.1724 1.50144 13.1724 1.6967 12.9771L7.35355 7.3203C7.5296 7.14425 7.54692 6.86959 7.40553 6.67413C7.38216 6.62774 7.35111 6.58423 7.31237 6.54549L1.65552 0.888634C1.46026 0.693372 1.14367 0.693372 0.948411 0.888634L0.594858 1.24219Z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="arco-cell all-border-box bordered"
+      >
+        <div
+          class="arco-cell-inner"
+        >
+          <div
+            class="cell-label"
+          >
+            <div
+              class="cell-title"
+            >
+              Select date range
+            </div>
+          </div>
+          <div
+            class="cell-content has-label"
+          />
+          <div
+            class="cell-arrow-icon"
+          >
+            <svg
+              class="arrow-icon-svg"
+              fill="none"
+              viewBox="0 0 8 14"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M0.594858 1.24219C0.399596 1.43745 0.399596 1.75403 0.594859 1.94929L5.59905 6.95348L0.636039 11.9165C0.440776 12.1118 0.440776 12.4283 0.636038 12.6236L0.989592 12.9771C1.18485 13.1724 1.50144 13.1724 1.6967 12.9771L7.35355 7.3203C7.5296 7.14425 7.54692 6.86959 7.40553 6.67413C7.38216 6.62774 7.35111 6.58423 7.31237 6.54549L1.65552 0.888634C1.46026 0.693372 1.14367 0.693372 0.948411 0.888634L0.594858 1.24219Z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`date-picker demo test date-picker demo: time.md renders correctly 1`] = `
 <DocumentFragment>
   <div

packages/arcodesign/components/date-picker/__test__/index.spec.js

@@ -8,6 +8,7 @@ import { defaultContext } from '../../context-provider';
 import '@testing-library/jest-dom';
 
 const prefix = `${defaultContext.prefixCls}-picker`;
+const datePrefix = `${defaultContext.prefixCls}-date-picker`;
 
 demoTest('date-picker');
 
@@ -26,7 +27,7 @@ describe('DatePicker', () => {
         const mockFn = jest.fn();
         const { rerender } = render(
             <DatePicker
-                visible={true}
+                visible
                 maskClosable
                 disabled={false}
                 currentTs={new Date('2020-02-29 00:00:00'.replace(/-/g, '/')).getTime()}
@@ -36,7 +37,7 @@ describe('DatePicker', () => {
         );
         rerender(
             <DatePicker
-                visible={true}
+                visible
                 maskClosable
                 disabled={false}
                 currentTs={new Date('2020-03-29 00:00:00'.replace(/-/g, '/')).getTime()}
@@ -55,7 +56,7 @@ describe('DatePicker', () => {
     it('Time constraints render correctly', () => {
         const { rerender } = render(
             <DatePicker
-                visible={true}
+                visible
                 maskClosable
                 disabled={false}
                 minTs={new Date('2022-02-29 00:00:00'.replace(/-/g, '/')).getTime()}
@@ -66,7 +67,7 @@ describe('DatePicker', () => {
 
         rerender(
             <DatePicker
-                visible={true}
+                visible
                 maskClosable
                 disabled={false}
                 maxTs={new Date('2022-02-29 00:00:00'.replace(/-/g, '/')).getTime()}
@@ -78,7 +79,7 @@ describe('DatePicker', () => {
     it('Option filtering renders correctly', () => {
         render(
             <DatePicker
-                visible={true}
+                visible
                 maskClosable
                 disabled={false}
                 typeArr={['hour', 'minute', 'second']}
@@ -95,4 +96,18 @@ describe('DatePicker', () => {
             '000102030405060708091011121314151617181920212223000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859000510152025303540455055',
         );
     });
+    it('Date range render correctly', () => {
+        render(
+            <DatePicker
+                visible
+                maskClosable
+                disabled={false}
+                currentTs={[
+                    new Date('2020-02-29 00:00:00'.replace(/-/g, '/')).getTime(),
+                    new Date('2020-02-29 00:00:00'.replace(/-/g, '/')).getTime(),
+                ]}
+            />,
+        );
+        expect(document.querySelectorAll(`.${datePrefix}-show`).length).toBe(1);
+    });
 });