feat(ui): add onClear event

DevCloudFE · Nov 23, 2022 · 740dec0 · 740dec0
1 parent 16a7c83
commit 740dec0
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/packages/ui/src/components/_date-input/DateInput.tsx b/packages/ui/src/components/_date-input/DateInput.tsx
@@ -57,6 +57,7 @@ export interface DDateInputProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   onVisibleChange: ((visible: boolean) => void) | undefined;
   onUpdatePanel: ((date: Date) => void) | undefined;
   afterVisibleChange: ((visible: boolean) => void) | undefined;
+  onClear: (() => void) | undefined;
 }
 
 function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef>): JSX.Element | null {
@@ -81,6 +82,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
     onVisibleChange,
     onUpdatePanel,
     afterVisibleChange,
+    onClear,
 
     ...restProps
   } = props;
@@ -417,6 +419,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
                     e.stopPropagation();
 
                     _changeValue(null);
+                    onClear?.();
                   }}
                 >
                   <CloseCircleFilled />

diff --git a/packages/ui/src/components/date-picker/DatePicker.tsx b/packages/ui/src/components/date-picker/DatePicker.tsx
@@ -47,6 +47,7 @@ export interface DDatePickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   onModelChange?: (date: any) => void;
   onVisibleChange?: (visible: boolean) => void;
   afterVisibleChange?: (visible: boolean) => void;
+  onClear?: () => void;
 }
 
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DDatePicker' as const });
@@ -72,6 +73,7 @@ function DatePicker(props: DDatePickerProps, ref: React.ForwardedRef<DDateInputR
     onModelChange,
     onVisibleChange,
     afterVisibleChange,
+    onClear,
 
     ...restProps
   } = useComponentConfig(COMPONENT_NAME, props);
@@ -133,6 +135,7 @@ function DatePicker(props: DDatePickerProps, ref: React.ForwardedRef<DDateInputR
         updateTimePickerPanelRef.current?.(date);
       }}
       afterVisibleChange={afterVisibleChange}
+      onClear={onClear}
     >
       {({ date, isFocus, changeDate, renderPopup }) => {
         const index = isFocus[0] ? 0 : 1;

diff --git a/packages/ui/src/components/input/Input.tsx b/packages/ui/src/components/input/Input.tsx
@@ -37,30 +37,32 @@ export interface DInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   dDisabled?: boolean;
   dInputRender?: DCloneHTMLElement<React.InputHTMLAttributes<HTMLInputElement>>;
   onModelChange?: (value: string) => void;
+  onClear?: () => void;
   onPasswordChange?: (value: boolean) => void;
 }
 
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DInput' as const });
 export function DInput(props: DInputProps): JSX.Element | null {
   const {
     dRef,
-    dType,
-    dMax,
-    dMin,
-    dStep,
-    dInteger = false,
-    dPlaceholder,
-    dDisabled = false,
     dFormControl,
     dModel,
+    dType,
     dPrefix: dPrefixNode,
     dSuffix,
     dPassword,
     dNumbetButton = true,
     dClearable = false,
     dSize,
+    dMax,
+    dMin,
+    dStep,
+    dInteger = false,
+    dPlaceholder,
+    dDisabled = false,
     dInputRender,
     onModelChange,
+    onClear,
     onPasswordChange,
 
     ...restProps
@@ -254,6 +256,7 @@ export function DInput(props: DInputProps): JSX.Element | null {
                 aria-label={t('Clear')}
                 onClick={() => {
                   changeValue('');
+                  onClear?.();
                 }}
               >
                 <CloseCircleFilled />

diff --git a/packages/ui/src/components/time-picker/TimePicker.tsx b/packages/ui/src/components/time-picker/TimePicker.tsx
@@ -50,6 +50,7 @@ export interface DTimePickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   onModelChange?: (date: any) => void;
   onVisibleChange?: (visible: boolean) => void;
   afterVisibleChange?: (visible: boolean) => void;
+  onClear?: () => void;
 }
 
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DTimePicker' as const });
@@ -74,6 +75,7 @@ function TimePicker(props: DTimePickerProps, ref: React.ForwardedRef<DTimePicker
     onModelChange,
     onVisibleChange,
     afterVisibleChange,
+    onClear,
 
     ...restProps
   } = useComponentConfig(COMPONENT_NAME, props);
@@ -123,6 +125,7 @@ function TimePicker(props: DTimePickerProps, ref: React.ForwardedRef<DTimePicker
         updatePanelRef.current?.(date);
       }}
       afterVisibleChange={afterVisibleChange}
+      onClear={onClear}
     >
       {({ date, isFocus, changeDate, renderPopup }) =>
         renderPopup(