@alfalab/core-components 27.3.0 → 27.5.0-beta.0

package/calendar/modern/components/calendar-mobile/Component.js

@@ -0,0 +1,188 @@
+import React, { forwardRef, useRef, useMemo, useState, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import endOfDay from 'date-fns/endOfDay';
+import '@alfalab/hooks';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isSameDay';
+import 'date-fns/isToday';
+import 'date-fns/isWithinInterval';
+import 'react-transition-group';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/startOfYear';
+import 'date-fns/endOfYear';
+import 'date-fns/isBefore';
+import 'date-fns/isAfter';
+import 'date-fns/min';
+import 'date-fns/max';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/endOfWeek';
+import 'date-fns/startOfWeek';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import 'date-fns/format';
+import 'date-fns/parse';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/addYears';
+import 'date-fns/endOfMonth';
+import 'date-fns/endOfQuarter';
+import 'date-fns/getQuarter';
+import 'date-fns/getYear';
+import 'date-fns/isYesterday';
+import 'date-fns/startOfQuarter';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import 'react-merge-refs';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import 'date-fns/differenceInDays';
+import { Virtuoso } from 'react-virtuoso';
+import '../header/Component.js';
+import { Button } from '../../../../button/modern';
+import { limitDate, generateMonths, WEEKDAYS, monthName, generateWeeks } from '../../utils.js';
+import { DaysTable } from '../days-table/Component.js';
+import '../select-button/Component.js';
+import '../months-table/Component.js';
+import '../years-table/Component.js';
+import '../../../../icon-button/modern';
+import '../period-slider/utils.js';
+import '../period-slider/Component.js';
+import { useCalendar } from '../../useCalendar.js';
+import '../month-year-header/Component.js';
+import { Calendar } from '../../Component.js';
+import { ModalMobile } from '../../../../modal/modern/mobile';
+
+var styles = {"wrapper":"calendar__wrapper_i75g8","modalHeader":"calendar__modalHeader_i75g8","modalFooter":"calendar__modalFooter_i75g8","calendar":"calendar__calendar_i75g8","calendarHeader":"calendar__calendarHeader_i75g8","month":"calendar__month_i75g8","daysTable":"calendar__daysTable_i75g8","dayName":"calendar__dayName_i75g8"};
+require('./index.css');
+
+const CalendarMobile = forwardRef(({ className, defaultView = 'days', selectorView = 'full', value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, onChange, onMonthChange, onMonthClick, onYearClick, dataTestId, open, onClose, title = 'Календарь', yearsAmount = 10, }, ref) => {
+    const modalRef = useRef(null);
+    const initialMonthIndex = useMemo(() => {
+        const currentMonthIndex = new Date().getMonth();
+        return yearsAmount * 12 + currentMonthIndex;
+    }, [yearsAmount]);
+    const monthOnlyView = useMemo(() => selectorView === 'month-only', [selectorView]);
+    const month = useMemo(() => (monthTimestamp ? new Date(monthTimestamp) : undefined), [
+        monthTimestamp,
+    ]);
+    const minDate = useMemo(() => (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined), [minDateTimestamp]);
+    const maxDate = useMemo(() => (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined), [
+        maxDateTimestamp,
+    ]);
+    const selected = useMemo(() => (value ? new Date(value) : undefined), [value]);
+    const defaultMonth = useMemo(() => startOfMonth(selected ||
+        limitDate(defaultMonthTimestamp, minDateTimestamp, maxDateTimestamp)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const { activeMonth, months, highlighted, getDayProps } = useCalendar({
+        month,
+        defaultMonth,
+        view: defaultView,
+        minDate,
+        maxDate,
+        selected,
+        offDays,
+        events,
+        onChange,
+        onMonthChange,
+    });
+    const [activeMonths, setActiveMonths] = useState(months);
+    const generateInitialMonths = useCallback(() => {
+        const prevMonths = [];
+        const nextMonths = [];
+        for (let i = 0; i < yearsAmount; i++) {
+            const prevYear = new Date().setFullYear(new Date().getFullYear() - (i + 1));
+            const nextYear = new Date().setFullYear(new Date().getFullYear() + (i + 1));
+            const prevYearMonths = generateMonths(new Date(prevYear), {});
+            const nextYearMonths = generateMonths(new Date(nextYear), {});
+            prevMonths.unshift(...prevYearMonths);
+            nextMonths.push(...nextYearMonths);
+        }
+        setActiveMonths(prevState => [...prevMonths, ...prevState, ...nextMonths]);
+    }, [yearsAmount]);
+    const handleClose = useCallback(() => {
+        if (onClose)
+            onClose();
+    }, [onClose]);
+    const handleClear = useCallback(() => {
+        if (onChange)
+            onChange();
+    }, [onChange]);
+    useEffect(() => {
+        generateInitialMonths();
+    }, [generateInitialMonths]);
+    const renderHeader = useCallback(() => (React.createElement("table", { className: styles.calendarHeader },
+        React.createElement("thead", null,
+            React.createElement("tr", null, WEEKDAYS.map(dayName => (React.createElement("th", { className: styles.dayName, key: dayName }, dayName))))))), []);
+    const renderMonth = useCallback((index, key) => {
+        return (React.createElement("div", { className: styles.daysTable, id: `month-${index}`, key: key },
+            React.createElement("span", { className: styles.month }, `${monthName(activeMonths[index].date)} ${activeMonths[index].date.getFullYear()}`),
+            React.createElement(DaysTable, { weeks: generateWeeks(activeMonths[index].date, {
+                    minDate,
+                    maxDate,
+                    selected,
+                }), activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false })));
+    }, [
+        activeMonths,
+        minDate,
+        maxDate,
+        selected,
+        activeMonth,
+        selectedFrom,
+        selectedTo,
+        getDayProps,
+        highlighted,
+        rangeComplete,
+    ]);
+    const renderContent = useCallback(() => {
+        if (monthOnlyView) {
+            return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: initialMonthIndex, overscan: { main: 1000, reverse: 1000 }, itemSize: (el) => el.getBoundingClientRect().height + 32 }));
+        }
+        return (React.createElement(Calendar, { value: value, onChange: onChange, offDays: offDays, events: events, defaultView: defaultView, selectorView: selectorView, className: styles.calendar, onMonthClick: onMonthClick, onYearClick: onYearClick, selectedFrom: selectedFrom, selectedTo: selectedTo }));
+    }, [
+        monthOnlyView,
+        activeMonths,
+        selectedFrom,
+        selectedTo,
+        value,
+        onChange,
+        offDays,
+        events,
+        defaultView,
+        selectorView,
+        onMonthClick,
+        onYearClick,
+        renderMonth,
+        initialMonthIndex,
+    ]);
+    const renderFooter = useCallback(() => {
+        if (selectedFrom || selectedTo) {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(Button, { view: 'primary', size: 's', block: true, onClick: handleClose, disabled: !selectedFrom || !selectedTo }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"),
+                React.createElement(Button, { view: 'secondary', size: 's', block: true, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C")));
+        }
+        if (value) {
+            return (React.createElement(Button, { view: 'primary', size: 's', block: true, onClick: handleClose }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
+        }
+        return (React.createElement(Button, { view: 'secondary', size: 's', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
+    }, [value, selectedFrom, selectedTo, handleClose, handleClear]);
+    return (React.createElement("div", { className: cn(className, styles.component), ref: ref, "data-test-id": dataTestId },
+        React.createElement(ModalMobile, { open: open, onClose: handleClose, ref: modalRef, className: styles.modal, wrapperClassName: styles.wrapper },
+            React.createElement(ModalMobile.Header, { hasCloser: true, title: title, align: 'center', leftAddons: React.createElement("div", null), sticky: true, className: styles.modalHeader }),
+            monthOnlyView && renderHeader(),
+            React.createElement(ModalMobile.Content, { flex: true, className: styles.modalContent }, renderContent()),
+            React.createElement(ModalMobile.Footer, { sticky: true, className: styles.modalFooter }, renderFooter()))));
+});
+
+export { CalendarMobile };

package/calendar/modern/components/calendar-mobile/index.css

@@ -0,0 +1,97 @@
+/* hash: th2dj */
+:root {
+    --color-light-bg-primary: #fff;
+    --color-light-border-primary: #dbdee1;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+    --gap-m: 16px;
+    --gap-2xl: 32px;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+    --calendar-day-size: 40px;
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.calendar__wrapper_i75g8 {
+    background: var(--color-light-bg-primary);
+}
+.calendar__modalHeader_i75g8 {
+    z-index: 1000;
+}
+.calendar__modalFooter_i75g8 {
+    z-index: 1000;
+}
+.calendar__calendar_i75g8 {
+    width: unset;
+}
+.calendar__calendar_i75g8 th {
+    border-bottom: 1px solid var(--color-light-border-primary);
+}
+.calendar__calendarHeader_i75g8 {
+    padding: 0 var(--gap-m);
+    width: 100%;
+    position: sticky;
+    border-bottom: 1px solid var(--color-light-border-primary);
+    background: var(--modal-header-background);
+    top: 48px;
+    height: 32px;
+    z-index: 1000;
+}
+.calendar__calendarHeader_i75g8 th {
+    height: 100%;
+}
+.calendar__month_i75g8 {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 1.25px;
+    text-transform: uppercase;
+    color: var(--color-light-text-primary);
+    margin-bottom: var(--gap-xs);
+}
+.calendar__daysTable_i75g8 {
+    display: flex;
+    flex-direction: column;
+    margin-top: var(--gap-2xl);
+}
+.calendar__dayName_i75g8 {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    height: var(--calendar-day-size);
+    color: var(--color-light-text-secondary)
+}
+@media (max-width: 374px) {
+.calendar__dayName_i75g8 {
+        height: 36px
+}
+    }

package/calendar/modern/components/calendar-mobile/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/calendar/modern/components/calendar-mobile/index.js

@@ -0,0 +1,65 @@
+import 'react';
+import 'classnames';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
+import 'date-fns/endOfDay';
+import '@alfalab/hooks';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isSameDay';
+import 'date-fns/isToday';
+import 'date-fns/isWithinInterval';
+import 'react-transition-group';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/startOfYear';
+import 'date-fns/endOfYear';
+import 'date-fns/isBefore';
+import 'date-fns/isAfter';
+import 'date-fns/min';
+import 'date-fns/max';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/endOfWeek';
+import 'date-fns/startOfWeek';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import 'date-fns/format';
+import 'date-fns/parse';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/addYears';
+import 'date-fns/endOfMonth';
+import 'date-fns/endOfQuarter';
+import 'date-fns/getQuarter';
+import 'date-fns/getYear';
+import 'date-fns/isYesterday';
+import 'date-fns/startOfQuarter';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import 'react-merge-refs';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import 'date-fns/differenceInDays';
+import 'react-virtuoso';
+import '../header/Component.js';
+import '../../../../button/modern';
+import '../../utils.js';
+import '../days-table/Component.js';
+import '../select-button/Component.js';
+import '../months-table/Component.js';
+import '../years-table/Component.js';
+import '../../../../icon-button/modern';
+import '../period-slider/utils.js';
+import '../period-slider/Component.js';
+import '../../useCalendar.js';
+import '../month-year-header/Component.js';
+import '../../Component.js';
+import '../../../../modal/modern/mobile';
+export { CalendarMobile } from './Component.js';

package/calendar/modern/components/days-table/Component.d.ts

@@ -1,4 +1,6 @@
-import { FC, RefCallback } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC, RefCallback } from "react";
 import { Day } from "../../typings";
 type DaysTableProps = {
     /**
@@ -29,8 +31,13 @@ type DaysTableProps = {
      * Доп. пропсы для переданного дня
      */
     getDayProps: (day: Day) => Record<string, unknown> & {
-        ref: RefCallback<HTMLButtonElement>;
+        ref: RefCallback<HTMLTableDataCellElement>;
+        onClick: (e: React.MouseEvent<HTMLTableDataCellElement>) => void;
     };
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
 };
 declare const DaysTable: FC<DaysTableProps>;
 export { DaysTableProps, DaysTable };

package/calendar/modern/components/days-table/Component.js

@@ -28,13 +28,13 @@ import 'date-fns/subMonths';
 import 'date-fns/format';
 import 'date-fns/parse';
 import { Button } from '../../../../button/modern';
-import { getSelectionRange, WEEKDAYS } from '../../utils.js';
+import { getSelectionRange, WEEKDAYS, russianWeekDay } from '../../utils.js';
 
-var styles = {"daysTable":"calendar__daysTable_18zvy","dayName":"calendar__dayName_18zvy","day":"calendar__day_18zvy","highlighted":"calendar__highlighted_18zvy","range":"calendar__range_18zvy","disabled":"calendar__disabled_18zvy","today":"calendar__today_18zvy","rangeComplete":"calendar__rangeComplete_18zvy","selected":"calendar__selected_18zvy","dayWrapper":"calendar__dayWrapper_18zvy","rangeEnd":"calendar__rangeEnd_18zvy","rangeStart":"calendar__rangeStart_18zvy","transitLeft":"calendar__transitLeft_18zvy","transitRight":"calendar__transitRight_18zvy","left":"calendar__left_18zvy","daysEnter":"calendar__daysEnter_18zvy","daysEnterActive":"calendar__daysEnterActive_18zvy","daysExit":"calendar__daysExit_18zvy","daysExitActive":"calendar__daysExitActive_18zvy","right":"calendar__right_18zvy","dot":"calendar__dot_18zvy"};
+var styles = {"daysTable":"calendar__daysTable_1j1lb","dayName":"calendar__dayName_1j1lb","day":"calendar__day_1j1lb","highlighted":"calendar__highlighted_1j1lb","range":"calendar__range_1j1lb","disabled":"calendar__disabled_1j1lb","today":"calendar__today_1j1lb","rangeComplete":"calendar__rangeComplete_1j1lb","selected":"calendar__selected_1j1lb","dayWrapper":"calendar__dayWrapper_1j1lb","rangeEnd":"calendar__rangeEnd_1j1lb","rangeStart":"calendar__rangeStart_1j1lb","transitLeft":"calendar__transitLeft_1j1lb","transitRight":"calendar__transitRight_1j1lb","sharpTransitLeft":"calendar__sharpTransitLeft_1j1lb","sharpTransitRight":"calendar__sharpTransitRight_1j1lb","daysEnter":"calendar__daysEnter_1j1lb","left":"calendar__left_1j1lb","daysEnterActive":"calendar__daysEnterActive_1j1lb","daysExit":"calendar__daysExit_1j1lb","daysExitActive":"calendar__daysExitActive_1j1lb","right":"calendar__right_1j1lb","dot":"calendar__dot_1j1lb"};
 require('./index.css');
 
 /* eslint-disable complexity */
-const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selectedFrom, selectedTo, rangeComplete = selectedFrom && selectedTo, getDayProps, }) => {
+const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selectedFrom, selectedTo, rangeComplete = selectedFrom && selectedTo, getDayProps, hasHeader = true, }) => {
     const activeMonthRef = useRef(activeMonth);
     activeMonthRef.current = activeMonth;
     const prevActiveMonth = usePrevious(activeMonth);
@@ -49,44 +49,65 @@ const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selected
             (selectedTo && isSameDay(day.date, selectedTo));
         const dayHighlighted = highlighted && isEqual(day.date, highlighted);
         const inRange = selection && isWithinInterval(day.date, selection);
-        const firstDay = day.date.getDate() === 1;
-        const lastDay = isLastDayOfMonth(day.date);
-        const transitLeft = firstDay && inRange && selection && day.date > selection.start;
-        const transitRight = lastDay && inRange && selection && day.date < selection.end;
+        const firstDayOfMonth = day.date.getDate() === 1;
+        const lastDayOfMonth = isLastDayOfMonth(day.date);
+        const firstDayOfWeek = russianWeekDay(day.date) === 0;
+        const lastDayOfWeek = russianWeekDay(day.date) === 6;
+        const transitLeft = firstDayOfMonth && inRange && selection && day.date > selection.start;
+        const transitRight = lastDayOfMonth && inRange && selection && day.date < selection.end;
         const rangeStart = selection && isSameDay(day.date, selection.start);
         const rangeEnd = selection && isSameDay(day.date, selection.end);
+        const sharpTransitLeft = firstDayOfWeek &&
+            firstDayOfMonth &&
+            inRange &&
+            selection &&
+            (isSameDay(day.date, selection.start) || isSameDay(day.date, selection.end));
+        const sharpTransitRight = lastDayOfWeek &&
+            lastDayOfMonth &&
+            inRange &&
+            selection &&
+            (isSameDay(day.date, selection.start) || isSameDay(day.date, selection.end));
         const dayProps = getDayProps(day);
-        return (React.createElement("td", { key: day.date.getTime(), className: cn(styles.dayWrapper, {
+        const { onClick } = dayProps;
+        const handleDayClick = (e) => {
+            if (!day.disabled)
+                onClick(e);
+        };
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+        React.createElement("td", Object.assign({}, dayProps, { key: day.date.getTime(), className: cn(styles.dayWrapper, {
                 [styles.range]: inRange,
                 [styles.rangeComplete]: inRange && rangeComplete,
                 [styles.transitLeft]: transitLeft,
                 [styles.transitRight]: transitRight,
+                [styles.sharpTransitLeft]: sharpTransitLeft,
+                [styles.sharpTransitRight]: sharpTransitRight,
                 [styles.rangeStart]: rangeStart,
                 [styles.rangeEnd]: rangeEnd,
-            }) },
-            React.createElement(Button, Object.assign({}, dayProps, { ref: node => {
-                    /**
-                     * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
-                     * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
-                     */
-                    if (startOfMonth(day.date).getTime() === activeMonthRef.current.getTime()) {
-                        dayProps.ref(node);
-                    }
-                }, type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn(styles.day, {
+            }), align: 'center', ref: node => {
+                /**
+                 * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
+                 * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
+                 */
+                if (startOfMonth(day.date).getTime() === activeMonthRef.current.getTime()) {
+                    dayProps.ref(node);
+                }
+            }, onClick: handleDayClick }),
+            React.createElement(Button, { type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn(styles.day, {
                     [styles.selected]: daySelected,
                     [styles.today]: isToday(day.date),
                     [styles.disabled]: day.disabled,
                     [styles.highlighted]: dayHighlighted,
-                }) }),
+                }) },
                 day.event && React.createElement("span", { className: styles.dot }),
                 day.date.getDate())));
     };
     const renderWeek = (week, weekIdx) => (React.createElement("tr", { key: weekIdx }, week.map(renderDay)));
     return (React.createElement("table", { className: cn(styles.daysTable, direction && styles[direction]) },
-        React.createElement("thead", null,
-            React.createElement("tr", null, renderHeader())),
+        hasHeader && (React.createElement("thead", null,
+            React.createElement("tr", null, renderHeader()))),
         React.createElement(TransitionGroup, { component: null },
-            React.createElement(CSSTransition, { key: activeMonth.getTime(), timeout: 300, classNames: {
+            React.createElement(CSSTransition, { key: activeMonth.getTime(), timeout: 250, classNames: {
                     enter: styles.daysEnter,
                     enterActive: styles.daysEnterActive,
                     exit: styles.daysExit,