Merge branch 'release' into feat-clearIcon

content/input/timepicker/index-en-US.md

@@ -112,12 +112,23 @@ function Demo() {
     };
 
     return (
-        <TimePicker
-            open={open}
-            onOpenChange={onOpenChange}
-            panelHeader={'Time Select'}
-            panelFooter={<Button onClick={closePanel}>close</Button>}
-        />
+        <div>
+            <TimePicker
+                open={open}
+                onOpenChange={onOpenChange}
+                panelHeader={'Time Select'}
+                panelFooter={<Button onClick={closePanel}>close</Button>}
+            />
+            <br/><br/>
+            <TimePicker
+                type='timeRange'
+                panelHeader={['start header', 'end header']}
+                panelFooter={[
+                    <Button key="1" onClick={() => {console.log('start footer');}}>start footer</Button>, 
+                    <Button key="2" onClick={() => {console.log('end footer');}}>end footer</Button>
+                ]}
+            />
+        </div>
     );
 }
 ```
@@ -308,8 +319,8 @@ function Demo(props = {}) {
 | minuteStep | Minute option interval | number | 1 |
 | motion | Whether to display the pop-up layer animation | boolean | true |  |
 | open | Controlled property of whether the panel is open | boolean |  |
-| panelFooter | Addon at the bottom of the panel | ReactNode\|string |  |
-| panelHeader | Panel head addon | ReactNode\|string |  |
+| panelFooter | Addon at the bottom of the panel | ReactNode\|ReactNode[]\|string |  |
+| panelHeader | Panel head addon | ReactNode\|ReactNode[]\|string |  |
 | placeholder | What's displayed when it's not worth it. | string | "Select time" |
 | popupClassName | Pop-up class name | string | '' |
 | popupStyle | Pop-up layer style object | object | - |

content/input/timepicker/index.md

@@ -109,7 +109,25 @@ function Demo() {
         console.log(open);
     };
 
-    return <TimePicker open={open} onOpenChange={onOpenChange} panelHeader={'Time Select'} panelFooter={<Button onClick={closePanel}>close</Button>}/>;
+    return (
+        <div>
+            <TimePicker
+                open={open}
+                onOpenChange={onOpenChange}
+                panelHeader={'Time Select'}
+                panelFooter={<Button onClick={closePanel}>close</Button>}
+            />
+            <br/><br/>
+            <TimePicker
+                type='timeRange'
+                panelHeader={['start header', 'end header']}
+                panelFooter={[
+                    <Button key="1" onClick={() => {console.log('start footer');}}>start footer</Button>, 
+                    <Button key="2" onClick={() => {console.log('end footer');}}>end footer</Button>
+                ]}
+            />
+        </div>
+    );
 }
 ```
 
@@ -293,8 +311,8 @@ function Demo(props = {}) {
 | minuteStep          | 分钟选项间隔                                           | number                                                                            | 1                                                                 |                    |
 | motion | 是否展示弹出层动画 | boolean | true |  |
 | open                | 面板是否打开的受控属性                                 | boolean                                                                           |                                                                   |                    |
-| panelFooter         | 面板底部 addon                                         | ReactNode\|string                                                                 | 无                                                                |                    |
-| panelHeader         | 面板头部 addon                                         | ReactNode\|string                                                                 | 无                                                                |                    |
+| panelFooter         | 面板底部 addon                                         | ReactNode\|ReactNode[]\|string                                                                 | 无                                                                |                    |
+| panelHeader         | 面板头部 addon                                         | ReactNode\|ReactNode[]\|string                                                                 | 无                                                                |                    |
 | placeholder         | 没有值的时候显示的内容                                 | string                                                                            | "请选择时间"                                                      |                    |
 | popupClassName      | 弹出层类名                                             | string                                                                            | ''                                                                |                    |
 | popupStyle          | 弹出层样式对象                                         | object                                                                            | -                                                                 |                    |

packages/semi-ui/timePicker/TimePicker.tsx

@@ -26,8 +26,8 @@ import { ScrollItemProps } from '../scrollList/scrollItem';
 import { Locale } from '../locale/interface';
 
 export interface Panel {
-    panelHeader?: React.ReactNode;
-    panelFooter?: React.ReactNode
+    panelHeader?: React.ReactNode | React.ReactNode[];
+    panelFooter?: React.ReactNode | React.ReactNode[]
 }
 
 export type BaseValueType = string | number | Date;
@@ -68,8 +68,8 @@ export type TimePickerProps = {
     minuteStep?: number;
     motion?: boolean;
     open?: boolean;
-    panelFooter?: React.ReactNode;
-    panelHeader?: React.ReactNode;
+    panelFooter?: React.ReactNode | React.ReactNode[];
+    panelHeader?: React.ReactNode | React.ReactNode[];
     panels?: Panel[]; // FIXME:
     placeholder?: string;
     popupClassName?: string;
@@ -327,9 +327,9 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
             panelProps.panelHeader = get(
                 panels,
                 index,
-                isNullOrUndefined(panelHeader) ? get(defaultHeaderMap, index, null) : panelHeader
+                isNullOrUndefined(panelHeader) ? get(defaultHeaderMap, index, null) : Array.isArray(panelHeader) ? panelHeader[index] : panelHeader
             );
-            panelProps.panelFooter = get(panels, index, panelFooter) as React.ReactNode;
+            panelProps.panelFooter = get(panels, index, Array.isArray(panelFooter) ? panelFooter[index] : panelFooter) as React.ReactNode;
         }
 
         return panelProps;

packages/semi-ui/timePicker/__test__/timePicker.test.js

@@ -219,6 +219,8 @@ describe(`TimePicker`, () => {
                 defaultValue={defaultValue}
                 scrollItemProps={{ cycled: false, mode: 'normal' }}
                 defaultOpen
+                panelHeader={['start header', 'end header']}
+                panelFooter={['start footer', 'end footer']}
             />
         );
 
@@ -226,6 +228,38 @@ describe(`TimePicker`, () => {
 
         const all = elem.find(`.${BASE_CLASS_PREFIX}-scrolllist`);
         expect(all.length).toBe(2);
+        
+        // pannel
+        const startItem = all.at(0);
+        const endItem = all.at(1);
+        // start header
+        expect(
+            startItem
+                .find(`.${BASE_CLASS_PREFIX}-scrolllist-header`)
+                .getDOMNode()
+                .textContent
+        ).toEqual('start header');
+        // start footer
+        expect(
+            startItem
+                .find(`.${BASE_CLASS_PREFIX}-scrolllist-footer`)
+                .getDOMNode()
+                .textContent
+        ).toEqual('start footer');
+        // end header
+        expect(
+            endItem
+                .find(`.${BASE_CLASS_PREFIX}-scrolllist-header`)
+                .getDOMNode()
+                .textContent
+        ).toEqual('end header');
+        // end footer
+        expect(
+            endItem
+                .find(`.${BASE_CLASS_PREFIX}-scrolllist-footer`)
+                .getDOMNode()
+                .textContent
+        ).toEqual('end footer');
 
         // click hour list to change hour to 11
         const newHour = 9;