@steroidsjs/bootstrap 3.0.0-beta.107 → 3.0.0-beta.108

package/content/CalendarSystem/MonthGrid/MonthGrid.js

@@ -28,23 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var react_1 = __importStar(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
-var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
 require("./MonthGrid.scss");
+var MonthDay_1 = __importDefault(require("./views/MonthDay"));
 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) {
-            var _a;
-            return (react_1["default"].createElement("div", { key: dayIndex, className: bem.element('day', {
-                    outOfRange: day.outOfRange,
-                    isToday: day.isToday
-                }) },
-                react_1["default"].createElement("div", { className: bem.element('day-wrapper') },
-                    react_1["default"].createElement("span", { className: bem.element('day-number') }, day.dayNumber.toString()),
-                    react_1["default"].createElement("div", { className: bem.element('day-content') }, (_a = props.getEventsFromDate(day.date, CalendarType_1["default"].MONTH)) === null || _a === void 0 ? void 0 : _a.map(function (event, eventIndex) { return (react_1["default"].createElement("span", { key: eventIndex, className: bem.element('day-event'), title: event.title },
-                        react_1["default"].createElement("span", { className: bem.element('day-event-dot'), style: { backgroundColor: event.color } }),
-                        event.title)); })))));
-        }))));
+        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 })); }))));
 }
 exports["default"] = (0, react_1.memo)(MonthGrid);

package/content/CalendarSystem/MonthGrid/MonthGrid.scss

@@ -1,23 +1,14 @@
 @use "style/variables";
 
 :root {
-    --month-day-background-color: #ffffff;
-    --month-day-out-of-range-color: #f9fcff;
     --month-day-color-text: #000000;
-    --month-day-out-of-range-color-text: rgba(0, 0, 0, 0.3);
 }
 
 html[data-theme="dark"] {
-    --month-day-background-color: #333646;
-    --month-day-out-of-range-color: #161b20;
     --month-day-color-text: #ffffff;
-    --month-day-out-of-range-color-text: rgba(255, 255, 255, 0.3);
 }
 
-$month-day-background-color: var(--month-day-background-color);
-$month-day-out-of-range-color: var(--month-day-out-of-range-color);
 $month-day-color-text: var(--month-day-color-text);
-$month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
 
 .MonthGrid {
     display: flex;
@@ -31,7 +22,7 @@ $month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
         height: 90%;
         gap: 5px;
         grid-template-columns: repeat(7, 1fr);
-        grid-template-rows: repeat(6, 1fr);
+        grid-template-rows: repeat(6, auto);
     }
 
     &__week-days {
@@ -47,85 +38,4 @@ $month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
             padding: 8px 10px;
         }
     }
-
-    &__day {
-        $dayRoot: &;
-        padding: 4px 8px 0px 8px;
-        min-height: 84px;
-        border-radius: variables.$radius-large;
-        background-color: $month-day-background-color;
-
-        &-wrapper {
-            display: block;
-            text-align: right;
-        }
-
-        &-number {
-            position: relative;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            font-size: variables.$font-size-14;
-            font-weight: variables.$font-weight-sm;
-            line-height: variables.$line-height-18;
-            color: $month-day-color-text;
-            width: 24px;
-            height: 24px;
-        }
-
-        &_outOfRange {
-            background-color: $month-day-out-of-range-color;
-
-            #{$dayRoot}-number {
-                color: $month-day-out-of-range-color-text;
-            }
-        }
-
-        &_isToday {
-            #{$dayRoot}-number {
-                &::before {
-                    position: absolute;
-                    content: "";
-                    border: 1px solid variables.$primary;
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    border-radius: variables.$radius-small;
-                }
-                color: variables.$primary;
-            }
-        }
-
-        &-content {
-            overflow: hidden;
-            display: flex;
-            flex-flow: column nowrap;
-            gap: 1px;
-        }
-
-        &-event {
-            position: relative;
-            display: inline-block;
-            width: 100%;
-            font-size: variables.$font-size-xs;
-            font-weight: variables.$font-weight-sm;
-            line-height: variables.$line-height-xs;
-            color: variables.$text-color;
-
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            cursor: pointer;
-            text-align: left;
-
-
-            &-dot {
-                display: inline-block;
-                width: 6px;
-                height: 6px;
-                margin-right: 8px;
-                border-radius: 100px;
-            } 
-        }
-    }
 }

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

@@ -0,0 +1,9 @@
+import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
+import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import './MonthDay.scss';
+interface IMonthDayProps {
+    day: IDay;
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+}
+export default function MonthDay(props: IMonthDayProps): JSX.Element;
+export {};

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

@@ -0,0 +1,57 @@
+"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;
+/* eslint-disable @typescript-eslint/no-shadow */
+var react_1 = __importDefault(require("react"));
+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 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;
+    var _a = (0, useExpandClickAway_1["default"])(), isExpanded = _a.isExpanded, setIsExpanded = _a.setIsExpanded, monthDayRef = _a.triggerRef;
+    var _b = react_1["default"].useMemo(function () {
+        var callingDate = new Date(props.day.date);
+        var events = getEventsFromDate(callingDate, CalendarType_1["default"].MONTH);
+        var dayHasMoreThanSixEvents = events.length > 6;
+        return {
+            events: events,
+            hasSixEvents: dayHasMoreThanSixEvents
+        };
+    }, [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') },
+            react_1["default"].createElement("span", { className: bem.element('event-dot'), style: { backgroundColor: event.color } }),
+            event.title))); }, [bem]);
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            outOfRange: day.outOfRange,
+            isToday: day.isToday
+        })), ref: monthDayRef },
+        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', {
+                    isExpanded: isExpanded
+                }) },
+                events.map(renderEvent),
+                hasSixEvents && !isExpanded && (react_1["default"].createElement(form_1.Button, { link: true, className: bem.element('expand-button'), onClick: function () { return setIsExpanded(true); } }, formattedExpandLabel))))));
+}
+exports["default"] = MonthDay;

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

@@ -0,0 +1,125 @@
+@use "style/variables";
+@use "../../../../../scss/mixins";
+
+:root {
+    --month-day-background-color: #ffffff;
+    --month-day-out-of-range-color: #f9fcff;
+    --month-day-color-text: #000000;
+    --month-day-out-of-range-color-text: rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="dark"] {
+    --month-day-background-color: #333646;
+    --month-day-out-of-range-color: #161b20;
+    --month-day-color-text: #ffffff;
+    --month-day-out-of-range-color-text: rgba(255, 255, 255, 0.3);
+}
+
+$month-day-background-color: var(--month-day-background-color);
+$month-day-out-of-range-color: var(--month-day-out-of-range-color);
+$month-day-color-text: var(--month-day-color-text);
+$month-day-out-of-range-color-text: var(--month-day-out-of-range-color-text);
+
+.MonthDay {
+    $dayRoot: &;
+    padding: 4px 8px 0px 8px;
+    min-height: 80px;
+    border-radius: variables.$radius-large;
+    background-color: $month-day-background-color;
+
+    &__wrapper {
+        display: block;
+        text-align: right;
+    }
+
+    &__number {
+        position: relative;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        font-size: variables.$font-size-14;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-18;
+        color: $month-day-color-text;
+        width: 24px;
+        height: 24px;
+    }
+
+    &_outOfRange {
+        background-color: $month-day-out-of-range-color;
+
+        #{$dayRoot}__number {
+            color: $month-day-out-of-range-color-text;
+        }
+    }
+
+    &_isToday {
+        #{$dayRoot}__number {
+            &::before {
+                position: absolute;
+                content: "";
+                border: 1px solid variables.$primary;
+                display: block;
+                width: 100%;
+                height: 100%;
+                border-radius: variables.$radius-small;
+            }
+            color: variables.$primary;
+        }
+    }
+
+    &__content {
+        overflow: hidden;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 1px;
+
+        &_isExpanded {
+            #{$dayRoot}__event {
+                display: block;
+            }
+        }
+    }
+
+    &__event {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        font-size: variables.$font-size-xs;
+        font-weight: variables.$font-weight-sm;
+        line-height: variables.$line-height-xs;
+        color: variables.$text-color;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        cursor: pointer;
+        text-align: left;
+
+        &:nth-child(n + 7) {
+            display: none;
+        }
+
+        &-dot {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            margin-right: 8px;
+            border-radius: 100px;
+        }
+    }
+
+    &__content_isExpanded {
+        #{$dayRoot}__event {
+            display: block;
+        }
+    }
+
+    &__tooltip {
+        @include mixins.calendar-tooltip();
+    }
+
+    &__expand-button {
+        @include mixins.expand-button();
+    }
+}

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

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

package/content/CalendarSystem/MonthGrid/views/MonthDay/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 MonthDay_1 = __importDefault(require("./MonthDay"));
+exports["default"] = MonthDay_1["default"];

package/content/CalendarSystem/WeekGrid/WeekGrid.js

@@ -11,7 +11,7 @@ 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"], { parentBem: bem, hour: hour, getEventsFromDate: getEventsFromDate, key: dayOfWeekIndex, dayOfWeek: dayOfWeek })); }); }, [bem, currentWeekDays, 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]);
     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/WeekGrid.scss

@@ -70,7 +70,7 @@ $calendar-today-border-style: 1px solid $calendar-system-today-border-color;
         &-grid {
             width: auto;
             display: grid;
-            grid-template-rows: repeat(24, 1fr);
+            grid-template-rows: repeat(24, auto);
 
             &-row {
                 display: grid;
@@ -79,11 +79,11 @@ $calendar-today-border-style: 1px solid $calendar-system-today-border-color;
                 min-height: 80px;
 
                 //Borders
-                &:first-child #{$root}__hour {
+                &:first-child .WeekHour__hour {
                     border-top: $calendar-border-style;
                 }
 
-                #{$root}__hour {
+                .WeekHour__hour {
                     border-right: $calendar-border-style;
                     border-bottom: $calendar-border-style;
 
@@ -92,11 +92,11 @@ $calendar-today-border-style: 1px solid $calendar-system-today-border-color;
                     }
                 }
 
-                &:first-child #{$root}__hour_isToday {
+                &:first-child .WeekHour__hour_isToday {
                     border-top: $calendar-today-border-style;
                 }
 
-                #{$root}__hour_isToday {
+                .WeekHour__hour_isToday {
                     background-color: $calendar-system-today-background-color;
                     border-right: $calendar-today-border-style;
                     border-bottom: $calendar-today-border-style;
@@ -151,75 +151,4 @@ $calendar-today-border-style: 1px solid $calendar-system-today-border-color;
             }
         }
     }
-
-    &__hour {
-        $rootHour: &;
-        display: flex;
-        flex-flow: column nowrap;
-        gap: 1px;
-        max-height: 80px;
-
-        &-event {
-            position: relative;
-            padding: 4px 8px;
-            overflow: hidden;
-            border-radius: 4px;
-
-            &-title {
-                font-size: variables.$font-size-sm;
-                font-weight: variables.$font-weight-sm;
-                line-height: variables.$line-height-sm;
-                color: #312c3a;
-
-                padding-right: 36px;
-            }
-
-            &-time {
-                top: 4px;
-                right: 8px;
-                position: absolute;
-                display: inline-block;
-                font-size: variables.$font-size-xs;
-                font-weight: variables.$font-weight-sm;
-                line-height: variables.$line-height-xs;
-            }
-        }
-
-        &_hasOneEvent {
-            #{$rootHour}-event-title {
-                -webkit-line-clamp: 4; /* Число отображаемых строк */
-                display: -webkit-box; /* Включаем флексбоксы */
-                -webkit-box-orient: vertical; /* Вертикальная ориентация */
-                overflow: hidden;
-            }
-        }
-
-        &_hasTwoEvents {
-            #{$rootHour}-event-title {
-                -webkit-line-clamp: 2; /* Число отображаемых строк */
-                display: -webkit-box; /* Включаем флексбоксы */
-                -webkit-box-orient: vertical; /* Вертикальная ориентация */
-                overflow: hidden;
-            }
-        }
-
-        &_hasTreeEvents {
-            #{$rootHour}-event-title {
-                -webkit-line-clamp: 1; /* Число отображаемых строк */
-                display: -webkit-box; /* Включаем флексбоксы */
-                -webkit-box-orient: vertical; /* Вертикальная ориентация */
-                overflow: hidden;
-            }
-
-            #{$rootHour}-event { 
-                max-height: 18px;
-                padding: 0 8px;
-            }
-
-            #{$rootHour}-event-time { 
-                top: 0;
-                right: 8px
-            }
-        }
-    }
 }

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

@@ -1,4 +1,3 @@
-import { IBem } from '@steroidsjs/core/hooks/useBem';
 import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
 import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
 import './WeekHour.scss';
@@ -6,7 +5,6 @@ interface IWeekHourProps {
     dayOfWeek: IDay;
     getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
     hour: string;
-    parentBem: IBem;
 }
 export default function WeekHour(props: IWeekHourProps): JSX.Element;
 export {};

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

@@ -1,38 +1,62 @@
 "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;
+/* eslint-disable @typescript-eslint/no-shadow */
 var react_1 = __importDefault(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 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 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");
 require("./WeekHour.scss");
+var FOURTH_ELEMENT_INDEX = 3;
 function WeekHour(props) {
     var bem = (0, useBem_1["default"])('WeekHour');
-    var parentBem = props.parentBem;
-    var _a = react_1["default"].useState(false), isExpanded = _a[0], setIsExpanded = _a[1];
-    var events = react_1["default"].useMemo(function () {
+    var _a = (0, useExpandClickAway_1["default"])(), isExpanded = _a.isExpanded, setIsExpanded = _a.setIsExpanded, weekHourRef = _a.triggerRef;
+    var _b = react_1["default"].useMemo(function () {
         var callingDate = new Date(props.dayOfWeek.date);
         var timeArray = props.hour.replace(':', '').split('');
         callingDate.setHours(Number(timeArray[0] + timeArray[1]), 0, 0, 0);
-        return props.getEventsFromDate(callingDate, CalendarType_1["default"].WEEK);
-    }, [props]);
-    var getFormattedExpandLabel = react_1["default"].useCallback(function () { return "".concat(__('Показать ещё'), " +").concat(events.length - 3); }, [events.length]);
-    var hasOneEvent = events.length <= 1;
-    var hasTwoEvents = events.length === 2;
-    var hasTreeEvents = events.length >= 3;
-    return (react_1["default"].createElement("div", { className: parentBem.element('hour', {
+        var events = props.getEventsFromDate(callingDate, CalendarType_1["default"].WEEK);
+        var hasOneEvent = events.length === 1;
+        var hasTwoEvents = events.length === 2;
+        var hasMoreThanTreeEvents = events.length >= 3;
+        var hasMoreThanFourEvents = events.length > 3;
+        return {
+            events: events,
+            hasOneEvent: hasOneEvent,
+            hasTwoEvents: hasTwoEvents,
+            hasTreeEvents: hasMoreThanTreeEvents,
+            hasMoreThanFourEvents: hasMoreThanFourEvents
+        };
+    }, [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("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]);
+    return (react_1["default"].createElement("div", { className: bem.element('hour', {
             isToday: props.dayOfWeek.isToday,
             hasOneEvent: hasOneEvent,
             hasTwoEvents: hasTwoEvents,
             hasTreeEvents: hasTreeEvents,
             isExpanded: isExpanded
-        }) },
-        events.map(function (event, eventIndex) { return (react_1["default"].createElement("div", { key: eventIndex, className: parentBem.element('hour-event'), style: { backgroundColor: event.color }, title: event.title },
-            react_1["default"].createElement("span", { className: parentBem.element('hour-event-title') }, event.title),
-            react_1["default"].createElement("span", { className: parentBem.element('hour-event-time') }, (0, calendar_1.convertDate)(event.date, null, 'HH:mm')))); }),
-        hasTreeEvents && events.length > 3 && (react_1["default"].createElement(form_1.Button, { link: true, className: bem.element('expand-button') }, getFormattedExpandLabel()))));
+        }), ref: weekHourRef },
+        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))));
 }
 exports["default"] = WeekHour;