@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/DateInput/DateInput.tsx

@@ -0,0 +1,60 @@
+import { FC } from 'react';
+import { addDataAttributes } from '../../helpers';
+import { useTheme, useTweakStyles } from '../../hooks';
+import { IDataAttributes } from '../../types';
+import { IInputProps, Input } from '../Input';
+
+import { DateInputStyles, styles } from './DateInput.styles';
+
+export interface IDateInputProps
+  extends Omit<IInputProps, 'onChange' | 'value'> {
+  tweakStyles?: DateInputStyles;
+  isRange?: boolean;
+  date?: string;
+  startDate?: string;
+  endDate?: string;
+  data?: IDataAttributes;
+  onChange: (date: string) => void;
+}
+
+export const DateInput: FC<IDateInputProps> = ({
+  isRange,
+  date,
+  startDate = '',
+  endDate = '',
+  data,
+  onChange,
+  tweakStyles,
+  ...props
+}) => {
+  const { classes, componentStyles } = useTheme(
+    'DateInput',
+    styles,
+    tweakStyles,
+  );
+
+  const mainProps: IInputProps = isRange
+    ? {
+        value: `${startDate}${endDate}`,
+        onChange: (v: string) =>
+          onChange(v !== '__.__.____ - __.__.____' ? v : ''),
+        mask: '99.99.9999 - 99.99.9999',
+      }
+    : {
+        value: date,
+        onChange: (v: string) => onChange(v !== '__.__.____' ? v : ''),
+        mask: '99.99.9999',
+      };
+
+  const tweakInputStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakInput',
+  );
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      <Input {...mainProps} {...props} tweakStyles={tweakInputStyles} />
+    </div>
+  );
+};

package/src/components/DateInput/index.ts

@@ -0,0 +1,2 @@
+export * from './DateInput';
+export type { DateInputStyles } from './DateInput.styles';

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,96 @@
+import { ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import { DatePicker } from './DatePicker';
+
+import ru from 'date-fns/locale/ru';
+
+const months = [
+  'Январь',
+  'Февраль',
+  'Март',
+  'Апрель',
+  'Май',
+  'Июнь',
+  'Июль',
+  'Август',
+  'Сентябрь',
+  'Октябрь',
+  'Ноябрь',
+  'Декабрь',
+];
+
+export default {
+  title: 'Inputs/DatePicker',
+  component: DatePicker,
+};
+
+const Template: ComponentStory<typeof DatePicker> = (args) => {
+  const [date, setDate] = useState<Date | null>(null);
+
+  const [startDate, setStartDate] = useState<Date | null>(
+    args.startDate ? new Date(args.startDate) : null,
+  );
+  const [endDate, setEndDate] = useState<Date | null>(
+    args.endDate ? new Date(args.endDate) : null,
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 600,
+        overflow: 'auto',
+        border: '1px dotted rgba(0,0,0,.2)',
+        width: 800,
+      }}
+    >
+      <div style={{ display: 'flex', height: 48 }}>
+        <DatePicker
+          {...args}
+          selectedDate={date}
+          onChangeDate={!args.isRange ? (d) => setDate(d) : undefined}
+          startDate={startDate}
+          endDate={endDate}
+          onChangeRange={
+            args.isRange
+              ? (dates) => {
+                  if (dates !== null) {
+                    setStartDate(dates[0]);
+                    setEndDate(dates[1]);
+                  }
+                }
+              : undefined
+          }
+          locale={ru}
+          months={months}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Дата',
+  isRange: false,
+  isClearable: true,
+  shouldRenderPopperInBody: false,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: [
+      'data',
+      'testId',
+      'tabIndex',
+      'onFocus',
+      'onBlur',
+      'onPaste',
+      'onIconClick',
+      'onKeyDown',
+    ],
+  },
+};

package/src/components/DatePicker/DatePicker.styles.ts

@@ -0,0 +1,54 @@
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    width: '100%',
+    height: '100%',
+  },
+
+  day: {
+    width: 36,
+    height: 36,
+    lineHeight: 'normal',
+    boxSizing: 'border-box',
+    paddingTop: 10,
+    fontSize: 16,
+  },
+
+  datepicker: {
+    display: 'flex',
+    padding: [4, 8, 20, 8],
+    width: 320,
+    boxSizing: 'border-box',
+  },
+
+  btnText: {
+    marginLeft: 'auto',
+  },
+
+  popper: {
+    zIndex: 10,
+    marginLeft: ({ leftPosition }: { leftPosition: number }): number =>
+      leftPosition,
+    marginTop: ({ topPosition }: { topPosition: number }): number =>
+      topPosition,
+
+    '&[data-placement^="bottom"]': {
+      paddingTop: 6,
+    },
+
+    '&[data-placement^="top"]': {
+      paddingBottom: 6,
+    },
+
+    '&[data-placement^="left"]': {
+      paddingRight: 6,
+    },
+
+    '&[data-placement^="right"]': {
+      paddingLeft: 6,
+    },
+  },
+};
+
+export type DatePickerStyles = ComponentStyles<typeof styles>;

package/src/components/DatePicker/DatePicker.tsx

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

package/src/components/DatePicker/DatePickerHeader/DatePickerHeader.styles.ts

@@ -0,0 +1,84 @@
+import { ComponentStyles } from '../../../types';
+
+const SELECT_PADDING_LEFT = 12;
+const SELECT_PADDING_RIGHT = 24;
+
+export const styles = {
+  btn: {
+    width: 36,
+    height: 36,
+    padding: 8,
+    boxSizing: 'border-box',
+    border: 'none',
+    outline: 'none',
+
+    cursor: 'pointer',
+    marginLeft: 8,
+  },
+
+  select: {
+    height: 35,
+    fontSize: 16,
+    position: 'relative',
+  },
+
+  selectValue: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: 'transparent',
+    pointerEvents: 'none',
+    paddingLeft: SELECT_PADDING_LEFT,
+    paddingRight: SELECT_PADDING_RIGHT,
+  },
+
+  selectControl: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+
+  header: {
+    margin: 6,
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  buttons: {
+    flexShrink: 0,
+    marginLeft: 'auto',
+  },
+
+  tweakSelect: {
+    list: {
+      cell: {
+        fontSize: 14,
+        minHeight: 35,
+      },
+    },
+
+    arrow: {
+      right: 0,
+      top: 9,
+      width: 16,
+      height: 16,
+    },
+
+    tweakInput: {
+      inputWrapper: {
+        height: 35,
+        border: 'none',
+      },
+
+      input: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        paddingRight: SELECT_PADDING_RIGHT - 8,
+        paddingLeft: SELECT_PADDING_LEFT,
+      },
+    },
+  },
+};
+
+export type DatePickerHeaderStyles = ComponentStyles<typeof styles>;