@steroidsjs/core 3.0.0-beta.9 → 3.0.0-beta.91

package/ui/content/Badge/Badge.js

@@ -27,7 +27,7 @@ function Badge(props) {
 Badge.defaultProps = {
     type: 'primary',
     roundingStyle: 'squarer',
-    size: 'medium',
+    size: 'md',
     counter: false,
     showClose: false
 };

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

package/ui/content/CalendarSystem/CalendarSystem.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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