@true-engineering/true-react-common-ui-kit 1.5.3 → 1.6.0

package/src/components/DatePicker/DatePicker.tsx

@@ -1,358 +1,358 @@
-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 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>
+  );
+};