@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha40

package/src/components/DatePicker/DatePicker.tsx

@@ -1,314 +1,345 @@
-import { FC, FocusEvent, forwardRef, SyntheticEvent, useEffect, useMemo, useState } from 'react';
-import ReactDatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-import clsx from 'clsx';
-import { isAfter, isBefore, isValid } from 'date-fns';
-import {
-  isEmpty,
-  isNotEmpty,
-  isStringNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { DateInput, EMPTY_DATE_INPUT_VALUE, IDateInputProps } from '../DateInput';
-import { DatePickerHeader, PopperContainer } from './components';
-import { DatePickerComponent, DEFAULT_DATE_FORMAT } from './constants';
-import { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers';
-import { IDatePickerBaseProps, IRange } from './types';
-import { IDatePickerStyles, useStyles } from './DatePicker.styles';
-
-export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDatePickerStyles> {
-  selectedDate?: Date | null;
-  locale: Locale;
-  months?: string[];
-  /** @default 'dd.MM.yyyy' */
-  dateFormat?: string;
-  /** @default 1 */
-  calendarStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  /** @default false */
-  isRange?: boolean;
-  /** @default false */
-  isInline?: boolean;
-  /** @default false */
-  shouldRenderPopperInBody?: boolean;
-  customInput?: FC<IDateInputProps>;
-  onChangeDate?: (date: Date | null, event?: SyntheticEvent) => void;
-  onChangeRange?: (date: IRange, event?: SyntheticEvent) => void;
-}
-
-export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
-  (
-    {
-      data,
-      selectedDate = null,
-      minDate,
-      maxDate,
-      endDate = null,
-      startDate = null,
-      locale,
-      months,
-      calendarStartDay = 1,
-      dateFormat = DEFAULT_DATE_FORMAT,
-      monthsShown,
-      placeholder,
-      isRange = false,
-      isInline = false,
-      isDisabled,
-      isClearable,
-      strictParsing,
-      fixedHeight,
-      excludeScrollbar,
-      focusSelectedMonth,
-      disabledKeyboardNavigation,
-      shouldRenderPopperInBody = false,
-      allowSameDay = false,
-      shouldCloseOnSelect,
-      showPreviousMonths,
-      preventOpenOnFocus,
-      popperModifiers,
-      popperPlacement,
-      todayButton,
-      highlightDates,
-      calendarContainer,
-      dayClassName,
-      customInput: CustomInput = DateInput,
-      customInputRef,
-      renderCustomHeader,
-      filterDate,
-      onYearChange,
-      onMonthChange,
-      onCalendarOpen,
-      onCalendarClose,
-      onChangeDate,
-      onChangeRange,
-      onBlur,
-      onFocus,
-      onKeyDown,
-      tweakStyles,
-      ...inputProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const tweakDateInputStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakDateInput',
-      currentComponentName: 'DatePicker',
-    });
-
-    const { formatDate, parseDateValue } = useMemo(
-      () => ({
-        formatDate: getDateFormatter(dateFormat),
-        parseDateValue: getDateValueParser(dateFormat),
-      }),
-      [dateFormat],
-    );
-
-    const [isOpen, setIsOpen] = useState(false);
-
-    const [dateValue, setDateValue] = useState(formatDate(selectedDate));
-
-    const [start, setStart] = useState(startDate);
-    const [startDateValue, setStartDateValue] = useState(formatDate(startDate));
-    const [end, setEnd] = useState(endDate);
-    const [endDateValue, setEndDateValue] = useState(formatDate(endDate));
-
-    const hasDateInputValue = isRange
-      ? isStringNotEmpty(startDateValue) || isStringNotEmpty(endDateValue)
-      : isStringNotEmpty(dateValue);
-
-    const dateInputProps: IDateInputProps = {
-      ...inputProps,
-      isRange,
-      isDisabled,
-      isClearable,
-      isActive: isOpen,
-      icon: isClearable && hasDateInputValue ? undefined : 'calendar',
-      tweakStyles: tweakDateInputStyles,
-      ...(isRange ? { startDate: startDateValue, endDate: endDateValue } : { date: dateValue }),
-    };
-
-    const handleChangeDate = (value: Date | null, event?: SyntheticEvent) => {
-      onChangeDate?.(value, event);
-    };
-
-    const isDateInRange = (date: Date) =>
-      (isEmpty(minDate) || isAfter(date, minDate)) && (isEmpty(maxDate) || isBefore(date, maxDate));
-
-    // TODO: Если пропса allowSameDay равна true и введена только начальная дата, то
-    // невозможно будет стереть значение в инпуте. Обойти это можно только если
-    // полностью выбрать период, а затем уже очищать инпут (баг в react-datepicker. В этом
-    // случае value равняется не [null, null], а [start, null])
-    const handleChangeRange = (value: IRange, event?: SyntheticEvent) => {
-      if (
-        allowSameDay ||
-        !areDatesEquals(value?.[0], startDate) ||
-        !areDatesEquals(value?.[1], endDate)
-      ) {
-        setStart(value?.[0] ?? null);
-        setEnd(value?.[1] ?? null);
-        onChangeRange?.(value, event);
-      }
-    };
-
-    const handleChangeDateRangeInput = (value: string) => {
-      const newStartDateValue = value.slice(0, 10);
-      let newStart = parseDateValue(newStartDateValue);
-      const newEndDateValue = value.slice(13);
-      let newEnd = parseDateValue(newEndDateValue);
-
-      if (
-        (isNotEmpty(newStart) && !isValid(newStart)) ||
-        (isNotEmpty(newStart) && !isDateInRange(newStart))
-      ) {
-        newStart = start;
-      }
-
-      if (
-        (isNotEmpty(newEnd) && !isValid(newEnd)) ||
-        (isNotEmpty(newEnd) && !isDateInRange(newEnd))
-      ) {
-        newEnd = end;
-      }
-
-      // Если оставить пустой начальную дату и заполненной конечную,
-      // то ломается react-datepicker и в календарике ничего нельзя выбирать
-      if (
-        (isEmpty(newStart) && isValid(newEnd)) ||
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        (isValid(newStart) && isValid(newEnd) && isAfter(newStart!, newEnd!))
-      ) {
-        newStart = newEnd;
-        newEnd = null;
-      }
-
-      setStartDateValue(newStartDateValue);
-      setStart(newStart);
-      setEndDateValue(newEndDateValue);
-      setEnd(newEnd);
-    };
-
-    const handleDateInputBlur = (event: FocusEvent<HTMLInputElement>) => {
-      onBlur?.(event);
-      setDateValue(formatDate(selectedDate));
-    };
-
-    const setDateRangeValues = (startValue: Date | null = null, endValue: Date | null = null) => {
-      let convertedStartDate = formatDate(startValue);
-      const convertedEndDate = formatDate(endValue);
-      if (convertedStartDate === '' && convertedEndDate !== '') {
-        // Если выставлять пустую строку, то конечная дата перепрыгивает на место начальной
-        convertedStartDate = EMPTY_DATE_INPUT_VALUE;
-      }
-
-      setStart(startValue);
-      setStartDateValue(convertedStartDate);
-      setEnd(endValue);
-      setEndDateValue(convertedEndDate);
-    };
-
-    const handleDateRangeInputBlur = (event: FocusEvent<HTMLInputElement>) => {
-      onBlur?.(event);
-      handleChangeRange([start, end], event);
-      setDateRangeValues(start, end);
-    };
-
-    const handleOpenCalendar = () => {
-      setIsOpen(true);
-      onCalendarOpen?.();
-    };
-
-    const handleCloseCalendar = () => {
-      setIsOpen(false);
-      if (isRange) {
-        handleChangeRange([start, end]);
-        setDateRangeValues(start, end);
-      } else {
-        setDateValue(formatDate(selectedDate));
-      }
-      onCalendarClose?.();
-    };
-
-    useEffect(() => {
-      setDateValue(formatDate(selectedDate));
-      setDateRangeValues(startDate, endDate);
-    }, [selectedDate, startDate, endDate]);
-
-    return (
-      <div className={classes.root} {...addDataAttributes(data)}>
-        <DatePickerComponent
-          ref={ref}
-          minDate={minDate}
-          maxDate={maxDate}
-          locale={locale}
-          dateFormat={dateFormat}
-          placeholderText={placeholder}
-          calendarStartDay={calendarStartDay}
-          inline={isInline}
-          disabled={isDisabled}
-          fixedHeight={fixedHeight}
-          excludeScrollbar={excludeScrollbar}
-          showPreviousMonths={showPreviousMonths}
-          focusSelectedMonth={focusSelectedMonth}
-          monthsShown={monthsShown}
-          allowSameDay={allowSameDay}
-          showPopperArrow={false}
-          popperClassName={classes.popper}
-          calendarClassName={classes.datepicker}
-          dayClassName={(v) => clsx(classes.day, dayClassName?.(v))}
-          disabledKeyboardNavigation={disabledKeyboardNavigation}
-          popperContainer={shouldRenderPopperInBody ? PopperContainer : undefined}
-          popperModifiers={popperModifiers}
-          popperPlacement={popperPlacement}
-          selectsRange={isRange}
-          strictParsing={strictParsing}
-          preventOpenOnFocus={preventOpenOnFocus}
-          shouldCloseOnSelect={shouldCloseOnSelect}
-          customInputRef={customInputRef}
-          customInput={<CustomInput {...dateInputProps} />}
-          renderCustomHeader={
-            renderCustomHeader ??
-            ((baseProps) => <DatePickerHeader {...baseProps} months={months} />)
-          }
-          todayButton={todayButton}
-          highlightDates={highlightDates}
-          calendarContainer={calendarContainer}
-          filterDate={filterDate}
-          onYearChange={onYearChange}
-          onMonthChange={onMonthChange}
-          onFocus={onFocus}
-          onKeyDown={onKeyDown}
-          onCalendarOpen={handleOpenCalendar}
-          onCalendarClose={handleCloseCalendar}
-          onChangeRaw={(_, value?: string) => {
-            // Если передали value, значит этот обработчик вызвался после изменения значения в инпуте
-            // (react-datepicker вызывает эту функцию также при клике на дату в календаре)
-            if (value === undefined) {
-              return;
-            }
-            if (isRange) {
-              handleChangeDateRangeInput(value);
-            } else {
-              setDateValue(value);
-            }
-          }}
-          {...(isRange
-            ? {
-                startDate: start,
-                endDate: end,
-                selected: start,
-                onBlur: handleDateRangeInputBlur,
-                onChange: handleChangeRange,
-              }
-            : {
-                selected: selectedDate,
-                onBlur: handleDateInputBlur,
-                onChange: handleChangeDate,
-              })}
-        />
-      </div>
-    );
-  },
-);
+import {
+  FC,
+  FocusEvent,
+  SyntheticEvent,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import clsx from 'clsx';
+import { isAfter, isBefore, isValid } from 'date-fns';
+import {
+  addDataAttributes,
+  isEmpty,
+  isNotEmpty,
+  isString,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { offset } from '@floating-ui/react';
+import { useMergedRefs, useOnClickOutside, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { DateInput, EMPTY_DATE_INPUT_VALUE, IDateInputProps } from '../DateInput';
+import { DatePickerBase, DatePickerHeader, PopperContainer } from './components';
+import {
+  DEFAULT_DATE_FORMAT,
+  IDatePickerLocale,
+  LocalesMap,
+  OUTSIDE_CLICK_IGNORE_CLASS,
+} from './constants';
+import { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers';
+import { IDatePickerBaseProps, IRange } from './types';
+import { IDatePickerStyles, useStyles } from './DatePicker.styles';
+
+export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDatePickerStyles> {
+  selectedDate?: Date | null;
+  locale: IDatePickerLocale;
+  months?: string[];
+  /** @default 'dd.MM.yyyy' */
+  dateFormat?: string;
+  /** @default 1 */
+  calendarStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /** @default false */
+  isRange?: boolean;
+  /** @default false */
+  isInline?: boolean;
+  /** @default false */
+  shouldRenderPopperInBody?: boolean;
+  customInput?: FC<IDateInputProps>;
+  onChangeDate?: (date: Date | null, event?: SyntheticEvent) => void;
+  onChangeRange?: (date: IRange, event?: SyntheticEvent) => void;
+}
+
+export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
+  (
+    {
+      data,
+      selectedDate = null,
+      minDate,
+      maxDate,
+      endDate = null,
+      startDate = null,
+      locale,
+      months,
+      calendarStartDay = 1,
+      dateFormat = DEFAULT_DATE_FORMAT,
+      monthsShown,
+      placeholder,
+      isRange = false,
+      isInline = false,
+      isDisabled,
+      isClearable,
+      strictParsing,
+      fixedHeight,
+      focusSelectedMonth,
+      disabledKeyboardNavigation,
+      shouldRenderPopperInBody = false,
+      allowSameDay = false,
+      shouldCloseOnSelect,
+      showPreviousMonths,
+      preventOpenOnFocus,
+      popperModifiers = [],
+      popperPlacement = 'bottom-start',
+      todayButton,
+      highlightDates,
+      calendarContainer,
+      dayClassName,
+      customInput: CustomInput = DateInput,
+      customInputRef,
+      renderCustomHeader,
+      filterDate,
+      onYearChange,
+      onMonthChange,
+      onCalendarOpen,
+      onCalendarClose,
+      onChangeDate,
+      onChangeRange,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      tweakStyles,
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const tweakDateInputStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakDateInput',
+      currentComponentName: 'DatePicker',
+    });
+
+    const { formatDate, parseDateValue } = useMemo(
+      () => ({
+        formatDate: getDateFormatter(dateFormat),
+        parseDateValue: getDateValueParser(dateFormat),
+      }),
+      [dateFormat],
+    );
+
+    const datePickerRef = useRef<DatePickerBase>();
+
+    const componentRef = useMergedRefs([ref, datePickerRef]);
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const [dateValue, setDateValue] = useState(formatDate(selectedDate));
+
+    const [start, setStart] = useState(startDate);
+    const [startDateValue, setStartDateValue] = useState(formatDate(startDate));
+    const [end, setEnd] = useState(endDate);
+    const [endDateValue, setEndDateValue] = useState(formatDate(endDate));
+
+    const hasDateInputValue = isRange
+      ? isStringNotEmpty(startDateValue) || isStringNotEmpty(endDateValue)
+      : isStringNotEmpty(dateValue);
+
+    const dateInputProps: IDateInputProps = {
+      ...inputProps,
+      isRange,
+      isDisabled,
+      isClearable,
+      isActive: isOpen,
+      icon: isClearable && hasDateInputValue ? undefined : 'calendar',
+      tweakStyles: tweakDateInputStyles,
+      ...(isRange ? { startDate: startDateValue, endDate: endDateValue } : { date: dateValue }),
+    };
+
+    const handleChangeDate = (value: Date | null, event?: SyntheticEvent) => {
+      onChangeDate?.(value, event);
+    };
+
+    const isDateInRange = (date: Date) =>
+      (isEmpty(minDate) || isAfter(date, minDate)) && (isEmpty(maxDate) || isBefore(date, maxDate));
+
+    // TODO: Если пропса allowSameDay равна true и введена только начальная дата, то
+    // невозможно будет стереть значение в инпуте. Обойти это можно только если
+    // полностью выбрать период, а затем уже очищать инпут (баг в react-datepicker. В этом
+    // случае value равняется не [null, null], а [start, null])
+    const handleChangeRange = (value: IRange, event?: SyntheticEvent) => {
+      if (
+        allowSameDay ||
+        !areDatesEquals(value?.[0], startDate) ||
+        !areDatesEquals(value?.[1], endDate)
+      ) {
+        setStart(value?.[0] ?? null);
+        setEnd(value?.[1] ?? null);
+        onChangeRange?.(value, event);
+      }
+    };
+
+    // TODO: кажется это можно улучшить, т.к проблему пофиксили (https://github.com/Hacker0x01/react-datepicker/pull/5060)
+    const handleChangeDateRangeInput = (value: string) => {
+      const newStartDateValue = value.slice(0, 10);
+      let newStart = parseDateValue(newStartDateValue);
+      const newEndDateValue = value.slice(13);
+      let newEnd = parseDateValue(newEndDateValue);
+
+      if (
+        (isNotEmpty(newStart) && !isValid(newStart)) ||
+        (isNotEmpty(newStart) && !isDateInRange(newStart))
+      ) {
+        newStart = start;
+      }
+
+      if (
+        (isNotEmpty(newEnd) && !isValid(newEnd)) ||
+        (isNotEmpty(newEnd) && !isDateInRange(newEnd))
+      ) {
+        newEnd = end;
+      }
+
+      // Если оставить пустой начальную дату и заполненной конечную,
+      // то ломается react-datepicker и в календарике ничего нельзя выбирать
+      if (
+        (isEmpty(newStart) && isValid(newEnd)) ||
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        (isValid(newStart) && isValid(newEnd) && isAfter(newStart!, newEnd!))
+      ) {
+        newStart = newEnd;
+        newEnd = null;
+      }
+
+      setStartDateValue(newStartDateValue);
+      setStart(newStart);
+      setEndDateValue(newEndDateValue);
+      setEnd(newEnd);
+    };
+
+    const handleDateInputBlur = (event: FocusEvent<HTMLInputElement>) => {
+      onBlur?.(event);
+      setDateValue(formatDate(selectedDate));
+    };
+
+    const setDateRangeValues = (startValue: Date | null = null, endValue: Date | null = null) => {
+      let convertedStartDate = formatDate(startValue);
+      const convertedEndDate = formatDate(endValue);
+      if (convertedStartDate === '' && convertedEndDate !== '') {
+        // Если выставлять пустую строку, то конечная дата перепрыгивает на место начальной
+        convertedStartDate = EMPTY_DATE_INPUT_VALUE;
+      }
+
+      setStart(startValue);
+      setStartDateValue(convertedStartDate);
+      setEnd(endValue);
+      setEndDateValue(convertedEndDate);
+    };
+
+    const handleDateRangeInputBlur = (event: FocusEvent<HTMLInputElement>) => {
+      onBlur?.(event);
+      handleChangeRange([start, end], event);
+      setDateRangeValues(start, end);
+    };
+
+    const handleOpenCalendar = () => {
+      setIsOpen(true);
+      onCalendarOpen?.();
+    };
+
+    const handleCloseCalendar = () => {
+      setIsOpen(false);
+      if (isRange) {
+        handleChangeRange([start, end]);
+        setDateRangeValues(start, end);
+      } else {
+        setDateValue(formatDate(selectedDate));
+      }
+      onCalendarClose?.();
+    };
+
+    useEffect(() => {
+      setDateValue(formatDate(selectedDate));
+      setDateRangeValues(startDate, endDate);
+    }, [selectedDate, startDate, endDate]);
+
+    // Кастомный обработчик клика снаружи, чтобы можно было поставить фокус на Input при открытом календаре.
+    // Проблема в том, что класс OUTSIDE_CLICK_IGNORE_CLASS висит контейнере Input'а. А react-datepicker
+    // проверяет наличие класса непосредственно на элементе, который вызвал клик, но не на его родителях
+    useOnClickOutside(
+      () => datePickerRef.current?.calendar?.containerRef?.current,
+      (event) => datePickerRef.current?.handleClickOutside(event as MouseEvent),
+      OUTSIDE_CLICK_IGNORE_CLASS,
+    );
+
+    return (
+      <div className={classes.root} {...addDataAttributes(data)}>
+        <DatePickerBase
+          ref={componentRef}
+          minDate={minDate}
+          maxDate={maxDate}
+          locale={isString(locale) ? LocalesMap[locale] : locale}
+          dateFormat={dateFormat}
+          placeholderText={placeholder}
+          calendarStartDay={calendarStartDay}
+          inline={isInline}
+          disabled={isDisabled}
+          fixedHeight={fixedHeight}
+          showPreviousMonths={showPreviousMonths}
+          focusSelectedMonth={focusSelectedMonth}
+          monthsShown={monthsShown}
+          allowSameDay={allowSameDay}
+          showPopperArrow={false}
+          popperClassName={classes.popper}
+          calendarClassName={classes.datepicker}
+          dayClassName={(v) => clsx(classes.day, dayClassName?.(v))}
+          disabledKeyboardNavigation={disabledKeyboardNavigation}
+          popperContainer={shouldRenderPopperInBody ? PopperContainer : undefined}
+          // Убираем дефолтный отступ в 10px из либы
+          // https://github.com/Hacker0x01/react-datepicker/blob/db67a58de2b05d2681bdf0a4977b606095d514c4/src/with_floating.tsx#L58
+          popperModifiers={[offset(-10), ...popperModifiers]}
+          popperPlacement={popperPlacement}
+          strictParsing={strictParsing}
+          preventOpenOnFocus={preventOpenOnFocus}
+          shouldCloseOnSelect={shouldCloseOnSelect}
+          customInputRef={customInputRef}
+          customInput={<CustomInput {...dateInputProps} />}
+          renderDayContents={(day) => <div className={classes.dayInner}>{day}</div>}
+          renderCustomHeader={
+            renderCustomHeader ??
+            ((baseProps) => <DatePickerHeader {...baseProps} months={months} />)
+          }
+          todayButton={todayButton}
+          highlightDates={highlightDates}
+          calendarContainer={calendarContainer}
+          filterDate={filterDate}
+          onYearChange={onYearChange}
+          onMonthChange={onMonthChange}
+          onFocus={onFocus}
+          onKeyDown={onKeyDown}
+          onCalendarOpen={handleOpenCalendar}
+          onCalendarClose={handleCloseCalendar}
+          onChangeRaw={(_, value?: string) => {
+            // Если передали value, значит этот обработчик вызвался после изменения значения в инпуте
+            // (react-datepicker вызывает эту функцию также при клике на дату в календаре)
+            if (value === undefined) {
+              return;
+            }
+            if (isRange) {
+              handleChangeDateRangeInput(value);
+            } else {
+              setDateValue(value);
+            }
+          }}
+          {...(isRange
+            ? {
+                startDate: start,
+                endDate: end,
+                selected: start,
+                selectsRange: true,
+                onBlur: handleDateRangeInputBlur,
+                onChange: handleChangeRange,
+              }
+            : {
+                selected: selectedDate,
+                onBlur: handleDateInputBlur,
+                onChange: handleChangeDate,
+              })}
+        />
+      </div>
+    );
+  },
+);