Merge pull request #792 from DouyinFE/fix-776

fix: fix timePicker defaultValue and clear after select up

packages/semi-foundation/timePicker/foundation.ts

@@ -11,7 +11,7 @@ import {
     isTimeFormatLike
 } from './utils';
 import { split } from 'lodash';
-import { isValid, format } from 'date-fns';
+import { isValid, format, getHours } from 'date-fns';
 import { utcToZonedTime, zonedTimeToUtc } from '../utils/date-fns-extra';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 
@@ -125,6 +125,11 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
             }
         });
 
+        const isAM = [true, false];
+        parsedValues.map((item, idx)=>{
+            isAM[idx]= getHours(item) < 12;
+        });
+
         if (parsedValues.length === value.length) {
             value = parsedValues;
         } else {
@@ -142,6 +147,7 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
         }
 
         this.setState({
+            isAM,
             value,
             inputValue,
             invalid,
@@ -176,6 +182,9 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
             isAM[index] = panelIsAM;
             const inputValue = this.formatValue(value);
 
+            if (this.getState('isAM')[index] !== result.isAM){
+                this.setState({ isAM } as any);
+            }
             if (!this._isControlledComponent('value')) {
                 const invalid = this.validateDates(value);
                 this.setState({
@@ -307,7 +316,7 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
 
     validateStr(inputValue = '') {
         const dates = this.parseInput(inputValue);
-
+    
         return this.validateDates(dates);
     }
 

packages/semi-ui/scrollList/scrollItem.tsx

@@ -329,7 +329,7 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
         const { wrapper } = this;
         const wrapperHeight = wrapper.offsetHeight;
         const itemHeight = this.getItmHeight(node);
-        const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
+        const targetTop =  (node.offsetTop || this.list.children.length * itemHeight / 2 )  - (wrapperHeight - itemHeight) / 2;
 
         this.scrollToPos(targetTop, duration);
     };

packages/semi-ui/timePicker/_story/timepicker.stories.js

@@ -1,6 +1,6 @@
 import React, { Component, useState } from 'react';
 import TimePickerPanel from '../index';
-import { TimePicker as BasicTimePicker, Button } from '../../index';
+import { TimePicker as BasicTimePicker, Button, Form } from '../../index';
 import { strings } from '@douyinfe/semi-foundation/timePicker/constants';
 import { get } from 'lodash';
 
@@ -44,6 +44,12 @@ const init = () => {
 init();
 
 export const TimePickerPanelDefault = () => {
+   const initValues = {
+    testRange: [
+      new Date("2022-04-17T15:00:00"),
+      new Date("2022-04-17T18:00:00"),
+    ],
+  };
   return (
     <div>
       <TimePicker panelHeader={'Time Select'} onChange={val => console.log(val)} />
@@ -53,6 +59,19 @@ export const TimePickerPanelDefault = () => {
         defaultOpen={true}
         scrollItemProps={{ cycled: false }}
       />
+      <TimePicker use12Hours defaultValue={"上午 10:32:33"}/>
+      <br/><br/>
+      <TimePicker type="timeRange" use12Hours format="a h:mm"  defaultValue={["下午 08:11", "上午 11:21"]} />
+      <Form initValues={initValues}>
+      <pre>{JSON.stringify(initValues)}</pre>
+      <Form.TimePicker
+        use12Hours
+        field="testRange"
+        label="Time Range"
+        type="timeRange"
+        format="a hh:mm"
+      />
+    </Form>
     </div>
   );
 };