@true-engineering/true-react-common-ui-kit 1.12.1 → 2.0.1

package/src/components/DatePicker/DatePicker.tsx

@@ -1,358 +1,354 @@
-import React, {
-  useState,
-  useEffect,
-  FC,
-  useCallback,
-  ReactElement,
-  ReactNode,
-} from 'react';
-import ReactDatepicker, {
-  ReactDatePickerCustomHeaderProps,
-  ReactDatePickerProps,
-} from 'react-datepicker';
-import { format, isAfter, isValid, parse } from 'date-fns';
-import { Portal } from 'react-overlays';
-import 'react-datepicker/dist/react-datepicker.css';
-
-import { useTheme } from '../../hooks';
-import { addDataAttributes } from '../../helpers';
-import { DateInput, IDateInputProps } from '../DateInput';
-import { DatePickerInput } from './DatePickerInput';
-import { DatePickerHeader } from './DatePickerHeader';
-import { IInputProps } from '../Input';
-
-import { DatePickerStyles, styles } from './DatePicker.styles';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-const Datepicker = (ReactDatepicker.default ??
-  ReactDatepicker) as typeof ReactDatepicker;
-
-export interface IDatePickerProps
-  extends Omit<IInputProps, 'onChange' | 'value'> {
-  selectedDate: Date | null;
-  locale: Locale;
-  months: string[];
-  tweakStyles?: DatePickerStyles;
-  minDate?: Date | null;
-  maxDate?: Date | null;
-  endDate?: Date | null;
-  startDate?: Date | null;
-  size?: 's' | 'm' | 'full';
-  isRange?: boolean;
-  calendarStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  leftPosition?: number;
-  topPosition?: number;
-  isInline?: boolean;
-  isNeedClearSelectedDate?: boolean;
-  dateFormat?: string;
-  shouldGiveValueOnType?: boolean;
-  disabledKeyboardNavigation?: boolean;
-  monthsShown?: number;
-  showPreviousMonths?: boolean;
-  customHeader?: (params: ReactDatePickerCustomHeaderProps) => React.ReactNode;
-  filterDate?: (date: Date) => boolean;
-  onChangeDate?: (date: Date | null, dateVal?: string) => void;
-  onChangeRange?: (
-    date: [Date, Date] | null,
-    event?: React.SyntheticEvent<any>,
-  ) => void;
-
-  shouldRenderPopperInBody?: boolean;
-  popperModifiers?: ReactDatePickerProps['popperModifiers'];
-  popperPlacement?: ReactDatePickerProps['popperPlacement'];
-}
-
-const PopperContainer: FC<{ children: ReactNode }> = ({ children }) => (
-  <Portal container={document.body}>{children as ReactElement}</Portal>
-);
-
-const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
-
-export const DatePicker: FC<IDatePickerProps> = ({
-  data,
-  tweakStyles,
-  selectedDate,
-  minDate,
-  maxDate,
-  endDate,
-  startDate,
-  size,
-  isRange,
-  locale,
-  months,
-  calendarStartDay = 1,
-  leftPosition = 0,
-  topPosition = 0,
-  isInline,
-  isNeedClearSelectedDate,
-  dateFormat = DEFAULT_DATE_FORMAT,
-  monthsShown,
-  placeholder = '__.__.____',
-  shouldGiveValueOnType,
-  disabledKeyboardNavigation,
-  shouldRenderPopperInBody,
-  popperModifiers,
-  showPreviousMonths,
-  popperPlacement,
-  onChangeDate,
-  onChangeRange,
-  customHeader,
-  filterDate,
-  ...inputProps
-}) => {
-  const { classes } = useTheme('DatePicker', styles, tweakStyles, {
-    leftPosition,
-    topPosition,
-  });
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [date, setDate] = useState(selectedDate);
-  const [dateValue, setDateValue] = useState(
-    selectedDate ? format(selectedDate, dateFormat) : '',
-  );
-
-  const [start, setStart] = useState(startDate);
-  const [end, setEnd] = useState(endDate);
-
-  const [startDateValue, setStartDateValue] = useState(
-    startDate ? format(startDate, dateFormat) : '',
-  );
-  const [endDateValue, setEndDateValue] = useState(
-    endDate ? format(endDate, dateFormat) : '',
-  );
-
-  const isDateValid = (value: string): boolean =>
-    isValid(parse(value, dateFormat, new Date()));
-
-  const parseStringToDate = (value: string): Date =>
-    parse(value, dateFormat, new Date());
-
-  const handleDateChange = useCallback(
-    (newDate: string) => {
-      if (onChangeDate) {
-        if (!newDate) {
-          onChangeDate(null, newDate);
-        }
-
-        if (newDate && isDateValid(newDate)) {
-          onChangeDate(parseStringToDate(newDate));
-        }
-      }
-
-      setDateValue(newDate);
-    },
-    [onChangeDate],
-  );
-
-  const handleRangeChange = useCallback(
-    (newDate: string) => {
-      if (!newDate && onChangeRange) {
-        onChangeRange(null);
-        setStartDateValue('');
-        setEndDateValue('');
-      }
-
-      const newStartDate = newDate.slice(0, 10);
-      const newEndDate = newDate.slice(13);
-
-      setStartDateValue(newStartDate);
-      setEndDateValue(newEndDate);
-
-      if (newStartDate && isDateValid(newStartDate)) {
-        setStart(parseStringToDate(newStartDate));
-      }
-
-      if (newEndDate && isDateValid(newEndDate)) {
-        setEnd(parseStringToDate(newEndDate));
-      }
-
-      if (
-        newStartDate &&
-        newEndDate &&
-        isDateValid(newStartDate) &&
-        isDateValid(newEndDate) &&
-        onChangeRange
-      ) {
-        onChangeRange([
-          parseStringToDate(newStartDate),
-          parseStringToDate(newEndDate),
-        ]);
-      }
-    },
-    [onChangeRange],
-  );
-
-  useEffect(() => {
-    setDateValue('');
-  }, [isNeedClearSelectedDate]);
-
-  useEffect(() => {
-    setDate(selectedDate);
-    setStart(startDate);
-    setEnd(endDate);
-    setStartDateValue(startDate ? format(startDate, dateFormat) : '');
-    setEndDateValue(endDate ? format(endDate, dateFormat) : '');
-    setDateValue(selectedDate ? format(selectedDate, dateFormat) : '');
-  }, [selectedDate, startDate, endDate]);
-
-  const onTabConfirm = (event: KeyboardEvent) => {
-    if (event.key === '9') {
-      setIsOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('keydown', onTabConfirm);
-    return () => document.removeEventListener('keydown', onTabConfirm);
-  }, []);
-
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    if (inputProps.onBlur) {
-      inputProps.onBlur(e);
-    }
-    // Для проекта НБА не надо очищать инпут, если дата не валидна, нужно получить само значение
-    if (shouldGiveValueOnType && onChangeDate && !isDateValid(dateValue)) {
-      onChangeDate(null, dateValue);
-      return;
-    }
-
-    if (onChangeDate && date) {
-      if (!isDateValid(dateValue)) {
-        onChangeDate(null);
-        setDateValue('');
-      } else if (maxDate && isAfter(date, maxDate)) {
-        onChangeDate(maxDate);
-      } else if (minDate && isAfter(minDate, date)) {
-        onChangeDate(minDate);
-      }
-    }
-  };
-
-  const handleRangeBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    if (inputProps.onBlur) {
-      inputProps.onBlur(e);
-    }
-
-    if (onChangeRange && start && end) {
-      if (!isDateValid(startDateValue) && endDateValue) {
-        // Если выставлять пустую строку, то конечная дата перепрыгивает на место начальной
-        setStartDateValue(placeholder);
-      }
-      if (!isDateValid(endDateValue)) {
-        setEndDateValue('');
-      } else if (maxDate && isAfter(start, maxDate)) {
-        onChangeRange([maxDate, end]);
-      } else if (minDate && isAfter(minDate, end)) {
-        //  если у нас руками пытаются ввести конечную дату,
-        // меньшую чем начальная, то мы должны выставить конечную = начальной.
-        onChangeRange([start, start]);
-      }
-    }
-  };
-
-  let datePickerProps: ReactDatePickerProps<never, boolean> = {
-    dateFormat,
-    calendarStartDay,
-    locale,
-    popperModifiers,
-    popperPlacement,
-    monthsShown,
-    showPreviousMonths,
-    disabledKeyboardNavigation,
-    inline: isInline,
-    disabled: inputProps.isDisabled,
-    showPopperArrow: false,
-    popperClassName: classes.popper,
-    calendarClassName: classes.datepicker,
-    popperContainer: shouldRenderPopperInBody ? PopperContainer : undefined,
-    selectsRange: isRange,
-    onChange: () => null,
-    dayClassName: () => classes.day,
-    filterDate,
-  };
-
-  let dateInputProps: IDateInputProps = {
-    ...inputProps,
-    tweakStyles,
-    iconType:
-      inputProps.isClearable && dateValue !== '' ? undefined : 'calendar',
-    isRange,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onChange: () => {},
-  };
-
-  if (onChangeRange) {
-    datePickerProps = {
-      ...datePickerProps,
-      startDate: start,
-      endDate: end,
-      selectsRange: true,
-      selected: startDate,
-      onChange: onChangeRange,
-    };
-    dateInputProps = {
-      ...dateInputProps,
-      startDate: startDateValue,
-      endDate: endDateValue,
-      onBlur: handleRangeBlur,
-      onChange: handleRangeChange,
-    };
-  }
-
-  if (onChangeDate) {
-    datePickerProps = {
-      ...datePickerProps,
-      selected: date,
-      onChange: (newDate: Date | null) => onChangeDate(newDate),
-      onCalendarOpen: () => setIsOpen(true),
-      onCalendarClose: () => setIsOpen(false),
-      minDate,
-      maxDate,
-    };
-    dateInputProps = {
-      ...dateInputProps,
-      date: dateValue,
-      isActive: isOpen,
-      onBlur: handleBlur,
-      onChange: handleDateChange,
-    };
-  }
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data)}>
-      <Datepicker
-        {...datePickerProps}
-        customInput={
-          <DatePickerInput size={size}>
-            <DateInput {...dateInputProps} />
-          </DatePickerInput>
-        }
-        renderCustomHeader={
-          customHeader !== undefined
-            ? customHeader
-            : ({
-                date: renderDate,
-                changeYear,
-                changeMonth,
-                decreaseMonth,
-                increaseMonth,
-                prevMonthButtonDisabled,
-                nextMonthButtonDisabled,
-              }) => (
-                <DatePickerHeader
-                  date={renderDate}
-                  changeMonth={changeMonth}
-                  changeYear={changeYear}
-                  decreaseMonth={decreaseMonth}
-                  increaseMonth={increaseMonth}
-                  isPrevMonthButtonDisabled={prevMonthButtonDisabled}
-                  isNextMonthButtonDisabled={nextMonthButtonDisabled}
-                  months={months}
-                />
-              )
-        }
-      />
-    </div>
-  );
-};
+import {
+  useState,
+  useEffect,
+  FC,
+  ReactElement,
+  ReactNode,
+  FocusEvent,
+  SyntheticEvent,
+  forwardRef,
+  useMemo,
+} from 'react';
+import clsx from 'clsx';
+import ReactDatePicker from 'react-datepicker';
+import { isAfter, isBefore, isValid } from 'date-fns';
+import { Portal } from 'react-overlays';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import {
+  DateInput,
+  EMPTY_DATE_INPUT_VALUE,
+  IDateInputProps,
+} from '../DateInput';
+import { DatePickerHeader } from './DatePickerHeader';
+import { useTheme, useTweakStyles } from '../../hooks';
+import {
+  addDataAttributes,
+  isEmpty,
+  isNotEmpty,
+  isStringNotEmpty,
+} from '../../helpers';
+import {
+  areDatesEquals,
+  getDateFormatter,
+  getDateValueParser,
+} from './helpers';
+import { IDatePickerBaseProps, IRange } from './types';
+import { DEFAULT_DATE_FORMAT } from './constants';
+
+import { DatePickerStyles, styles } from './DatePicker.styles';
+
+const DatePickerComponent =
+  (ReactDatePicker as unknown as { default: typeof ReactDatePicker }).default ??
+  ReactDatePicker;
+
+export interface IDatePickerProps extends IDatePickerBaseProps {
+  selectedDate?: Date | null;
+  locale: Locale;
+  months?: string[];
+  minDate?: Date | null;
+  maxDate?: Date | null;
+  endDate?: Date | null;
+  startDate?: Date | null;
+  topPosition?: number;
+  leftPosition?: number;
+  /**
+   * @default `dd.MM.yyyy`
+   */
+  dateFormat?: string;
+  calendarStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  isRange?: boolean;
+  isInline?: boolean;
+  shouldRenderPopperInBody?: boolean;
+  customInput?: FC<IDateInputProps>;
+  tweakStyles?: DatePickerStyles;
+  onChangeDate?: (date: Date | null, event?: SyntheticEvent) => void;
+  onChangeRange?: (date: IRange, event?: SyntheticEvent) => void;
+}
+
+const PopperContainer: FC<{ children: ReactNode }> = ({ children }) => (
+  <Portal container={document.body}>{children as ReactElement}</Portal>
+);
+
+export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
+  (
+    {
+      data,
+      selectedDate = null,
+      minDate,
+      maxDate,
+      endDate = null,
+      startDate = null,
+      locale,
+      months,
+      topPosition = 0,
+      leftPosition = 0,
+      calendarStartDay = 1,
+      dateFormat = DEFAULT_DATE_FORMAT,
+      monthsShown,
+      placeholder,
+      isRange,
+      isInline,
+      isDisabled,
+      isClearable,
+      focusSelectedMonth,
+      disabledKeyboardNavigation,
+      shouldRenderPopperInBody,
+      allowSameDay = false,
+      shouldCloseOnSelect,
+      showPreviousMonths,
+      preventOpenOnFocus,
+      popperModifiers,
+      popperPlacement,
+      todayButton,
+      calendarContainer,
+      dayClassName,
+      customInput: CustomInput = DateInput,
+      customInputRef,
+      renderCustomHeader,
+      filterDate,
+      onYearChange,
+      onMonthChange,
+      onCalendarOpen,
+      onCalendarClose,
+      onChangeDate,
+      onChangeRange,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      tweakStyles,
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const { classes, componentStyles } = useTheme(
+      'DatePicker',
+      styles,
+      tweakStyles,
+      { leftPosition, topPosition },
+    );
+
+    const tweakDateInputStyles = useTweakStyles(
+      componentStyles,
+      tweakStyles,
+      'tweakDateInput',
+    );
+
+    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,
+      iconType: 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}
+          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}
+          preventOpenOnFocus={preventOpenOnFocus}
+          shouldCloseOnSelect={shouldCloseOnSelect}
+          customInputRef={customInputRef}
+          customInput={<CustomInput {...dateInputProps} />}
+          renderCustomHeader={
+            renderCustomHeader ??
+            ((baseProps) => <DatePickerHeader {...baseProps} months={months} />)
+          }
+          todayButton={todayButton}
+          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>
+    );
+  },
+);