feat(DatePicker, RelativeDatePicker): allow to render custom calendar

ValeraS · ValeraS · commit 2bc50b69a0c3 · 2023-11-01T10:20:51.000+01:00
diff --git a/src/components/DateField/hooks/useDateFieldProps.ts b/src/components/DateField/hooks/useDateFieldProps.ts
@@ -136,10 +136,10 @@ export function useDateFieldProps(
                     state.focusNextSection();
                 } else if (e.key === 'Home') {
                     e.preventDefault();
-                    state.focusFirstSection();
+                    state.decrementToMin();
                 } else if (e.key === 'End') {
                     e.preventDefault();
-                    state.focusLastSection();
+                    state.incrementToMax();
                 } else if (e.key === 'ArrowUp' && !e.altKey) {
                     e.preventDefault();
                     state.increment();
diff --git a/src/components/DateField/hooks/useDateFieldState.ts b/src/components/DateField/hooks/useDateFieldState.ts
@@ -6,12 +6,13 @@ import type {DateTime} from '@gravity-ui/date-utils';
 import {useControlledState} from '../../hooks/useControlledState';
 import type {DateFieldBase} from '../../types/datePicker';
 import type {ValidationState} from '../../types/inputs';
+import {createPlaceholderValue, isInvalid, mergeDateTime} from '../../utils/dates';
 import type {
     DateFieldSection,
     DateFieldSectionType,
     DateFieldSectionWithoutPosition,
 } from '../types';
-import {createPlaceholderValue, isInvalid, mergeDateTime, splitFormatIntoSections} from '../utils';
+import {splitFormatIntoSections} from '../utils';
 
 export interface DateFieldStateOptions extends DateFieldBase {}
 
@@ -91,6 +92,8 @@ export type DateFieldState = {
      * Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
      */
     decrementPage: () => void;
+    incrementToMax: () => void;
+    decrementToMin: () => void;
     /** Clears the value of the currently selected segment, reverting it to the placeholder. */
     clearSection: () => void;
     /** Clears all segments, reverting them to the placeholder. */
@@ -329,6 +332,32 @@ export function useDateFieldState(props: DateFieldStateOptions): DateFieldState
                 adjustSection(sectionIndex, -(PAGE_STEP[this.sections[sectionIndex].type] || 1));
             }
         },
+        incrementToMax() {
+            if (this.readOnly || this.disabled) {
+                return;
+            }
+            enteredKeys.current = '';
+            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
+            if (sectionIndex !== -1) {
+                const section = this.sections[sectionIndex];
+                if (typeof section.maxValue === 'number') {
+                    setSection(section, section.maxValue);
+                }
+            }
+        },
+        decrementToMin() {
+            if (this.readOnly || this.disabled) {
+                return;
+            }
+            enteredKeys.current = '';
+            const sectionIndex = getCurrentEditableSectionIndex(this.sections, selectedSections);
+            if (sectionIndex !== -1) {
+                const section = this.sections[sectionIndex];
+                if (typeof section.minValue === 'number') {
+                    setSection(section, section.minValue);
+                }
+            }
+        },
         clearSection() {
             if (this.readOnly || this.disabled) {
                 return;
diff --git a/src/components/DateField/types.ts b/src/components/DateField/types.ts
@@ -1,4 +1,17 @@
-export type DateFieldSectionType = Exclude<Intl.DateTimeFormatPartTypes, 'era'>;
+export type DateFieldSectionType = Extract<
+    Intl.DateTimeFormatPartTypes,
+    | 'day'
+    | 'dayPeriod'
+    | 'hour'
+    | 'literal'
+    | 'minute'
+    | 'month'
+    | 'second'
+    | 'timeZoneName'
+    | 'weekday'
+    | 'year'
+    | 'unknown'
+>;
 
 export type DateFormatTokenMap = {
     [formatToken: string]:
diff --git a/src/components/DateField/utils.ts b/src/components/DateField/utils.ts
@@ -1,5 +1,4 @@
 import {dateTime, settings} from '@gravity-ui/date-utils';
-import type {DateTime} from '@gravity-ui/date-utils';
 
 import {i18n} from './i18n';
 import type {
@@ -337,39 +336,3 @@ function getSectionOptions(
 
     return undefined;
 }
-
-interface PlaceholderValueOptions {
-    placeholderValue?: DateTime;
-    timeZone?: string;
-}
-export function createPlaceholderValue({placeholderValue, timeZone}: PlaceholderValueOptions) {
-    return (
-        placeholderValue ?? dateTime({timeZone}).set('hour', 0).set('minute', 0).set('second', 0)
-    );
-}
-
-export function isInvalid(
-    value: DateTime | null | undefined,
-    minValue: DateTime | undefined,
-    maxValue: DateTime | undefined,
-) {
-    if (!value) {
-        return false;
-    }
-
-    if (minValue && value.isBefore(minValue)) {
-        return true;
-    }
-    if (maxValue && maxValue.isBefore(value)) {
-        return true;
-    }
-
-    return false;
-}
-
-export function mergeDateTime(date: DateTime, time: DateTime) {
-    return date
-        .set('hours', time.hour())
-        .set('minutes', time.minute())
-        .set('seconds', time.second());
-}
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {TextInput, useFocusWithin, useMobile} from '@gravity-ui/uikit';
 
+import type {CalendarProps} from '../Calendar';
 import {useDateFieldProps, useDateFieldState} from '../DateField';
 import type {
     AccessibilityProps,
@@ -27,7 +28,9 @@ export interface DatePickerProps
         KeyboardEvents,
         DomProps,
         StyleProps,
-        AccessibilityProps {}
+        AccessibilityProps {
+    children?: (props: CalendarProps) => React.ReactNode;
+}
 
 export function DatePicker({
     value,
@@ -36,6 +39,7 @@ export function DatePicker({
     className,
     onFocus,
     onBlur,
+    children,
     ...props
 }: DatePickerProps) {
     const anchorRef = React.useRef<HTMLDivElement>(null);
@@ -94,7 +98,12 @@ export function DatePicker({
             {isMobile ? (
                 <MobileCalendar props={props} state={state} />
             ) : (
-                <DesktopCalendar anchorRef={anchorRef} props={props} state={state} />
+                <DesktopCalendar
+                    anchorRef={anchorRef}
+                    props={props}
+                    state={state}
+                    renderCalendar={children}
+                />
             )}
             <TextInput
                 {...inputProps}
diff --git a/src/components/DatePicker/DesktopCalendar.tsx b/src/components/DatePicker/DesktopCalendar.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {Calendar as CalendarIcon} from '@gravity-ui/icons';
 import {Button, Icon, Popup, useFocusWithin} from '@gravity-ui/uikit';
 
-import {Calendar} from '../Calendar';
+import {Calendar, type CalendarProps} from '../Calendar';
 import {DateField} from '../DateField';
 import {getButtonSizeForInput} from '../utils/getButtonSizeForInput';
 
@@ -16,8 +16,9 @@ interface DesktopCalendarProps {
     anchorRef: React.RefObject<HTMLElement>;
     props: DatePickerProps;
     state: DatePickerState;
+    renderCalendar?: (props: CalendarProps) => React.ReactNode;
 }
-export function DesktopCalendar({anchorRef, props, state}: DesktopCalendarProps) {
+export function DesktopCalendar({anchorRef, props, state, renderCalendar}: DesktopCalendarProps) {
     const {focusWithinProps} = useFocusWithin({
         isDisabled: !state.isOpen,
         onBlurWithin: () => {
@@ -29,6 +30,22 @@ export function DesktopCalendar({anchorRef, props, state}: DesktopCalendarProps)
         return null;
     }
 
+    const calendarProps: CalendarProps = {
+        autoFocus: true,
+        size: props.size === 's' ? 'm' : props.size,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        onUpdate: (d) => {
+            state.setDateValue(d);
+        },
+        defaultFocusedValue: state.dateValue ?? undefined,
+        value: state.dateValue,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        isDateUnavailable: props.isDateUnavailable,
+        timeZone: props.timeZone,
+    };
+
     return (
         <Popup
             open={state.isOpen}
@@ -38,23 +55,12 @@ export function DesktopCalendar({anchorRef, props, state}: DesktopCalendarProps)
             }}
             restoreFocus
         >
-            <div {...focusWithinProps} className={b('popup-content')}>
-                <Calendar
-                    // eslint-disable-next-line jsx-a11y/no-autofocus
-                    autoFocus
-                    size={props.size === 's' ? 'm' : props.size}
-                    disabled={props.disabled}
-                    readOnly={props.readOnly}
-                    onUpdate={(d) => {
-                        state.setDateValue(d);
-                    }}
-                    defaultFocusedValue={state.dateValue ?? undefined}
-                    value={state.dateValue}
-                    minValue={props.minValue}
-                    maxValue={props.maxValue}
-                    isDateUnavailable={props.isDateUnavailable}
-                    timeZone={props.timeZone}
-                />
+            <div {...focusWithinProps} className={b('popup-content')} tabIndex={-1}>
+                {typeof renderCalendar === 'function' ? (
+                    renderCalendar(calendarProps)
+                ) : (
+                    <Calendar {...calendarProps} />
+                )}
                 {state.hasTime && (
                     <div className={b('time-field-wrapper')}>
                         <DateField
diff --git a/src/components/DatePicker/MobileCalendar.tsx b/src/components/DatePicker/MobileCalendar.tsx
@@ -4,7 +4,7 @@ import {Calendar as CalendarIcon} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 
 import {block} from '../../utils/cn';
-import {createPlaceholderValue, mergeDateTime} from '../DateField/utils';
+import {createPlaceholderValue, mergeDateTime} from '../utils/dates';
 import {getButtonSizeForInput} from '../utils/getButtonSizeForInput';
 
 import type {DatePickerProps} from './DatePicker';
diff --git a/src/components/DatePicker/__stories__/DatePicker.stories.tsx b/src/components/DatePicker/__stories__/DatePicker.stories.tsx
@@ -1,7 +1,11 @@
+import React from 'react';
+
 import {dateTimeParse} from '@gravity-ui/date-utils';
+import {Tabs} from '@gravity-ui/uikit';
 import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
 import type {Meta, StoryObj} from '@storybook/react';
 
+import {Calendar} from '../../Calendar';
 import {DatePicker} from '../DatePicker';
 
 const meta: Meta<typeof DatePicker> = {
@@ -12,9 +16,10 @@ const meta: Meta<typeof DatePicker> = {
 
 export default meta;
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 type Story = StoryObj<typeof DatePicker>;
 
-export const Default: Story = {
+export const Default = {
     render: (args) => {
         const timeZone = args.timeZone;
         const props = {
@@ -84,4 +89,34 @@ export const Default: Story = {
             },
         },
     },
-};
+} satisfies Story;
+
+export const WithCustomCalendar = {
+    ...Default,
+    render: (args) => {
+        return Default.render({
+            ...args,
+            children: function CustomCalendar(props) {
+                const [mode, setMode] = React.useState('days');
+
+                return (
+                    <div>
+                        <div style={{paddingInline: 5}}>
+                            <Tabs
+                                activeTab={mode}
+                                onSelectTab={(id) => {
+                                    setMode(id);
+                                }}
+                                items={['days', 'months', 'quarters', 'years'].map((item) => ({
+                                    id: item,
+                                    title: item[0].toUpperCase() + item.slice(1, -1),
+                                }))}
+                            />
+                        </div>
+                        <Calendar {...props} modes={{[mode]: true}} />
+                    </div>
+                );
+            },
+        });
+    },
+} satisfies Story;
diff --git a/src/components/DatePicker/hooks/useDatePickerState.ts b/src/components/DatePicker/hooks/useDatePickerState.ts
@@ -2,9 +2,10 @@ import React from 'react';
 
 import type {DateTime} from '@gravity-ui/date-utils';
 
-import {createPlaceholderValue, splitFormatIntoSections} from '../../DateField/utils';
+import {splitFormatIntoSections} from '../../DateField/utils';
 import {useControlledState} from '../../hooks/useControlledState';
 import type {InputBase, ValueBase} from '../../types';
+import {createPlaceholderValue, mergeDateTime} from '../../utils/dates';
 export type Granularity = 'day' | 'hour' | 'minute' | 'second';
 
 export interface DatePickerState {
@@ -161,13 +162,6 @@ export function useDatePickerState(props: DatePickerStateOptions): DatePickerSta
     };
 }
 
-function mergeDateTime(date: DateTime, time: DateTime) {
-    return date
-        .set('hours', time.hour())
-        .set('minutes', time.minute())
-        .set('seconds', time.second());
-}
-
 function getPlaceholderTime(placeholderValue: DateTime | undefined, timeZone?: string) {
     return createPlaceholderValue({placeholderValue, timeZone});
 }
diff --git a/src/components/RelativeDatePicker/RelativeDatePicker.tsx b/src/components/RelativeDatePicker/RelativeDatePicker.tsx
@@ -5,6 +5,7 @@ import {Button, Icon, Popup, TextInput, useMobile} from '@gravity-ui/uikit';
 
 import {block} from '../../utils/cn';
 import {Calendar} from '../Calendar';
+import type {CalendarProps} from '../Calendar';
 import {DateField} from '../DateField';
 import {MobileCalendar, MobileCalendarIcon} from '../DatePicker/MobileCalendar';
 import type {
@@ -31,7 +32,9 @@ export interface RelativeDatePickerProps
         KeyboardEvents,
         DomProps,
         StyleProps,
-        AccessibilityProps {}
+        AccessibilityProps {
+    children?: (props: CalendarProps) => React.ReactNode;
+}
 
 export function RelativeDatePicker(props: RelativeDatePickerProps) {
     const state = useRelativeDatePickerState(props);
@@ -90,7 +93,11 @@ export function RelativeDatePicker(props: RelativeDatePickerProps) {
             {!isMobile && (
                 <Popup {...popupProps} anchorRef={anchorRef}>
                     <div className={b('popup-content')}>
-                        <Calendar {...calendarProps} />
+                        {typeof props.children === 'function' ? (
+                            props.children(calendarProps)
+                        ) : (
+                            <Calendar {...calendarProps} />
+                        )}
                         {state.datePickerState.hasTime && (
                             <div className={b('time-field-wrapper')}>
                                 <DateField {...timeInputProps} />
diff --git a/src/components/RelativeDatePicker/__stories__/RelativeDateField.stories.tsx b/src/components/RelativeDatePicker/__stories__/RelativeDateField.stories.tsx
diff --git a/src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts b/src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts
