diff --git a/packages/x/src/useConverterField.ts b/packages/x/src/useConverterField.ts index c0fdc236..b230d679 100644 --- a/packages/x/src/useConverterField.ts +++ b/packages/x/src/useConverterField.ts @@ -8,10 +8,12 @@ export class ConversionError extends Error { } } -export type ConverterFieldConfig = { +export type ValueConverter = { parse: (value: string) => T; format: (value: T) => string; -} & FieldConfig; +}; + +export type ConverterFieldConfig = ValueConverter & FieldConfig; export type ConverterFieldBag = { text: string; diff --git a/packages/x/src/useDateField.ts b/packages/x/src/useDateField.ts index 9bbdb8cb..243e75ba 100644 --- a/packages/x/src/useDateField.ts +++ b/packages/x/src/useDateField.ts @@ -5,7 +5,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat'; import { DateFieldI18nContext } from './DateFieldI18n'; import { formatDate } from './formatDate'; -import { ConversionError, ConverterFieldBag, useConverterField } from './useConverterField'; +import { ConversionError, ConverterFieldBag, useConverterField, ValueConverter } from './useConverterField'; dayjs.extend(customParseFormat); @@ -24,10 +24,7 @@ export type DateFieldConfig = FieldConfig & { minDate?: Date; maxDate?: Date; pickTime?: boolean; - - formatDate?: (date: Date | null | undefined, pickTime: boolean) => string; - parseDate?: (text: string, pickTime: boolean) => Date; -}; +} & Partial>; export type DateFieldBag = ConverterFieldBag; @@ -39,19 +36,19 @@ export const useDateField = ({ minDate, maxDate, pickTime = false, - formatDate: customFormatDate, - parseDate: customParseDate, + format: customFormatDate, + parse: customParseDate, }: DateFieldConfig): DateFieldBag => { const i18n = useContext(DateFieldI18nContext); const parse = useCallback( (text: string) => { + text = text.trim(); + if (customParseDate) { - return customParseDate(text, pickTime); + return customParseDate(text); } - text = text.trim(); - if (text.length === 0) { return null; } @@ -70,7 +67,7 @@ export const useDateField = ({ const format = useCallback( (value: Date | null | undefined) => { if (customFormatDate) { - return customFormatDate(value, pickTime); + return customFormatDate(value); } return formatDate(value, pickTime); diff --git a/packages/x/tests/useDateField.test.tsx b/packages/x/tests/useDateField.test.tsx index 47e5d3e4..aa8f7f5f 100644 --- a/packages/x/tests/useDateField.test.tsx +++ b/packages/x/tests/useDateField.test.tsx @@ -252,25 +252,25 @@ describe('Date field', () => { }); it('Should be able to format date differently', () => { - const formatDate = jest.fn(() => 'custom'); + const format = jest.fn(() => 'custom'); const initialValue = new Date(); - const [{ result }] = renderUseDateField({ formatDate, initialValue }); + const [{ result }] = renderUseDateField({ format, initialValue }); expect(result.current.text).toBe('custom'); - expect(formatDate).toBeCalledWith(initialValue, false); + expect(format).toBeCalledWith(initialValue); }); it('Should call custom parseDate function', async () => { - const parseDate = jest.fn(); + const parse = jest.fn(); - const [{ result }] = renderUseDateField({ parseDate }); + const [{ result }] = renderUseDateField({ parse }); await act(() => { result.current.onTextChange('2023-09-12'); }); await waitFor(() => { - expect(parseDate).toBeCalledWith('2023-09-12', false); + expect(parse).toBeCalledWith('2023-09-12'); }); });