@alfalab/core-components 20.2.0 → 20.4.0

package/calendar/cssm/useCalendar.d.ts

@@ -0,0 +1,89 @@
+/// <reference types="react" />
+import { KeyboardEvent, MouseEvent } from 'react';
+import { Day, Month, View } from "./typings";
+type UseCalendarProps = {
+    /**
+     * Активный вид (выбор дней, месяцев, лет)
+     */
+    view?: View;
+    /**
+     * Выбранный месяц (controlled)
+     */
+    month?: Date;
+    /**
+     * Начальный месяц
+     */
+    defaultMonth: Date;
+    /**
+     * Минимальная дата, доступная для выбора
+     */
+    minDate?: Date;
+    /**
+     * Максимальная дата, доступная для выбора
+     */
+    maxDate?: Date;
+    /**
+     * Выбранная дата
+     */
+    selected?: Date;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных дней
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Обработчик изменения месяца (или года)
+     */
+    onMonthChange?: (month: number) => void;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date: number) => void;
+};
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, onMonthChange, onChange, }: UseCalendarProps): {
+    activeMonth: Date;
+    weeks: Day[][];
+    months: Month[];
+    years: Date[];
+    canSetPrevMonth: boolean;
+    canSetNextMonth: boolean;
+    highlighted: number | Date | undefined;
+    setPrevMonth: () => void;
+    setNextMonth: () => void;
+    setMonthByDate: (newMonth: Date) => void;
+    getDayProps: (day: Day) => {
+        'data-date': number;
+        'aria-selected': boolean | undefined;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        onMouseEnter: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+        onMouseLeave: () => void;
+        onClick: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+    };
+    getMonthProps: (month: Month) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        disabled: boolean | undefined;
+        onClick: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+    };
+    getYearProps: (year: Date) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        onClick: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+    };
+    getRootProps: ({ ref }: {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }) => {
+        onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+        ref: (instance: HTMLDivElement | null) => void;
+        tabIndex: number;
+    };
+};
+export { UseCalendarProps, useCalendar };

package/calendar/cssm/useCalendar.js

@@ -0,0 +1,283 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var dateFns = require('date-fns');
+var utils = require('./utils.js');
+var mergeRefs = require('react-merge-refs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+
+function useCalendar(_a) {
+    var defaultMonth = _a.defaultMonth, month = _a.month, minDate = _a.minDate, _b = _a.view, view = _b === void 0 ? 'days' : _b, maxDate = _a.maxDate, selected = _a.selected, events = _a.events, offDays = _a.offDays, onMonthChange = _a.onMonthChange, onChange = _a.onChange;
+    var _c = React.useState(defaultMonth), monthState = _c[0], setMonthState = _c[1];
+    var _d = React.useState(), highlighted = _d[0], setHighlighted = _d[1];
+    var uncontrolled = month === undefined;
+    var activeMonth = uncontrolled ? monthState : month;
+    var dateRefs = React.useRef([]);
+    var rootRef = React.useRef(null);
+    var minMonth = React.useMemo(function () { return minDate && dateFns.startOfMonth(minDate); }, [minDate]);
+    var maxMonth = React.useMemo(function () { return maxDate && dateFns.startOfMonth(maxDate); }, [maxDate]);
+    var canSetPrevMonth = minMonth ? activeMonth > minMonth : true;
+    var canSetNextMonth = maxMonth ? activeMonth < maxMonth : true;
+    var eventsMap = React.useMemo(function () { return utils.dateArrayToHashTable(events || []); }, [events]);
+    var offDaysMap = React.useMemo(function () { return utils.dateArrayToHashTable(offDays || []); }, [offDays]);
+    var weeks = React.useMemo(function () { return utils.generateWeeks(activeMonth, { minDate: minDate, maxDate: maxDate, selected: selected, eventsMap: eventsMap, offDaysMap: offDaysMap }); }, [maxDate, minDate, selected, activeMonth, eventsMap, offDaysMap]);
+    var months = React.useMemo(function () { return utils.generateMonths(activeMonth, { minMonth: minMonth, maxMonth: maxMonth }); }, [
+        minMonth,
+        maxMonth,
+        activeMonth,
+    ]);
+    var years = React.useMemo(function () { return utils.generateYears(minDate || dateFns.subYears(new Date(), 100), maxDate || new Date()); }, [minDate, maxDate]);
+    var setMonth = React.useCallback(function (newMonth) {
+        if (uncontrolled) {
+            setMonthState(newMonth);
+        }
+        if (onMonthChange) {
+            onMonthChange(newMonth.getTime());
+        }
+    }, [onMonthChange, uncontrolled]);
+    var setMonthByStep = React.useCallback(function (step) {
+        setMonth(utils.limitDate(dateFns.addMonths(activeMonth, step), minMonth, maxMonth));
+    }, [setMonth, activeMonth, minMonth, maxMonth]);
+    var setMonthByDate = React.useCallback(function (newMonth) {
+        setMonth(utils.limitDate(newMonth, minMonth, maxMonth));
+    }, [maxMonth, minMonth, setMonth]);
+    var setNextMonth = React.useCallback(function () {
+        setMonthByStep(1);
+    }, [setMonthByStep]);
+    var setPrevMonth = React.useCallback(function () {
+        setMonthByStep(-1);
+    }, [setMonthByStep]);
+    var getFocusedDate = React.useCallback(function () { return dateRefs.current.find(function (node) { return document.activeElement === node; }); }, []);
+    var getFocusableDate = React.useCallback(function () { return dateRefs.current.find(function (node) { return node && node.tabIndex === 0; }); }, []);
+    var focusDate = React.useCallback(function (node) {
+        if (node) {
+            utils.simulateTab(node);
+            node.focus();
+        }
+    }, []);
+    var focusFirstAvailableDate = React.useCallback(function () { return focusDate(getFocusableDate()); }, [
+        focusDate,
+        getFocusableDate,
+    ]);
+    var focusDay = React.useCallback(function (shift) {
+        var focusedNode = getFocusedDate();
+        if (focusedNode && focusedNode.dataset.date) {
+            var focusedDate = new Date(+focusedNode.dataset.date);
+            var newDate_1 = utils.modifyDateByShift(shift, focusedDate, minDate, maxDate, offDaysMap);
+            var monthChanged = false;
+            if (newDate_1 < focusedDate && newDate_1.getMonth() !== focusedDate.getMonth()) {
+                setPrevMonth();
+                monthChanged = true;
+            }
+            if (newDate_1 > focusedDate && newDate_1.getMonth() !== focusedDate.getMonth()) {
+                setNextMonth();
+                monthChanged = true;
+            }
+            var effect = function () { return focusDate(dateRefs.current[newDate_1.getDate() - 1]); };
+            if (monthChanged) {
+                setTimeout(effect, 0);
+            }
+            else {
+                effect();
+            }
+        }
+        else {
+            focusFirstAvailableDate();
+        }
+    }, [
+        focusDate,
+        focusFirstAvailableDate,
+        getFocusedDate,
+        maxDate,
+        minDate,
+        offDaysMap,
+        setNextMonth,
+        setPrevMonth,
+    ]);
+    var focusMonth = React.useCallback(function (offset) {
+        var focusedNode = getFocusedDate();
+        if (focusedNode && focusedNode.dataset.date) {
+            var focusedMonth = new Date(+focusedNode.dataset.date).getMonth();
+            var newFocusedMonth = focusedMonth + offset;
+            if (newFocusedMonth >= 0 && newFocusedMonth < utils.MONTHS_IN_YEAR) {
+                focusDate(dateRefs.current[newFocusedMonth]);
+            }
+        }
+        else {
+            focusFirstAvailableDate();
+        }
+    }, [focusDate, focusFirstAvailableDate, getFocusedDate]);
+    var focusYear = React.useCallback(function (offset) {
+        var focusedNode = getFocusedDate();
+        if (focusedNode && focusedNode.dataset.date) {
+            var focusedYear = new Date(+focusedNode.dataset.date).getFullYear();
+            var newFocusedYear = focusedYear + offset;
+            var currentYear = new Date().getFullYear();
+            if (newFocusedYear <= currentYear && newFocusedYear > currentYear - years.length) {
+                focusDate(dateRefs.current[newFocusedYear]);
+            }
+        }
+        else {
+            focusFirstAvailableDate();
+        }
+    }, [focusDate, focusFirstAvailableDate, getFocusedDate, years.length]);
+    var handleMonthClick = React.useCallback(function (event) {
+        var date = event.currentTarget.dataset.date;
+        if (date) {
+            setMonthByDate(new Date(+date));
+        }
+        /**
+         * Возвращаем фокус внутрь компонента после переключения
+         * Но только если фокус и раньше был внутри
+         */
+        if (rootRef.current && rootRef.current.contains(document.activeElement)) {
+            rootRef.current.focus();
+        }
+    }, [setMonthByDate]);
+    var handleYearClick = React.useCallback(function (event) {
+        var date = event.currentTarget.dataset.date;
+        if (date) {
+            setMonthByDate(dateFns.setYear(activeMonth, new Date(+date).getFullYear()));
+        }
+        if (rootRef.current && rootRef.current.contains(document.activeElement)) {
+            rootRef.current.focus();
+        }
+    }, [activeMonth, setMonthByDate]);
+    var handleDateRef = React.useCallback(function (node, index) {
+        dateRefs.current[index] = node;
+    }, []);
+    var handleDayMouseEnter = React.useCallback(function (event) {
+        var date = event.currentTarget.dataset.date;
+        setHighlighted(date ? +date : undefined);
+    }, []);
+    var handleDayMouseLeave = React.useCallback(function () {
+        setHighlighted(undefined);
+    }, []);
+    var handleDayClick = React.useCallback(function (event) {
+        var date = event.currentTarget.dataset.date;
+        if (date && onChange) {
+            onChange(+date);
+        }
+    }, [onChange]);
+    var daysControls = React.useMemo(function () { return ({
+        ArrowLeft: function () { return focusDay('prev'); },
+        ArrowRight: function () { return focusDay('next'); },
+        ArrowUp: function () { return focusDay('prevWeek'); },
+        ArrowDown: function () { return focusDay('nextWeek'); },
+        End: function () { return focusDay('endOfWeek'); },
+        Home: function () { return focusDay('startOfWeek'); },
+        PageUp: function () { return focusDay('prevMonth'); },
+        PageDown: function () { return focusDay('nextMonth'); },
+    }); }, [focusDay]);
+    var monthControls = React.useMemo(function () { return ({
+        ArrowLeft: function () { return focusMonth(-1); },
+        ArrowRight: function () { return focusMonth(1); },
+        ArrowUp: function () { return focusMonth(-3); },
+        ArrowDown: function () { return focusMonth(3); },
+    }); }, [focusMonth]);
+    var yearsControls = React.useMemo(function () { return ({
+        ArrowLeft: function () { return focusYear(1); },
+        ArrowRight: function () { return focusYear(-1); },
+        ArrowUp: function () { return focusYear(3); },
+        ArrowDown: function () { return focusYear(-3); },
+    }); }, [focusYear]);
+    var controlsByView = {
+        days: daysControls,
+        months: monthControls,
+        years: yearsControls,
+    };
+    var handleKeyDown = React.useCallback(function (event) {
+        var controls = controlsByView[view];
+        if (event.key in controls) {
+            controls[event.key]();
+            event.preventDefault();
+        }
+    }, [controlsByView, view]);
+    var focusableDayIsSet = false;
+    var getDayProps = React.useCallback(function (day) {
+        var daySelected = selected && dateFns.isSameDay(selected, day.date);
+        var canFocus = daySelected;
+        // Если день не выбран — фокус должен начинаться с первого доступного дня месяца
+        if ((!selected || !dateFns.isSameMonth(selected, activeMonth)) &&
+            !focusableDayIsSet &&
+            !day.disabled) {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            focusableDayIsSet = true;
+            canFocus = true;
+        }
+        return {
+            'data-date': day.date.getTime(),
+            'aria-selected': daySelected,
+            ref: function (node) {
+                handleDateRef(node, day.date.getDate() - 1);
+            },
+            tabIndex: canFocus ? 0 : -1,
+            onMouseEnter: handleDayMouseEnter,
+            onMouseLeave: handleDayMouseLeave,
+            onClick: handleDayClick,
+        };
+    }, [
+        handleDayClick,
+        handleDateRef,
+        handleKeyDown,
+        handleDayMouseEnter,
+        handleDayMouseLeave,
+        selected,
+    ]);
+    var getMonthProps = React.useCallback(
+    // eslint-disable-next-line no-shadow
+    function (month) {
+        var monthselected = dateFns.isSameMonth(activeMonth, month.date);
+        return {
+            'data-date': month.date.getTime(),
+            'aria-selected': monthselected,
+            ref: function (node) {
+                handleDateRef(node, month.date.getMonth());
+            },
+            tabIndex: monthselected ? 0 : -1,
+            disabled: month.disabled,
+            onClick: handleMonthClick,
+        };
+    }, [activeMonth, handleDateRef, handleMonthClick]);
+    var getYearProps = React.useCallback(function (year) {
+        var yearSelected = dateFns.isSameYear(activeMonth, year);
+        return {
+            'data-date': year.getTime(),
+            'aria-selected': yearSelected,
+            ref: function (node) {
+                handleDateRef(node, year.getFullYear());
+            },
+            tabIndex: yearSelected ? 0 : -1,
+            onClick: handleYearClick,
+        };
+    }, [activeMonth, handleDateRef, handleYearClick]);
+    var getRootProps = React.useCallback(function (_a) {
+        var _b = _a.ref, ref = _b === void 0 ? null : _b;
+        return {
+            onKeyDown: handleKeyDown,
+            ref: mergeRefs__default['default']([ref, rootRef]),
+            tabIndex: -1,
+        };
+    }, [handleKeyDown]);
+    return {
+        activeMonth: activeMonth,
+        weeks: weeks,
+        months: months,
+        years: years,
+        canSetPrevMonth: canSetPrevMonth,
+        canSetNextMonth: canSetNextMonth,
+        highlighted: highlighted,
+        setPrevMonth: setPrevMonth,
+        setNextMonth: setNextMonth,
+        setMonthByDate: setMonthByDate,
+        getDayProps: getDayProps,
+        getMonthProps: getMonthProps,
+        getYearProps: getYearProps,
+        getRootProps: getRootProps,
+    };
+}
+
+exports.useCalendar = useCalendar;

package/calendar/cssm/usePeriod.d.ts

@@ -0,0 +1,23 @@
+type usePeriodProps = {
+    /**
+     * Обработчик изменения выделенного периода
+     */
+    onPeriodChange?: (selectedFrom?: number, selectedTo?: number) => void;
+    /**
+     * Начальное значение начала выделенного периода
+     */
+    initialSelectedFrom?: number;
+    /**
+     * Начальное значение конца выделенного периода
+     */
+    initialSelectedTo?: number;
+};
+declare function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo, }: usePeriodProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    setStart: (date?: number | undefined) => void;
+    setEnd: (date?: number | undefined) => void;
+    resetPeriod: () => void;
+    updatePeriod: (date?: number | undefined) => void;
+};
+export { usePeriod };

package/calendar/cssm/usePeriod.js

@@ -0,0 +1,67 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var hooks = require('@alfalab/hooks');
+
+function usePeriod(_a) {
+    var onPeriodChange = _a.onPeriodChange, initialSelectedFrom = _a.initialSelectedFrom, initialSelectedTo = _a.initialSelectedTo;
+    var _b = React.useState(initialSelectedFrom), selectedFrom = _b[0], setSelectedFrom = _b[1];
+    var _c = React.useState(initialSelectedTo), selectedTo = _c[0], setSelectedTo = _c[1];
+    var resetPeriod = React.useCallback(function () {
+        setSelectedFrom(undefined);
+        setSelectedTo(undefined);
+    }, []);
+    var setStart = React.useCallback(function (date) {
+        setSelectedFrom(date);
+    }, []);
+    var setEnd = React.useCallback(function (date) {
+        setSelectedTo(date);
+    }, []);
+    var updatePeriod = React.useCallback(function (date) {
+        // сбрасываем выделение
+        if (date === undefined) {
+            resetPeriod();
+            return;
+        }
+        // начинаем выделение
+        if (!selectedFrom) {
+            setSelectedFrom(date);
+            return;
+        }
+        // заканчиваем выделение
+        if (!selectedTo) {
+            setSelectedFrom(Math.min(date, selectedFrom));
+            setSelectedTo(Math.max(date, selectedFrom));
+            return;
+        }
+        // если новая дата за выделенным периодом — расширяем интервал
+        if (date > selectedFrom) {
+            setSelectedTo(date);
+            return;
+        }
+        /**
+         * если новая дата находится раньше начала выделения —
+         * сбрасываем конец периода и начинаем выделение с этой даты
+         */
+        if (date < selectedFrom) {
+            setSelectedTo(undefined);
+            setSelectedFrom(date);
+        }
+    }, [resetPeriod, selectedFrom, selectedTo]);
+    hooks.useDidUpdateEffect(function () {
+        if (onPeriodChange) {
+            onPeriodChange(selectedFrom, selectedTo);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedFrom, selectedTo]);
+    return {
+        selectedFrom: selectedFrom,
+        selectedTo: selectedTo,
+        setStart: setStart,
+        setEnd: setEnd,
+        resetPeriod: resetPeriod,
+        updatePeriod: updatePeriod,
+    };
+}
+
+exports.usePeriod = usePeriod;

package/calendar/cssm/utils.d.ts

@@ -0,0 +1,78 @@
+import { DateShift, Day, Month, SpecialDays } from "./typings";
+declare const DAYS_IN_WEEK = 7;
+declare const MONTHS_IN_YEAR = 12;
+declare const SUNDAY_INDEX = 6;
+declare const WEEKDAYS: string[];
+declare const MONTHS: string[];
+/**
+ * Возвращает «правильный» индекс дня недели, 0 - пн, 1 - вт и так далее.
+ */
+declare function russianWeekDay(date: Date): number;
+/**
+ * Возвращает таблицу-календарь с заполненными датами для переданного месяца
+ */
+declare function generateWeeks(month: Date, options: {
+    minDate?: Date;
+    maxDate?: Date;
+    selected?: Date;
+    eventsMap?: SpecialDays;
+    offDaysMap?: SpecialDays;
+}): Day[][];
+/**
+ * Возвращает массив с месяцами для переданного года
+ */
+declare function generateMonths(year: Date, options: {
+    minMonth?: Date;
+    maxMonth?: Date;
+}): Month[];
+/**
+ * Возвращает массив лет от minYear до maxYear
+ */
+declare function generateYears(minYear: Date, maxYear: Date): Date[];
+/**
+ * Добавляет метаданные для переданного дня
+ */
+declare function buildDay(day: Date, options: {
+    minDate?: Date;
+    maxDate?: Date;
+    selected?: Date;
+    eventsMap?: SpecialDays;
+    offDaysMap?: SpecialDays;
+}): Day;
+/**
+ * Добавляет метаданные для переданного месяца
+ */
+declare function buildMonth(month: Date, options: {
+    minMonth?: Date;
+    maxMonth?: Date;
+}): Month;
+/**
+ * Ограничивает дату на отрезке [minDate, maxDate]
+ */
+declare function limitDate(date: Date | number, minDate?: Date | number, maxDate?: Date | number): Date;
+/**
+ * Проверяет, находится ли переданная дата в указанных границах
+ */
+declare function dateInLimits(date?: Date | number | null, minDate?: Date | number, maxDate?: Date | number): boolean | 0 | null | undefined;
+/**
+ * Возвращает русское название месяца с большой буквы
+ */
+declare function monthName(month: Date): string;
+/**
+ * Превращает массив в объект, у которого ключи составляются из элементов массива
+ */
+declare function dateArrayToHashTable(arr: Array<Date | number>): Record<number, boolean>;
+/**
+ * Возвращает корректный отрезок дат для выделения
+ */
+declare function getSelectionRange(from?: Date | number, to?: Date | number, highlighted?: Date | number): {
+    start: Date;
+    end: Date;
+} | null;
+declare function modifyDateByShift(shift: DateShift, date: Date, minDate?: Date, maxDate?: Date, offDaysMap?: Record<number, boolean>): Date;
+/**
+ * Если дата была выбрана мышкой — фокусную обводку не видно
+ * TODO: добавить в useFocus возможность переключать метод ввода программно
+ */
+declare function simulateTab(node: HTMLElement): void;
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab };