@alfalab/core-components 20.2.0 → 20.4.0

package/calendar/cssm/components/header/index.module.css

@@ -0,0 +1,108 @@
+:root {
+    --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-2xl: 32px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+    --calendar-arrow-background: url('https://alfabank.st/icons/icon_arrow-left_m_black.svg');
+    --calendar-select-icon-background: url('https://alfabank.st/icons/icon_arrow-select_m_black.svg');
+    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-month-only-header-font-family: var(--font-family-system);
+    --calendar-month-only-header-font-size: 16px;
+    --calendar-month-only-header-font-weight: 400;
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.header {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--calendar-header-paddings);
+    transition: box-shadow 0.2s ease;
+}
+.withShadow {
+    box-shadow: var(--shadow-s);
+}
+.inner {
+    position: relative;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.month {
+    width: 131px;
+}
+.year {
+    width: 105px;
+
+    margin-left: var(--gap-xs);
+}
+.buttonContent {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.monthOnly {
+    padding: var(--calendar-month-only-header-paddings)
+}
+.monthOnly .month {
+        font-family: var(--calendar-month-only-header-font-family);
+        font-size: var(--calendar-month-only-header-font-size);
+        font-weight: var(--calendar-month-only-header-font-weight);
+        line-height: 24px;
+
+        width: auto;
+    }
+.upDownIcon {
+    display: block;
+    background: var(--calendar-select-icon-background);
+    width: 24px;
+    height: 24px;
+    margin-left: var(--gap-xs);
+}
+.arrow {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 8px;
+    background: var(--calendar-arrow-background)
+}
+.arrow:first-child {
+        left: 0;
+    }
+.arrow:last-child {
+        right: 0;
+        transform: rotateY(180deg);
+    }

package/calendar/cssm/components/months-table/Component.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { Month } from "../../typings";
+type MonthsTableProps = {
+    /**
+     * Массив месяцев
+     */
+    months?: Month[];
+    /**
+     * Выбранный месяц
+     */
+    selectedMonth?: Date;
+    /**
+     * Доп пропсы для переданного месяца
+     */
+    getMonthProps: (day: Month) => Record<string, unknown>;
+};
+declare const MonthsTable: FC<MonthsTableProps>;
+export { MonthsTableProps, MonthsTable };

package/calendar/cssm/components/months-table/Component.js

@@ -0,0 +1,30 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-ce870b46.js');
+var React = require('react');
+require('classnames');
+var dateFns = require('date-fns');
+require('../../../../button/cssm');
+require('../select-button/index.module.css');
+var components_selectButton_Component = require('../select-button/Component.js');
+var utils = require('../../utils.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var MonthsTable = function (_a) {
+    var selectedMonth = _a.selectedMonth, _b = _a.months, months = _b === void 0 ? [] : _b, getMonthProps = _a.getMonthProps;
+    var view = React.useCallback(function (month) {
+        if (selectedMonth && dateFns.isSameMonth(selectedMonth, month.date))
+            return 'selected';
+        if (dateFns.isThisMonth(month.date))
+            return 'outlined';
+        return 'default';
+    }, [selectedMonth]);
+    return (React__default['default'].createElement("div", { className: styles__default['default'].monthsTable }, months.map(function (month) { return (React__default['default'].createElement(components_selectButton_Component.SelectButton, tslib_es6.__assign({}, getMonthProps(month), { key: month.date.getTime(), className: styles__default['default'].button, view: view(month) }), utils.monthName(month.date))); })));
+};
+
+exports.MonthsTable = MonthsTable;

package/calendar/cssm/components/months-table/index.d.ts

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

package/calendar/cssm/components/months-table/index.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-ce870b46.js');
+require('react');
+require('classnames');
+require('date-fns');
+require('../../../../button/cssm');
+require('../select-button/index.module.css');
+require('../select-button/Component.js');
+require('../../utils.js');
+require('./index.module.css');
+var components_monthsTable_Component = require('./Component.js');
+
+
+
+exports.MonthsTable = components_monthsTable_Component.MonthsTable;

package/calendar/cssm/components/months-table/index.module.css

@@ -0,0 +1,46 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+    --calendar-selector-button-width: 100px;
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.monthsTable {
+    display: flex;
+    flex-wrap: wrap;
+    width: 318px;
+    margin: auto -3px;
+    justify-content: flex-start;
+}
+.button {
+    width: var(--calendar-selector-button-width);
+    margin: 0 3px var(--gap-xs)
+}
+.button:nth-last-child(-n + 3) {
+        margin-bottom: 0;
+    }

package/calendar/cssm/components/select-button/Component.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import React from 'react';
+import { ButtonHTMLAttributes } from "react";
+type SelectButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Вид кнопки
+     */
+    view?: 'default' | 'filled' | 'outlined' | 'selected';
+};
+declare const SelectButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Вид кнопки
+     */
+    view?: "outlined" | "filled" | "default" | "selected" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { SelectButtonProps, SelectButton };

package/calendar/cssm/components/select-button/Component.js

@@ -0,0 +1,20 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-ce870b46.js');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsButton = require('../../../../button/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var SelectButton = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, _b = _a.view, view = _b === void 0 ? 'default' : _b, restProps = tslib_es6.__rest(_a, ["className", "children", "view"]);
+    return (React__default['default'].createElement(coreComponentsButton.Button, tslib_es6.__assign({}, restProps, { ref: ref, view: 'ghost', size: 'xs', className: cn__default['default'](styles__default['default'].button, styles__default['default'][view], className) }), children));
+});
+
+exports.SelectButton = SelectButton;

package/calendar/cssm/components/select-button/index.d.ts

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

package/calendar/cssm/components/select-button/index.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-ce870b46.js');
+require('react');
+require('classnames');
+require('../../../../button/cssm');
+require('./index.module.css');
+var components_selectButton_Component = require('./Component.js');
+
+
+
+exports.SelectButton = components_selectButton_Component.SelectButton;

package/calendar/cssm/components/select-button/index.module.css

@@ -0,0 +1,79 @@
+:root {
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-bg-tertiary: #e7e9eb;
+    --color-light-border-key: #0b1f35;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-bg-tertiary-shade-7: rgb(215, 217, 219);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-s: 12px;
+}
+:root {
+    --border-radius-s: 4px;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+    --calendar-selector-button-outline-border-color: var(--color-light-border-key);
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.button {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    height: 40px;
+    position: relative;
+    padding: 0 var(--gap-s);
+    background-color: transparent;
+    border-radius: var(--border-radius-s)
+}
+.button:not(:disabled):hover {
+        background-color: var(--color-light-bg-tertiary);
+        color: var(--color-light-text-primary);
+    }
+.button.filled {
+        background-color: var(--color-light-bg-tertiary)
+    }
+.button.filled:not(:disabled):hover {
+            background-color: var(--color-light-bg-tertiary-shade-7);
+        }
+.button.outlined {
+        border: 1px solid var(--calendar-selector-button-outline-border-color);
+    }
+.button.selected,
+    .button.selected:disabled {
+        background-color: var(--color-light-bg-primary-inverted);
+        color: var(--color-light-text-primary-inverted)
+    }
+.button.selected:not(:disabled):hover, .button.selected:disabled:not(:disabled):hover {
+            background-color: var(--color-light-bg-primary-inverted);
+            color: var(--color-light-text-primary-inverted);
+        }
+.button > * {
+        flex-grow: 1;
+    }

package/calendar/cssm/components/years-table/Component.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+type YearsTableProps = {
+    /**
+     * Массив лет
+     */
+    years?: Date[];
+    /**
+     * Выбранный год
+     */
+    selectedYear?: Date;
+    /**
+     * Доп. пропсы для переданного года
+     */
+    getYearProps: (year: Date) => Record<string, unknown>;
+    /**
+     * Обработчик скролла
+     */
+    onScroll: (scrollTop: number) => void;
+};
+declare const YearsTable: FC<YearsTableProps>;
+export { YearsTableProps, YearsTable };

package/calendar/cssm/components/years-table/Component.js

@@ -0,0 +1,44 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-ce870b46.js');
+var React = require('react');
+require('classnames');
+var dateFns = require('date-fns');
+require('../../../../button/cssm');
+require('../select-button/index.module.css');
+var components_selectButton_Component = require('../select-button/Component.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var YearsTable = function (_a) {
+    var selectedYear = _a.selectedYear, _b = _a.years, years = _b === void 0 ? [] : _b, getYearProps = _a.getYearProps, onScroll = _a.onScroll;
+    var ref = React.useRef(null);
+    var view = React.useCallback(function (year) {
+        if (selectedYear && dateFns.isSameYear(selectedYear, year))
+            return 'selected';
+        if (dateFns.isThisYear(year))
+            return 'outlined';
+        return 'default';
+    }, [selectedYear]);
+    var handleScroll = React.useCallback(function (event) {
+        onScroll(event.currentTarget.scrollTop);
+    }, [onScroll]);
+    React.useLayoutEffect(function () {
+        var listNode = ref.current;
+        var selector = "." + styles__default['default'].button + "[tabIndex=\"0\"]";
+        var selectedYearNode = listNode && listNode.querySelector(selector);
+        if (listNode && selectedYearNode) {
+            var topIndent = listNode.clientHeight / 2 - selectedYearNode.clientHeight / 2;
+            listNode.scrollTop = selectedYearNode.offsetTop - topIndent;
+            onScroll(listNode.scrollTop);
+        }
+    }, [onScroll, selectedYear]);
+    return (React__default['default'].createElement("div", { className: styles__default['default'].yearsTable, onScroll: handleScroll, ref: ref },
+        React__default['default'].createElement("div", { className: styles__default['default'].inner }, years.map(function (year) { return (React__default['default'].createElement(components_selectButton_Component.SelectButton, tslib_es6.__assign({}, getYearProps(year), { key: year.getFullYear(), view: view(year), className: styles__default['default'].button }), year.getFullYear())); }))));
+};
+
+exports.YearsTable = YearsTable;

package/calendar/cssm/components/years-table/index.d.ts

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

package/calendar/cssm/components/years-table/index.js

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-ce870b46.js');
+require('react');
+require('classnames');
+require('date-fns');
+require('../../../../button/cssm');
+require('../select-button/index.module.css');
+require('../select-button/Component.js');
+require('./index.module.css');
+var components_yearsTable_Component = require('./Component.js');
+
+
+
+exports.YearsTable = components_yearsTable_Component.YearsTable;

package/calendar/cssm/components/years-table/index.module.css

@@ -0,0 +1,57 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+    --gap-m-neg: -16px;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+    --calendar-selector-button-width: 100px;
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.yearsTable {
+    overflow: auto;
+    overflow-x: hidden;
+    width: 100%;
+    margin-bottom: var(--gap-m-neg);
+    padding-top: 6px;
+}
+.inner {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    position: relative;
+
+    /* 16px - 3px margin от кнопки года */
+    left: 13px;
+    overflow: hidden;
+}
+.button {
+    width: var(--calendar-selector-button-width);
+    margin: 0 3px var(--gap-xs)
+}
+.button:nth-last-child(-n + 3) {
+        margin-bottom: 0;
+    }

package/calendar/cssm/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Component";
+export { usePeriod } from "./usePeriod";
+export { useCalendar } from "./useCalendar";
+export { russianWeekDay, dateInLimits, limitDate, monthName, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS } from "./utils";

package/calendar/cssm/index.js

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./tslib.es6-ce870b46.js');
+require('react');
+require('classnames');
+require('date-fns');
+require('@alfalab/hooks');
+require('../../button/cssm');
+require('./components/select-button/index.module.css');
+require('./components/select-button/Component.js');
+require('./components/header/index.module.css');
+require('./components/header/Component.js');
+require('react-transition-group');
+var utils = require('./utils.js');
+require('./components/days-table/index.module.css');
+require('./components/days-table/Component.js');
+require('./components/months-table/index.module.css');
+require('./components/months-table/Component.js');
+require('./components/years-table/index.module.css');
+require('./components/years-table/Component.js');
+require('react-merge-refs');
+var useCalendar = require('./useCalendar.js');
+require('./index.module.css');
+var Component = require('./Component.js');
+var usePeriod = require('./usePeriod.js');
+
+
+
+exports.DAYS_IN_WEEK = utils.DAYS_IN_WEEK;
+exports.MONTHS = utils.MONTHS;
+exports.MONTHS_IN_YEAR = utils.MONTHS_IN_YEAR;
+exports.SUNDAY_INDEX = utils.SUNDAY_INDEX;
+exports.WEEKDAYS = utils.WEEKDAYS;
+exports.dateInLimits = utils.dateInLimits;
+exports.limitDate = utils.limitDate;
+exports.monthName = utils.monthName;
+exports.russianWeekDay = utils.russianWeekDay;
+exports.useCalendar = useCalendar.useCalendar;
+exports.Calendar = Component.Calendar;
+exports.usePeriod = usePeriod.usePeriod;

package/calendar/cssm/index.module.css

@@ -0,0 +1,53 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+}
+:root {
+    --calendar-width: 344px;
+    --calendar-height: 340px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.component {
+    width: var(--calendar-width);
+    height: var(--calendar-height);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    outline: none;
+}
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: var(--gap-m);
+    box-sizing: border-box;
+    flex-grow: 1;
+    overflow: hidden;
+}
+.sixWeeks {
+    height: 379px;
+}

package/calendar/cssm/typings.d.ts

@@ -0,0 +1,15 @@
+type SpecialDays = Record<number, boolean>;
+type Day = {
+    date: Date;
+    disabled?: boolean;
+    event?: boolean;
+    selected?: boolean;
+};
+type Month = {
+    date: Date;
+    disabled?: boolean;
+};
+type DateShift = 'prev' | 'prevWeek' | 'prevMonth' | 'startOfWeek' | 'next' | 'nextWeek' | 'nextMonth' | 'endOfWeek';
+type View = 'years' | 'months' | 'days';
+type SelectorView = 'month-only' | 'full';
+export { SpecialDays, Day, Month, DateShift, View, SelectorView };

package/calendar/cssm/typings.js

@@ -0,0 +1 @@
+