@steroidsjs/bootstrap 3.0.0-beta.109 → 3.0.0-beta.110

package/content/CalendarSystem/AsideHeader/AsideHeader.scss

@@ -14,7 +14,7 @@
     }
 
     .ButtonView {
-        width: 94px;
+        width: auto;
         height: 34px;
         border: none;
         padding: 5px 12px;

package/content/CalendarSystem/CalendarSystemModalView.d.ts

@@ -1,3 +1,2 @@
-import './CalendarSystemModalView.scss';
 import { ICalendarSystemModalViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
 export default function CalendarSystemModalView(props: ICalendarSystemModalViewProps): JSX.Element;

package/content/CalendarSystem/CalendarSystemModalView.js

@@ -3,12 +3,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable implicit-arrow-linebreak */
+/* eslint-disable no-undef */
+var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
 var react_1 = __importDefault(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
-require("./CalendarSystemModalView.scss");
-var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 function CalendarSystemModalView(props) {
     var bem = (0, useBem_1["default"])('CalendarSystemModalView');
-    return (react_1["default"].createElement(Modal_1["default"], { title: __('Новое событие'), onClose: props.onClose }));
+    var eventInitialValues = react_1["default"].useMemo(function () { return props.eventInitialValues; }, [props.eventInitialValues]);
+    var callOnEventSubmit = function (fields) {
+        return eventInitialValues ? props.onEventSubmit(fields, eventInitialValues) : props.onEventSubmit(fields);
+    };
+    return (react_1["default"].createElement(Modal_1["default"], { title: eventInitialValues ? __('Редактирование события') : __('Новое событие'), onClose: props.onClose, className: bem.block(), shouldCloseOnEsc: true, shouldCloseOnOverlayClick: true },
+        react_1["default"].createElement(form_1.Form, { className: bem.element('default-form'), onSubmit: function (fields) {
+                callOnEventSubmit(fields);
+                props.onClose();
+            }, initialValues: eventInitialValues !== null && eventInitialValues !== void 0 ? eventInitialValues : null, submitLabel: (0, isEmpty_1["default"])(eventInitialValues) ? __('Создать') : __('Сохранить') },
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Наименование'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.InputField, { attribute: 'title', required: true, className: bem.element('name-field') }),
+                react_1["default"].createElement(form_1.DropDownField, { attribute: 'eventGroupId', items: props.eventGroups, placeholder: '\u0413\u0440\u0443\u043F\u043F\u0430', color: "primary", required: true, itemsContent: {
+                        type: 'checkbox'
+                    } })),
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Время и дата'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.DateTimeField, { attribute: 'date', required: true })),
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Описание'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.TextField, { attribute: 'description', required: true })))));
 }
 exports["default"] = CalendarSystemModalView;

package/content/CalendarSystem/CalendarSystemModalView.scss

@@ -1,5 +1,80 @@
-@import 'style/variables';
+@use "style/variables";
 
 .CalendarSystemModalView {
+    $root: &;
+    width: 941px;
 
+    .FieldLayoutView {
+        margin-bottom: 0;
+    }
+
+    .ModalView__header {
+        .ModalView__title {
+            font-size: variables.$font-size-lg;
+            font-weight: variables.$font-weight-lg;
+            line-height: variables.$line-height-lg;
+        }
+    }
+
+    .ModalView__content {
+        padding: 0;
+    }
+
+    &__default-form {
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 16px;
+
+        > div {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+
+            gap: 12px;
+
+            &:nth-child(3) {
+                > .FieldLayoutView {
+                    width: calc(84%);
+
+                    .TextFieldView textarea {
+                        height: 160px;
+                    }
+                }
+            }
+        }
+
+        #{$root}__label {
+            align-self: flex-start;
+            margin-bottom: 0;
+            margin-right: 16px;
+            width: 140px;
+            height: 46px;
+        }
+
+        #{$root}__name-field {
+            width: 585px;
+        }
+
+        .ButtonView {
+            width: 120px;
+            padding: 11px 12px;
+        }
+
+        .InputFieldView {
+            max-width: 420px;
+        }
+
+        .DropDownFieldView_primary {
+            width: 300px;
+
+            background-color: variables.$element-field-background-color;
+
+            .CheckboxFieldView__label-text {
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+            }
+        }
+    }
 }

package/content/CalendarSystem/CalendarSystemView.js

@@ -16,13 +16,13 @@ function CalendarSystemView(props) {
     var bem = (0, useBem_1["default"])('CalendarSystemView');
     return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
         react_1["default"].createElement("aside", { className: bem.element('aside') },
-            react_1["default"].createElement(AsideHeader_1["default"], { onClick: props.onClickCreate, className: bem.element('aside-header') }),
+            react_1["default"].createElement(AsideHeader_1["default"], { onClick: props.openCreateModal, className: bem.element('aside-header') }),
             react_1["default"].createElement(Calendar_1["default"], { showFooter: false, onMonthChange: props.onMonthChange }),
             react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, selectedCalendarGroupsIds: props.selectedCalendarGroups, onChangeEventGroupsIds: props.onChangeEventGroupsIds })),
         react_1["default"].createElement("div", { className: bem.element('content') },
             react_1["default"].createElement(ContentHeader_1["default"], { dateToDisplay: props.dateToDisplay, onChangeCalendarType: props.onChangeCalendarType, applyControl: props.applyControl }),
             props.calendarType === CalendarType_1["default"].MONTH
-                ? (react_1["default"].createElement(MonthGrid_1["default"], { monthCalendarDays: props.monthCalendarDays, getEventsFromDate: props.getEventsFromDate, weekDays: props.weekDays }))
-                : (react_1["default"].createElement(WeekGrid_1["default"], { allHours: props.allHours, getEventsFromDate: props.getEventsFromDate, onClickHour: props.onClickHour, currentWeekDays: props.currentWeekDays })))));
+                ? (react_1["default"].createElement(MonthGrid_1["default"], { monthCalendarDays: props.monthCalendarDays, getEventsFromDate: props.getEventsFromDate, weekDays: props.weekDays, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal }))
+                : (react_1["default"].createElement(WeekGrid_1["default"], { allHours: props.allHours, getEventsFromDate: props.getEventsFromDate, currentWeekDays: props.currentWeekDays, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal })))));
 }
 exports["default"] = CalendarSystemView;

package/content/CalendarSystem/MonthGrid/MonthGrid.d.ts

@@ -6,6 +6,8 @@ interface IMonthGridProps {
     monthCalendarDays: IDay[];
     getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
     weekDays: string[];
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: () => void;
 }
 declare function MonthGrid(props: IMonthGridProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof MonthGrid>;

package/content/CalendarSystem/MonthGrid/MonthGrid.js

@@ -34,6 +34,6 @@ function MonthGrid(props) {
     var bem = (0, useBem_1["default"])('MonthGrid');
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement("div", { className: bem.element('week-days') }, props.weekDays.map(function (day, dayIndex) { return (react_1["default"].createElement("span", { key: dayIndex, className: bem.element('week-days-day') }, day)); })),
-        react_1["default"].createElement("div", { className: bem.element('grid') }, props.monthCalendarDays.map(function (day, dayIndex) { return (react_1["default"].createElement(MonthDay_1["default"], { key: dayIndex, getEventsFromDate: props.getEventsFromDate, day: day })); }))));
+        react_1["default"].createElement("div", { className: bem.element('grid') }, props.monthCalendarDays.map(function (day, dayIndex) { return (react_1["default"].createElement(MonthDay_1["default"], { key: dayIndex, openEditModal: props.openEditModal, getEventsFromDate: props.getEventsFromDate, openCreateModal: props.openCreateModal, day: day })); }))));
 }
 exports["default"] = (0, react_1.memo)(MonthGrid);

package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.d.ts

@@ -4,6 +4,8 @@ import './MonthDay.scss';
 interface IMonthDayProps {
     day: IDay;
     getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: () => void;
 }
 export default function MonthDay(props: IMonthDayProps): JSX.Element;
 export {};

package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.js

@@ -18,12 +18,12 @@ var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
 var Tooltip_1 = __importDefault(require("@steroidsjs/core/ui/layout/Tooltip/Tooltip"));
 var slice_1 = __importDefault(require("lodash-es/slice"));
+var get_1 = __importDefault(require("lodash-es/get"));
 var form_1 = require("@steroidsjs/core/ui/form");
 var useExpandClickAway_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/hooks/useExpandClickAway"));
 var getFormattedExpandLabel_1 = require("../../../../../utils/getFormattedExpandLabel");
 require("./MonthDay.scss");
 var SIXTH_ELEMENT_INDEX = 6;
-var SIX_ELEMENTS_IN_ARRAY = 6;
 function MonthDay(props) {
     var bem = (0, useBem_1["default"])('MonthDay');
     var day = props.day, getEventsFromDate = props.getEventsFromDate;
@@ -38,14 +38,26 @@ function MonthDay(props) {
         };
     }, [getEventsFromDate, props.day.date]), events = _b.events, hasSixEvents = _b.hasSixEvents;
     var formattedExpandLabel = react_1["default"].useMemo(function () { return (0, getFormattedExpandLabel_1.getFormattedExpandRestLabel)((0, slice_1["default"])(__spreadArray([], events, true), SIXTH_ELEMENT_INDEX)); }, [events]);
-    var renderEvent = react_1["default"].useCallback(function (event, eventIndex) { return (react_1["default"].createElement(Tooltip_1["default"], { key: eventIndex, position: 'rightBottom', content: event.title, className: bem.element('tooltip') },
-        react_1["default"].createElement("span", { key: eventIndex, className: bem.element('event') },
+    var renderEvent = react_1["default"].useCallback(function (event, eventIndex) { return (react_1["default"].createElement(Tooltip_1["default"], { key: event.id, position: 'rightBottom', content: event.title, className: bem.element('tooltip') },
+        react_1["default"].createElement("span", { className: bem.element('event'), "data-eventid": event.id },
             react_1["default"].createElement("span", { className: bem.element('event-dot'), style: { backgroundColor: event.color } }),
             event.title))); }, [bem]);
+    var handleEventClick = react_1["default"].useCallback(function (event) {
+        var eventFromHour = event.target;
+        var eventId = (0, get_1["default"])(eventFromHour, 'dataset.eventid');
+        if (!eventId) {
+            return;
+        }
+        var requiredEvent = events.filter(function (hourEvent) { return hourEvent.id === Number(eventId); })[0];
+        props.openEditModal(requiredEvent);
+    }, [events, props]);
     return (react_1["default"].createElement("div", { className: bem(bem.block({
             outOfRange: day.outOfRange,
             isToday: day.isToday
-        })), ref: monthDayRef },
+        })), ref: monthDayRef, onClick: handleEventClick, onContextMenu: function (e) {
+            e.preventDefault();
+            props.openCreateModal();
+        } },
         react_1["default"].createElement("div", { className: bem.element('wrapper') },
             react_1["default"].createElement("span", { className: bem.element('number') }, day.dayNumber.toString()),
             react_1["default"].createElement("div", { className: bem.element('content', {

package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.scss

@@ -106,6 +106,7 @@ $month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
             height: 6px;
             margin-right: 8px;
             border-radius: 100px;
+            pointer-events: none;
         }
     }
 

package/content/CalendarSystem/WeekGrid/WeekGrid.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
 import './WeekGrid.scss';
 interface IWeekGridProps {
-    onClickHour: () => void;
     currentWeekDays: IDay[];
     allHours: string[];
     getEventsFromDate: (dateFromDay: Date, isMonth: boolean) => IEvent[];
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: () => void;
 }
 declare function WeekGrid(props: IWeekGridProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof WeekGrid>;

package/content/CalendarSystem/WeekGrid/WeekGrid.js

@@ -10,8 +10,8 @@ var WeekHour_1 = __importDefault(require("./views/WeekHour"));
 require("./WeekGrid.scss");
 function WeekGrid(props) {
     var bem = (0, useBem_1["default"])('WeekGrid');
-    var currentWeekDays = props.currentWeekDays, onClickHour = props.onClickHour, getEventsFromDate = props.getEventsFromDate;
-    var renderWeekHours = react_1["default"].useCallback(function (hour) { return currentWeekDays.map(function (dayOfWeek, dayOfWeekIndex) { return (react_1["default"].createElement(WeekHour_1["default"], { hour: hour, getEventsFromDate: getEventsFromDate, key: dayOfWeekIndex, dayOfWeek: dayOfWeek })); }); }, [currentWeekDays, getEventsFromDate]);
+    var currentWeekDays = props.currentWeekDays, getEventsFromDate = props.getEventsFromDate;
+    var renderWeekHours = react_1["default"].useCallback(function (hour) { return currentWeekDays.map(function (dayOfWeek, dayOfWeekIndex) { return (react_1["default"].createElement(WeekHour_1["default"], { hour: hour, getEventsFromDate: getEventsFromDate, key: dayOfWeekIndex, dayOfWeek: dayOfWeek, openEditModal: props.openEditModal, openCreateModal: props.openCreateModal })); }); }, [currentWeekDays, getEventsFromDate, props.openCreateModal, props.openEditModal]);
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement("div", { className: bem.element('content') },
             react_1["default"].createElement("div", { className: bem.element('hours-time') }, props.allHours.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('hours-time-item') }, hour)); })),

package/content/CalendarSystem/WeekGrid/views/WeekHour/WeekHour.d.ts

@@ -5,6 +5,8 @@ interface IWeekHourProps {
     dayOfWeek: IDay;
     getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
     hour: string;
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: () => void;
 }
 export default function WeekHour(props: IWeekHourProps): JSX.Element;
 export {};

package/content/CalendarSystem/WeekGrid/views/WeekHour/WeekHour.js

@@ -19,6 +19,7 @@ var calendar_1 = require("@steroidsjs/core/utils/calendar");
 var form_1 = require("@steroidsjs/core/ui/form");
 var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
 var slice_1 = __importDefault(require("lodash-es/slice"));
+var get_1 = __importDefault(require("lodash-es/get"));
 var Tooltip_1 = __importDefault(require("@steroidsjs/core/ui/layout/Tooltip/Tooltip"));
 var useExpandClickAway_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/hooks/useExpandClickAway"));
 var getFormattedExpandLabel_1 = require("../../../../../utils/getFormattedExpandLabel");
@@ -45,17 +46,29 @@ function WeekHour(props) {
         };
     }, [props]), events = _b.events, hasOneEvent = _b.hasOneEvent, hasTwoEvents = _b.hasTwoEvents, hasTreeEvents = _b.hasTreeEvents, hasMoreThanFourEvents = _b.hasMoreThanFourEvents;
     var renderEvent = react_1["default"].useCallback(function (event, eventIndex) { return (react_1["default"].createElement(Tooltip_1["default"], { position: 'rightBottom', content: event.title, className: bem.element('tooltip'), key: eventIndex },
-        react_1["default"].createElement("div", { className: bem.element('hour-event'), style: { backgroundColor: event.color }, title: event.title },
+        react_1["default"].createElement("div", { className: bem.element('hour-event'), style: { backgroundColor: event.color }, title: event.title, "data-eventid": event.id },
             react_1["default"].createElement("span", { className: bem.element('hour-event-title') }, event.title),
             react_1["default"].createElement("span", { className: bem.element('hour-event-time') }, (0, calendar_1.convertDate)(event.date, null, 'HH:mm'))))); }, [bem]);
     var formattedExpandLabel = react_1["default"].useMemo(function () { return (0, getFormattedExpandLabel_1.getFormattedExpandRestLabel)((0, slice_1["default"])(__spreadArray([], events, true), FOURTH_ELEMENT_INDEX)); }, [events]);
+    var handleEventClick = react_1["default"].useCallback(function (event) {
+        var eventFromHour = event.target;
+        var eventId = (0, get_1["default"])(eventFromHour, 'dataset.eventid');
+        if (!eventId) {
+            return;
+        }
+        var requiredEvent = events.filter(function (hourEvent) { return hourEvent.id === Number(eventId); })[0];
+        props.openEditModal(requiredEvent);
+    }, [events, props]);
     return (react_1["default"].createElement("div", { className: bem.element('hour', {
             isToday: props.dayOfWeek.isToday,
             hasOneEvent: hasOneEvent,
             hasTwoEvents: hasTwoEvents,
             hasTreeEvents: hasTreeEvents,
             isExpanded: isExpanded
-        }), ref: weekHourRef },
+        }), ref: weekHourRef, onClick: handleEventClick, onContextMenu: function (e) {
+            e.preventDefault();
+            props.openCreateModal();
+        } },
         events.map(renderEvent),
         hasMoreThanFourEvents && !isExpanded && (react_1["default"].createElement(form_1.Button, { link: true, className: bem.element('expand-button'), onClick: function () { return setIsExpanded(true); } }, formattedExpandLabel))));
 }

package/content/CalendarSystem/WeekGrid/views/WeekHour/WeekHour.scss

@@ -17,6 +17,7 @@
             overflow: hidden;
             border-radius: 4px;
             max-height: 78px;
+            cursor: pointer;
 
             &:nth-child(n+4) {
                 display: none;
@@ -29,6 +30,7 @@
                 color: #312c3a;
 
                 padding-right: 36px;
+                pointer-events: none;
             }
 
             &-time {
@@ -39,6 +41,8 @@
                 font-size: variables.$font-size-xs;
                 font-weight: variables.$font-weight-sm;
                 line-height: variables.$line-height-xs;
+                pointer-events: none;
+
             }
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.109",
+    "version": "3.0.0-beta.110",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.93",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.94",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",