@alfalab/core-components 27.10.0 → 27.13.0

package/calendar/esm/Component.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from './tslib.es6-928f8251.js';
+import { _ as __assign } from './tslib.es6-e7fceaf2.js';
 import React, { forwardRef, useState, useMemo, useCallback } from 'react';
 import cn from 'classnames';
 import startOfDay from 'date-fns/startOfDay';
@@ -60,14 +60,14 @@ import { useCalendar } from './useCalendar.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import { MonthYearHeader } from './components/month-year-header/Component.js';
 
-var styles = {"component":"calendar__component_bfg73","container":"calendar__container_bfg73","sixWeeks":"calendar__sixWeeks_bfg73","period":"calendar__period_bfg73","monthYear":"calendar__monthYear_bfg73"};
+var styles = {"component":"calendar__component_1ynbm","responsive":"calendar__responsive_1ynbm","period":"calendar__period_1ynbm","monthYear":"calendar__monthYear_1ynbm","container":"calendar__container_1ynbm","sixWeeks":"calendar__sixWeeks_1ynbm"};
 require('./index.css');
 
 var Calendar = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, isMonthAndYearSelectable = _a.isMonthAndYearSelectable, showCurrentYearSelector = _a.showCurrentYearSelector, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
-    var _f = useState(defaultView), view = _f[0], setView = _f[1];
-    var _g = useState(false), scrolled = _g[0], setScrolled = _g[1];
+    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive;
+    var _g = useState(defaultView), view = _g[0], setView = _g[1];
+    var _h = useState(false), scrolled = _h[0], setScrolled = _h[1];
     var selected = useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
     var defaultMonth = useMemo(function () {
         return startOfMonth(selected ||
@@ -82,7 +82,7 @@ var Calendar = forwardRef(function (_a, ref) {
     var maxDate = useMemo(function () { return (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined); }, [
         maxDateTimestamp,
     ]);
-    var _h = useCalendar({
+    var _j = useCalendar({
         month: month,
         defaultMonth: defaultMonth,
         view: view,
@@ -91,9 +91,10 @@ var Calendar = forwardRef(function (_a, ref) {
         selected: selected,
         offDays: offDays,
         events: events,
+        holidays: holidays,
         onChange: onChange,
         onMonthChange: onMonthChange,
-    }), activeMonth = _h.activeMonth, weeks = _h.weeks, months = _h.months, years = _h.years, canSetPrevMonth = _h.canSetPrevMonth, canSetNextMonth = _h.canSetNextMonth, setMonthByDate = _h.setMonthByDate, setPrevMonth = _h.setPrevMonth, setNextMonth = _h.setNextMonth, highlighted = _h.highlighted, getDayProps = _h.getDayProps, getMonthProps = _h.getMonthProps, getYearProps = _h.getYearProps, getRootProps = _h.getRootProps;
+    }), activeMonth = _j.activeMonth, weeks = _j.weeks, months = _j.months, years = _j.years, canSetPrevMonth = _j.canSetPrevMonth, canSetNextMonth = _j.canSetNextMonth, setMonthByDate = _j.setMonthByDate, setPrevMonth = _j.setPrevMonth, setNextMonth = _j.setNextMonth, highlighted = _j.highlighted, getDayProps = _j.getDayProps, getMonthProps = _j.getMonthProps, getYearProps = _j.getYearProps, getRootProps = _j.getRootProps;
     var toggleView = useCallback(function (newView) {
         setView(view === newView ? 'days' : newView);
     }, [view]);
@@ -133,12 +134,13 @@ var Calendar = forwardRef(function (_a, ref) {
     }, [value]);
     return (React.createElement("div", __assign({}, getRootProps({ ref: ref }), { className: cn('cc-calendar', styles.component, className, (_b = {},
             _b[styles.sixWeeks] = weeks.length === 6,
+            _b[styles.responsive] = responsive,
             _b)), "data-test-id": dataTestId }),
-        React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, isMonthAndYearSelectable: isMonthAndYearSelectable, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onMonthClick: handleMonthClick, onYearClick: handleYearClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick }))),
+        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React.createElement("div", { className: cn(styles.container, styles[view]) },
-            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete })),
-            view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps })),
-            view === 'years' && (React.createElement(YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, onScroll: handleScroll })))));
+            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive })),
+            view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),
+            view === 'years' && (React.createElement(YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, onScroll: handleScroll, responsive: responsive })))));
 });
 
 export { Calendar };

package/calendar/esm/Context-bdb4c6b9.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseModalContext } from "./index-bdb4c6b9";
+declare const ModalContext: import("react").Context<BaseModalContext>;
+export { ModalContext };

package/calendar/esm/components/calendar-mobile/Component.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import React from 'react';
+import { CalendarProps } from "../../index";
+type CalendarMobileProps = CalendarProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Заголовок календаря
+     */
+    title?: string;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: () => void;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number;
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
+    /**
+     * Разрешить выбор из недозаполненного диапазона дат.
+     */
+    allowSelectionFromEmptyRange?: boolean;
+};
+declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Заголовок календаря
+     */
+    title?: string | undefined;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: (() => void) | undefined;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number | undefined;
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean | undefined;
+    /**
+     * Разрешить выбор из недозаполненного диапазона дат.
+     */
+    allowSelectionFromEmptyRange?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { CalendarMobileProps, CalendarMobile };

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

@@ -0,0 +1,190 @@
+import { a as __rest, _ as __assign, b as __spreadArrays } from '../../tslib.es6-e7fceaf2.js';
+import React, { forwardRef, useRef, useMemo } 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 '../header/Component.js';
+import { Button } from '../../../../button/esm';
+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 { WEEKDAYS, limitDate, dateArrayToHashTable, generateMonths, generateWeeks, monthName } from '../../utils.js';
+import { DaysTable } from '../days-table/Component.js';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import '../select-button/Component.js';
+import '../months-table/Component.js';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import '../years-table/Component.js';
+import '../../../../icon-button/esm';
+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 '../period-slider/utils.js';
+import '../period-slider/Component.js';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import 'react-merge-refs';
+import { useCalendar } from '../../useCalendar.js';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '../month-year-header/Component.js';
+import { Calendar } from '../../Component.js';
+import 'date-fns/differenceInDays';
+import { Virtuoso } from 'react-virtuoso';
+import { ModalMobile } from '../../../../modal/esm/mobile';
+
+var styles = {"wrapper":"calendar__wrapper_1736b","withZIndex":"calendar__withZIndex_1736b","calendar":"calendar__calendar_1736b","dayNames":"calendar__dayNames_1736b","withHeader":"calendar__withHeader_1736b","month":"calendar__month_1736b","daysTable":"calendar__daysTable_1736b","dayName":"calendar__dayName_1736b"};
+require('./index.css');
+
+var CalendarMobile = forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d = _a.hasHeader, hasHeader = _d === void 0 ? true : _d, _e = _a.allowSelectionFromEmptyRange, allowSelectionFromEmptyRange = _e === void 0 ? false : _e, className = _a.className, _f = _a.defaultView, defaultView = _f === void 0 ? 'days' : _f, _g = _a.selectorView, selectorView = _g === void 0 ? 'full' : _g, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, onChange = _a.onChange, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose, _h = _a.title, title = _h === void 0 ? 'Календарь' : _h, _j = _a.yearsAmount, yearsAmount = _j === void 0 ? 3 : _j, restProps = __rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "dataTestId", "open", "onClose", "title", "yearsAmount"]);
+    var modalRef = useRef(null);
+    var monthOnlyView = selectorView === 'month-only';
+    var handleClose = function () {
+        if (onClose)
+            onClose();
+    };
+    var handleClear = function () {
+        if (onChange)
+            onChange();
+    };
+    var renderDayNames = function () { return (React.createElement("table", { className: styles.dayNames },
+        React.createElement("thead", null,
+            React.createElement("tr", null, WEEKDAYS.map(function (dayName) { return (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)); }))))); };
+    var renderContent = function () {
+        var commonProps = {
+            value: value,
+            onChange: onChange,
+            defaultView: defaultView,
+            selectorView: selectorView,
+            selectedFrom: selectedFrom,
+            selectedTo: selectedTo,
+        };
+        if (monthOnlyView) {
+            return (React.createElement(CalendarMonthOnlyView, __assign({ open: open, yearsAmount: yearsAmount }, commonProps, restProps)));
+        }
+        return (React.createElement(Calendar, __assign({ responsive: true, className: styles.calendar }, commonProps, restProps)));
+    };
+    var renderFooter = function () {
+        if (selectedFrom || selectedTo) {
+            var selectButtonDisabled = !selectedFrom || !selectedTo;
+            if (allowSelectionFromEmptyRange) {
+                selectButtonDisabled = !selectedFrom;
+            }
+            return (React.createElement(React.Fragment, null,
+                React.createElement(Button, { view: 'primary', size: 's', block: true, onClick: handleClose, disabled: selectButtonDisabled }, "\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"));
+    };
+    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 },
+            hasHeader && (React.createElement(ModalMobile.Header, { hasCloser: true, title: title, align: 'center', leftAddons: React.createElement("div", null), sticky: true, className: cn((_b = {}, _b[styles.withZIndex] = selectorView === 'full', _b)) })),
+            monthOnlyView && renderDayNames(),
+            React.createElement(ModalMobile.Content, { flex: true }, renderContent()),
+            React.createElement(ModalMobile.Footer, { sticky: true, className: cn((_c = {}, _c[styles.withZIndex] = selectorView === 'full', _c)) }, renderFooter()))));
+});
+var CalendarMonthOnlyView = function (_a) {
+    var value = _a.value, defaultView = _a.defaultView, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, onMonthChange = _a.onMonthChange, _b = _a.yearsAmount, yearsAmount = _b === void 0 ? 3 : _b;
+    var initialMonthIndex = useMemo(function () {
+        var currentMonthIndex = new Date().getMonth();
+        return yearsAmount * 12 + currentMonthIndex;
+    }, [yearsAmount]);
+    var month = useMemo(function () { return (monthTimestamp ? new Date(monthTimestamp) : undefined); }, [
+        monthTimestamp,
+    ]);
+    var minDate = useMemo(function () { return (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined); }, [
+        minDateTimestamp,
+    ]);
+    var maxDate = useMemo(function () { return (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined); }, [
+        maxDateTimestamp,
+    ]);
+    var selected = useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
+    var defaultMonth = useMemo(function () {
+        return startOfMonth(selected ||
+            limitDate(defaultMonthTimestamp || Date.now(), minDateTimestamp, maxDateTimestamp));
+    }, [defaultMonthTimestamp, maxDateTimestamp, minDateTimestamp, selected]);
+    var _c = useCalendar({
+        month: month,
+        defaultMonth: defaultMonth,
+        view: defaultView,
+        minDate: minDate,
+        maxDate: maxDate,
+        selected: selected,
+        offDays: offDays,
+        events: events,
+        onChange: onChange,
+        onMonthChange: onMonthChange,
+    }), activeMonth = _c.activeMonth, months = _c.months, highlighted = _c.highlighted, getDayProps = _c.getDayProps;
+    var activeMonths = useMemo(function () {
+        var eventsMap = dateArrayToHashTable(events || []);
+        var offDaysMap = dateArrayToHashTable(offDays || []);
+        var holidaysMap = dateArrayToHashTable(holidays || []);
+        var prevMonths = [];
+        var nextMonths = [];
+        var date = new Date();
+        var currentYear = date.getFullYear();
+        for (var i = 0; i < yearsAmount; i++) {
+            var prevYear = date.setFullYear(currentYear - (i + 1));
+            var nextYear = date.setFullYear(currentYear + (i + 1));
+            var prevYearMonths = generateMonths(new Date(prevYear), {});
+            var nextYearMonths = generateMonths(new Date(nextYear), {});
+            prevMonths.unshift.apply(prevMonths, prevYearMonths);
+            nextMonths.push.apply(nextMonths, nextYearMonths);
+        }
+        var generatedMonths = __spreadArrays(prevMonths, months, nextMonths);
+        return generatedMonths.map(function (item) {
+            return __assign(__assign({}, item), { weeks: generateWeeks(item.date, {
+                    minDate: minDate,
+                    maxDate: maxDate,
+                    selected: selected,
+                    eventsMap: eventsMap,
+                    offDaysMap: offDaysMap,
+                    holidaysMap: holidaysMap,
+                }), title: monthName(item.date) + " " + item.date.getFullYear() });
+        });
+    }, [events, offDays, holidays, months, yearsAmount, minDate, maxDate, selected]);
+    var renderMonth = function (index) {
+        return (React.createElement("div", { className: styles.daysTable, id: "month-" + index },
+            React.createElement("span", { className: styles.month }, activeMonths[index].title),
+            React.createElement(DaysTable, { weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true })));
+    };
+    return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: initialMonthIndex, increaseViewportBy: 800, itemSize: function (el) { return el.getBoundingClientRect().height + 32; } }));
+};
+
+export { CalendarMobile };