diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 7c7f4fd0c..77017dc9f 100644 --- 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( 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 index a28a9c6d5..20bf647ee 100644 --- 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( 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( ); // ======================= 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 new file mode 100644 index 000000000..5d7c7eb45 --- /dev/null +++ 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( + calendarValue: ValueType, + isInvalidateDate: ReturnType>, + 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; +}