From 723cd240f25a327ada700a5f7977996499b12646 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 2 Nov 2023 14:23:01 +0800 Subject: [PATCH] chore: patch logic of submit --- docs/examples/debug.tsx | 12 +-- src/NewPicker/PickerInput/RangePicker.tsx | 37 ++++---- .../PickerInput/hooks/useRangeValue.ts | 87 +++++++++++++------ 3 files changed, 84 insertions(+), 52 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 95d071bbd..0698b819c 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -40,12 +40,12 @@ export default () => { { - console.log('๐Ÿท Focus!'); - }} - onBlur={() => { - console.log('๐Ÿท Blur!'); - }} + // onFocus={() => { + // console.log('๐Ÿท Focus!'); + // }} + // onBlur={() => { + // console.log('๐Ÿท Blur!'); + // }} // changeOnBlur format={{ format: 'YYYY-MM-DD', diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index facee7ae0..14fd19f1a 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -71,8 +71,6 @@ export default function Picker(props: RangePickerProps onCalendarChange, changeOnBlur, - order = true, - disabled, allowEmpty, @@ -172,17 +170,13 @@ export default function Picker(props: RangePickerProps const mergedAllowEmpty = separateConfig(allowEmpty, true); // ======================== Value ========================= - const [mergedValue, setMergedValue, submitValue, setSubmitValue, triggerChange] = useRangeValue( - value, - defaultValue, - generateConfig, - locale, - formatList, - mergedAllowEmpty, - order, - onCalendarChange, - onChange, - ); + const [mergedValue, setMergedValue, submitValue, setSubmitValue, triggerChange, finishActive] = + useRangeValue({ + ...props, + formatList, + allowEmpty: mergedAllowEmpty, + focused, + }); // ===================== Picker Value ===================== const [mergedStartPickerValue, setStartPickerValue] = useMergedState( @@ -238,29 +232,30 @@ export default function Picker(props: RangePickerProps setFocused(false); // Always trigger submit since input is always means confirm - triggerChange(mergedValue, 'submit'); + triggerChange(mergedValue); onBlur?.(event); }; // ======================== Submit ======================== - const submitAndFocusNext = (date?: DateType) => { + const triggerChangeAndFocusNext = (date?: DateType) => { let nextValue = mergedValue; if (date) { nextValue = fillMergedValue(date, activeIndex); } - triggerChange(nextValue, 'submit'); - // Focus or blur the open panel const activeLen = activeList?.length; if (activeLen === 1) { + triggerChange(nextValue); + // Open to the next field selectorRef.current.focus(activeList[0] === 0 ? 1 : 0); } else if (activeLen > 1) { // Close anyway onSelectorOpenChange(false, activeIndex); + finishActive(nextValue); } }; @@ -288,7 +283,7 @@ export default function Picker(props: RangePickerProps clone[activeIndex] = date; if (mergedMode === picker && !needConfirm) { - submitAndFocusNext(date); + triggerChangeAndFocusNext(date); } else { triggerChange(clone); } @@ -296,7 +291,7 @@ export default function Picker(props: RangePickerProps const onPopupClose = () => { if (changeOnBlur) { - triggerChange(mergedValue, 'submit'); + triggerChange(mergedValue); } // Close popup @@ -328,7 +323,7 @@ export default function Picker(props: RangePickerProps onPickerValueChange={setCurrentPickerValue} // Submit needConfirm={needConfirm} - onSubmit={submitAndFocusNext} + onSubmit={triggerChangeAndFocusNext} /> ); @@ -370,7 +365,7 @@ export default function Picker(props: RangePickerProps activeIndex={focusedIndex} onFocus={onSelectorFocus} onBlur={onSelectorBlur} - onSubmit={submitAndFocusNext} + onSubmit={triggerChangeAndFocusNext} // Change value={mergedValue} format={formatList} diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 3f1f93838..710d55614 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -1,11 +1,10 @@ -import { useMergedState } from 'rc-util'; -import type { GenerateConfig } from '../../../generate'; +import { useEvent, useMergedState } from 'rc-util'; import { isSameTimestamp } from '../../../utils/dateUtil'; -import type { Locale } from '../../interface'; import type { RangePickerProps, RangeValueType } from '../RangePicker'; +import { useLockEffect } from './useLockState'; // Submit Logic (with order): -// * All the input is filled step by step +// * Submit by next input // * None of the Picker has focused anymore type SetValue = (val: RangeValueType) => void; @@ -13,22 +12,41 @@ type SetValue = (val: RangeValueType) => void; type TriggerChange = ([start, end]: RangeValueType, source?: 'submit') => void; export default function useRangeValue( - value: RangeValueType, - defaultValue: RangeValueType, - generateConfig: GenerateConfig, - locale: Locale, - formatList: string[], - allowEmpty: [boolean | undefined, boolean | undefined], - order: boolean, - onCalendarChange?: RangePickerProps['onCalendarChange'], - onChange?: RangePickerProps['onChange'], + info: Pick< + RangePickerProps, + | 'value' + | 'defaultValue' + | 'generateConfig' + | 'locale' + | 'allowEmpty' + | 'order' + | 'onCalendarChange' + | 'onChange' + > & { + formatList: string[]; + focused: boolean; + }, ): [ mergedValue: RangeValueType, setMergedValue: SetValue, submitValue: RangeValueType, setSubmitValue: SetValue, triggerChange: TriggerChange, + finishActive: (value: RangeValueType) => void, ] { + const { + value, + defaultValue, + generateConfig, + locale, + formatList, + allowEmpty, + order = true, + onCalendarChange, + onChange, + focused, + } = info; + // ============================ Values ============================ const valueConfig = { value, @@ -60,14 +78,9 @@ export default function useRangeValue( return [isSameStart && isSameEnd, isSameStart, isSameEnd]; }; - const triggerChange = ([start, end]: RangeValueType, source?: 'submit') => { + const triggerChange = ([start, end]: RangeValueType) => { const clone: RangeValueType = [start, end]; - // Only when exist value to sort - if (order && source === 'submit' && clone[0] && clone[1]) { - clone.sort((a, b) => (generateConfig.isAfter(a, b) ? 1 : -1)); - } - // Update merged value const [isSameMergedDates, isSameStart] = isSameDates(mergedValue, clone); @@ -81,19 +94,31 @@ export default function useRangeValue( }); } } + }; + + // ============================ Effect ============================ + const triggerSubmit = useEvent((nextValue?: RangeValueType) => { + const clone: RangeValueType = [...(nextValue || mergedValue)]; + + // Only when exist value to sort + if (order && clone[0] && clone[1]) { + clone.sort((a, b) => (generateConfig.isAfter(a, b) ? 1 : -1)); + } - // Update `submitValue` to trigger event by effect - if (source === 'submit') { - setSubmitValue(clone); + // Sync `calendarValue` + triggerChange(clone); - // Trigger `onChange` if needed + // Sync state + setSubmitValue(clone); + + // Trigger `onChange` if needed + if (onChange) { const [isSameSubmitDates] = isSameDates(submitValue, clone); const startEmpty = !clone[0]; const endEmpty = !clone[1]; if ( - onChange && !isSameSubmitDates && // Validate start (!startEmpty || allowEmpty[0]) && @@ -103,8 +128,20 @@ export default function useRangeValue( onChange(clone, getDateTexts(clone)); } } + }); + + const finishActive = (nextValue: RangeValueType) => { + console.log('finishActive'); + triggerSubmit(nextValue); }; + useLockEffect(focused, () => { + if (!focused) { + console.log('Effect!'); + triggerSubmit(); + } + }); + // ============================ Return ============================ - return [mergedValue, setMergedValue, submitValue, setSubmitValue, triggerChange]; + return [mergedValue, setMergedValue, submitValue, setSubmitValue, triggerChange, finishActive]; }