nntc-ui 0.2.4 → 0.2.6

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

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