@steroidsjs/core 3.0.0-beta.92 → 3.0.0-beta.94

package/en.json

@@ -821,9 +821,86 @@
     "Включает обработку вложенных данных из items": "Enables the processing of nested data from items",
     "Callback вызываемый при нажатии на смену года или месяца в шапке Calendar": "",
     "Пользовательский цвет для чекбокса": "",
-    "Включает обработку вложенных данных из items вида [{id: 1, name: 'John', items: [...]}]": "",
-    "\nКомпонент `FileField` представляет собой поле формы для загрузки файлов.\nОн использует хук `useFile` для управления состоянием файлов и выполнения операций с файлами, таких как выбор и удаление.\nКомпонент поддерживает различные варианты отображения файлов (список или стена) с помощью перечисления `FilesLayout`.\nНа backendUrl по дефолту файл отправляется в теле запроса в виде бинарного кода.\nЧтобы отправлять файл в виде form-data (например в таком виде принимает файл FileModule в библиотеке steroidsjs/nest),\nнужно передать в `FileField` пропс uploaderConfig, в котором нужно указать поле useFormData: true.\n": "",
+    "Кастомный домен": "",
+    "Куки для режима ssr": "",
+    "Ключ для хранения токена в куках": "",
+    "Url для http запросов": "",
+    "Срок хранения токена в хранилище в днях": "",
+    "Имя хранилища для токена (local, session, или cookie)": "",
+    "Ключ токена авторизации для локального хранилища": "",
+    "Запрос на обновление токена авторизации": "",
+    "Хендлер для авторизации": "",
+    "Функция, которая вызывается на закрытие соединения": "",
+    "Функция, которая вызывается на отправку сообщения": "",
+    "Функция, которая вызывается на открытие соединения": "",
+    "Массив streams": "",
+    "url для websocket": "",
     "Колонки канбан доски": "",
     "Идентификатор канбан доски": "",
-    "Обработчик события окончания перетаскивания карточки или колонки": ""
-}
+    "Обработчик события окончания перетаскивания карточки или колонки": "",
+    "Метод для добавления css-класса к элементу": "",
+    "Утилита для создания css-классов по БЭМ": "",
+    "Метод для соединения нескольких classNames": "",
+    "Метод для удаления css-класса у элемента": "",
+    "Метод, который вызывается после запроса": "",
+    "Вызов метода delete": "",
+    "Вызов метода get": "",
+    "Получение токена": "",
+    "Получение конфига для axios": "",
+    "Получение экземпляра axios": "",
+    "Получение url по методу": "",
+    "Метод, который можно вызвать при login": "",
+    "Метод, который можно вызвать при logout": "",
+    "Вызов метода post": "",
+    "Удаление токена": "",
+    "Сбросить конфиг": "",
+    "Вызов http-метода": "",
+    "Изменение токена": "",
+    "Изменение csrf токена": "",
+    "Получить модель": "",
+    "Получить тип": "",
+    "Форматирование модели модели": "",
+    "Форматирование названия модели": "",
+    "Изменить модель": "",
+    "Изменить тип": "",
+    "Закрытие websocket соединения": "",
+    "Открытие websocket соединения": "",
+    "Подписка на streams": "",
+    "Подписка на stream": "",
+    "Отписка от streams": "",
+    "Отписка от stream": "",
+    "Отменить прослушивание метрик": "",
+    "Отписаться от метрик": "",
+    "Провайдеры": "",
+    "Редьюсеры": "",
+    "Хранилище": "",
+    "Вариация HttpComponent с функционалом обновления токена авторизации": "",
+    "Компонент для локализации приложения. Поддерживает конфигурацию языка и временной зоны": "",
+    "Компонент для добавления метрик в приложение (например яндекс метрики)": "",
+    "Поменять счетчики": "",
+    "Инициализация компонента": "",
+    "Старт": "",
+    "Добавление редьюсеров": "",
+    "Конфигурация": "",
+    "Метод для dispatch": "",
+    "Метод, который вызывается при ошибке": "",
+    "Получение состояние": "",
+    "Инициализация": "",
+    "Инициализация хранилища": "",
+    "Подписка": "",
+    "Компонент для создания websocket взаимодействия": "",
+    "Получить значение из хранилища.": "",
+    "Удалить значение из хранилища.": "",
+    "Установить значение в хранилище.": "",
+    "Включает обработку вложенных данных из items вида [{id: 1, name: 'John', items: [...]}]": "",
+    "\nКомпонент `FileField` представляет собой поле формы для загрузки файлов.\nОн использует хук `useFile` для управления состоянием файлов и выполнения операций с файлами, таких как выбор и удаление.\nКомпонент поддерживает различные варианты отображения файлов (список или стена) с помощью перечисления `FilesLayout`.\nНа backendUrl по дефолту файл отправляется в теле запроса в виде бинарного кода.\nЧтобы отправлять файл в виде form-data (например в таком виде принимает файл FileModule в библиотеке steroidsjs/nest),\nнужно передать в `FileField` пропс uploaderConfig, в котором нужно указать поле useFormData: true.\n": "",
+    "Массив исполнителей, которых можно назначить для выполнения задачи": "",
+    "Общий контекст обертка из библиотеки react-beautiful-dnd": "",
+    "Компонент обертка для регистрации элемента который можно переместить из библиотеки react-beautiful-dnd": "",
+    "Компонент обертка для инициализации области куда можно переместить элемент из библиотеки react-beautiful-dnd": "",
+    "Идентификатор последней созданной задачи, нужен для определения последовательности id для новых задач": "",
+    "Обработчик события создания карточки": "",
+    "Обработчик события окончания перетаскивания карточки или колонки\nВ result передается объект с информацией о событии": "",
+    "Обработчик события редактирования карточки": "",
+    "Массив тегов для задач": ""
+}

package/hooks/useApplication.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="react" />
+import { IHttpComponentConfig } from 'src/components/HttpComponent';
+import { IWebSocketComponentConfig } from 'src/components/WebSocketComponent';
+import { ILocaleComponentConfig } from 'src/components/LocaleComponent';
+import { IJwtHttpComponentConfig } from 'src/components/JwtHttpComponent';
+import { IResourceComponentConfig } from 'src/components/ResourceComponent';
 import { IThemeProviderProps } from '../providers/ThemeProvider';
-import ClientStorageComponent from '../components/ClientStorageComponent';
+import ClientStorageComponent, { IClientStorageComponentConfig } from '../components/ClientStorageComponent';
 import HtmlComponent from '../components/HtmlComponent';
 import StoreComponent from '../components/StoreComponent';
 import UiComponent from '../components/UiComponent';
@@ -10,6 +15,10 @@ import { IRouteItem, IRouterProps } from '../ui/nav/Router/Router';
 import MetricsComponent from '../components/MetricsComponent';
 import { IScreenProviderProps } from '../providers/ScreenProvider';
 import { IFetchConfig } from '../hooks/useFetch';
+export interface IComponentConfig {
+    className?: Record<string, any>;
+    [key: string]: any;
+}
 /**
  * Application HOC
  * Обертка над корневым компонентом приложения, используется только в `Application.tsx`. Добавляет через React Context
@@ -17,11 +26,18 @@ import { IFetchConfig } from '../hooks/useFetch';
  */
 export interface IApplicationHookConfig {
     components?: {
-        [key: string]: {
-            className: any;
-            [key: string]: any;
-        } | any;
-    } | any;
+        clientStorage?: IClientStorageComponentConfig & IComponentConfig;
+        html?: IComponentConfig;
+        http?: IHttpComponentConfig & IJwtHttpComponentConfig & IComponentConfig;
+        locale?: ILocaleComponentConfig & IComponentConfig;
+        store?: IComponentConfig;
+        ui?: IComponentConfig;
+        resource?: IResourceComponentConfig & IComponentConfig;
+        ws?: IWebSocketComponentConfig & IComponentConfig;
+        pushNotification?: IComponentConfig;
+        meta?: IComponentConfig;
+        [key: string]: IComponentConfig;
+    };
     onInit?: (components: IComponents) => void;
     useGlobal?: boolean;
     reducers?: any;

package/hooks/useSaveCursorPosition.js

@@ -3,6 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable max-len */
+/* eslint-disable no-unneeded-ternary */
+/* eslint-disable consistent-return */
 /* eslint-disable no-return-assign */
 /* eslint-disable no-unused-expressions */
 var react_1 = __importDefault(require("react"));

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.92",
+ "version": "3.0.0-beta.94",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {
@@ -25,8 +25,8 @@
   "watch": "tsc -p tsconfig-debug.json"
  },
  "dependencies": {
-  "@maskito/core": "^0.12.1",
-  "@maskito/kit": "^0.12.1",
+  "@maskito/core": "1.7.0",
+  "@maskito/kit": "1.7.0",
   "@maskito/react": "^0.12.1",
   "@splidejs/react-splide": "^0.7.12",
   "axios": "^0.21.1",

package/providers/ComponentsProvider.d.ts

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
+import { IHttpComponent } from 'src/components/HttpComponent';
+import { IHtmlComponent } from 'src/components/HtmlComponent';
+import { IWebSocketComponent } from 'src/components/WebSocketComponent';
+import { IMetaComponent } from 'src/components/MetaComponent';
+import { IStoreComponent } from 'src/components/StoreComponent';
 import { IClientStorageComponent } from '../components/ClientStorageComponent';
 import { ILocaleComponent } from '../components/LocaleComponent';
 import { IUiApplicationComponent } from '../components/UiComponent';
@@ -11,15 +16,15 @@ declare global {
 }
 export interface IComponents {
     clientStorage?: IClientStorageComponent;
-    html?: any;
-    http?: any;
+    html?: IHtmlComponent;
+    http?: IHttpComponent;
     locale?: ILocaleComponent;
-    store?: any;
+    store?: IStoreComponent;
     ui?: IUiApplicationComponent;
     resource?: IResourceComponent;
-    ws?: any;
+    ws?: IWebSocketComponent;
     pushNotification?: any;
-    meta?: any;
+    meta?: IMetaComponent;
     [key: string]: any;
 }
 export interface IComponentsProviderProps extends PropsWithChildren<any> {

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import { IModalProps } from '../../../ui/modal/Modal/Modal';
 import CalendarEnum from './enums/CalendarType';
+export type CalendarSystemModalFields = 'title' | 'eventGroupId' | 'date' | 'description';
+export interface IEventInitialValues extends IEvent {
+    eventGroupId: string;
+}
 export interface IDay {
     dayNumber: number;
     date: Date;
@@ -14,21 +18,23 @@ export interface IPresentDateInfo {
     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;
     color?: string;
-    events: IEvent[];
+    events: Omit<IEvent, 'color'>[];
 }
 export interface ICalendarSystemProps extends IUiComponent {
     onCreateEvent?: () => void;
     onChangeCalendarType?: (newType: string) => void;
-    createEventModalProps?: IModalProps;
+    calendarModalProps?: IModalProps;
     eventBlock: {
         title: string;
         eventGroups: IEventGroup[];
@@ -47,10 +53,16 @@ export interface ICalendarSystemViewProps extends Omit<ICalendarSystemProps, 'ca
     onChangeCalendarType: (newType: string) => void;
     onMonthChange: (newDate: Date) => void;
     applyControl: (event: React.MouseEvent<HTMLElement>) => void;
-    onClickCreate: VoidFunction;
+    openCreateModal: VoidFunction;
+    openEditModal: (event: IEvent) => void;
     getEventsFromDate: (dateFromDay: Date, isMonth: boolean) => IEvent[];
     onChangeEventGroupsIds: (selectedIds: number[]) => void;
     weekDays: string[];
 }
-export type ICalendarSystemModalViewProps = IModalProps;
+export interface ICalendarSystemModalViewProps extends IModalProps {
+    eventGroups: IEventGroup[];
+    onEventSubmit: (fields: Record<CalendarSystemModalFields, string>, eventInitialValues?: IEventInitialValues) => void;
+    isCreate: boolean;
+    eventInitialValues?: any;
+}
 export default function CalendarSystem(props: ICalendarSystemProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/ui/content/CalendarSystem/CalendarSystem.js

@@ -14,6 +14,7 @@ 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 */
@@ -23,25 +24,24 @@ 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"));
+var useCalendarSystemModals_1 = __importDefault(require("./hooks/useCalendarSystemModals"));
 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 _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 onChangeCalendarType = react_1["default"].useCallback(function (newType) {
         setCalendarType(newType);
         if (props.onChangeCalendarType) {
@@ -96,11 +96,6 @@ function CalendarSystem(props) {
         }
         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 }));
+    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); }, openEditModal: openEditModal, weekDays: weekDays }));
 }
 exports["default"] = CalendarSystem;

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

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

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

@@ -0,0 +1,85 @@
+"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 () {
+        dispatch((0, modal_1.openModal)(calendarModalView, getModalProps(true)));
+    }, [getModalProps, calendarModalView, dispatch]);
+    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/utils/utils.d.ts

@@ -1,3 +1,5 @@
-import { IDay } from '../CalendarSystem';
+import { IDay, IEvent, IEventGroup } from '../CalendarSystem';
 export declare const getWeekDaysFromDate: (date: Date) => IDay[];
 export declare const isDateIsToday: (date: Date) => boolean;
+export declare const getOmittedEvent: (event: IEvent | Omit<IEvent, 'color'>) => any;
+export declare const sortEventsInGroup: (group: IEventGroup) => Omit<IEvent, "color">[];

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

@@ -3,9 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.isDateIsToday = exports.getWeekDaysFromDate = void 0;
+exports.sortEventsInGroup = exports.getOmittedEvent = exports.isDateIsToday = exports.getWeekDaysFromDate = void 0;
 /* eslint-disable no-plusplus */
 var dayjs_1 = __importDefault(require("dayjs"));
+var omit_1 = __importDefault(require("lodash-es/omit"));
 var SIX_DAYS_DIFF = 6;
 var MAX_DAYS_DIFF_IN_WEEK = 7;
 var getWeekDaysFromDate = function (date) {
@@ -27,3 +28,7 @@ var getWeekDaysFromDate = function (date) {
 exports.getWeekDaysFromDate = getWeekDaysFromDate;
 var isDateIsToday = function (date) { return (0, dayjs_1["default"])(date).isToday(); };
 exports.isDateIsToday = isDateIsToday;
+var getOmittedEvent = function (event) { return (0, omit_1["default"])(event, ['color', 'eventGroupId']); };
+exports.getOmittedEvent = getOmittedEvent;
+var sortEventsInGroup = function (group) { return group.events.sort(function (eventA, eventB) { return eventA.date.getTime() - eventB.date.getTime(); }); };
+exports.sortEventsInGroup = sortEventsInGroup;

package/ui/form/EmailField/EmailField.d.ts

@@ -0,0 +1,6 @@
+import { IBaseFieldProps } from '../InputField/InputField';
+import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
+export interface IEmailFieldProps extends IBaseFieldProps, IFieldWrapperInputProps {
+}
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IEmailFieldProps>;
+export default _default;

package/ui/form/EmailField/EmailField.js

@@ -0,0 +1,44 @@
+"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 max-len */
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../../hooks");
+var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
+var useInputTypeEmail_1 = __importDefault(require("./hooks/useInputTypeEmail"));
+/**
+ * EmailField
+ * Поле для ввода почты
+ */
+function EmailField(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;
+    var onInputChange = (0, useInputTypeEmail_1["default"])(currentInputRef, onChange, props.input.value).onInputChange;
+    var onClear = react_1["default"].useCallback(function () { return props.input.onChange(''); }, [props.input]);
+    var inputProps = react_1["default"].useMemo(function () {
+        var _a;
+        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onInputChange, type: 'text', placeholder: props.placeholder, disabled: props.disabled, required: props.required }, props.inputProps));
+    }, [onInputChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, props.required]);
+    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign({}, props), { inputProps: inputProps, inputRef: currentInputRef, onClear: onClear }));
+}
+EmailField.defaultProps = {
+    size: 'md',
+    disabled: false,
+    required: false,
+    showClear: false,
+    maskOptions: null
+};
+exports["default"] = (0, fieldWrapper_1["default"])('EmailField', EmailField);

package/ui/form/EmailField/hooks/useInputTypeEmail.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const useInputTypeEmail: (currentInputRef: React.MutableRefObject<HTMLInputElement>, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void, currentValue: string | null | undefined) => {
+    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export default useInputTypeEmail;

package/ui/form/EmailField/hooks/useInputTypeEmail.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable max-len */
+/* eslint-disable no-unused-expressions */
+var react_1 = __importDefault(require("react"));
+var DEFAULT_VALIDITY = __('Неправильный формат адреса электронной почты.');
+var useInputTypeEmail = function (currentInputRef, onChange, currentValue) {
+    var isValueEmail = function (value) {
+        //In that case it's testing if value is empty string or not defined
+        if (!value) {
+            return false;
+        }
+        var emailRegexp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return emailRegexp.test(value.toLowerCase());
+    };
+    var errorMessage = isValueEmail(currentValue) ? '' : DEFAULT_VALIDITY;
+    react_1["default"].useEffect(function () {
+        var _a;
+        (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(errorMessage);
+    }, [currentInputRef, currentValue, errorMessage]);
+    var onInputChange = function (event) {
+        onChange(event);
+    };
+    return {
+        onInputChange: onInputChange
+    };
+};
+exports["default"] = useInputTypeEmail;

package/ui/form/EmailField/index.d.ts

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

package/ui/form/EmailField/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 EmailField_1 = __importDefault(require("./EmailField"));
+exports["default"] = EmailField_1["default"];

package/ui/form/Field/Field.js

@@ -50,7 +50,8 @@ function Field(props) {
     var fieldModel = (0, react_1.useMemo)(function () {
         var _a;
         var model = props.model || context.model;
-        var result = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || [])
+        var modelAttributes = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || []);
+        var result = modelAttributes
             .find(function (field) { return field.attribute === props.attribute; });
         return result || {};
     }, [components, props.model, context.model, props.attribute]);

package/ui/form/InputField/InputField.d.ts

@@ -3,7 +3,7 @@ import { InputHTMLAttributes, ReactNode } from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 export declare const MASK_PRESETS: {
-    date: MaskitoOptions;
+    date: Required<MaskitoOptions>;
     phone: {
         mask: any[];
     };
@@ -11,7 +11,7 @@ export declare const MASK_PRESETS: {
         mask: any[];
     };
 };
-type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | string;
+export type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | string;
 export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Свойства для элемента input

package/ui/form/InputField/InputField.js

@@ -47,12 +47,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.MASK_PRESETS = void 0;
+/* eslint-disable no-unused-expressions */
+/* eslint-disable max-len */
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_2 = require("@maskito/react");
 var kit_1 = require("@maskito/kit");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
+var useInputFieldWarningByType_1 = require("./hooks/useInputFieldWarningByType");
 exports.MASK_PRESETS = {
     date: (0, kit_1.maskitoDateOptionsGenerator)({
         mode: 'dd/mm/yyyy'
@@ -93,6 +96,7 @@ function InputField(props) {
             maskedInputRef(inputRef.current);
         }
     }, [inputRef, maskedInputRef]);
+    (0, useInputFieldWarningByType_1.useInputFieldWarningByType)(props.type);
     var onClear = React.useCallback(function () { return props.input.onChange(''); }, [props.input]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
@@ -102,7 +106,9 @@ function InputField(props) {
     if (props.type === 'hidden') {
         return null;
     }
-    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, inputRef: inputRef, onClear: onClear }));
+    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, 
+        // If type was recognized as unsupported in InputField, then we do not pass ref.
+        inputRef: useInputFieldWarningByType_1.INPUT_TYPES_SUPPORTED_SELECTION.includes(props.type) ? inputRef : null, onClear: onClear }));
 }
 InputField.defaultProps = {
     type: 'text',

package/ui/form/InputField/hooks/useInputFieldWarningByType.d.ts

@@ -0,0 +1,3 @@
+import { IElementInputType } from '../InputField';
+export declare const INPUT_TYPES_SUPPORTED_SELECTION: string[];
+export declare const useInputFieldWarningByType: (type: IElementInputType) => void;