@steroidsjs/core 3.0.0-beta.1 → 3.0.0-beta.100

package/ui/content/Calendar/Calendar.js

@@ -15,37 +15,37 @@ var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var calendar_1 = require("../../../utils/calendar");
 function Calendar(props) {
-    var components = hooks_1.useComponents();
+    var components = (0, hooks_1.useComponents)();
     var currentYear = new Date().getFullYear();
-    var _a = react_1.useMemo(function () { return ({
+    var _a = (0, react_1.useMemo)(function () { return ({
         fromYear: new Date(currentYear - 100, 0),
         toYear: new Date(currentYear + 50, 11)
     }); }, [currentYear]), fromYear = _a.fromYear, toYear = _a.toYear;
-    var selectedDates = react_1.useMemo(function () { return [].concat(props.value || []).map(function (selectedDate) { return calendar_1.convertDate(selectedDate, props.valueFormat); }); }, [props.value, props.valueFormat]);
-    var _b = react_1.useState(selectedDates.length > 0
+    var selectedDates = (0, react_1.useMemo)(function () { return [].concat(props.value || []).map(function (selectedDate) { return (0, calendar_1.convertDate)(selectedDate, props.valueFormat); }); }, [props.value, props.valueFormat]);
+    var _b = (0, react_1.useState)(selectedDates.length > 0
         ? selectedDates.filter(function (date) { return !!date; })[0]
         : new Date()), month = _b[0], setMonth = _b[1];
-    var _c = react_1.useState(false), isCaptionPanelVisible = _c[0], setIsCaptionPanelVisible = _c[1];
-    react_1.useEffect(function () {
+    var _c = (0, react_1.useState)(false), isCaptionPanelVisible = _c[0], setIsCaptionPanelVisible = _c[1];
+    (0, react_1.useEffect)(function () {
         if (selectedDates.length > 0) {
             setMonth(selectedDates[0]);
         }
     }, [selectedDates]);
-    var onDaySelect = react_1.useCallback(function (date) { return props.onChange.call(null, calendar_1.convertDate(date, null, props.valueFormat, false, true)); }, [props.onChange, props.valueFormat]);
-    var toggleCaptionPanel = react_1.useCallback(function () {
+    var onDaySelect = (0, react_1.useCallback)(function (date) {
+        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 = react_1.useCallback(function (newMonth) {
+    var onMonthSelect = (0, react_1.useCallback)(function (newMonth) {
         setMonth(newMonth);
-    }, []);
-    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 }));
+        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 = {
     numberOfMonths: 1,

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

@@ -0,0 +1,133 @@
+import React from 'react';
+import { IModalProps } from '../../../ui/modal/Modal/Modal';
+import CalendarEnum from './enums/CalendarType';
+export type CalendarSystemModalFields = 'title' | 'eventGroupId' | 'date' | 'description';
+export type CalendarSystemEventGroupModalFields = 'label' | 'color';
+export interface IEventInitialValues extends IEvent {
+    eventGroupId: string;
+}
+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 {
+    /**
+    * Идентификатор
+    */
+    id: number;
+    /**
+    * Дата
+    */
+    date: Date;
+    /**
+    * Заголовок
+    */
+    title: string;
+    /**
+    * Цвет
+    */
+    color?: string;
+    /**
+    * Внутреннее описания события
+    */
+    description?: string;
+    [key: string]: any;
+}
+/**
+* Группа событий
+*/
+export interface IEventGroup {
+    /**
+    * Идентификатор
+    */
+    id: number;
+    /**
+    * Название группы
+    */
+    label: string;
+    /**
+    * Цвет
+    * @example '#000000'
+    */
+    color?: string;
+    /**
+    * События группы
+    */
+    events: Omit<IEvent, 'color'>[];
+}
+/**
+ * Комплексный календарь
+ **/
+export interface ICalendarSystemProps extends IUiComponent {
+    /**
+    * Функция, которая вызовется при смене типа календаря
+    */
+    onChangeCalendarType?: (newType: string) => void;
+    /**
+    * Свойства для модального окна
+    */
+    calendarModalProps?: IModalProps;
+    /**
+    * Свойства для модалного окна группы событий
+    */
+    eventGroupModalProps?: 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;
+    openCreateModal: (eventInitialDay?: IDay) => void;
+    openCreateEventGroupModal: VoidFunction;
+    openEditModal: (event: IEvent) => void;
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+    onChangeEventGroupsIds: (selectedIds: number[]) => void;
+    weekDays: string[];
+}
+export interface ICalendarSystemModalViewProps extends IModalProps {
+    eventGroups: IEventGroup[];
+    onEventSubmit: (fields: Record<CalendarSystemModalFields, string>, eventInitialValues?: IEventInitialValues) => void;
+    isCreate: boolean;
+    eventInitialValues?: any;
+}
+export interface CalendarSystemEventGroupModalViewProps extends IModalProps {
+    isCreate: boolean;
+    onEventGroupSubmit: (fields: Record<CalendarSystemEventGroupModalFields, string>) => void;
+    eventGroupInitialValues?: {
+        color: string;
+        label: string;
+    };
+}
+export default function CalendarSystem(props: ICalendarSystemProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/ui/content/CalendarSystem/CalendarSystem.js

@@ -0,0 +1,103 @@
+"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-return-assign */
+/* 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 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"));
+var useCalendarSystemModals_1 = __importDefault(require("./hooks/useCalendarSystemModals"));
+var useCalendarSystemEventGroupModals_1 = require("./hooks/useCalendarSystemEventGroupModals");
+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 = (0, useDisplayDate_1["default"])(), dateToDisplay = _c.dateToDisplay, setNewDateToDisplay = _c.setNewDateToDisplay;
+    var _d = react_1["default"].useState(CalendarType_1["default"].MONTH), calendarType = _d[0], setCalendarType = _d[1];
+    var _e = (0, useMonthCalendar_1["default"])(), monthCalendarDays = _e.calendarArray, setCurrentMonthDate = _e.setCurrentMonthDate, currentMonthDate = _e.currentMonthDate;
+    var _f = (0, hooks_1.useWeekCalendar)(currentMonthDate), currentWeekDays = _f.currentWeek, weekControls = _f.weekControls, forceUpdateWeekOnMonthChange = _f.forceUpdateWeekOnMonthChange;
+    var applyControl = (0, useCalendarControls_1["default"])(calendarType, weekControls);
+    var _g = (0, useCalendarSystemModals_1["default"])(props.calendarModalProps, innerEventGroups, setInnerEventGroups), openCreateModal = _g.openCreateModal, openEditModal = _g.openEditModal;
+    var openCreateEventGroupModal = (0, useCalendarSystemEventGroupModals_1.useCalendarSystemEventGroupModals)(innerEventGroups, setInnerEventGroups, props.eventGroupModalProps).openCreateEventGroupModal;
+    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;
+    }, []);
+    return components.ui.renderView(props.view || 'content.CalendarSystemView', __assign(__assign({}, props), { dateToDisplay: dateToDisplay, monthCalendarDays: monthCalendarDays, calendarType: calendarType, currentWeekDays: currentWeekDays, eventGroups: innerEventGroups, eventGroupsTitle: props.eventBlock.title, allHours: allHours, selectedEventGroupsIds: selectedEventGroupsIds, onChangeCalendarType: onChangeCalendarType, onMonthChange: onMonthChange, applyControl: applyControl, openCreateModal: openCreateModal, getEventsFromDate: getEventsFromDate, onChangeEventGroupsIds: function (newSelectedEventGroupsIds) { return setSelectedEventGroupsIds(newSelectedEventGroupsIds); }, openCreateEventGroupModal: openCreateEventGroupModal, openEditModal: openEditModal, 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/useCalendarSystemEventGroupModals.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IEventGroup } from '../CalendarSystem';
+import { IModalProps } from '../../../modal/Modal/Modal';
+export declare const useCalendarSystemEventGroupModals: (innerEventGroups: IEventGroup[], setInnerEventGroups: React.Dispatch<React.SetStateAction<IEventGroup[]>>, eventGroupModalProps: IModalProps) => {
+    openCreateEventGroupModal: () => void;
+};

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

@@ -0,0 +1,54 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.useCalendarSystemEventGroupModals = void 0;
+var react_redux_1 = require("react-redux");
+var maxBy_1 = __importDefault(require("lodash-es/maxBy"));
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../../../hooks");
+var modal_1 = require("../../../../actions/modal");
+var useComponents_1 = __importDefault(require("../../../../hooks/useComponents"));
+var DEFAULT_ID = 1;
+var PRIMARY_LIGHT = '#651fff';
+var PRIMARY_DARK = '#9362ff';
+var useCalendarSystemEventGroupModals = function (innerEventGroups, setInnerEventGroups, eventGroupModalProps) {
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var components = (0, useComponents_1["default"])();
+    var theme = (0, hooks_1.useTheme)().theme;
+    var calendarModalView = (eventGroupModalProps === null || eventGroupModalProps === void 0 ? void 0 : eventGroupModalProps.component) || components.ui.getView('content.CalendarSystemEventGroupModalView');
+    var defaultEventGroupColor = react_1["default"].useMemo(function () { return theme === 'light' ? PRIMARY_LIGHT : PRIMARY_DARK; }, [theme]);
+    var onEventGroupSubmit = react_1["default"].useCallback(function (fields) {
+        var _a;
+        var newEventGroup = {
+            id: (((_a = (0, maxBy_1["default"])(innerEventGroups, function (eventsGroup) { return eventsGroup.id; })) === null || _a === void 0 ? void 0 : _a.id) || DEFAULT_ID) + 1,
+            label: fields.label,
+            color: fields.color,
+            events: []
+        };
+        setInnerEventGroups(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newEventGroup], false); });
+    }, [innerEventGroups, setInnerEventGroups]);
+    var openCreateEventGroupModal = react_1["default"].useCallback(function () {
+        dispatch((0, modal_1.openModal)(calendarModalView, {
+            isCreate: true,
+            onEventGroupSubmit: onEventGroupSubmit,
+            eventGroupInitialValues: {
+                color: defaultEventGroupColor
+            }
+        }));
+    }, [calendarModalView, defaultEventGroupColor, dispatch, onEventGroupSubmit]);
+    return {
+        openCreateEventGroupModal: openCreateEventGroupModal
+    };
+};
+exports.useCalendarSystemEventGroupModals = useCalendarSystemEventGroupModals;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IModalProps } from '../../../modal/Modal/Modal';
+import { ICalendarSystemModalViewProps, IDay, IEvent, IEventGroup } from '../CalendarSystem';
+declare const useCalendarSystemModals: (calendarModalProps: IModalProps, innerEventGroups: IEventGroup[], setInnerEventGroups: React.Dispatch<React.SetStateAction<IEventGroup[]>>) => {
+    openCreateModal: (eventInitialDay?: IDay) => void;
+    openEditModal: (event: IEvent) => void;
+    getEventFromGroup: (event: IEvent) => IEventGroup;
+    getModalProps: (isCreate: boolean, eventInitialValues?: Partial<IEvent & {
+        eventGroupId: number;
+    }>) => ICalendarSystemModalViewProps;
+};
+export default useCalendarSystemModals;

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

@@ -0,0 +1,88 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var react_redux_1 = require("react-redux");
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var maxBy_1 = __importDefault(require("lodash-es/maxBy"));
+var modal_1 = require("../../../../actions/modal");
+var useComponents_1 = __importDefault(require("../../../../hooks/useComponents"));
+var utils_1 = require("../utils/utils");
+var DEFAULT_ID = 0;
+var useCalendarSystemModals = function (calendarModalProps, innerEventGroups, setInnerEventGroups) {
+    var dispatch = (0, react_redux_1.useDispatch)();
+    var components = (0, useComponents_1["default"])();
+    var calendarModalView = (calendarModalProps === null || calendarModalProps === void 0 ? void 0 : calendarModalProps.component) || components.ui.getView('content.CalendarSystemModalView');
+    var onEventSubmit = react_1["default"].useCallback(function (fields, eventInitialValues) {
+        var _a;
+        var eventGroupId = fields.eventGroupId, date = fields.date, title = fields.title, description = fields.description;
+        var currentEventGroups = __spreadArray([], innerEventGroups, true);
+        if (eventInitialValues) {
+            // Удаляем событие из предыдущей группы
+            var previousGroupIndex = currentEventGroups.findIndex(function (group) { return group.id === Number(eventInitialValues.eventGroupId); });
+            var previousGroup = __assign({}, currentEventGroups[previousGroupIndex]);
+            previousGroup.events = previousGroup.events.filter(function (event) { return event.id !== eventInitialValues.id; });
+            currentEventGroups = __spreadArray(__spreadArray(__spreadArray([], currentEventGroups.slice(0, previousGroupIndex), true), [
+                previousGroup
+            ], false), currentEventGroups.slice(previousGroupIndex + 1), true);
+        }
+        var changeableEventGroupIndex = currentEventGroups.findIndex(function (group) { return group.id === eventGroupId; });
+        var changeableEventGroup = __assign({}, currentEventGroups[changeableEventGroupIndex]);
+        var updatedEvent = {
+            id: (((_a = (0, maxBy_1["default"])(changeableEventGroup.events, function (event) { return event.id; })) === null || _a === void 0 ? void 0 : _a.id) || DEFAULT_ID) + 1,
+            date: new Date(date),
+            title: title,
+            description: description
+        };
+        changeableEventGroup.events.push(updatedEvent);
+        changeableEventGroup.events = (0, utils_1.sortEventsInGroup)(changeableEventGroup);
+        currentEventGroups = __spreadArray(__spreadArray(__spreadArray([], currentEventGroups.slice(0, changeableEventGroupIndex), true), [
+            changeableEventGroup
+        ], false), currentEventGroups.slice(changeableEventGroupIndex + 1), true);
+        setInnerEventGroups(currentEventGroups);
+    }, [innerEventGroups, setInnerEventGroups]);
+    var getModalProps = react_1["default"].useCallback(function (isCreate, eventInitialValues) { return (__assign(__assign({}, calendarModalProps), { component: calendarModalView, eventGroups: innerEventGroups, onEventSubmit: onEventSubmit, isCreate: isCreate, eventInitialValues: eventInitialValues })); }, [calendarModalProps, calendarModalView, innerEventGroups, onEventSubmit]);
+    var getEventFromGroup = react_1["default"].useCallback(function (event) { return innerEventGroups
+        .find(function (group) { return group.events
+        .some(function (groupEvent) { return (0, isEqual_1["default"])((0, utils_1.getOmittedEvent)(groupEvent), (0, utils_1.getOmittedEvent)(event)); }); }); }, [innerEventGroups]);
+    var openCreateModal = react_1["default"].useCallback(function (eventInitialDay) {
+        if (eventInitialDay === void 0) { eventInitialDay = null; }
+        var modalProps = eventInitialDay
+            ? getModalProps(true, { date: eventInitialDay.date }) : getModalProps(true);
+        dispatch((0, modal_1.openModal)(calendarModalView, modalProps));
+    }, [calendarModalView, dispatch, getModalProps]);
+    var openEditModal = react_1["default"].useCallback(function (event) {
+        var _a;
+        var eventGroupId = ((_a = getEventFromGroup(event)) === null || _a === void 0 ? void 0 : _a.id) || 0;
+        dispatch((0, modal_1.openModal)(calendarModalView, getModalProps(false, __assign(__assign({}, event), { eventGroupId: eventGroupId }))));
+    }, [getModalProps, calendarModalView, dispatch, getEventFromGroup]);
+    return {
+        openCreateModal: openCreateModal,
+        openEditModal: openEditModal,
+        getEventFromGroup: getEventFromGroup,
+        getModalProps: getModalProps
+    };
+};
+exports["default"] = useCalendarSystemModals;

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;