nntc-ui 0.2.6 → 0.2.7

package/src/components/common/DateTime/ui/CalendarPopover/CalendarPopover.tsx

@@ -1,585 +0,0 @@
-import classNames from 'classnames';
-import defaultDayjs from 'dayjs';
-import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
-
-import { Button } from '@components/common/Button';
-import { ButtonsGroup } from '@components/common/ButtonsGroup';
-import { Typography } from '@components/view/Typography';
-import { ChevronLeftIcon } from '@icons/ChevronLeftIcon';
-import { ChevronRightIcon } from '@icons/ChevronRightIcon';
-import { ChipSize } from '@models/ChipSize';
-import { UiProps } from '@models/UiProps';
-
-import * as styles from './calendarPopover.module.css';
-import type { DayjsFactory, DayjsInstance } from '../../models/dayjs';
-import { createCalendarDate } from '../../utils/createCalendarDate';
-import { TimeWheelColumn } from '../TimeWheelColumn';
-
-type ViewType = 'month' | 'year' | 'yearsRange';
-type ValueType = 'date' | 'year' | 'dateTime';
-
-interface Props {
-  dayjs?: DayjsFactory;
-  componentSize: ChipSize;
-  isPeriod?: boolean;
-  valueType?: ValueType;
-  initStartDate?: string;
-  initEndDate?: string;
-  changeDates: (newStartDate?: string, newEndDate?: string) => void;
-  onClear?: () => void;
-  useUtc?: boolean;
-}
-
-export function CalendarPopover(props: UiProps<Props>) {
-  const {
-    dayjs: dayjsFromProps,
-    componentSize,
-    isPeriod = true,
-    valueType = 'date',
-    initStartDate,
-    initEndDate,
-    changeDates,
-    onClear,
-    useUtc = false,
-    classes,
-  } = props;
-
-  const dayjs: DayjsFactory = dayjsFromProps ?? (defaultDayjs as DayjsFactory);
-  const isDateTimeSingle = valueType === 'dateTime' && !isPeriod;
-
-  const [viewType, setViewType] = useState<ViewType>(valueType === 'year' ? 'yearsRange' : 'month');
-  const [currentItem, setCurrentItem] = useState<{ year: number; month: number }>(() => {
-    if (initStartDate) {
-      const initial = dayjs(initStartDate);
-
-      return { year: initial.year(), month: initial.month() };
-    }
-
-    const now = dayjs();
-
-    return { year: now.year(), month: now.month() };
-  });
-  const [startDate, setStartDate] = useState(
-    initStartDate
-      ? isDateTimeSingle
-        ? dayjs(initStartDate).second(0).millisecond(0).valueOf()
-        : dayjs(initStartDate).startOf('D').valueOf()
-      : undefined,
-  );
-  const [endDate, setEndDate] = useState(initEndDate ? dayjs(initEndDate).startOf('D').valueOf() : undefined);
-  const [selectedHour, setSelectedHour] = useState(isDateTimeSingle && initStartDate ? dayjs(initStartDate).hour() : 0);
-  const [selectedMinute, setSelectedMinute] = useState(
-    isDateTimeSingle && initStartDate ? dayjs(initStartDate).minute() : 0,
-  );
-
-  const hours = useMemo(() => [...Array(24)].map((__, index) => index), []);
-  const minutes = useMemo(() => [...Array(60)].map((__, index) => index), []);
-
-  const startDateDay = useMemo(
-    () => (startDate ? dayjs(startDate).startOf('D').valueOf() : undefined),
-    [startDate, dayjs],
-  );
-  const endDateDay = useMemo(() => (endDate ? dayjs(endDate).startOf('D').valueOf() : undefined), [endDate, dayjs]);
-
-  const startDateMonth = useMemo(
-    () => (startDateDay ? dayjs(startDateDay).startOf('M').valueOf() : undefined),
-    [startDateDay, dayjs],
-  );
-  const endDateMonth = useMemo(
-    () => (endDateDay ? dayjs(endDateDay).startOf('M').valueOf() : undefined),
-    [endDateDay, dayjs],
-  );
-  const startYear = useMemo(() => (startDateDay ? dayjs(startDateDay).year() : undefined), [startDateDay, dayjs]);
-  const endYear = useMemo(() => (endDateDay ? dayjs(endDateDay).year() : undefined), [endDateDay, dayjs]);
-
-  const currentDate = useMemo(
-    () =>
-      createCalendarDate(dayjs, currentItem.year, currentItem.month, 1, useUtc).startOf(
-        viewType === 'month' ? 'M' : 'y',
-      ),
-    [currentItem, viewType, dayjs, useUtc],
-  );
-
-  const daysInMonth = currentDate.daysInMonth();
-  const firstDayOfWeek = currentDate.startOf('M').day();
-
-  let emptyCellsCount = firstDayOfWeek - 1;
-  if (emptyCellsCount < 0) {
-    emptyCellsCount = 6;
-  }
-
-  useEffect(() => {
-    if (!startDate && !endDate) {
-      onClear?.();
-      changeDates();
-      return;
-    }
-
-    if (valueType === 'year') {
-      if (!isPeriod && startDate) {
-        changeDates(dayjs(startDate).format('YYYY'));
-        return;
-      }
-
-      if (isPeriod && startDate && endDate) {
-        changeDates(dayjs(startDate).format('YYYY'), dayjs(endDate).format('YYYY'));
-        return;
-      }
-
-      return;
-    }
-
-    if (isDateTimeSingle && startDate) {
-      changeDates(dayjs(startDate).second(0).millisecond(0).format());
-      return;
-    }
-
-    if (!isPeriod && startDate) {
-      changeDates(dayjs(startDate).format());
-      return;
-    }
-
-    if (isPeriod && startDate && endDate) {
-      changeDates(dayjs(startDate).format(), dayjs(endDate).format());
-    }
-  }, [startDate, endDate, isPeriod, valueType, isDateTimeSingle, dayjs, changeDates, onClear]);
-
-  const applyTimeToDate = useCallback(
-    (dateValue: number, hour: number, minute: number) =>
-      dayjs(dateValue).startOf('D').hour(hour).minute(minute).second(0).millisecond(0).valueOf(),
-    [dayjs],
-  );
-
-  useEffect(() => {
-    if (!isDateTimeSingle || !startDate) {
-      return;
-    }
-
-    const nextDate = applyTimeToDate(startDate, selectedHour, selectedMinute);
-    if (nextDate !== startDate) {
-      setStartDate(nextDate);
-    }
-  }, [isDateTimeSingle, startDate, selectedHour, selectedMinute, applyTimeToDate]);
-
-  const changeCurrentItem = useCallback(
-    (count: number) => () => {
-      const baseDate = createCalendarDate(dayjs, currentItem.year, currentItem.month, 1, useUtc);
-      const step = viewType === 'yearsRange' ? count * 20 : count;
-      const unit = viewType === 'month' ? 'month' : 'year';
-      const tempDate = baseDate.add(step, unit);
-
-      setCurrentItem({
-        month: tempDate.month(),
-        year: tempDate.year(),
-      });
-    },
-    [viewType, currentItem, dayjs, useUtc],
-  );
-
-  const changeViewType = useCallback(() => {
-    if (valueType === 'year') {
-      return;
-    }
-
-    if (viewType === 'month') {
-      setViewType('year');
-    } else if (viewType === 'year') {
-      setViewType('yearsRange');
-    } else {
-      setViewType('month');
-    }
-  }, [viewType, valueType]);
-
-  const openMonthView = useCallback(
-    (date: DayjsInstance) => () => {
-      setCurrentItem({ month: date.month(), year: date.year() });
-      setViewType('month');
-    },
-    [],
-  );
-
-  const setYear = useCallback(
-    (cellYear: number) => () => {
-      const cellDate = createCalendarDate(dayjs, cellYear, 0, 1, useUtc).startOf('y').valueOf();
-
-      if (!isPeriod) {
-        if (isDateTimeSingle && startDateDay === cellDate) {
-          setStartDate(undefined);
-        } else if (!isDateTimeSingle && startDate === cellDate) {
-          setStartDate(undefined);
-        } else {
-          setStartDate(isDateTimeSingle ? applyTimeToDate(cellDate, selectedHour, selectedMinute) : cellDate);
-        }
-        setEndDate(undefined);
-        return;
-      }
-
-      if (startDate && endDate) {
-        if (cellDate === startDate) {
-          setStartDate(undefined);
-        } else if (cellDate === endDate) {
-          setEndDate(undefined);
-        } else {
-          setStartDate(cellDate);
-          setEndDate(undefined);
-        }
-      } else if (startDate) {
-        if (cellDate === startDate) {
-          setStartDate(undefined);
-        } else if (cellDate < startDate) {
-          setEndDate(startDate);
-          setStartDate(cellDate);
-        } else {
-          setEndDate(cellDate);
-        }
-      } else if (endDate) {
-        if (cellDate === endDate) {
-          setEndDate(undefined);
-        } else if (cellDate < endDate) {
-          setStartDate(cellDate);
-        } else {
-          setStartDate(endDate);
-          setEndDate(cellDate);
-        }
-      } else {
-        setStartDate(cellDate);
-      }
-    },
-    [
-      applyTimeToDate,
-      endDate,
-      isDateTimeSingle,
-      isPeriod,
-      selectedHour,
-      selectedMinute,
-      startDate,
-      startDateDay,
-      dayjs,
-      useUtc,
-    ],
-  );
-
-  const yearsRangeStart = useMemo(() => {
-    const year = currentDate.year();
-    return Math.floor(year / 20) * 20;
-  }, [currentDate]);
-
-  const setDate = useCallback(
-    (cellDate: number) => () => {
-      if (!isPeriod) {
-        if (startDate === cellDate) {
-          setStartDate(undefined);
-        } else {
-          setStartDate(cellDate);
-        }
-        setEndDate(undefined);
-        return;
-      }
-
-      if (startDate && endDate) {
-        if (cellDate === startDate) {
-          setStartDate(undefined);
-        } else if (cellDate === endDate) {
-          setEndDate(undefined);
-        } else {
-          setStartDate(cellDate);
-          setEndDate(undefined);
-        }
-      } else if (startDate) {
-        if (cellDate === startDate) {
-          setStartDate(undefined);
-        } else if (cellDate < startDate) {
-          setEndDate(startDate);
-          setStartDate(cellDate);
-        } else {
-          setEndDate(cellDate);
-        }
-      } else if (endDate) {
-        if (cellDate === endDate) {
-          setEndDate(undefined);
-        } else if (cellDate < endDate) {
-          setStartDate(cellDate);
-        } else {
-          setStartDate(endDate);
-          setEndDate(cellDate);
-        }
-      } else {
-        setStartDate(cellDate);
-      }
-    },
-    [startDate, endDate, isPeriod],
-  );
-
-  const reset = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      setStartDate(undefined);
-      setEndDate(undefined);
-      if (isDateTimeSingle) {
-        setSelectedHour(0);
-        setSelectedMinute(0);
-      }
-      e.currentTarget.blur();
-    },
-    [isDateTimeSingle],
-  );
-
-  const today = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      const now = dayjs();
-
-      setCurrentItem({
-        year: now.year(),
-        month: now.month(),
-      });
-      e.currentTarget.blur();
-    },
-    [dayjs],
-  );
-
-  return (
-    <div
-      className={classNames(
-        styles.root,
-        styles[componentSize as keyof typeof styles],
-        isDateTimeSingle && styles.dateTimeMode,
-        classes?.root,
-      )}
-    >
-      <div className={classNames(styles.calendarContainer, viewType === 'month' && styles.monthView)}>
-        <div className={classNames(styles.buttonsContainer, classes?.buttonsContainer)}>
-          <ButtonsGroup fillEvenly>
-            <Button componentSize="small" variant="text" textSecondary tabIndex={-1} onClick={reset}>
-              Сбросить
-            </Button>
-            {valueType !== 'year' && (
-              <Button componentSize="small" variant="text" textSecondary tabIndex={-1} onClick={today}>
-                Сегодня
-              </Button>
-            )}
-          </ButtonsGroup>
-        </div>
-        <div className={classNames(styles.navigationContainer, classes?.navigationContainer)}>
-          <button
-            type="button"
-            className={classNames(styles.button, styles.navigationArrow, classes?.navigationArrow)}
-            onClick={changeCurrentItem(-1)}
-            aria-label="Предыдущий период"
-          >
-            <ChevronLeftIcon />
-          </button>
-          <button
-            type="button"
-            className={classNames(styles.button, styles.navigationValue, classes?.navigationValue)}
-            onClick={changeViewType}
-          >
-            <Typography variant="subtitle1" className={classNames(styles.navigationTitle, classes?.navigationTitle)}>
-              {viewType === 'month' && currentDate.format('MMMM YYYY')}
-              {viewType === 'year' && currentDate.format('YYYY')}
-              {viewType === 'yearsRange' && `${yearsRangeStart} - ${yearsRangeStart + 19}`}
-            </Typography>
-          </button>
-          <button
-            type="button"
-            className={classNames(styles.button, styles.navigationArrow, classes?.navigationArrow)}
-            onClick={changeCurrentItem(1)}
-            aria-label="Следующий период"
-          >
-            <ChevronRightIcon />
-          </button>
-        </div>
-        <div className={classNames(styles.cellsContainer, classes?.cellsContainer)}>
-          {viewType === 'yearsRange' && (
-            <>
-              {[...Array(20)].map((__, index) => {
-                const cellYear = yearsRangeStart + index;
-
-                const handleClick =
-                  valueType === 'year'
-                    ? setYear(cellYear)
-                    : () => {
-                        setCurrentItem({ month: 0, year: cellYear });
-                        setViewType('year');
-                      };
-
-                const showCircle = valueType === 'year';
-                const isCircleActive =
-                  showCircle && startYear !== undefined && (cellYear === startYear || cellYear === endYear);
-
-                let isYearInRange = false;
-                let isFirstInRange = false;
-                let isLastInRange = false;
-
-                if (startYear !== undefined) {
-                  if (!isPeriod) {
-                    if (valueType !== 'year' && cellYear === startYear) {
-                      isYearInRange = true;
-                    }
-                  } else if (endYear !== undefined) {
-                    if (startYear === endYear) {
-                      if (cellYear === startYear) {
-                        isYearInRange = true;
-                      }
-                    } else if (cellYear >= startYear && cellYear <= endYear) {
-                      isYearInRange = true;
-                      if (cellYear === startYear) {
-                        isFirstInRange = true;
-                      } else if (cellYear === endYear) {
-                        isLastInRange = true;
-                      }
-                    }
-                  }
-                }
-
-                return (
-                  <button
-                    type="button"
-                    key={`cell-year-${cellYear}`}
-                    className={classNames(styles.button, styles.cell, styles.year, classes?.cell, classes?.year)}
-                    onClick={handleClick}
-                  >
-                    {isCircleActive && <span className={classNames(styles.cellCircle, classes?.cellCircle)} />}
-                    {isYearInRange && (
-                      <span
-                        className={classNames(
-                          styles.cellSelection,
-                          classes?.cellSelection,
-                          isFirstInRange && styles.cellSelectionFirst,
-                          isFirstInRange && classes?.cellSelectionFirst,
-                          isLastInRange && styles.cellSelectionLast,
-                          isLastInRange && classes?.cellSelectionLast,
-                        )}
-                      />
-                    )}
-                    <Typography variant="subtitle1" className={classNames(styles.cellData, classes?.cellData)}>
-                      {cellYear}
-                    </Typography>
-                  </button>
-                );
-              })}
-            </>
-          )}
-
-          {viewType === 'year' && (
-            <>
-              {[...Array(12)].map((__, index) => {
-                const cellDate = currentDate.add(index, 'M');
-                const cellDateValue = cellDate.valueOf();
-
-                const isMonthSelected = isPeriod
-                  ? startDateMonth !== undefined &&
-                    endDateMonth !== undefined &&
-                    cellDateValue >= startDateMonth &&
-                    cellDateValue <= endDateMonth
-                  : startDateMonth !== undefined && cellDateValue === startDateMonth;
-
-                let isMonthInRange = false;
-                let isFirstMonthInRange = false;
-                let isLastMonthInRange = false;
-
-                if (isPeriod && valueType !== 'year' && startDateMonth !== undefined && endDateMonth !== undefined) {
-                  if (startDateMonth === endDateMonth) {
-                    if (cellDateValue === startDateMonth) {
-                      isMonthInRange = true;
-                    }
-                  } else if (cellDateValue >= startDateMonth && cellDateValue <= endDateMonth) {
-                    isMonthInRange = true;
-                    if (cellDateValue === startDateMonth) {
-                      isFirstMonthInRange = true;
-                    } else if (cellDateValue === endDateMonth) {
-                      isLastMonthInRange = true;
-                    }
-                  }
-                } else if (!isPeriod && valueType !== 'year' && startDateMonth !== undefined) {
-                  if (cellDateValue === startDateMonth) {
-                    isMonthInRange = true;
-                  }
-                } else {
-                  isMonthInRange = isMonthSelected;
-                }
-
-                return (
-                  <button
-                    type="button"
-                    key={`cell-month-${index}`}
-                    className={classNames(styles.button, styles.cell, styles.month, classes?.cell, classes?.month)}
-                    onClick={openMonthView(cellDate)}
-                  >
-                    {isMonthInRange && (
-                      <span
-                        className={classNames(
-                          styles.monthCellSelection,
-                          classes?.monthCellSelection,
-                          isFirstMonthInRange && styles.monthCellSelectionFirst,
-                          isFirstMonthInRange && classes?.monthCellSelectionFirst,
-                          isLastMonthInRange && styles.monthCellSelectionLast,
-                          isLastMonthInRange && classes?.monthCellSelectionLast,
-                        )}
-                      />
-                    )}
-                    <Typography variant="subtitle1" className={classNames(styles.cellData, classes?.cellData)}>
-                      {cellDate.format('MMMM')}
-                    </Typography>
-                  </button>
-                );
-              })}
-            </>
-          )}
-
-          {viewType === 'month' && (
-            <>
-              {[...Array(emptyCellsCount)].map((__, index) => (
-                <div key={`empty-cell-${index}`} className={classNames(styles.cell, classes?.cell)}></div>
-              ))}
-              {[...Array(daysInMonth)].map((__, index) => {
-                const cellDate = currentDate.add(index, 'd').valueOf();
-
-                return (
-                  <button
-                    type="button"
-                    key={`cell-${index}`}
-                    className={classNames(styles.button, styles.cell, classes?.cell)}
-                    onClick={setDate(cellDate)}
-                  >
-                    {(cellDate === startDateDay || cellDate === endDateDay) && (
-                      <span className={classNames(styles.cellCircle, classes?.cellCircle)} />
-                    )}
-                    {startDateDay !== undefined &&
-                      endDateDay !== undefined &&
-                      cellDate >= startDateDay &&
-                      cellDate <= endDateDay && (
-                        <span
-                          className={classNames(
-                            styles.cellSelection,
-                            classes?.cellSelection,
-                            cellDate === startDateDay && styles.cellSelectionFirst,
-                            cellDate === startDateDay && classes?.cellSelectionFirst,
-                            cellDate === endDateDay && styles.cellSelectionLast,
-                            cellDate === endDateDay && classes?.cellSelectionLast,
-                          )}
-                        />
-                      )}
-                    <Typography
-                      variant="subtitle1"
-                      className={classNames(styles.cellData, classes?.cellData)}
-                    >{`${index + 1}`}</Typography>
-                  </button>
-                );
-              })}
-            </>
-          )}
-        </div>
-      </div>
-
-      {isDateTimeSingle && (
-        <div className={classNames(styles.timeContainer)}>
-          <div className={classNames(styles.timeSelectionMarker)} />
-          <TimeWheelColumn values={hours} selectedValue={selectedHour} onSelect={setSelectedHour} />
-          <Typography variant="subtitle1" className={classNames(styles.timeDivider)}>
-            :
-          </Typography>
-          <TimeWheelColumn values={minutes} selectedValue={selectedMinute} onSelect={setSelectedMinute} />
-        </div>
-      )}
-    </div>
-  );
-}