@steroidsjs/core 3.0.14 → 3.0.16

package/en.json

@@ -979,6 +979,7 @@
     "Скрыть иконку c лева от элемента": "",
     "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n\nДля корректной работы функционала создания задач,\nнеобходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nИмпортированные компоненты нужно передать в проп `createTaskEditorConfig`,\nв поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.\n": "",
     "Компонент для создания HTML-разметки, использующий WYSIWYG редактор.\n\nДля использования WYSIWYG редактора, необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nКомпонент `CKEditor` нужно передать в проп `htmlComponent`, а конструктор `ClassicEditor` в проп `editorConstructor`.\n\nПри передаче `HtmlField` с бэкенда, необходимо переопределить `view` компонента, указав локальный.\nВ локальном компоненте добавить вместо пропсов `htmlComponent` и `editorConstructor` импорты `CKEditor` и `ClassicEditor` соотвественно.\n": "",
+    "Компонент, который представляет в виде дерева список с иерархической структурой данных\n\nДополнительный функционал: в кастомном view компонента есть возможность реализовать кнопку, по клику на которую\nбудет вызываться функция props.onItemFocus. Данная функция \"находит\" текущий роут в дереве -\nраскрывает родительские уровни, делает элемент активным.\nДанная функция не включает скролл к активному компоненту внутри дерева, это также необходимо\nреализовать в кастомном view локально в проекте.\n": "",
     "Дополнительный свойства для view части компонента": "",
     "Используется для управления раскрытием всех элементов в дереве": "",
     "Идентификатор (ключ) для сохранения в LocalStorage коллекции.": "",
@@ -987,6 +988,12 @@
     "Количество элементов на странице, используется для корректного отображения пагинации": "",
     "Параметры роутинга": "",
     "Сохранение в localStorage уровней вложенности.": "",
+    "Свойства для сетки  дня": "",
+    "Свойства для сетки  месяца": "",
+    "Свойства для сетки  недели": "",
+    "Конечная дата": "",
+    "Начальная дата": "",
+    "Дополнительные данные которые попадут в дата аттрибут data-icon": "",
     "Компоненты для подключения wysiwyg редактора": "",
     "Отображать чекбоксы только на узлах, не имеющих вложенных элементов": "",
     "Размер компонента и вложенных полей": "",

package/hooks/useTree.d.ts

@@ -35,6 +35,7 @@ export interface IPreparedTreeItem extends ITreeItem {
 }
 export interface ITreeOutput {
     treeItems: IPreparedTreeItem[];
+    onItemFocus: (e: Event | React.MouseEvent | any) => void;
 }
 export interface ITreeConfig {
     /**
@@ -98,7 +99,7 @@ export interface ITreeConfig {
     /**
      * При повторном нажатии на выбранный элемент из дерева, он продолжит отображаться как активный.
      * @example true
-    */
+     */
     useSameSelectedItemId?: boolean;
     /**
      * Скрывать открытые вложенные узлы, если скрыли родительский узел
@@ -108,7 +109,7 @@ export interface ITreeConfig {
     /**
      * Сохранение в localStorage уровней вложенности.
      * @example true
-    */
+     */
     saveInClientStorage?: boolean;
     /**
      * Идентификатор (ключ) для сохранения в LocalStorage коллекции.

package/hooks/useTree.js

@@ -120,6 +120,24 @@ function useTree(config) {
         }
         return [];
     }, [config.items, config.routerParams, routes]);
+    // Выполняет поиск текущего роута в дереве: раскрывает дерево до элемента, делает элемент активным
+    var onItemFocus = (0, react_1.useCallback)(function () {
+        var currentRouteAsTreeItem = findChildById(items, selectedItemId, primaryKey);
+        var currentRouteUniqueIdParts = currentRouteAsTreeItem.uniqueId.split(DOT_SEPARATOR); // Get all parent levels of item
+        var itemsToExpand = {};
+        var itemToExpandKey;
+        currentRouteUniqueIdParts.forEach(function (item, index) {
+            if (index === 0) {
+                itemToExpandKey = item;
+            }
+            else {
+                itemToExpandKey = [itemToExpandKey, item].join(DOT_SEPARATOR);
+                itemsToExpand[itemToExpandKey] = true;
+            }
+        });
+        setSelectedUniqueId(currentRouteAsTreeItem ? currentRouteAsTreeItem.uniqueId : null);
+        setExpandedItems(function (prev) { return (__assign(__assign({}, prev), itemsToExpand)); });
+    }, [items, primaryKey, selectedItemId]);
     // Initial expanded items
     (0, react_1.useEffect)(function () {
         setExpandedItems(getAutoExpandedItems(items, selectedItemId, primaryKey, config.autoOpenLevels));
@@ -204,7 +222,8 @@ function useTree(config) {
         // eslint-disable-next-line max-len
     }, [activeRouteIds, config.alwaysOpened, config.currentPage, config.itemsOnPage, config.level, expandedItems, items, onExpand, primaryKey, routerParams, selectedUniqueId]);
     return {
-        treeItems: resultTreeItems
+        treeItems: resultTreeItems,
+        onItemFocus: onItemFocus
     };
 }
 exports["default"] = useTree;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/core",
-    "version": "3.0.14",
+    "version": "3.0.16",
     "description": "",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
     "repository": {
@@ -25,9 +25,9 @@
         "watch": "tsc -p tsconfig-debug.json"
     },
     "dependencies": {
-        "@maskito/core": "1.7.0",
-        "@maskito/kit": "1.7.0",
-        "@maskito/react": "^0.12.1",
+        "@maskito/core": "2.3.1",
+        "@maskito/kit": "2.3.1",
+        "@maskito/react": "2.3.1",
         "@splidejs/react-splide": "^0.7.12",
         "axios": "^0.21.1",
         "connected-react-router": "^6.9.3",

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import { IModalProps } from '../../../ui/modal/Modal/Modal';
 import CalendarEnum from './enums/CalendarType';
-export type CalendarSystemModalFields = 'title' | 'eventGroupId' | 'date' | 'description';
+import { ICustomViews } from './hooks/useCustomViews';
+export type CalendarSystemModalFields = 'title' | 'eventGroupId' | 'description' | 'startDate' | 'endDate' | 'id' | 'usersIds';
 export type CalendarSystemEventGroupModalFields = 'label' | 'color';
 export interface IEventInitialValues extends IEvent {
     eventGroupId: string;
+    usersIds: number[];
 }
 export interface IDay {
     dayNumber: number;
@@ -27,9 +29,13 @@ export interface IEvent {
     */
     id: number;
     /**
-    * Дата
+    * Начальная дата
     */
-    date: Date;
+    startDate: Date;
+    /**
+    * Конечная дата
+    */
+    endDate: Date;
     /**
     * Заголовок
     */
@@ -66,6 +72,17 @@ export interface IEventGroup {
     */
     events: Omit<IEvent, 'color'>[];
 }
+export interface ICalendarUser {
+    id: number;
+    name: string;
+    caption: string;
+    eventsIds: IEvent['id'][];
+}
+export interface IGridViews {
+    eventView?: CustomView;
+    hourView?: CustomView;
+    gridView?: CustomView;
+}
 /**
  * CalendarSystem
  *
@@ -103,42 +120,56 @@ export interface ICalendarSystemProps extends IUiComponent {
         eventGroups: IEventGroup[];
     };
     /**
+    * Свойства для сетки  дня
+    */
+    dayGrid?: IGridViews;
+    /**
+    * Свойства для сетки  недели
+    */
+    weekGrid?: IGridViews;
+    /**
+    * Свойства для сетки  месяца
+    */
+    monthGrid?: IGridViews;
+    users: ICalendarUser[];
+    /**
     * Дополнительные свойства, которые передаются во view компонента
     */
     additionalViewProps?: Record<string, any>;
     [key: string]: any;
 }
-export interface ICalendarSystemViewProps extends Pick<ICalendarSystemProps, 'className' | 'style' | 'additionalViewProps'> {
-    openCreateModal: (eventInitialDay?: IDay) => void;
-    onInnerCalendarChangeMonth: (newDate: Date) => void;
+export interface ICalendarSystemViewProps extends Pick<ICalendarSystemProps, 'className' | 'style' | 'additionalViewProps' | 'users'> {
+    onCalendarChangedMonth: (newDate: Date) => void;
     eventGroups: IEventGroup[];
     eventGroupsTitle: string;
     onChangeEventGroupsIds: (selectedIds: number[]) => void;
     openCreateEventGroupModal: VoidFunction;
     dateToDisplay: string;
     handleCalendarTypeChange: (newType: string) => void;
-    handleControlClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onClickControl: (event: React.MouseEvent<HTMLElement>) => void;
     calendarType: CalendarEnum;
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: (eventInitialDay?: IDay) => void;
     monthGridProps: {
         monthGridWeekDays: string[];
         monthGridCalendarDays: IDay[];
-        getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
-        openEditModal: (event: IEvent) => void;
-        openCreateModal: (eventInitialDay?: IDay) => void;
-    };
+    } & ICustomViews;
     weekGridProps: {
         weekGridTwentyFourHoursArray: string[];
         weekGridCurrentWeekDays: IDay[];
-        getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
-        openEditModal: (event: IEvent) => void;
-        openCreateModal: (eventInitialDay?: IDay) => void;
-    };
+    } & ICustomViews;
+    dayGridProps: {
+        dayGridTwentyFourHoursArray: string[];
+        dayGridCurrentDay: IDay;
+    } & ICustomViews;
 }
 export interface ICalendarSystemModalViewProps extends IModalProps {
     eventGroups: IEventGroup[];
     onModalFormSubmit: (fields: Record<CalendarSystemModalFields, string>, eventInitialValues?: IEventInitialValues) => void;
     isCreate: boolean;
     eventInitialValues?: any;
+    users: ICalendarUser[];
 }
 export interface CalendarSystemEventGroupModalViewProps extends IModalProps {
     isCreate: boolean;

package/ui/content/CalendarSystem/CalendarSystem.js

@@ -1,4 +1,15 @@
 "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 };
 };
@@ -11,82 +22,35 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var dayjs_1 = __importDefault(require("dayjs"));
 var localeData_1 = __importDefault(require("dayjs/plugin/localeData"));
-var useCalendarControls_1 = __importDefault(require("./hooks/useCalendarControls"));
-var useDisplayDate_1 = __importDefault(require("./hooks/useDisplayDate"));
-var useMonthGrid_1 = __importDefault(require("./hooks/useMonthGrid"));
 var hooks_1 = require("../../../hooks");
-var useCalendarSystemModals_1 = __importDefault(require("./hooks/useCalendarSystemModals"));
-var useCalendarSystemEventGroupModals_1 = require("./hooks/useCalendarSystemEventGroupModals");
-var useWeekGrid_1 = __importDefault(require("./hooks/useWeekGrid"));
-var useCalendarType_1 = require("./hooks/useCalendarType");
-var useEventsFromDate_1 = require("./hooks/useEventsFromDate");
+var useCalendarSystem_1 = require("./hooks/useCalendarSystem");
+var useCustomViews_1 = require("./hooks/useCustomViews");
 dayjs_1["default"].extend(localeData_1["default"]);
 function CalendarSystem(props) {
     var components = (0, hooks_1.useComponents)();
-    var _a = react_1["default"].useState(props.eventBlock.eventGroups || []), innerEventGroups = _a[0], setInnerEventGroups = _a[1];
-    var _b = react_1["default"].useState([]), selectedEventGroupsIds = _b[0], setSelectedEventGroupsIds = _b[1];
-    var _c = react_1["default"].useState(null), currentMonthFirstDayDate = _c[0], setCurrentMonthFirstDayDate = _c[1];
-    var _d = (0, useDisplayDate_1["default"])(), dateToDisplay = _d.dateToDisplay, setNewDateToDisplay = _d.setNewDateToDisplay;
-    var _e = (0, useCalendarType_1.useCalendarType)(), calendarType = _e.calendarType, handleCalendarTypeChange = _e.handleCalendarTypeChange;
-    var _f = (0, useMonthGrid_1["default"])(currentMonthFirstDayDate, setCurrentMonthFirstDayDate), monthGridWeekDays = _f.monthGridWeekDays, monthGridCalendarDays = _f.monthGridCalendarDays;
-    var _g = (0, useWeekGrid_1["default"])(currentMonthFirstDayDate), weekGridTwentyFourHoursArray = _g.weekGridTwentyFourHoursArray, weekGridCurrentWeekDays = _g.weekGridCurrentWeekDays, weekGridControls = _g.weekGridControls, updateWeekOnMonthChange = _g.updateWeekOnMonthChange;
-    var handleControlClick = (0, useCalendarControls_1["default"])(calendarType, weekGridControls);
-    var _h = (0, useCalendarSystemModals_1["default"])(props.calendarModalProps, innerEventGroups, setInnerEventGroups), openCreateModal = _h.openCreateModal, openEditModal = _h.openEditModal;
-    var openCreateEventGroupModal = (0, useCalendarSystemEventGroupModals_1.useCalendarSystemEventGroupModals)(innerEventGroups, setInnerEventGroups, props.eventGroupModalProps).openCreateEventGroupModal;
-    var onInnerCalendarChangeMonth = react_1["default"].useCallback(function (newDate) {
-        setNewDateToDisplay(newDate);
-        setCurrentMonthFirstDayDate(newDate);
-        updateWeekOnMonthChange(newDate);
-    }, [updateWeekOnMonthChange, setCurrentMonthFirstDayDate, setNewDateToDisplay]);
-    var getEventsFromDate = (0, useEventsFromDate_1.useEventsFromDate)(innerEventGroups, selectedEventGroupsIds).getEventsFromDate;
+    var calendarSystem = (0, useCalendarSystem_1.useCalendarSystem)(props);
+    var _a = (0, useCustomViews_1.useCustomViews)(props), dayGridViews = _a.dayGridViews, monthGridViews = _a.monthGridViews, weekGridViews = _a.weekGridViews;
     var viewProps = react_1["default"].useMemo(function () { return ({
         className: props.className,
         style: props.style,
-        openCreateModal: openCreateModal,
-        onInnerCalendarChangeMonth: onInnerCalendarChangeMonth,
-        eventGroups: innerEventGroups,
-        eventGroupsTitle: props.eventBlock.title,
-        onChangeEventGroupsIds: function (newSelectedEventGroupsIds) { return setSelectedEventGroupsIds(newSelectedEventGroupsIds); },
-        openCreateEventGroupModal: openCreateEventGroupModal,
-        dateToDisplay: dateToDisplay,
-        handleCalendarTypeChange: handleCalendarTypeChange,
-        handleControlClick: handleControlClick,
-        calendarType: calendarType,
         additionalViewProps: props.additionalViewProps,
-        monthGridProps: {
-            monthGridWeekDays: monthGridWeekDays,
-            monthGridCalendarDays: monthGridCalendarDays,
-            getEventsFromDate: getEventsFromDate,
-            openCreateModal: openCreateModal,
-            openEditModal: openEditModal
-        },
-        weekGridProps: {
-            weekGridTwentyFourHoursArray: weekGridTwentyFourHoursArray,
-            weekGridCurrentWeekDays: weekGridCurrentWeekDays,
-            getEventsFromDate: getEventsFromDate,
-            openCreateModal: openCreateModal,
-            openEditModal: openEditModal
-        }
-    }); }, [
-        props.className,
-        props.style,
-        props.eventBlock.title,
-        openCreateModal,
-        onInnerCalendarChangeMonth,
-        innerEventGroups,
-        openCreateEventGroupModal,
-        dateToDisplay,
-        handleCalendarTypeChange,
-        handleControlClick,
-        calendarType,
-        monthGridWeekDays,
-        monthGridCalendarDays,
-        getEventsFromDate,
-        openEditModal,
-        weekGridTwentyFourHoursArray,
-        weekGridCurrentWeekDays,
-        props.additionalViewProps,
-    ]);
+        users: calendarSystem.users,
+        eventGroupsTitle: props.eventBlock.title,
+        dateToDisplay: calendarSystem.dateToDisplay,
+        eventGroups: calendarSystem.innerEventGroups,
+        calendarType: calendarSystem.calendarType,
+        openCreateModal: calendarSystem.openCreateModal,
+        onCalendarChangedMonth: calendarSystem.onCalendarChangedMonth,
+        onChangeEventGroupsIds: function (newSelectedEventGroupsIds) { return calendarSystem.setSelectedEventGroupsIds(newSelectedEventGroupsIds); },
+        openCreateEventGroupModal: calendarSystem.openCreateEventGroupModal,
+        handleCalendarTypeChange: calendarSystem.handleCalendarTypeChange,
+        onClickControl: calendarSystem.onClickControl,
+        getEventsFromDate: calendarSystem.getEventsFromDate,
+        openEditModal: calendarSystem.openEditModal,
+        monthGridProps: __assign({ monthGridWeekDays: calendarSystem.monthGridWeekDays, monthGridCalendarDays: calendarSystem.monthGridCalendarDays }, monthGridViews),
+        weekGridProps: __assign({ weekGridTwentyFourHoursArray: calendarSystem.weekGridTwentyFourHoursArray, weekGridCurrentWeekDays: calendarSystem.weekGridCurrentWeekDays }, weekGridViews),
+        dayGridProps: __assign({ dayGridTwentyFourHoursArray: calendarSystem.dayGridTwentyFourHoursArray, dayGridCurrentDay: calendarSystem.dayGridCurrentDay }, dayGridViews)
+    }); }, [props.className, props.style, props.additionalViewProps, props.eventBlock.title, calendarSystem, monthGridViews, weekGridViews, dayGridViews]);
     return components.ui.renderView(props.view || 'content.CalendarSystemView', viewProps);
 }
 exports["default"] = CalendarSystem;

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

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

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

@@ -27,12 +27,14 @@ var CalendarType = /** @class */ (function (_super) {
     CalendarType.getLabels = function () {
         var _a;
         return _a = {},
+            _a[this.DAY] = __('День'),
             _a[this.WEEK] = __('Неделя'),
             _a[this.MONTH] = __('Месяц'),
             _a;
     };
     CalendarType.WEEK = 'Week';
     CalendarType.MONTH = 'Month';
+    CalendarType.DAY = 'Day';
     return CalendarType;
 }(Enum_1["default"]));
 exports["default"] = CalendarType;

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

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

package/ui/content/CalendarSystem/enums/DisplayDateFormatType.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 DisplayDateFormatType = /** @class */ (function (_super) {
+    __extends(DisplayDateFormatType, _super);
+    function DisplayDateFormatType() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DisplayDateFormatType.getLabels = function () {
+        var _a;
+        return _a = {},
+            _a[this.DEFAULT] = 'MMMM YYYY',
+            _a[this.DAY] = 'D MMMM, dddd',
+            _a;
+    };
+    DisplayDateFormatType.DEFAULT = 'default';
+    DisplayDateFormatType.DAY = 'day';
+    return DisplayDateFormatType;
+}(Enum_1["default"]));
+exports["default"] = DisplayDateFormatType;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import CalendarEnum from '../enums/CalendarType';
-import DateControlEnum from '../enums/DateControlType';
-declare const useCalendarControls: (calendarType: CalendarEnum, weekGridControls: {
-    [key: string]: () => void | DateControlEnum;
-}) => (event: React.MouseEvent<HTMLElement>) => void;
+import { IDay } from '../CalendarSystem';
+declare const useCalendarControls: (calendarType: CalendarEnum, generalCurrentDay: IDay, setGeneralCurrentDay: React.Dispatch<React.SetStateAction<IDay>>, isGeneralCurrentDayNeedsUpdate: React.MutableRefObject<boolean>) => {
+    onClickControl: (event: React.MouseEvent<HTMLElement>) => void;
+};
 export default useCalendarControls;

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

@@ -1,44 +1,148 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable no-else-return */
+/* eslint-disable no-useless-return */
+/* eslint-disable no-console */
 /* eslint-disable default-case */
-var react_1 = __importDefault(require("react"));
-var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
+var react_1 = __importStar(require("react"));
 var get_1 = __importDefault(require("lodash-es/get"));
 var CalendarType_1 = __importDefault(require("../enums/CalendarType"));
 var utils_1 = require("../utils/utils");
-var CUSTOM_CONTROL_PATH = 'dataset.control';
-var useCalendarControls = function (calendarType, weekGridControls) {
-    var extractCustomControlType = function (event) {
-        var target = event.target;
-        var customControlType = (0, get_1["default"])(target, CUSTOM_CONTROL_PATH);
-        return customControlType !== null && customControlType !== void 0 ? customControlType : null;
-    };
-    var handleControlClick = react_1["default"].useCallback(function (event) {
-        var customControlType = extractCustomControlType(event);
-        var sourceCalendarControl = (0, utils_1.getSourceCalendarControl)(customControlType);
+var DateControlType_1 = __importDefault(require("../enums/DateControlType"));
+var DATASET_CONTROL_TYPE_PATH = 'dataset.control';
+var getControlTypeFromButton = function (event) {
+    var clickedButton = event.target;
+    var controlType = (0, get_1["default"])(clickedButton, DATASET_CONTROL_TYPE_PATH);
+    return controlType !== null && controlType !== void 0 ? controlType : null;
+};
+var ONE_DAY = 1;
+var ONE_WEEK = 7;
+var ONE_MONTH_DIFF = 1;
+var ONE_YEAR_DIFF = 1;
+var useCalendarControls = function (calendarType, generalCurrentDay, setGeneralCurrentDay, isGeneralCurrentDayNeedsUpdate) {
+    var changeMonth = (0, react_1.useCallback)(function (isNext) {
+        if (isNext === void 0) { isNext = true; }
+        var sourceMonthControl = (0, utils_1.getSourceCalendarControl)(isNext ? DateControlType_1["default"].NEXT_ONE : DateControlType_1["default"].PREV_ONE);
+        sourceMonthControl.click();
+    }, []);
+    var checkIsOutAndUpdateInnerCalendar = (0, react_1.useCallback)(function (formattedDay, prevMonthNumber, prevYearNumber) {
+        //Если при нажатии на кнопку произошел переход на следующий или предыдущий месяц или год
+        var isDateOutOfMonth = formattedDay.date.getMonth() !== prevMonthNumber;
+        var isDateOutOfYear = formattedDay.date.getFullYear() !== prevYearNumber;
+        if (isDateOutOfMonth || isDateOutOfYear) {
+            isGeneralCurrentDayNeedsUpdate.current = false;
+            if ((formattedDay.date.getMonth() - prevMonthNumber === ONE_MONTH_DIFF)
+                || (formattedDay.date.getFullYear() - prevYearNumber === ONE_YEAR_DIFF)) {
+                changeMonth();
+                return;
+            }
+            else if ((prevMonthNumber - formattedDay.date.getMonth() === ONE_MONTH_DIFF)
+                || (prevYearNumber - formattedDay.date.getFullYear() === ONE_YEAR_DIFF)) {
+                changeMonth(false);
+                return;
+            }
+        }
+    }, [changeMonth, isGeneralCurrentDayNeedsUpdate]);
+    var changeDay = (0, react_1.useCallback)(function (isNext) {
+        if (isNext === void 0) { isNext = true; }
+        var prevMonthNumber = generalCurrentDay.date.getMonth();
+        var prevYearNumber = generalCurrentDay.date.getFullYear();
+        var dayTimestamp = new Date(generalCurrentDay.date)
+            .setDate(isNext ? generalCurrentDay.date.getDate() + ONE_DAY : generalCurrentDay.date.getDate() - ONE_DAY);
+        var formattedDay = (0, utils_1.getFormattedDay)(new Date(dayTimestamp));
+        setGeneralCurrentDay(formattedDay);
+        checkIsOutAndUpdateInnerCalendar(formattedDay, prevMonthNumber, prevYearNumber);
+    }, [checkIsOutAndUpdateInnerCalendar, generalCurrentDay.date, setGeneralCurrentDay]);
+    var changeWeek = (0, react_1.useCallback)(function (isNext) {
+        if (isNext === void 0) { isNext = true; }
+        var prevMonthNumber = generalCurrentDay.date.getMonth();
+        var prevYearNumber = generalCurrentDay.date.getFullYear();
+        var dayTimestamp = new Date(generalCurrentDay.date)
+            .setDate(isNext ? generalCurrentDay.date.getDate() + ONE_WEEK : generalCurrentDay.date.getDate() - ONE_WEEK);
+        var formattedDay = (0, utils_1.getFormattedDay)(new Date(dayTimestamp));
+        setGeneralCurrentDay(formattedDay);
+        checkIsOutAndUpdateInnerCalendar(formattedDay, prevMonthNumber, prevYearNumber);
+    }, [generalCurrentDay.date, setGeneralCurrentDay, checkIsOutAndUpdateInnerCalendar]);
+    var onClickControl = react_1["default"].useCallback(function (event) {
+        var controlType = getControlTypeFromButton(event);
+        var sourceCalendarControl = (0, utils_1.getSourceCalendarControl)(controlType);
         if (!sourceCalendarControl) {
             return;
         }
         switch (calendarType) {
             case CalendarType_1["default"].MONTH: {
                 sourceCalendarControl.click();
-                return;
+                break;
             }
             case CalendarType_1["default"].WEEK: {
-                var controlAction = weekGridControls[customControlType];
-                if ((0, isFunction_1["default"])(controlAction)) {
-                    controlAction();
+                switch (controlType) {
+                    case DateControlType_1["default"].NEXT_DOUBLE: {
+                        isGeneralCurrentDayNeedsUpdate.current = true;
+                        changeMonth();
+                        return;
+                    }
+                    case DateControlType_1["default"].NEXT_ONE: {
+                        changeWeek();
+                        return;
+                    }
+                    case DateControlType_1["default"].PREV_ONE: {
+                        changeWeek(false);
+                        return;
+                    }
+                    case DateControlType_1["default"].PREV_DOUBLE: {
+                        isGeneralCurrentDayNeedsUpdate.current = true;
+                        changeMonth(false);
+                    }
                 }
-                else {
-                    var sourceControlType = controlAction;
-                    (0, utils_1.getSourceCalendarControl)(sourceControlType).click();
+                break;
+            }
+            case CalendarType_1["default"].DAY: {
+                switch (controlType) {
+                    case DateControlType_1["default"].NEXT_DOUBLE: {
+                        changeWeek();
+                        return;
+                    }
+                    case DateControlType_1["default"].NEXT_ONE: {
+                        changeDay();
+                        return;
+                    }
+                    case DateControlType_1["default"].PREV_ONE: {
+                        changeDay(false);
+                        return;
+                    }
+                    case DateControlType_1["default"].PREV_DOUBLE: {
+                        changeWeek(false);
+                    }
                 }
             }
         }
-    }, [calendarType, weekGridControls]);
-    return handleControlClick;
+    }, [calendarType, changeDay, changeMonth, changeWeek, isGeneralCurrentDayNeedsUpdate]);
+    return { onClickControl: onClickControl };
 };
 exports["default"] = useCalendarControls;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ICalendarSystemProps, ICalendarUser, IEventGroup } from '../CalendarSystem';
+import CalendarEnum from '../enums/CalendarType';
+export declare const useCalendarSystem: (props: ICalendarSystemProps) => {
+    monthGridWeekDays: any;
+    monthGridCalendarDays: import("../CalendarSystem").IDay[];
+    weekGridTwentyFourHoursArray: string[];
+    weekGridCurrentWeekDays: {
+        dayNumber: number;
+        date: Date;
+        outOfRange?: boolean;
+        isToday?: boolean;
+        formattedDisplay?: string;
+    }[];
+    dayGridTwentyFourHoursArray: string[];
+    dayGridCurrentDay: import("../CalendarSystem").IDay;
+    dateToDisplay: any;
+    innerEventGroups: IEventGroup[];
+    calendarType: CalendarEnum;
+    users: ICalendarUser[];
+    setSelectedEventGroupsIds: React.Dispatch<React.SetStateAction<number[]>>;
+    handleCalendarTypeChange: (newType: string) => void;
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => import("../CalendarSystem").IEvent[];
+    onCalendarChangedMonth: (newDate: Date) => void;
+    openCreateEventGroupModal: () => void;
+    openEditModal: (event: import("../CalendarSystem").IEvent) => void;
+    openCreateModal: (eventInitialDay?: import("../CalendarSystem").IDay) => void;
+    onClickControl: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+};