@steroidsjs/core 3.0.0-beta.85 → 3.0.0-beta.86

package/en.json

@@ -805,7 +805,20 @@
     "Фиксированная высота графика в пикселях": "Fixed chart height in pixels",
     "Использовать ли дефолтную конфигурацию для графика типа line": "Use default configuration for the line chart",
     "Этот компонент позволяет создавать в проекте графики разных типов. Под капотом для графиков используется библиотека nivo.\nДля работы этого компонента необходимо установить в проекте зависимости @nivo/core и пакет конкретного графика nivo, например @nivo/line.\nКомпонент графика nivo нужно передать в пропс chartComponent": "This component allows you to create various types of graphics in your project. Under the hood, the nivo library is used for charts. \nTo use this component, you need to install dependencies @nivo/core and a specific nivo chart package, for example, @nivo/line. \nPass the nivo chart component as the chartComponent prop",
+    "Новое событие": "New event",
+    "Календарь": "Calendar",
+    "Создать": "Create",
+    "Показать ещё": "Show more",
+    "Неделя": "Week",
+    "Месяц": "Month",
+    "Пн": "Mo",
+    "Вт": "Tu",
+    "Ср": "We",
+    "Чт": "Th",
+    "Пт": "Fr",
+    "Сб": "Sa",
+    "Вс": "Su",
     "Компонент для представления данных коллекции в виде иерархической структуры.": "A component for representing collection data in the form of a hierarchical structure.",
     "Уникальный идентификатор,\nиспользуется для сохранения состояния открыта или закрыта ячейка": "Unique identifier \nused to save the open or closed state of a cell",
     "Включает обработку вложенных данных из items вида [{id: 1, name: 'John', items: [...]}]": ""
-}
+}

package/hooks/index.d.ts

@@ -18,5 +18,9 @@ import useSelector from './useSelector';
 import useSsr from './useSsr';
 import useUniqueId from './useUniqueId';
 import useTheme from './useTheme';
+import useMonthCalendar from '../ui/content/CalendarSystem/hooks/useMonthCalendar';
+import useWeekCalendar from '../ui/content/CalendarSystem/hooks/useWeekCalendar';
+import useDisplayDate from '../ui/content/CalendarSystem/hooks/useDisplayDate';
+import useCalendarControls from '../ui/content/CalendarSystem/hooks/useCalendarControls';
 import useSaveCursorPosition from './useSaveCursorPosition';
-export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, useSaveCursorPosition, };
+export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, useMonthCalendar, useWeekCalendar, useDisplayDate, useCalendarControls, useSaveCursorPosition, };

package/hooks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.useSaveCursorPosition = exports.useTheme = exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
+exports.useSaveCursorPosition = exports.useCalendarControls = exports.useDisplayDate = exports.useWeekCalendar = exports.useMonthCalendar = exports.useTheme = exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
 var useAbsolutePositioning_1 = __importDefault(require("./useAbsolutePositioning"));
 exports.useAbsolutePositioning = useAbsolutePositioning_1["default"];
 var useAddressBar_1 = __importDefault(require("./useAddressBar"));
@@ -44,5 +44,13 @@ var useUniqueId_1 = __importDefault(require("./useUniqueId"));
 exports.useUniqueId = useUniqueId_1["default"];
 var useTheme_1 = __importDefault(require("./useTheme"));
 exports.useTheme = useTheme_1["default"];
+var useMonthCalendar_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useMonthCalendar"));
+exports.useMonthCalendar = useMonthCalendar_1["default"];
+var useWeekCalendar_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useWeekCalendar"));
+exports.useWeekCalendar = useWeekCalendar_1["default"];
+var useDisplayDate_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useDisplayDate"));
+exports.useDisplayDate = useDisplayDate_1["default"];
+var useCalendarControls_1 = __importDefault(require("../ui/content/CalendarSystem/hooks/useCalendarControls"));
+exports.useCalendarControls = useCalendarControls_1["default"];
 var useSaveCursorPosition_1 = __importDefault(require("./useSaveCursorPosition"));
 exports.useSaveCursorPosition = useSaveCursorPosition_1["default"];

package/hooks/useApplication.js

@@ -55,9 +55,11 @@ var merge_1 = __importDefault(require("lodash-es/merge"));
 var react_1 = require("react");
 var relativeTime_1 = __importDefault(require("dayjs/plugin/relativeTime"));
 var localizedFormat_1 = __importDefault(require("dayjs/plugin/localizedFormat"));
+var localeData_1 = __importDefault(require("dayjs/plugin/localeData"));
 var customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 var dayjs_1 = __importDefault(require("dayjs"));
 var utc_1 = __importDefault(require("dayjs/plugin/utc"));
+var isToday_1 = __importDefault(require("dayjs/plugin/isToday"));
 var ThemeProvider_1 = __importDefault(require("../providers/ThemeProvider"));
 var ClientStorageComponent_1 = __importDefault(require("../components/ClientStorageComponent"));
 var HtmlComponent_1 = __importDefault(require("../components/HtmlComponent"));
@@ -103,6 +105,8 @@ function useApplication(config) {
     dayjs_1["default"].extend(customParseFormat_1["default"]);
     dayjs_1["default"].extend(localizedFormat_1["default"]);
     dayjs_1["default"].extend(utc_1["default"]);
+    dayjs_1["default"].extend(localeData_1["default"]);
+    dayjs_1["default"].extend(isToday_1["default"]);
     var components = (0, useComponents_1["default"])();
     if (useGlobal && !process.env.IS_SSR) {
         components = window.SteroidsComponents || null;

package/hooks/useDataProvider.d.ts

@@ -16,13 +16,14 @@ export interface IAutoCompleteConfig {
      */
     delay?: number;
 }
-export type DataProviderItems = string | ({
+export type DataProviderItem = string | ({
     new (): Enum;
 }) | (string | number | {
     id: string | number | boolean;
     label: string | any;
     [key: string]: any;
-})[];
+});
+export type DataProviderItems = DataProviderItem[];
 export interface IDataProvider {
     /**
      * Уникальный (глобально) идентификатор, под которых будут храниться

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.85",
+ "version": "3.0.0-beta.86",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {

package/ui/content/Calendar/Calendar.d.ts

@@ -45,6 +45,11 @@ export interface ICalendarProps extends IUiComponent {
      * @example 1
      */
     numberOfMonths?: number;
+    /**
+    * Callback вызываемый при нажатии на смену года или месяца в шапке Calendar
+    * @param newDate - дата первого дня нового месяца
+    */
+    onMonthChange?: (newDate: Date) => void;
 }
 export interface ICalendarViewProps extends ICalendarProps {
     /**

package/ui/content/Calendar/Calendar.js

@@ -32,14 +32,19 @@ function Calendar(props) {
         }
     }, [selectedDates]);
     var onDaySelect = (0, react_1.useCallback)(function (date) {
-        props.onChange.call(null, (0, calendar_1.convertDate)(date, null, props.valueFormat, false, true));
+        if (props.onChange) {
+            props.onChange.call(null, (0, calendar_1.convertDate)(date, null, props.valueFormat, false, true));
+        }
     }, [props.onChange, props.valueFormat]);
     var toggleCaptionPanel = (0, react_1.useCallback)(function () {
         setIsCaptionPanelVisible(!isCaptionPanelVisible);
     }, [isCaptionPanelVisible]);
     var onMonthSelect = (0, react_1.useCallback)(function (newMonth) {
         setMonth(newMonth);
-    }, []);
+        if (props.onMonthChange) {
+            props.onMonthChange(newMonth);
+        }
+    }, [props]);
     return components.ui.renderView(props.view || 'content.CalendarView', __assign(__assign(__assign({}, props.viewProps), props.pickerProps), { month: month, toYear: toYear, fromYear: fromYear, onDaySelect: onDaySelect, onMonthSelect: onMonthSelect, selectedDates: selectedDates, toggleCaptionPanel: toggleCaptionPanel, isCaptionPanelVisible: isCaptionPanelVisible, className: props.className, showFooter: props.showFooter, numberOfMonths: props.numberOfMonths }));
 }
 Calendar.defaultProps = {

package/ui/content/CalendarSystem/CalendarSystem.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { IModalProps } from '../../../ui/modal/Modal/Modal';
+import CalendarEnum from './enums/CalendarType';
+export interface IDay {
+    dayNumber: number;
+    date: Date;
+    outOfRange?: boolean;
+    isToday?: boolean;
+    formattedDisplay?: string;
+}
+export interface IPresentDateInfo {
+    currentYear: number;
+    currentMonth: number;
+    dateToDisplay: string;
+}
+export interface IEvent {
+    date: Date;
+    title: string;
+    color?: string;
+    [key: string]: any;
+}
+export interface IEventGroup {
+    id: number;
+    label: string;
+    color?: string;
+    events: IEvent[];
+}
+export interface ICalendarSystemProps extends IUiComponent {
+    onCreateEvent?: () => void;
+    onChangeCalendarType?: (newType: string) => void;
+    createEventModalProps: IModalProps;
+    eventBlock: {
+        title: string;
+        eventGroups: IEventGroup[];
+    };
+    [key: string]: any;
+}
+export interface ICalendarSystemViewProps extends Omit<ICalendarSystemProps, 'calendarGroups'> {
+    monthCalendarDays: IDay[];
+    currentWeekDays: IDay[];
+    allHours: string[];
+    calendarType: CalendarEnum;
+    dateToDisplay: string;
+    eventGroups: IEventGroup[];
+    eventGroupsTitle: string;
+    selectedCalendarGroupsIds: number[];
+    onChangeCalendarType: (newType: string) => void;
+    onMonthChange: (newDate: Date) => void;
+    applyControl: (event: React.MouseEvent<HTMLElement>) => void;
+    onClickCreate: VoidFunction;
+    getEventsFromDate: (dateFromDay: Date, isMonth: boolean) => IEvent[];
+    onChangeEventGroupsIds: (selectedIds: number[]) => void;
+    weekDays: string[];
+}
+export type ICalendarSystemModalViewProps = IModalProps;
+export default function CalendarSystem(props: ICalendarSystemProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/ui/content/CalendarSystem/CalendarSystem.js

@@ -0,0 +1,106 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable default-case */
+/* eslint-disable no-unused-expressions */
+/* eslint-disable no-plusplus */
+var react_1 = __importDefault(require("react"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var concat_1 = __importDefault(require("lodash-es/concat"));
+var slice_1 = __importDefault(require("lodash-es/slice"));
+var localeData_1 = __importDefault(require("dayjs/plugin/localeData"));
+var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
+var modal_1 = require("../../../actions/modal");
+var useCalendarControls_1 = __importDefault(require("./hooks/useCalendarControls"));
+var useDisplayDate_1 = __importDefault(require("./hooks/useDisplayDate"));
+var useMonthCalendar_1 = __importDefault(require("./hooks/useMonthCalendar"));
+var hooks_1 = require("../../../hooks");
+var addEventIfMatchDate_1 = require("./helpers/addEventIfMatchDate");
+var CalendarType_1 = __importDefault(require("./enums/CalendarType"));
+dayjs_1["default"].extend(localeData_1["default"]);
+function CalendarSystem(props) {
+    var _a;
+    var components = (0, hooks_1.useComponents)();
+    var dispatch = (0, hooks_1.useDispatch)();
+    var _b = react_1["default"].useState(props.eventBlock.eventGroups || []), innerEventGroups = _b[0], _ = _b[1];
+    var _c = react_1["default"].useState([]), selectedEventGroupsIds = _c[0], setSelectedEventGroupsIds = _c[1];
+    var _d = (0, useDisplayDate_1["default"])(), dateToDisplay = _d.dateToDisplay, setNewDateToDisplay = _d.setNewDateToDisplay;
+    var _e = react_1["default"].useState(CalendarType_1["default"].MONTH), calendarType = _e[0], setCalendarType = _e[1];
+    var _f = (0, useMonthCalendar_1["default"])(), monthCalendarDays = _f.calendarArray, setCurrentMonthDate = _f.setCurrentMonthDate, currentMonthDate = _f.currentMonthDate;
+    var _g = (0, hooks_1.useWeekCalendar)(currentMonthDate), currentWeekDays = _g.currentWeek, weekControls = _g.weekControls, forceUpdateWeekOnMonthChange = _g.forceUpdateWeekOnMonthChange;
+    var applyControl = (0, useCalendarControls_1["default"])(calendarType, weekControls);
+    var onChangeCalendarType = react_1["default"].useCallback(function (newType) {
+        setCalendarType(newType);
+        if (props.onChangeCalendarType) {
+            props.onChangeCalendarType(newType);
+        }
+    }, [props]);
+    var onMonthChange = react_1["default"].useCallback(function (newDate) {
+        setNewDateToDisplay(newDate);
+        setCurrentMonthDate(newDate);
+        forceUpdateWeekOnMonthChange(newDate);
+    }, [forceUpdateWeekOnMonthChange, setCurrentMonthDate, setNewDateToDisplay]);
+    var getEventsFromDate = function (date, currentCalendarType) {
+        var eventsOnDate = [];
+        var dayjsDate = (0, dayjs_1["default"])(date);
+        var iterateEventGroups = function (callback) {
+            innerEventGroups.forEach(function (eventGroup) {
+                eventGroup.events.forEach(function (event) {
+                    callback(event, eventGroup);
+                });
+            });
+        };
+        switch (currentCalendarType) {
+            case CalendarType_1["default"].MONTH: {
+                iterateEventGroups(function (event, eventGroup) {
+                    var eventDateDayJs = (0, dayjs_1["default"])(event.date);
+                    (0, addEventIfMatchDate_1.addEventIfMatchDate)(eventDateDayJs, dayjsDate, eventGroup, event, 'day', selectedEventGroupsIds, eventsOnDate);
+                });
+                break;
+            }
+            case CalendarType_1["default"].WEEK: {
+                iterateEventGroups(function (event, eventGroup) {
+                    var eventDate = new Date(event.date);
+                    eventDate.setHours(eventDate.getHours(), 0, 0, 0);
+                    var eventDateDayJs = (0, dayjs_1["default"])(eventDate);
+                    (0, addEventIfMatchDate_1.addEventIfMatchDate)(eventDateDayJs, dayjsDate, eventGroup, event, 'hours', selectedEventGroupsIds, eventsOnDate);
+                });
+                break;
+            }
+        }
+        // eslint-disable-next-line consistent-return
+        return eventsOnDate;
+    };
+    var weekDays = react_1["default"].useMemo(function () {
+        var unformattedDaysOfWeek = dayjs_1["default"].weekdaysMin();
+        return (0, concat_1["default"])((0, slice_1["default"])(unformattedDaysOfWeek, 1), unformattedDaysOfWeek[0]).map(function (weekDay) { return __("".concat((0, upperFirst_1["default"])(weekDay))); });
+    }, []);
+    var allHours = react_1["default"].useMemo(function () {
+        var hoursArray = [];
+        for (var i = 0; i < 24; i++) {
+            var formattedHour = (0, dayjs_1["default"])().startOf('day').add(i, 'hour').format('HH:00');
+            hoursArray.push(formattedHour);
+        }
+        return hoursArray;
+    }, []);
+    var createModalView = ((_a = props.createEventModalProps) === null || _a === void 0 ? void 0 : _a.component) || components.ui.getView('content.CalendarSystemModalView');
+    var createModalProps = react_1["default"].useMemo(function () { return (__assign(__assign({}, props.createEventModalProps), { component: createModalView })); }, [createModalView, props.createEventModalProps]);
+    var onClickCreate = react_1["default"].useCallback(function () {
+        dispatch((0, modal_1.openModal)(createModalView, createModalProps));
+    }, [createModalProps, createModalView, dispatch]);
+    return components.ui.renderView(props.view || 'content.CalendarSystemView', __assign(__assign({}, props), { dateToDisplay: dateToDisplay, monthCalendarDays: monthCalendarDays, calendarType: calendarType, currentWeekDays: currentWeekDays, createModalProps: createModalProps, eventGroups: innerEventGroups, eventGroupsTitle: props.eventBlock.title, allHours: allHours, selectedEventGroupsIds: selectedEventGroupsIds, onChangeCalendarType: onChangeCalendarType, onMonthChange: onMonthChange, applyControl: applyControl, onClickCreate: onClickCreate, getEventsFromDate: getEventsFromDate, onChangeEventGroupsIds: function (newSelectedEventGroupsIds) { return setSelectedEventGroupsIds(newSelectedEventGroupsIds); }, weekDays: weekDays }));
+}
+exports["default"] = CalendarSystem;

package/ui/content/CalendarSystem/enums/CalendarType.d.ts

@@ -0,0 +1,6 @@
+import Enum from '../../../../base/Enum';
+export default class CalendarType extends Enum {
+    static WEEK: string;
+    static MONTH: string;
+    static getLabels(): Record<string, string>;
+}

package/ui/content/CalendarSystem/enums/CalendarType.js

@@ -0,0 +1,38 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Enum_1 = __importDefault(require("../../../../base/Enum"));
+var CalendarType = /** @class */ (function (_super) {
+    __extends(CalendarType, _super);
+    function CalendarType() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CalendarType.getLabels = function () {
+        var _a;
+        return _a = {},
+            _a[this.WEEK] = __('Неделя'),
+            _a[this.MONTH] = __('Месяц'),
+            _a;
+    };
+    CalendarType.WEEK = 'Week';
+    CalendarType.MONTH = 'Month';
+    return CalendarType;
+}(Enum_1["default"]));
+exports["default"] = CalendarType;

package/ui/content/CalendarSystem/enums/DateControlType.d.ts

@@ -0,0 +1,10 @@
+import Enum from '../../../../base/Enum';
+export default class DateControlType extends Enum {
+    static PREV_DOUBLE: string;
+    static PREV_ONE: string;
+    static NEXT_ONE: string;
+    static NEXT_DOUBLE: string;
+    static getIcons(): {
+        [x: string]: string;
+    };
+}

package/ui/content/CalendarSystem/enums/DateControlType.js

@@ -0,0 +1,42 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Enum_1 = __importDefault(require("../../../../base/Enum"));
+var DateControlType = /** @class */ (function (_super) {
+    __extends(DateControlType, _super);
+    function DateControlType() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DateControlType.getIcons = function () {
+        var _a;
+        return _a = {},
+            _a[this.PREV_DOUBLE] = 'double_arrow_left',
+            _a[this.PREV_ONE] = 'arrow_left_24x24',
+            _a[this.NEXT_ONE] = 'arrow_right_24x24',
+            _a[this.NEXT_DOUBLE] = 'double_arrow_right',
+            _a;
+    };
+    DateControlType.PREV_DOUBLE = 'PREV_DOUBLE';
+    DateControlType.PREV_ONE = 'PREV_ONE';
+    DateControlType.NEXT_ONE = 'NEXT_ONE';
+    DateControlType.NEXT_DOUBLE = 'NEXT_DOUBLE';
+    return DateControlType;
+}(Enum_1["default"]));
+exports["default"] = DateControlType;

package/ui/content/CalendarSystem/helpers/addEventIfMatchDate.d.ts

@@ -0,0 +1,3 @@
+import dayjs from 'dayjs';
+import { IEventGroup, IEvent } from '../CalendarSystem';
+export declare const addEventIfMatchDate: (eventDateDayJs: dayjs.Dayjs, sourceDateInDayJs: dayjs.Dayjs, calendarGroup: IEventGroup, originalEvent: IEvent, unit: 'hours' | 'day', selectedEventGroupsIds: number[], resultEventsOnDate: IEvent[]) => void;

package/ui/content/CalendarSystem/helpers/addEventIfMatchDate.js

@@ -0,0 +1,21 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+exports.addEventIfMatchDate = void 0;
+var addEventIfMatchDate = function (eventDateDayJs, sourceDateInDayJs, calendarGroup, originalEvent, unit, selectedEventGroupsIds, resultEventsOnDate) {
+    var _a;
+    if (eventDateDayJs.isSame(sourceDateInDayJs, unit) && selectedEventGroupsIds.includes(calendarGroup.id)) {
+        resultEventsOnDate.push(__assign(__assign({}, originalEvent), { color: (_a = originalEvent.color) !== null && _a !== void 0 ? _a : calendarGroup.color }));
+    }
+};
+exports.addEventIfMatchDate = addEventIfMatchDate;

package/ui/content/CalendarSystem/hooks/useCalendarControls.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import CalendarEnum from '../enums/CalendarType';
+import DateControlEnum from '../enums/DateControlType';
+export declare const getSourceCalendarControl: (control: string) => HTMLElement;
+declare const useCalendarControls: (calendarType: CalendarEnum, weekControls: {
+    [key: string]: () => void | DateControlEnum;
+}) => (event: React.MouseEvent<HTMLElement>) => void;
+export default useCalendarControls;

package/ui/content/CalendarSystem/hooks/useCalendarControls.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.getSourceCalendarControl = void 0;
+/* eslint-disable no-unneeded-ternary */
+/* eslint-disable default-case */
+/* eslint-disable no-unused-expressions */
+var react_1 = __importDefault(require("react"));
+var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
+var get_1 = __importDefault(require("lodash-es/get"));
+var CalendarType_1 = __importDefault(require("../enums/CalendarType"));
+var CUSTOM_CONTROL_PATH = 'dataset.control';
+var getSourceCalendarControl = function (control) { return document.querySelector("[data-sourcecontrol=\"".concat(control, "\"]")); };
+exports.getSourceCalendarControl = getSourceCalendarControl;
+var useCalendarControls = function (calendarType, weekControls) {
+    var getCustomControlType = function (event) {
+        var target = event.target;
+        var customControlType = (0, get_1["default"])(target, CUSTOM_CONTROL_PATH);
+        return customControlType ? customControlType : null;
+    };
+    var applyControl = react_1["default"].useCallback(function (event) {
+        var customControlType = getCustomControlType(event);
+        var sourceCalendarControl = (0, exports.getSourceCalendarControl)(customControlType);
+        if (!sourceCalendarControl) {
+            return;
+        }
+        switch (calendarType) {
+            case CalendarType_1["default"].MONTH: {
+                sourceCalendarControl.click();
+                return;
+            }
+            case CalendarType_1["default"].WEEK: {
+                if ((0, isFunction_1["default"])(weekControls[customControlType])) {
+                    weekControls[customControlType]();
+                }
+                else {
+                    var sourceControlType = weekControls[customControlType];
+                    (0, exports.getSourceCalendarControl)(sourceControlType).click();
+                }
+            }
+        }
+    }, [calendarType, weekControls]);
+    return applyControl;
+};
+exports["default"] = useCalendarControls;

package/ui/content/CalendarSystem/hooks/useDisplayDate.d.ts

@@ -0,0 +1,6 @@
+export declare const MONTH_CONVERT_FORMAT = "MMMM YYYY";
+declare const useDisplayDate: () => {
+    dateToDisplay: any;
+    setNewDateToDisplay: (newDate: Date) => void;
+};
+export default useDisplayDate;

package/ui/content/CalendarSystem/hooks/useDisplayDate.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.MONTH_CONVERT_FORMAT = void 0;
+var react_1 = __importDefault(require("react"));
+var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
+var calendar_1 = require("../../../../utils/calendar");
+exports.MONTH_CONVERT_FORMAT = 'MMMM YYYY';
+var getFirstDayOfCurrentMonth = function () {
+    var currentDate = new Date();
+    var firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+    return firstDayOfMonth;
+};
+var convertDateToRequiredFormat = function (date) { return (0, calendar_1.convertDate)(date, null, exports.MONTH_CONVERT_FORMAT); };
+var useDisplayDate = function () {
+    var _a = react_1["default"].useState((0, upperFirst_1["default"])(convertDateToRequiredFormat(getFirstDayOfCurrentMonth()))), dateToDisplay = _a[0], setDateToDisplay = _a[1];
+    var setNewDateToDisplay = function (newDate) {
+        setDateToDisplay(convertDateToRequiredFormat(newDate));
+    };
+    return {
+        dateToDisplay: dateToDisplay,
+        setNewDateToDisplay: setNewDateToDisplay
+    };
+};
+exports["default"] = useDisplayDate;

package/ui/content/CalendarSystem/hooks/useMonthCalendar.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IDay } from '../CalendarSystem';
+declare const useMonthCalendar: () => {
+    getCalendarArray: () => IDay[];
+    getCurrentMonthDataUTC: () => {
+        currentMonth: number;
+        lastDayOfCurrentMonth: number;
+        firstDayOfCurrentMonth: Date;
+        daysInCurrentMonth: any[];
+    };
+    getWeekFromDate: (date: Date) => IDay[];
+    calendarArray: IDay[];
+    setCurrentMonthDate: React.Dispatch<React.SetStateAction<Date>>;
+    currentMonthDate: Date;
+};
+export default useMonthCalendar;

package/ui/content/CalendarSystem/hooks/useMonthCalendar.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable no-plusplus */
+/* eslint-disable import/order */
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils/utils");
+var FIRST_DAY = 1;
+var ONE_MONTH = 1;
+var TOTAL_DAYS_IN_CALENDAR = 42;
+var useMonthCalendar = function () {
+    var _a = react_1["default"].useState(null), currentMonthDate = _a[0], setCurrentMonthDate = _a[1];
+    var getCurrentMonthDataUTC = react_1["default"].useCallback(function () {
+        var currentYear = (currentMonthDate === null || currentMonthDate === void 0 ? void 0 : currentMonthDate.getFullYear()) || new Date().getFullYear();
+        var month = (currentMonthDate === null || currentMonthDate === void 0 ? void 0 : currentMonthDate.getMonth()) || new Date().getMonth();
+        var nextMonthFirstDay = new Date(currentYear, month + ONE_MONTH, FIRST_DAY);
+        var lastDayOfCurrentMonth = new Date(nextMonthFirstDay.getTime() - FIRST_DAY).getDate();
+        var firstDayOfCurrentMonth = new Date(Date.UTC(currentYear, month, FIRST_DAY));
+        if (currentMonthDate === null) {
+            setCurrentMonthDate(firstDayOfCurrentMonth);
+        }
+        var daysInCurrentMonth = [];
+        // Пройдемся по всем дням месяца и добавим их в массив
+        for (var dayNumber = 1; dayNumber <= lastDayOfCurrentMonth; dayNumber++) {
+            var date = new Date(Date.UTC(currentYear, month, dayNumber));
+            daysInCurrentMonth.push({ date: date, dayNumber: dayNumber });
+        }
+        return {
+            currentMonth: month,
+            lastDayOfCurrentMonth: lastDayOfCurrentMonth,
+            firstDayOfCurrentMonth: firstDayOfCurrentMonth,
+            daysInCurrentMonth: daysInCurrentMonth
+        };
+    }, [currentMonthDate]);
+    var getCalendarArray = react_1["default"].useCallback(function () {
+        var calendarArray = [];
+        var _a = getCurrentMonthDataUTC(), firstDayOfCurrentMonth = _a.firstDayOfCurrentMonth, month = _a.currentMonth, daysInCurrentMonth = _a.daysInCurrentMonth;
+        var firstWeekInMonth = (0, utils_1.getWeekDaysFromDate)(firstDayOfCurrentMonth);
+        firstWeekInMonth.forEach(function (day) { return calendarArray.push({
+            date: day.date,
+            dayNumber: day.dayNumber,
+            outOfRange: day.date.getMonth() < month
+        }); });
+        daysInCurrentMonth.forEach(function (day) {
+            var existingDay = calendarArray.find(function (item) { return item.date.getTime() === day.date.getTime(); });
+            if (!existingDay) {
+                calendarArray.push({
+                    date: day.date,
+                    dayNumber: day.dayNumber,
+                    outOfRange: false
+                });
+            }
+        });
+        var daysAfterCurrentMonth = TOTAL_DAYS_IN_CALENDAR - calendarArray.length;
+        for (var i = 1; i <= daysAfterCurrentMonth; i++) {
+            var currentDate = new Date(currentMonthDate === null || currentMonthDate === void 0 ? void 0 : currentMonthDate.getFullYear(), month + 1, i);
+            calendarArray.push({
+                date: currentDate,
+                dayNumber: currentDate.getDate(),
+                outOfRange: currentDate.getMonth() > month
+            });
+        }
+        return calendarArray.map(function (day) { return (0, utils_1.isDateIsToday)(day.date) ? (__assign(__assign({}, day), { isToday: true })) : day; });
+    }, [currentMonthDate, getCurrentMonthDataUTC]);
+    return {
+        getCalendarArray: getCalendarArray,
+        getCurrentMonthDataUTC: getCurrentMonthDataUTC,
+        getWeekFromDate: utils_1.getWeekDaysFromDate,
+        calendarArray: getCalendarArray(),
+        setCurrentMonthDate: setCurrentMonthDate,
+        currentMonthDate: currentMonthDate
+    };
+};
+exports["default"] = useMonthCalendar;

package/ui/content/CalendarSystem/hooks/useWeekCalendar.d.ts

@@ -0,0 +1,15 @@
+import DateControlEnum from '../enums/DateControlType';
+declare const useWeekCalendar: (currentMonthDate: Date) => {
+    currentWeek: {
+        dayNumber: number;
+        date: Date;
+        outOfRange?: boolean;
+        isToday?: boolean;
+        formattedDisplay?: string;
+    }[];
+    weekControls: {
+        [key: string]: () => void | DateControlEnum;
+    };
+    forceUpdateWeekOnMonthChange: (newMonthDate: Date) => void;
+};
+export default useWeekCalendar;

package/ui/content/CalendarSystem/hooks/useWeekCalendar.js

@@ -0,0 +1,86 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var calendar_1 = require("../../../../utils/calendar");
+var DateControlType_1 = __importDefault(require("../enums/DateControlType"));
+var useCalendarControls_1 = require("./useCalendarControls");
+var utils_1 = require("../utils/utils");
+var WEEK_DAY_FORMAT = 'dd, D MMM';
+var ONE_DAY = 1;
+var getFormattedWeekFromDate = function (fromDate) {
+    if (fromDate === void 0) { fromDate = null; }
+    var currentWeek = (0, utils_1.getWeekDaysFromDate)(fromDate || new Date());
+    return currentWeek.map(function (dayOfWeek) {
+        var copyOfDayWeek = __assign({}, dayOfWeek);
+        copyOfDayWeek.formattedDisplay = (0, calendar_1.convertDate)(dayOfWeek.date, null, WEEK_DAY_FORMAT);
+        // eslint-disable-next-line no-unused-expressions
+        (0, utils_1.isDateIsToday)(copyOfDayWeek.date) ? copyOfDayWeek.isToday = true : copyOfDayWeek.isToday = false;
+        return copyOfDayWeek;
+    });
+};
+var useWeekCalendar = function (currentMonthDate) {
+    var _a;
+    var _b = react_1["default"].useState(getFormattedWeekFromDate()), currentWeek = _b[0], setCurrentWeek = _b[1];
+    var forceUpdateWeekOnMonthChange = react_1["default"].useCallback(function (newMonthDate) {
+        setCurrentWeek(getFormattedWeekFromDate(newMonthDate));
+    }, []);
+    var changeMonthAfterWeekChanged = react_1["default"].useCallback(function (formattedWeek) {
+        var firstDayOfWeek = formattedWeek[0].date;
+        var currentMonthNumber = currentMonthDate.getMonth();
+        var isWeekOutOfMonth = formattedWeek.every(function (dayOfWeek) { return dayOfWeek.date.getMonth() !== currentMonthNumber; });
+        if (!isWeekOutOfMonth) {
+            return;
+        }
+        if (currentMonthNumber - firstDayOfWeek.getMonth() === 1) {
+            var lastDayOfWeekInNewMonth = formattedWeek[formattedWeek.length - 1].date;
+            var prevMonthControl = (0, useCalendarControls_1.getSourceCalendarControl)(DateControlType_1["default"].PREV_ONE);
+            prevMonthControl.click();
+            forceUpdateWeekOnMonthChange(lastDayOfWeekInNewMonth);
+        }
+        else {
+            var firstDayOfWeekInNewMonth = formattedWeek[0].date;
+            var nextMonthControl = (0, useCalendarControls_1.getSourceCalendarControl)(DateControlType_1["default"].NEXT_ONE);
+            nextMonthControl.click();
+            forceUpdateWeekOnMonthChange(firstDayOfWeekInNewMonth);
+        }
+    }, [currentMonthDate, forceUpdateWeekOnMonthChange]);
+    var setNextWeek = react_1["default"].useCallback(function () {
+        var lastDayOfWeek = currentWeek[currentWeek.length - 1].date;
+        lastDayOfWeek.setDate(lastDayOfWeek.getDate() + ONE_DAY);
+        var formattedNextWeek = getFormattedWeekFromDate(lastDayOfWeek);
+        setCurrentWeek(formattedNextWeek);
+        changeMonthAfterWeekChanged(formattedNextWeek);
+    }, [currentWeek, changeMonthAfterWeekChanged]);
+    var setPrevWeek = react_1["default"].useCallback(function () {
+        var firstDayOfWeek = currentWeek[0].date;
+        firstDayOfWeek.setDate(firstDayOfWeek.getDate() - ONE_DAY);
+        var formattedPrevWeek = getFormattedWeekFromDate(firstDayOfWeek);
+        setCurrentWeek(formattedPrevWeek);
+        changeMonthAfterWeekChanged(formattedPrevWeek);
+    }, [currentWeek, changeMonthAfterWeekChanged]);
+    return {
+        currentWeek: currentWeek,
+        weekControls: (_a = {},
+            _a[DateControlType_1["default"].NEXT_DOUBLE] = DateControlType_1["default"].NEXT_ONE,
+            _a[DateControlType_1["default"].NEXT_ONE] = setNextWeek,
+            _a[DateControlType_1["default"].PREV_ONE] = setPrevWeek,
+            _a[DateControlType_1["default"].PREV_DOUBLE] = DateControlType_1["default"].PREV_ONE,
+            _a),
+        forceUpdateWeekOnMonthChange: forceUpdateWeekOnMonthChange
+    };
+};
+exports["default"] = useWeekCalendar;

package/ui/content/CalendarSystem/index.d.ts

@@ -0,0 +1,2 @@
+import CalendarSystem from './CalendarSystem';
+export default CalendarSystem;

package/ui/content/CalendarSystem/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var CalendarSystem_1 = __importDefault(require("./CalendarSystem"));
+exports["default"] = CalendarSystem_1["default"];

package/ui/content/CalendarSystem/utils/utils.d.ts

@@ -0,0 +1,3 @@
+import { IDay } from '../CalendarSystem';
+export declare const getWeekDaysFromDate: (date: Date) => IDay[];
+export declare const isDateIsToday: (date: Date) => boolean;

package/ui/content/CalendarSystem/utils/utils.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.isDateIsToday = exports.getWeekDaysFromDate = void 0;
+/* eslint-disable no-plusplus */
+var dayjs_1 = __importDefault(require("dayjs"));
+var SIX_DAYS_DIFF = 6;
+var MAX_DAYS_DIFF_IN_WEEK = 7;
+var getWeekDaysFromDate = function (date) {
+    var weekDays = [];
+    var firstDayOfWeek = new Date(date);
+    var currentDay = date.getDay();
+    var diff = currentDay === 0 ? SIX_DAYS_DIFF : currentDay - 1; // Разница между текущим днем и понедельником
+    firstDayOfWeek.setDate(firstDayOfWeek.getDate() - diff); // Устанавливаем первый день недели (понедельник)
+    for (var i = 0; i < MAX_DAYS_DIFF_IN_WEEK; i++) {
+        var currentDate = new Date(firstDayOfWeek);
+        currentDate.setDate(currentDate.getDate() + i);
+        weekDays.push({
+            dayNumber: currentDate.getDate(),
+            date: new Date(currentDate)
+        });
+    }
+    return weekDays;
+};
+exports.getWeekDaysFromDate = getWeekDaysFromDate;
+var isDateIsToday = function (date) { return (0, dayjs_1["default"])(date).isToday(); };
+exports.isDateIsToday = isDateIsToday;

package/ui/content/Icon/Icon.d.ts

@@ -22,7 +22,7 @@
  *
  * Компонент, представляющий иконку. Иконки могут быть импортированы при старте приложения.
  */
-export interface IIconProps extends IUiComponent {
+export interface IIconProps extends Omit<IUiComponent, 'className' | 'style'>, Partial<HTMLElement> {
     /**
      * Имя иконки (латиницей). Импорт иконок происходит на старте приложения.
      * @example create

package/ui/content/index.d.ts

@@ -10,4 +10,5 @@ import Menu from './Menu';
 import CopyToClipboard from './CopyToClipboard';
 import Chart from './Chart';
 import Slider from './Slider';
-export { Avatar, AvatarGroup, Accordion, AccordionItem, Alert, Card, DropDown, Badge, Detail, DetailItem, Icon, Menu, CopyToClipboard, Chart, Slider, };
+import CalendarSystem from './CalendarSystem';
+export { Avatar, AvatarGroup, Accordion, AccordionItem, Alert, Card, DropDown, Badge, Detail, DetailItem, Icon, Menu, CopyToClipboard, Chart, Slider, CalendarSystem, };

package/ui/content/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.Slider = exports.Chart = exports.CopyToClipboard = exports.Menu = exports.Icon = exports.DetailItem = exports.Detail = exports.Badge = exports.DropDown = exports.Card = exports.Alert = exports.AccordionItem = exports.Accordion = exports.AvatarGroup = exports.Avatar = void 0;
+exports.CalendarSystem = exports.Slider = exports.Chart = exports.CopyToClipboard = exports.Menu = exports.Icon = exports.DetailItem = exports.Detail = exports.Badge = exports.DropDown = exports.Card = exports.Alert = exports.AccordionItem = exports.Accordion = exports.AvatarGroup = exports.Avatar = void 0;
 var Avatar_1 = require("./Avatar");
 exports.Avatar = Avatar_1.Avatar;
 exports.AvatarGroup = Avatar_1.AvatarGroup;
@@ -31,3 +31,5 @@ var Chart_1 = __importDefault(require("./Chart"));
 exports.Chart = Chart_1["default"];
 var Slider_1 = __importDefault(require("./Slider"));
 exports.Slider = Slider_1["default"];
+var CalendarSystem_1 = __importDefault(require("./CalendarSystem"));
+exports.CalendarSystem = CalendarSystem_1["default"];

package/ui/form/CheckboxField/CheckboxField.d.ts

@@ -16,6 +16,10 @@ export interface ICheckboxFieldProps extends IFieldWrapperInputProps, IUiCompone
      * @example true
      */
     checked?: boolean;
+    /**
+    * Пользовательский цвет для чекбокса
+    */
+    color?: string;
     [key: string]: any;
 }
 export interface ICheckboxFieldViewProps extends ICheckboxFieldProps, IFieldWrapperOutputProps {

package/ui/form/CheckboxListField/CheckboxListField.d.ts

@@ -1,14 +1,17 @@
 import * as React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../../ui/form/Field/fieldWrapper';
-import { IDataProviderConfig } from '../../../hooks/useDataProvider';
+import { DataProviderItem, IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
 import { ICheckboxFieldViewProps } from '../CheckboxField/CheckboxField';
+type CheckboxFieldListItem = DataProviderItem & {
+    color?: string;
+};
 /**
  * CheckboxListField
  *
  * Список с чекбоксами. Используется в формах для выбора нескольких значений.
  */
-export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'>, IUiComponent {
+export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent {
     /**
      * Свойства для элемента input
      * @example {onKeyDown: ...}
@@ -18,6 +21,11 @@ export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, IDataP
      * Ориентация списка
      */
     orientation?: Orientation;
+    /**
+     * Коллекция элементов
+     * @example [{id: 1, label: 'Krasnoyarsk', color: 'red'}, {id: 2, label: 'Moscow', color: 'purple'}]
+     */
+    items: CheckboxFieldListItem[];
     [key: string]: any;
 }
 export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
@@ -32,6 +40,7 @@ export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
         label?: string;
         isSelected: boolean;
         isHovered: boolean;
+        color?: string;
     }[];
     selectedIds: (PrimaryKey | any)[];
     onItemSelect: (id: PrimaryKey | any) => void;

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -64,7 +64,10 @@ function CheckboxListField(props) {
     // Sync with form
     (0, react_1.useEffect)(function () {
         props.input.onChange.call(null, selectedIds);
-    }, [props.input.onChange, selectedIds]);
+        if (props.onChange) {
+            props.onChange(selectedIds);
+        }
+    }, [props, props.input.onChange, selectedIds]);
     var onReset = (0, react_1.useCallback)(function () {
         setSelectedIds([]);
     }, [setSelectedIds]);