chore: more

react-component · Dec 7, 2023 · de22724 · de22724
1 parent 56efe0d
commit de22724
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 75 deletions.
diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx
@@ -22,6 +22,7 @@ import PickerTrigger from '../PickerTrigger';
 import { fillIndex } from '../util';
 import PickerContext from './context';
 import useCellRender from './hooks/useCellRender';
+import useFieldsInvalidate from './hooks/useFieldsInvalidate';
 import useFilledProps from './hooks/useFilledProps';
 import useOpen from './hooks/useOpen';
 import { usePickerRef } from './hooks/usePickerRef';
@@ -306,50 +307,14 @@ function RangePicker<DateType extends object = any>(
     generateConfig,
     locale,
     disabledDate,
-    // minDate,
-    // maxDate,
   );
 
   // ======================= Validate =======================
-  const [fieldsInvalidates, setFieldsInvalidates] = React.useState<[boolean, boolean]>([
-    false,
-    false,
-  ]);
-
-  const onSelectorInvalid = (valid: boolean, index: number) => {
-    setFieldsInvalidates((ori) => fillIndex(ori, index, valid));
-  };
-
-  /**
-   * For the Selector Input to mark as `aria-disabled`
-   */
-  const submitInvalidates = React.useMemo(() => {
-    return fieldsInvalidates.map((invalid, index) => {
-      // If typing invalidate
-      if (invalid) {
-        return true;
-      }
-
-      const current = calendarValue[index];
-
-      // Not check if all empty
-      if (!current) {
-        return false;
-      }
-
-      // Not allow empty
-      if (!allowEmpty[index] && !current) {
-        return true;
-      }
-
-      // Invalidate
-      if (current && isInvalidateDate(current)) {
-        return true;
-      }
-
-      return false;
-    }) as [boolean, boolean];
-  }, [calendarValue, fieldsInvalidates, isInvalidateDate, allowEmpty]);
+  const [submitInvalidates, onSelectorInvalid] = useFieldsInvalidate(
+    calendarValue,
+    isInvalidateDate,
+    allowEmpty,
+  );
 
   // ===================== Picker Value =====================
   const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue(

diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx
@@ -18,6 +18,7 @@ import PickerTrigger from '../PickerTrigger';
 import { fillIndex } from '../util';
 import PickerContext from './context';
 import useCellRender from './hooks/useCellRender';
+import useFieldsInvalidate from './hooks/useFieldsInvalidate';
 import useFilledProps from './hooks/useFilledProps';
 import useOpen from './hooks/useOpen';
 import { usePickerRef } from './hooks/usePickerRef';
@@ -248,6 +249,7 @@ function Picker<DateType extends object = any>(
   const mergedShowNow = useShowNow(internalPicker, mergedMode, showNow, showToday);
 
   // ======================== Value =========================
+  // TODO: Fix submit logic
   const [
     /** Trigger `onChange` by check `disabledDate` */
     flushSubmit,
@@ -267,40 +269,10 @@ function Picker<DateType extends object = any>(
   );
 
   // ======================= Validate =======================
-  const [fieldsInvalidates, setFieldsInvalidates] = React.useState<[boolean, boolean]>([
-    false,
-    false,
-  ]);
-
-  const onSelectorInvalid = (index: number, valid: boolean) => {
-    setFieldsInvalidates((ori) => fillIndex(ori, index, valid));
-  };
-
-  /**
-   * For the Selector Input to mark as `aria-disabled`
-   */
-  const submitInvalidates = React.useMemo(() => {
-    return fieldsInvalidates.map((invalid, index) => {
-      // If typing invalidate
-      if (invalid) {
-        return true;
-      }
-
-      const current = calendarValue[index];
-
-      // Not check if all empty
-      if (!current) {
-        return false;
-      }
-
-      // Invalidate
-      if (current && isInvalidateDate(current)) {
-        return true;
-      }
-
-      return false;
-    }) as [boolean, boolean];
-  }, [calendarValue, fieldsInvalidates, isInvalidateDate, mergedAllowEmpty]);
+  const [submitInvalidates, onSelectorInvalid] = useFieldsInvalidate(
+    calendarValue,
+    isInvalidateDate,
+  );
 
   // ===================== Picker Value =====================
   const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue(

diff --git a/src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts b/src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { fillIndex } from '../../util';
+import type useInvalidate from './useInvalidate';
+
+/**
+ * Used to control each fields invalidate status
+ */
+export default function useFieldsInvalidate<DateType extends object, ValueType extends DateType[]>(
+  calendarValue: ValueType,
+  isInvalidateDate: ReturnType<typeof useInvalidate<DateType>>,
+  allowEmpty: boolean[] = [],
+) {
+  const [fieldsInvalidates, setFieldsInvalidates] = React.useState<[boolean, boolean]>([
+    false,
+    false,
+  ]);
+
+  const onSelectorInvalid = (invalid: boolean, index: number) => {
+    setFieldsInvalidates((ori) => fillIndex(ori, index, invalid));
+  };
+
+  /**
+   * For the Selector Input to mark as `aria-disabled`
+   */
+  const submitInvalidates = React.useMemo(() => {
+    return fieldsInvalidates.map((invalid, index) => {
+      // If typing invalidate
+      if (invalid) {
+        return true;
+      }
+
+      const current = calendarValue[index];
+
+      // Not check if all empty
+      if (!current) {
+        return false;
+      }
+
+      // Not allow empty
+      if (!allowEmpty[index] && !current) {
+        return true;
+      }
+
+      // Invalidate
+      if (current && isInvalidateDate(current)) {
+        return true;
+      }
+
+      return false;
+    }) as [boolean, boolean];
+  }, [calendarValue, fieldsInvalidates, isInvalidateDate, allowEmpty]);
+
+  return [submitInvalidates, onSelectorInvalid] as const;
+}