From e035510a3b23ca4941ca643424e1772b33e4eb1a 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: Tue, 2 Jan 2024 14:34:14 +0800 Subject: [PATCH 1/3] chore: update defaultOpenValue warning --- docs/examples/debug.tsx | 39 ++++++++++-------- src/PickerInput/RangePicker.tsx | 4 +- src/PickerInput/hooks/useFilledProps.ts | 40 ++++++++++++------ src/PickerInput/hooks/useRangePickerValue.ts | 31 +++++++------- src/PickerPanel/DateTimePanel/index.tsx | 1 + src/interface.tsx | 2 + tests/picker.spec.tsx | 43 +++++++++----------- 7 files changed, 88 insertions(+), 72 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 345c9c748..e44893ad7 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -128,7 +128,7 @@ export default () => { const singleRef = React.useRef(null); const [value, setValue] = React.useState(null); - const [rangeValue, setRangeValue] = React.useState<[Dayjs?, Dayjs?]>( + const [rangeValue, setRangeValue] = React.useState<[Dayjs, Dayjs]>( // [dayjs('2000-12-15'), dayjs('2020-12-22')], // null, undefined, @@ -149,24 +149,27 @@ export default () => { date.date() >= 5} - getPopupContainer={(node) => { - console.log('Popup!', node); - return node.parentElement!; - }} + // getPopupContainer={(node) => { + // console.log('Popup!', node); + // return node.parentElement!; + // }} + picker="time" + defaultPickerValue={dayjs('2000-01-01 03:05:08')} presets={[ { label: 'Good', @@ -193,7 +196,7 @@ export default () => { }} />
- { start: 'inputStart', end: 'inputEnd', }} - /> + /> */}
diff --git a/src/PickerInput/Popup/index.tsx b/src/PickerInput/Popup/index.tsx index 3eacfee3c..c1e747a7c 100644 --- a/src/PickerInput/Popup/index.tsx +++ b/src/PickerInput/Popup/index.tsx @@ -28,6 +28,7 @@ export interface PopupProps boolean; + onOk: VoidFunction; } export default function Popup(props: PopupProps) { @@ -57,6 +58,9 @@ export default function Popup(props: PopupProps(props: PopupProps { - const valueList = toArray(value).filter((val) => val); + const submitValue = React.useMemo(() => { + function filterEmpty(list: T[]) { + return list.filter((item) => item); + } + + const valueList = filterEmpty(toArray(value)); + + // return valueList.length ? valueList : filterEmpty([pickerValue]); + return valueList; + }, [value, pickerValue]); + const disableSubmit = React.useMemo(() => { // Empty is invalid - if (!valueList.length) { + if (!submitValue.length) { return true; } - return valueList.some((val) => isInvalid(val)); - }, [value, isInvalid]); + return submitValue.some((val) => isInvalid(val)); + }, [submitValue, isInvalid]); + + const onFooterSubmit = () => { + onOk(); + onSubmit(); + }; let mergedNodes: React.ReactNode = (
@@ -112,7 +130,12 @@ export default function Popup(props: PopupProps
-
+
); diff --git a/src/PickerInput/hooks/useFilledProps.ts b/src/PickerInput/hooks/useFilledProps.ts index 3bb47ffb2..a0f218415 100644 --- a/src/PickerInput/hooks/useFilledProps.ts +++ b/src/PickerInput/hooks/useFilledProps.ts @@ -49,16 +49,16 @@ type GetGeneric = T extends PickedProps ? U : never; type ToArrayType = T extends any[] ? T : DateType[]; -function useList(value: T | T[], fill = false) { +function useList(value: T | T[], fillMode = false) { const values = React.useMemo(() => { const list = value ? toArray(value) : value; - if (fill && list) { + if (fillMode && list && !Array.isArray(value)) { list[1] = list[1] || list[0]; } return list; - }, [value, fill]); + }, [value, fillMode]); return values; } diff --git a/src/PickerPanel/DateTimePanel/index.tsx b/src/PickerPanel/DateTimePanel/index.tsx index a617d5a1c..a9bf8fc18 100644 --- a/src/PickerPanel/DateTimePanel/index.tsx +++ b/src/PickerPanel/DateTimePanel/index.tsx @@ -36,7 +36,6 @@ export default function DateTimePanel( onSelect(getValidTime(cloneDate, cloneDate)); }; - console.log('-->', props.pickerValue); // ============================== Render ============================== return ( From d953cddc07657320025818ebafd43bbc7e1a023c 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: Tue, 2 Jan 2024 15:59:16 +0800 Subject: [PATCH 3/3] fix: OK click --- src/PickerInput/Popup/index.tsx | 31 +++++++++++++++++-------- src/PickerInput/hooks/useFilledProps.ts | 8 +++---- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/PickerInput/Popup/index.tsx b/src/PickerInput/Popup/index.tsx index c1e747a7c..37c56a7cd 100644 --- a/src/PickerInput/Popup/index.tsx +++ b/src/PickerInput/Popup/index.tsx @@ -57,6 +57,7 @@ export default function Popup(props: PopupProps(props: PopupProps { - function filterEmpty(list: T[]) { - return list.filter((item) => item); - } + function filterEmpty(list: T[]) { + return list.filter((item) => item); + } + + const valueList = React.useMemo(() => filterEmpty(toArray(value)), [value]); - const valueList = filterEmpty(toArray(value)); + const isTimePicker = picker === 'time'; + const isEmptyValue = !valueList.length; - // return valueList.length ? valueList : filterEmpty([pickerValue]); + const footerSubmitValue = React.useMemo(() => { + if (isTimePicker && isEmptyValue) { + return filterEmpty([pickerValue]); + } return valueList; - }, [value, pickerValue]); + }, [isTimePicker, valueList, isEmptyValue, pickerValue]); const disableSubmit = React.useMemo(() => { // Empty is invalid - if (!submitValue.length) { + if (!footerSubmitValue.length) { return true; } - return submitValue.some((val) => isInvalid(val)); - }, [submitValue, isInvalid]); + return footerSubmitValue.some((val) => isInvalid(val)); + }, [footerSubmitValue, isInvalid]); const onFooterSubmit = () => { + // For TimePicker, we will additional trigger the value update + if (isTimePicker && isEmptyValue) { + onSelect(pickerValue); + } + onOk(); onSubmit(); }; diff --git a/src/PickerInput/hooks/useFilledProps.ts b/src/PickerInput/hooks/useFilledProps.ts index a0f218415..b0596848b 100644 --- a/src/PickerInput/hooks/useFilledProps.ts +++ b/src/PickerInput/hooks/useFilledProps.ts @@ -53,7 +53,7 @@ function useList(value: T | T[], fillMode = false) { const values = React.useMemo(() => { const list = value ? toArray(value) : value; - if (fillMode && list && !Array.isArray(value)) { + if (fillMode && list) { list[1] = list[1] || list[0]; } @@ -119,9 +119,9 @@ export default function useFilledProps< const values = useList(value); const defaultValues = useList(defaultValue); - const defaultOpenValues = useList(defaultOpenValue); - const pickerValues = useList(pickerValue, true); - const defaultPickerValues = useList(defaultPickerValue, true) || defaultOpenValues; + const defaultOpenValues = useList(defaultOpenValue, true); + const pickerValues = useList(pickerValue); + const defaultPickerValues = useList(defaultPickerValue) || defaultOpenValues; const mergedLocale = fillLocale(locale); const mergedShowTime = getTimeConfig(props);