From d0ee93f89551b3180315cfd1be6050ed19b4bf7e 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, 28 Dec 2023 11:29:38 +0800 Subject: [PATCH 1/4] fix: align time --- docs/examples/debug.tsx | 21 ++--- src/PickerInput/hooks/useRangePickerValue.ts | 27 +----- src/PickerPanel/DateTimePanel/index.tsx | 8 +- src/utils/dateUtil.ts | 87 ++++++-------------- 4 files changed, 44 insertions(+), 99 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 038c3853f..1fa70c980 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -149,16 +149,17 @@ export default () => { date.date() >= 5} presets={[ { diff --git a/src/PickerInput/hooks/useRangePickerValue.ts b/src/PickerInput/hooks/useRangePickerValue.ts index b18b4988e..bce91c2bd 100644 --- a/src/PickerInput/hooks/useRangePickerValue.ts +++ b/src/PickerInput/hooks/useRangePickerValue.ts @@ -3,7 +3,7 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import * as React from 'react'; import type { GenerateConfig } from '../../generate'; import type { InternalMode, Locale, PanelMode } from '../../interface'; -import { isSame } from '../../utils/dateUtil'; +import { fillTime, isSame } from '../../utils/dateUtil'; import type { RangePickerProps } from '../RangePicker'; export function offsetPanelDate( @@ -34,28 +34,6 @@ export function offsetPanelDate( const EMPTY_LIST = []; -/** Merge the `showTime.defaultValue` into `pickerValue` */ -function fillTimePickerValue( - generateConfig: GenerateConfig, - date: DateType, - timePickerValue?: DateType, -) { - let tmpDate = date; - - const getFn = ['getHour', 'getMinute', 'getSecond', 'getMillisecond'] as const; - const setFn = ['setHour', 'setMinute', 'setSecond', 'setMillisecond'] as const; - - setFn.forEach((fn, index) => { - if (timePickerValue) { - tmpDate = generateConfig[fn](tmpDate, generateConfig[getFn[index]](timePickerValue)); - } else { - tmpDate = generateConfig[fn](tmpDate, 0); - } - }); - - return tmpDate; -} - export default function useRangePickerValue( generateConfig: GenerateConfig, locale: Locale, @@ -100,7 +78,8 @@ export default function useRangePickerValue - fillTimePickerValue( + // Merge the `showTime.defaultValue` into `pickerValue` + fillTime( generateConfig, [mergedStartPickerValue, mergedEndPickerValue][mergedActiveIndex], timeDefaultValue[mergedActiveIndex], diff --git a/src/PickerPanel/DateTimePanel/index.tsx b/src/PickerPanel/DateTimePanel/index.tsx index c924ee0f9..39446633f 100644 --- a/src/PickerPanel/DateTimePanel/index.tsx +++ b/src/PickerPanel/DateTimePanel/index.tsx @@ -1,13 +1,14 @@ import * as React from 'react'; import useTimeInfo from '../../hooks/useTimeInfo'; import type { SharedPanelProps } from '../../interface'; +import { fillTime } from '../../utils/dateUtil'; import DatePanel from '../DatePanel'; import TimePanel from '../TimePanel'; export default function DateTimePanel( props: SharedPanelProps, ) { - const { prefixCls, generateConfig, showTime, onSelect } = props; + const { prefixCls, generateConfig, showTime, onSelect, value } = props; const panelPrefixCls = `${prefixCls}-datetime-panel`; @@ -15,7 +16,10 @@ export default function DateTimePanel( const [getValidTime] = useTimeInfo(generateConfig, showTime); const onDateSelect = (date: DateType) => { - onSelect(getValidTime(date, date)); + // Merge with current time + const cloneDate = fillTime(generateConfig, date, value); + + onSelect(getValidTime(cloneDate, cloneDate)); }; // ============================== Render ============================== diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts index 912a280ff..9b90694f9 100644 --- a/src/utils/dateUtil.ts +++ b/src/utils/dateUtil.ts @@ -3,16 +3,6 @@ import type { CustomFormat, InternalMode, Locale, NullableDateType } from '../in export const WEEK_DAY_COUNT = 7; -// export function isNullEqual(value1: T, value2: T): boolean | undefined { -// if (!value1 && !value2) { -// return true; -// } -// if (!value1 || !value2) { -// return false; -// } -// return undefined; -// } - /** * Wrap the compare logic. * This will compare the each of value is empty first. @@ -79,16 +69,6 @@ export function isSameMonth( month1: NullableDateType, month2: NullableDateType, ) { - // const equal = isNullEqual(month1, month2); - // if (typeof equal === 'boolean') { - // return equal; - // } - - // return ( - // isSameYear(generateConfig, month1, month2) && - // generateConfig.getMonth(month1!) === generateConfig.getMonth(month2!) - // ); - return nullableCompare( month1, month2, @@ -103,17 +83,6 @@ export function isSameDate( date1: NullableDateType, date2: NullableDateType, ) { - // const equal = isNullEqual(date1, date2); - // if (typeof equal === 'boolean') { - // return equal; - // } - - // return ( - // generateConfig.getYear(date1!) === generateConfig.getYear(date2!) && - // generateConfig.getMonth(date1!) === generateConfig.getMonth(date2!) && - // generateConfig.getDate(date1!) === generateConfig.getDate(date2!) - // ); - return nullableCompare( date1, date2, @@ -129,17 +98,6 @@ export function isSameTime( time1: NullableDateType, time2: NullableDateType, ) { - // const equal = isNullEqual(time1, time2); - // if (typeof equal === 'boolean') { - // return equal; - // } - - // return ( - // generateConfig.getHour(time1!) === generateConfig.getHour(time2!) && - // generateConfig.getMinute(time1!) === generateConfig.getMinute(time2!) && - // generateConfig.getSecond(time1!) === generateConfig.getSecond(time2!) - // ); - return nullableCompare( time1, time2, @@ -158,15 +116,6 @@ export function isSameTimestamp( time1: NullableDateType, time2: NullableDateType, ) { - // return ( - // // Same object - // time1 === time2 || - // // Date - // (isSameDate(generateConfig, time1, time2) && - // isSameTime(generateConfig, time1, time2) && - // generateConfig.getMillisecond(time1) === generateConfig.getMillisecond(time2)) - // ); - return nullableCompare( time1, time2, @@ -183,18 +132,6 @@ export function isSameWeek( date1: NullableDateType, date2: NullableDateType, ) { - // const equal = isNullEqual(date1, date2); - // if (typeof equal === 'boolean') { - // return equal; - // } - - // const weekStartDate1 = getWeekStartDate(locale, generateConfig, date1); - // const weekStartDate2 = getWeekStartDate(locale, generateConfig, date2); - - // return ( - // isSameYear(generateConfig, weekStartDate1, weekStartDate2) && - // generateConfig.locale.getWeek(locale, date1) === generateConfig.locale.getWeek(locale, date2) - // ); return nullableCompare(date1, date2, () => { const weekStartDate1 = getWeekStartDate(locale, generateConfig, date1); const weekStartDate2 = getWeekStartDate(locale, generateConfig, date2); @@ -300,3 +237,27 @@ export function formatValue( ? format(value) : generateConfig.locale.format(locale.locale, value, format); } + +/** + * Fill the time info into Date if provided. + */ +export function fillTime( + generateConfig: GenerateConfig, + date: DateType, + time?: DateType, +) { + let tmpDate = date; + + const getFn = ['getHour', 'getMinute', 'getSecond', 'getMillisecond'] as const; + const setFn = ['setHour', 'setMinute', 'setSecond', 'setMillisecond'] as const; + + setFn.forEach((fn, index) => { + if (time) { + tmpDate = generateConfig[fn](tmpDate, generateConfig[getFn[index]](time)); + } else { + tmpDate = generateConfig[fn](tmpDate, 0); + } + }); + + return tmpDate; +} From cc2bba3e5a9cfd0b248ea0ebdd7778ff2a0b004c 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, 28 Dec 2023 11:32:29 +0800 Subject: [PATCH 2/4] fix: hover logic --- src/PickerPanel/DateTimePanel/index.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/PickerPanel/DateTimePanel/index.tsx b/src/PickerPanel/DateTimePanel/index.tsx index 39446633f..cb4ee045e 100644 --- a/src/PickerPanel/DateTimePanel/index.tsx +++ b/src/PickerPanel/DateTimePanel/index.tsx @@ -8,13 +8,19 @@ import TimePanel from '../TimePanel'; export default function DateTimePanel( props: SharedPanelProps, ) { - const { prefixCls, generateConfig, showTime, onSelect, value } = props; + const { prefixCls, generateConfig, showTime, onSelect, value, onHover } = props; const panelPrefixCls = `${prefixCls}-datetime-panel`; - // ============================== Select ============================== + // =============================== Time =============================== const [getValidTime] = useTimeInfo(generateConfig, showTime); + // ============================== Hover =============================== + const onDateHover = (date: DateType) => { + onHover(date ? fillTime(generateConfig, date, value) : date); + }; + + // ============================== Select ============================== const onDateSelect = (date: DateType) => { // Merge with current time const cloneDate = fillTime(generateConfig, date, value); @@ -25,7 +31,7 @@ export default function DateTimePanel( // ============================== Render ============================== return (
- +
); From f123bdb6666918079d53a9869e8b65f793047d36 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, 28 Dec 2023 11:46:13 +0800 Subject: [PATCH 3/4] test: add test case --- tests/picker.spec.tsx | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index a09fccec7..214451bd4 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -1287,10 +1287,36 @@ describe('Picker.Basic', () => { />, ); - // console.log(document.body.innerHTML); - expect(document.querySelector('.rc-picker-time-panel .rc-picker-header').textContent).toBe( '03:05:07', ); }); + + it('select date should keep time with showTime', () => { + const onCalendarChange = jest.fn(); + const { container } = render(); + + openPicker(container); + + // Select time column + selectColumn(0, 13); + expect(onCalendarChange).toHaveBeenCalledWith( + expect.anything(), + '1990-09-03 13:00:00', + expect.anything(), + ); + + // Hover date + const cell = findCell(18); + fireEvent.mouseEnter(cell); + expect(container.querySelector('input')).toHaveValue('1990-09-18 13:00:00'); + + // Click to trigger onChange + fireEvent.click(cell); + expect(onCalendarChange).toHaveBeenCalledWith( + expect.anything(), + '1990-09-18 13:00:00', + expect.anything(), + ); + }); }); From e323ab41f6451d8e9adcc2c791dd034fe186b324 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, 28 Dec 2023 11:59:09 +0800 Subject: [PATCH 4/4] fix: time defaultValue not working --- docs/examples/debug.tsx | 26 ++++++++++++------------- src/PickerPanel/DateTimePanel/index.tsx | 15 +++++++++++--- 2 files changed, 25 insertions(+), 16 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 1fa70c980..98fa51e1a 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -152,14 +152,14 @@ export default () => { // picker="week" // multiple showTime - // defaultValue={[ - // dayjs(), - // // dayjs('2000-01-01'), - // // dayjs('2000-01-03'), - // // dayjs('2000-01-05'), - // // dayjs('2000-01-07'), - // // dayjs('2000-01-09'), - // ]} + defaultValue={[ + dayjs(), + // dayjs('2000-01-01'), + // dayjs('2000-01-03'), + // dayjs('2000-01-05'), + // dayjs('2000-01-07'), + // dayjs('2000-01-09'), + ]} // disabledDate={(date) => date.date() >= 5} presets={[ { @@ -187,12 +187,12 @@ export default () => { }} />
- {/* true} - picker="time" - showTime + showTime={{ + defaultValue: [dayjs('2000-01-01 01:02:03'), dayjs('2000-01-01 05:06:07')], + }} changeOnBlur={false} showNow panelRender={(ori) => <>2333{ori}} @@ -227,7 +227,7 @@ export default () => { start: 'inputStart', end: 'inputEnd', }} - /> */} + />