fix(DatePicker): fixed clearButton logic (#3594)

consta-design-system · Apr 3, 2024 · a7ea473 · a7ea473
1 parent 986cdac
commit a7ea473
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 45 deletions.
diff --git a/src/components/DatePicker/DatePickerFieldTypeDate/DatePickerFieldTypeDate.tsx b/src/components/DatePicker/DatePickerFieldTypeDate/DatePickerFieldTypeDate.tsx
@@ -29,7 +29,7 @@ export const DatePickerFieldTypeDate = React.forwardRef<
     ...otherProps
   } = props;
 
-  const inputRef = usePicker({
+  const [inputRef, onClear] = usePicker({
     format,
     separator,
     onChange,
@@ -46,6 +46,7 @@ export const DatePickerFieldTypeDate = React.forwardRef<
       inputContainerRef={ref}
       inputRef={useForkRef([inputRef, inputRefProp])}
       placeholder={placeholder}
+      onClear={onClear}
     />
   );
 });
diff --git a/src/components/DatePicker/DatePickerFieldTypeDate/helpers.ts b/src/components/DatePicker/DatePickerFieldTypeDate/helpers.ts
@@ -164,11 +164,7 @@ export const usePicker = (props: UsePickerProps) => {
     [minDate?.getTime(), maxDate?.getTime(), formatProp, separator],
   );
 
-  const {
-    ref,
-    setValue: setStringValue,
-    value: stringValue,
-  } = useIMask<HTMLInputElement, ReactMaskOpts>(
+  const imaskProps = useIMask<HTMLInputElement, ReactMaskOpts>(
     {
       mask: Date as unknown as MaskedDate,
       pattern: formatProp,
@@ -237,7 +233,13 @@ export const usePicker = (props: UsePickerProps) => {
     { onAccept },
   );
 
-  useStringValue(value, stringValue, formatProp, separator, setStringValue);
+  const handleClear = useStringValue(
+    value,
+    formatProp,
+    separator,
+    onChangeRef,
+    imaskProps,
+  );
 
-  return ref;
+  return [imaskProps.ref, handleClear] as const;
 };
diff --git a/src/components/DatePicker/DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime.tsx b/src/components/DatePicker/DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime.tsx
@@ -32,7 +32,7 @@ export const DatePickerFieldTypeDateTime = React.forwardRef<
     ...otherProps
   } = props;
 
-  const inputRef = usePicker({
+  const [inputRef, onClear] = usePicker({
     onChange,
     value,
     onError,
@@ -52,6 +52,7 @@ export const DatePickerFieldTypeDateTime = React.forwardRef<
       inputContainerRef={ref}
       inputRef={useForkRef([inputRef, inputRefProp])}
       placeholder={placeholder}
+      onClear={onClear}
     />
   );
 });
diff --git a/src/components/DatePicker/DatePickerFieldTypeDateTime/helpers.ts b/src/components/DatePicker/DatePickerFieldTypeDateTime/helpers.ts
@@ -193,11 +193,7 @@ export const usePicker = (props: UsePickerProps) => {
     [minDate?.getTime(), maxDate?.getTime(), formatProp, separator],
   );
 
-  const {
-    ref,
-    setValue: setStringValue,
-    value: stringValue,
-  } = useIMask<HTMLInputElement, ReactMaskOpts>(
+  const imaskProps = useIMask<HTMLInputElement, ReactMaskOpts>(
     {
       mask: Date as unknown as MaskedDate,
       pattern: formatProp,
@@ -319,7 +315,13 @@ export const usePicker = (props: UsePickerProps) => {
     { onAccept },
   );
 
-  useStringValue(value, stringValue, formatProp, separator, setStringValue);
+  const handleClear = useStringValue(
+    value,
+    formatProp,
+    separator,
+    onChangeRef,
+    imaskProps,
+  );
 
-  return ref;
+  return [imaskProps.ref, handleClear] as const;
 };
diff --git a/src/components/DatePicker/DatePickerFieldTypeMonth/DatePickerFieldTypeMonth.tsx b/src/components/DatePicker/DatePickerFieldTypeMonth/DatePickerFieldTypeMonth.tsx
@@ -29,7 +29,7 @@ export const DatePickerFieldTypeMonth = React.forwardRef<
     ...otherProps
   } = props;
 
-  const inputRef = usePicker({
+  const [inputRef, onClear] = usePicker({
     value,
     format,
     separator,
@@ -46,6 +46,7 @@ export const DatePickerFieldTypeMonth = React.forwardRef<
       inputContainerRef={ref}
       inputRef={useForkRef([inputRef, inputRefProp])}
       placeholder={placeholder}
+      onClear={onClear}
     />
   );
 });
diff --git a/src/components/DatePicker/DatePickerFieldTypeMonth/helpers.ts b/src/components/DatePicker/DatePickerFieldTypeMonth/helpers.ts
@@ -160,11 +160,7 @@ export const usePicker = (props: UsePickerProps) => {
     [minDate?.getTime(), maxDate?.getTime(), formatProp, separator],
   );
 
-  const {
-    ref,
-    setValue: setStringValue,
-    value: stringValue,
-  } = useIMask<HTMLInputElement, ReactMaskOpts>(
+  const imaskProps = useIMask<HTMLInputElement, ReactMaskOpts>(
     {
       mask: Date as unknown as MaskedDate,
       pattern: formatProp,
@@ -224,7 +220,13 @@ export const usePicker = (props: UsePickerProps) => {
     { onAccept },
   );
 
-  useStringValue(value, stringValue, formatProp, separator, setStringValue);
+  const handleClear = useStringValue(
+    value,
+    formatProp,
+    separator,
+    onChangeRef,
+    imaskProps,
+  );
 
-  return ref;
+  return [imaskProps.ref, handleClear] as const;
 };
diff --git a/src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.tsx b/src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.tsx
@@ -32,7 +32,7 @@ export const DatePickerFieldTypeTime = React.forwardRef<
     ...otherProps
   } = props;
 
-  const inputRef = usePicker({
+  const [inputRef, onClear] = usePicker({
     value,
     onChange,
     onError,
@@ -52,6 +52,7 @@ export const DatePickerFieldTypeTime = React.forwardRef<
       inputContainerRef={ref}
       inputRef={useForkRef([inputRef, inputRefProp])}
       placeholder={placeholder}
+      onClear={onClear}
     />
   );
 });
diff --git a/src/components/DatePicker/DatePickerFieldTypeTime/helpers.ts b/src/components/DatePicker/DatePickerFieldTypeTime/helpers.ts
@@ -189,11 +189,7 @@ export const usePicker = (props: UsePickerProps) => {
     [minDate?.getTime(), maxDate?.getTime(), formatProp, separator],
   );
 
-  const {
-    ref,
-    setValue: setStringValue,
-    value: stringValue,
-  } = useIMask<HTMLInputElement, ReactMaskOpts>(
+  const imaskProps = useIMask<HTMLInputElement, ReactMaskOpts>(
     {
       mask: Date as unknown as MaskedDate,
       pattern: formatProp,
@@ -289,7 +285,13 @@ export const usePicker = (props: UsePickerProps) => {
     { onAccept },
   );
 
-  useStringValue(value, stringValue, formatProp, separator, setStringValue);
+  const handleClear = useStringValue(
+    value,
+    formatProp,
+    separator,
+    onChangeRef,
+    imaskProps,
+  );
 
-  return ref;
+  return [imaskProps.ref, handleClear] as const;
 };
diff --git a/src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.tsx b/src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.tsx
@@ -29,7 +29,7 @@ export const DatePickerFieldTypeYear = React.forwardRef<
     ...otherProps
   } = props;
 
-  const inputRef = usePicker({
+  const [inputRef, onClear] = usePicker({
     value,
     minDate,
     maxDate,
@@ -46,6 +46,7 @@ export const DatePickerFieldTypeYear = React.forwardRef<
       inputContainerRef={ref}
       inputRef={useForkRef([inputRef, inputRefProp])}
       placeholder={placeholder}
+      onClear={onClear}
     />
   );
 });
diff --git a/src/components/DatePicker/DatePickerFieldTypeYear/helpers.ts b/src/components/DatePicker/DatePickerFieldTypeYear/helpers.ts
@@ -161,11 +161,7 @@ export const usePicker = (props: UsePickerProps) => {
     [minDate?.getTime(), maxDate?.getTime(), formatProp, separator],
   );
 
-  const {
-    ref,
-    setValue: setStringValue,
-    value: stringValue,
-  } = useIMask<HTMLInputElement, ReactMaskOpts>(
+  const imaskProps = useIMask<HTMLInputElement, ReactMaskOpts>(
     {
       mask: Date as unknown as MaskedDate,
       pattern: formatProp,
@@ -215,7 +211,13 @@ export const usePicker = (props: UsePickerProps) => {
     { onAccept },
   );
 
-  useStringValue(value, stringValue, formatProp, separator, setStringValue);
+  const handleClear = useStringValue(
+    value,
+    formatProp,
+    separator,
+    onChangeRef,
+    imaskProps,
+  );
 
-  return ref;
+  return [imaskProps.ref, handleClear] as const;
 };
diff --git a/src/components/DatePicker/helpers.ts b/src/components/DatePicker/helpers.ts
@@ -1,5 +1,8 @@
 import { format, isValid, parse, startOfToday } from 'date-fns';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
+import { useIMask } from 'react-imask';
+
+import { useMutableRef } from '##/hooks/useMutableRef';
 
 import { range } from '../../utils/array';
 import { DateRange } from '../../utils/types/Date';
@@ -147,16 +150,39 @@ export const getFieldName = (
 export const getDropdownZIndex = (style?: React.CSSProperties) =>
   typeof style?.zIndex === 'number' ? style.zIndex + 1 : undefined;
 
+type DatePickerFieldTypeDatePropOnChange = (
+  value: Date | null,
+  props: {
+    e: Event;
+  },
+) => void;
+
 export const useStringValue = (
   value: Date | undefined | null,
-  stringValue: string,
   formatProp: string,
   separator: string,
-  setStringValue: React.Dispatch<string>,
+  onChangeRef: React.MutableRefObject<
+    DatePickerFieldTypeDatePropOnChange | undefined
+  >,
+  imaskProps: ReturnType<typeof useIMask>,
 ) => {
+  const stringValue = imaskProps.value;
+
+  const refs = useMutableRef([imaskProps.setValue, value] as const);
+
+  const handleClear: React.MouseEventHandler<HTMLButtonElement> = useCallback(
+    (e) => {
+      refs.current[0]('');
+      if (refs.current[1]) {
+        onChangeRef.current?.(null, { e: e as unknown as Event });
+      }
+    },
+    [],
+  );
+
   useEffect(() => {
     if (value && isValid(value)) {
-      setStringValue(format(value, formatProp));
+      refs.current[0](format(value, formatProp));
     }
 
     if (!value && stringValue) {
@@ -176,8 +202,10 @@ export const useStringValue = (
           : undefined;
 
       if (isValid(date)) {
-        setStringValue('');
+        refs.current[0]('');
       }
     }
   }, [value?.getTime()]);
+
+  return handleClear;
 };