feat(DateField): add parseDateFromString property (#190)

Author: ieromanov

src/components/DateField/README.md

@@ -0,0 +1,58 @@
+import {dateTime} from '@gravity-ui/date-utils';
+import {act, renderHook} from '@testing-library/react';
+
+import {useDateFieldState} from '../hooks/useDateFieldState';
+import {parseDateFromString} from '../utils';
+
+jest.mock('../utils', () => ({
+    ...jest.requireActual('../utils'),
+    parseDateFromString: jest.fn(),
+}));
+
+const mockedParseDateFromString = parseDateFromString as jest.MockedFunction<
+    typeof parseDateFromString
+>;
+
+describe('DateField: parseDateFromString', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockedParseDateFromString.mockImplementation((str, format, timeZone) => {
+            return dateTime({input: str, format, timeZone});
+        });
+    });
+
+    it('should call custom parseDateFromString when provided', () => {
+        const customParser = jest.fn().mockReturnValue(dateTime({input: '2024-01-15T00:00:00Z'}));
+
+        const {result} = renderHook(() =>
+            useDateFieldState({
+                format: 'DD.MM.YYYY',
+                parseDateFromString: customParser,
+            }),
+        );
+
+        act(() => {
+            result.current.setValueFromString('15.01.2024');
+        });
+
+        expect(customParser).toHaveBeenCalledWith('15.01.2024', 'DD.MM.YYYY', 'default');
+        expect(mockedParseDateFromString).not.toHaveBeenCalled();
+    });
+
+    it('should use default parseDateFromString when parseDateFromString is not provided', () => {
+        const validDate = dateTime({input: '2024-01-15T00:00:00Z'});
+        mockedParseDateFromString.mockReturnValue(validDate);
+
+        const {result} = renderHook(() => useDateFieldState({format: 'DD.MM.YYYY'}));
+
+        act(() => {
+            result.current.setValueFromString('15.01.2024');
+        });
+
+        expect(mockedParseDateFromString).toHaveBeenCalledWith(
+            '15.01.2024',
+            'DD.MM.YYYY',
+            'default',
+        );
+    });
+});

src/components/DateField/__tests__/parseDateFromString.ts

@@ -194,7 +194,8 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
     }
 
     function setValueFromString(str: string) {
-        const date = parseDateFromString(str, format, timeZone);
+        const parseDate = props.parseDateFromString ?? parseDateFromString;
+        const date = parseDate(str, format, timeZone);
         if (date.isValid()) {
             handleUpdateDate(date);
             return true;

src/components/DateField/hooks/useDateFieldState.ts

@@ -0,0 +1,74 @@
+import {dateTime} from '@gravity-ui/date-utils';
+import {act, renderHook} from '@testing-library/react';
+
+import {parseDateFromString} from '../../DateField/utils';
+import {useRangeDateFieldState} from '../hooks/useRangeDateFieldState';
+
+jest.mock('../../DateField/utils', () => ({
+    ...jest.requireActual('../../DateField/utils'),
+    parseDateFromString: jest.fn(),
+}));
+
+const mockedParseDateFromString = parseDateFromString as jest.MockedFunction<
+    typeof parseDateFromString
+>;
+
+describe('RangeDateField: parseDateFromString', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockedParseDateFromString.mockImplementation((str, format, timeZone) => {
+            return dateTime({input: str, format, timeZone});
+        });
+    });
+
+    it('should call custom parseDateFromString when provided for range dates', () => {
+        const customParser = jest
+            .fn()
+            .mockReturnValueOnce(dateTime({input: '2024-01-15T00:00:00Z'}))
+            .mockReturnValueOnce(dateTime({input: '2024-01-20T00:00:00Z'}));
+
+        const {result} = renderHook(() =>
+            useRangeDateFieldState({
+                format: 'DD.MM.YYYY',
+                parseDateFromString: customParser,
+            }),
+        );
+
+        act(() => {
+            result.current.setValueFromString('15.01.2024 — 20.01.2024');
+        });
+
+        expect(customParser).toHaveBeenCalledTimes(2);
+        expect(customParser).toHaveBeenNthCalledWith(1, '15.01.2024', 'DD.MM.YYYY', 'default');
+        expect(customParser).toHaveBeenNthCalledWith(2, '20.01.2024', 'DD.MM.YYYY', 'default');
+        expect(mockedParseDateFromString).not.toHaveBeenCalled();
+    });
+
+    it('should use default parseDateFromString when parseDateFromString is not provided', () => {
+        const validStartDate = dateTime({input: '2024-01-15T00:00:00Z'});
+        const validEndDate = dateTime({input: '2024-01-20T00:00:00Z'});
+        mockedParseDateFromString
+            .mockReturnValueOnce(validStartDate)
+            .mockReturnValueOnce(validEndDate);
+
+        const {result} = renderHook(() => useRangeDateFieldState({format: 'DD.MM.YYYY'}));
+
+        act(() => {
+            result.current.setValueFromString('15.01.2024 — 20.01.2024');
+        });
+
+        expect(mockedParseDateFromString).toHaveBeenCalledTimes(2);
+        expect(mockedParseDateFromString).toHaveBeenNthCalledWith(
+            1,
+            '15.01.2024',
+            'DD.MM.YYYY',
+            'default',
+        );
+        expect(mockedParseDateFromString).toHaveBeenNthCalledWith(
+            2,
+            '20.01.2024',
+            'DD.MM.YYYY',
+            'default',
+        );
+    });
+});

src/components/DatePicker/README.md

@@ -224,8 +224,9 @@ export function useRangeDateFieldState(props: RangeDateFieldStateOptions): Range
 
     function setValueFromString(str: string) {
         const list = str.split(delimiter);
-        const start = parseDateFromString(list?.[0], format, timeZone);
-        const end = parseDateFromString(list?.[1], format, timeZone);
+        const parseDate = props.parseDateFromString ?? parseDateFromString;
+        const start = parseDate(list?.[0], format, timeZone);
+        const end = parseDate(list?.[1], format, timeZone);
         const range = {start, end};
         if (range.start.isValid() && range.end.isValid()) {
             handleUpdateRange(range);

src/components/RangeDateField/__tests__/parseDateFromString.ts

@@ -19,6 +19,8 @@ export interface DateFieldBase<T = DateTime> extends ValueBase<T | null>, InputB
      * @default The timezone of the `value` or `defaultValue` or `placeholderValue`, 'default' otherwise.
      */
     timeZone?: string;
+    /** Custom parser function for parsing pasted date strings. If not provided, the default parser will be used. */
+    parseDateFromString?: (dateStr: string, format: string, timeZone?: string) => DateTime;
 }
 
 export interface PopupTriggerProps<Args extends unknown[] = []> {