From 872baabe4ceb59774f5c10e5dea104348c393bc6 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 19 Oct 2023 13:14:46 +0200 Subject: [PATCH] chg --- .../react-timepicker-compat-preview.api.md | 4 ++-- .../components/TimePicker/TimePicker.types.ts | 6 ++--- .../components/TimePicker/timeMath.test.ts | 22 +++++++++---------- .../src/components/TimePicker/timeMath.ts | 14 ++++++------ .../components/TimePicker/useTimePicker.tsx | 10 ++++----- 5 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/react-components/react-timepicker-compat-preview/etc/react-timepicker-compat-preview.api.md b/packages/react-components/react-timepicker-compat-preview/etc/react-timepicker-compat-preview.api.md index b11f5d342eba31..ffbb0b7da62923 100644 --- a/packages/react-components/react-timepicker-compat-preview/etc/react-timepicker-compat-preview.api.md +++ b/packages/react-components/react-timepicker-compat-preview/etc/react-timepicker-compat-preview.api.md @@ -24,7 +24,7 @@ export type TimePickerProps = Omit void; formatDateToTimeString?: (date: Date) => string; @@ -41,7 +41,7 @@ export type TimePickerState = ComboboxState & Required { describe('dateToKey', () => { - it('should return empty string for undefined date', () => { - expect(dateToKey()).toBe(''); + it('should return empty string for null date', () => { + expect(dateToKey(null)).toBe(''); }); it('should return "invalid" for invalid dates', () => { @@ -26,12 +26,12 @@ describe('Time Utilities', () => { }); describe('keyToDate', () => { - it('should return undefined for empty string', () => { - expect(keyToDate('')).toBeUndefined(); + it('should return null for empty string', () => { + expect(keyToDate('')).toBeNull(); }); - it('should return undefined for "invalid" string', () => { - expect(keyToDate('invalid')).toBeUndefined(); + it('should return null for "invalid" string', () => { + expect(keyToDate('invalid')).toBeNull(); }); it('should return date for valid ISO string', () => { @@ -49,8 +49,8 @@ describe('Time Utilities', () => { expect(revertedDate?.getTime()).toEqual(originalDate.getTime()); }); - it('should be inverses of each other for undefined date', () => { - const originalDate = undefined; + it('should be inverses of each other for null date', () => { + const originalDate = null; const key = dateToKey(originalDate); const revertedDate = keyToDate(key); @@ -62,7 +62,7 @@ describe('Time Utilities', () => { const key = dateToKey(originalDate); const revertedDate = keyToDate(key); - expect(revertedDate).toBeUndefined(); + expect(revertedDate).toBeNull(); }); }); @@ -165,13 +165,13 @@ describe('Time Utilities', () => { it('returns an error when no time string is provided', () => { const result = getDateFromTimeString(undefined, dateStartAnchor, dateEndAnchor, {}); - expect(result.date).toBeUndefined(); + expect(result.date).toBeNull(); expect(result.error).toBe('invalid-input'); }); it('returns an error for an invalid time string', () => { const result = getDateFromTimeString('25:30', dateStartAnchor, dateEndAnchor, {}); - expect(result.date).toBeUndefined(); + expect(result.date).toBeNull(); expect(result.error).toBe('invalid-input'); }); diff --git a/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/timeMath.ts b/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/timeMath.ts index 13152e36eb08bc..b978358fc3da24 100644 --- a/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/timeMath.ts +++ b/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/timeMath.ts @@ -7,7 +7,7 @@ function isValidDate(date: Date): boolean { /** * Converts a Date object to a string key. */ -export function dateToKey(date?: Date): string { +export function dateToKey(date: Date | null): string { if (!date) { return ''; } @@ -21,12 +21,12 @@ export function dateToKey(date?: Date): string { * Converts a string key back to a Date object. * Returns undefined for keys that don't represent valid dates. */ -export function keyToDate(key: string): Date | undefined { +export function keyToDate(key: string): Date | null { if (key === '' || key === 'invalid') { - return undefined; + return null; } const date = new Date(key); - return isValidDate(date) ? date : undefined; + return isValidDate(date) ? date : null; } /** @@ -157,7 +157,7 @@ export function getDateFromTimeString( timeFormatOptions: TimeFormatOptions, ): TimeStringValidationResult { if (!time) { - return { error: 'invalid-input' }; + return { date: null, error: 'invalid-input' }; } const { hour12, showSeconds } = timeFormatOptions; @@ -171,12 +171,12 @@ export function getDateFromTimeString( : REGEX_HIDE_SECONDS_HOUR_24; if (!regex.test(time)) { - return { error: 'invalid-input' }; + return { date: null, error: 'invalid-input' }; } const timeParts = /^(\d\d?):(\d\d):?(\d\d)? ?([ap]m)?/i.exec(time); if (!timeParts) { - return { error: 'invalid-input' }; + return { date: null, error: 'invalid-input' }; } const [, selectedHours, minutes, seconds, amPm] = timeParts; diff --git a/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/useTimePicker.tsx b/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/useTimePicker.tsx index 8bf533325f582a..e8c66ed9371837 100644 --- a/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/useTimePicker.tsx +++ b/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/useTimePicker.tsx @@ -29,14 +29,14 @@ export const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref({ + const [selectedTime, setSelectedTime] = useControllableState({ state: selectedTimeInProps, defaultState: defaultSelectedTimeInProps, - initialState: undefined, + initialState: null, }); const [submittedText, setSubmittedText] = React.useState(undefined); @@ -142,7 +142,7 @@ const useStableDateAnchor = (providedDate: Date | undefined, startHour: Hour, en const [fallbackDateAnchor] = React.useState(() => new Date()); // Convert the Date object to a stable key representation. This ensures that the memoization remains stable when a new Date object representing the same date is passed in. - const dateAnchorKey = dateToKey(providedDate); + const dateAnchorKey = dateToKey(providedDate ?? null); const dateAnchor = React.useMemo( () => keyToDate(dateAnchorKey) ?? fallbackDateAnchor, [dateAnchorKey, fallbackDateAnchor],