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

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

@@ -1,5 +1,18 @@
+/// <reference types="react" />
 import { DayPickerProps } from 'react-day-picker';
-export interface ICalendarProps {
+/**
+ * Calendar
+ *
+ * Компонент календаря, который позволяет выбирать даты или диапазоны дат.
+ * Он предоставляет пользователю удобный способ выбора даты и может использоваться для различных целей,
+ * таких как выбор даты доставки, даты резервирования и т.д.
+ *
+ * Компонент `Calendar` позволяет указать значение даты или диапазона дат, формат значения, callback функцию при изменении,
+ * свойства для компонента `DayPicker`, отображение панели выбора месяца/года, количество отображаемых месяцев и другие свойства.
+ *
+ * Если установлено значение `showFooter`, то будет отображаться футер с кнопкой "Today".
+ */
+export interface ICalendarProps extends IUiComponent {
     /**
      * Значение задает выбранные в календаре дату или диапазон дат.
      * Необходимо передать валидную дату в виде строки (массива строк)
@@ -19,11 +32,6 @@ export interface ICalendarProps {
      * @example {dayPickerProps: {showWeekNumbers: true}}
      */
     pickerProps?: DayPickerProps | any;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Пропсы для компонента отображения
      */
@@ -38,9 +46,10 @@ export interface ICalendarProps {
      */
     numberOfMonths?: number;
     /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
+    * Callback вызываемый при нажатии на смену года или месяца в шапке Calendar
+    * @param newDate - дата первого дня нового месяца
+    */
+    onMonthChange?: (newDate: Date) => void;
 }
 export interface ICalendarViewProps extends ICalendarProps {
     /**
@@ -76,7 +85,7 @@ export interface ICalendarViewProps extends ICalendarProps {
      */
     toggleCaptionPanel: () => void;
 }
-declare function Calendar(props: ICalendarProps): any;
+declare function Calendar(props: ICalendarProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 declare namespace Calendar {
     var defaultProps: {
         numberOfMonths: number;

package/ui/content/Calendar/Calendar.js

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

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

@@ -0,0 +1,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;