fix(pasttimepicker): fix onclear (#2229)

* fix(pasttimepicker): fix onclear * fix(pasttimepicker): fix onclear --------- Co-authored-by: YanHui <liubai@startdt.com>
growingio · Jul 4, 2024 · 1a11b45 · 1a11b45
1 parent ed2e137
commit 1a11b45
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/past-time-picker/PastTimePicker.tsx b/src/past-time-picker/PastTimePicker.tsx
@@ -83,7 +83,7 @@ const PastTimePicker = (props: PastTimePickerProps) => {
 
   const [controlledVisible, setControlledVisible] = useControlledState(popoverVisible, false);
 
-  const [timeRange, setTimeRange] = useControlledState<string | undefined>(value, undefined);
+  const [timeRange, setTimeRange] = useControlledState<string | undefined | null>(value, undefined);
 
   const QUICK_MAPPING = {
     'day:1,0': todayText,
@@ -170,7 +170,7 @@ const PastTimePicker = (props: PastTimePickerProps) => {
     return defaultString;
   };
 
-  const handleOnSelect = (currentValue: string) => {
+  const handleOnSelect = (currentValue: string | null) => {
     setTimeRange(currentValue, true);
     setControlledVisible(false);
     onSelect?.(currentValue);
@@ -212,6 +212,11 @@ const PastTimePicker = (props: PastTimePickerProps) => {
         className={className}
         style={style}
         onClick={() => setControlledVisible(!controlledVisible)}
+        onClear={(e) => {
+          e?.stopPropagation();
+          handleOnSelect(null);
+          restProps?.onClear?.(e);
+        }}
       />
     );
   }

diff --git a/src/past-time-picker/demos/PastTimePicker.stories.tsx b/src/past-time-picker/demos/PastTimePicker.stories.tsx
@@ -20,7 +20,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story<PastTimePickerProps> = (args) => <PastTimePicker onSelect={action('selected value:')} placeholder="时间范围"  {...args} />
+const Template: Story<PastTimePickerProps> = (args) => <PastTimePicker onSelect={action('selected value:')} allowClear placeholder="时间范围"  {...args} />
 
 export const Quick = Template.bind({});
 Quick.args = {

diff --git a/src/static-past-time-picker/interfaces.ts b/src/static-past-time-picker/interfaces.ts
@@ -58,7 +58,7 @@ export interface StaticPastTimePickerProps extends Omit<PickerProps, 'onSelect'>
   /**
    * 选择完后的回调，参数为选中项的 timeRange 值
    */
-  onSelect?: (timeRange: string) => void;
+  onSelect?: (timeRange: string | null) => void;
   onRangeSelect?: (dates: [Date, Date], index: number) => void;
   NotAvailableToday?: boolean;
 }