@steroidsjs/bootstrap 3.0.0-beta.12 → 3.0.0-beta.121

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
+import './WeekGrid.scss';
+interface IWeekGridProps {
+    currentWeekDays: IDay[];
+    allHours: string[];
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: (eventInitialDay?: IDay) => void;
+}
+declare function WeekGrid(props: IWeekGridProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof WeekGrid>;
+export default _default;

package/content/CalendarSystem/WeekGrid/WeekGrid.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var WeekHour_1 = __importDefault(require("./views/WeekHour"));
+require("./WeekGrid.scss");
+function WeekGrid(props) {
+    var bem = (0, useBem_1["default"])('WeekGrid');
+    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)); })),
+            react_1["default"].createElement("div", { className: bem.element('table') },
+                react_1["default"].createElement("div", { className: bem.element('table-heading') }, currentWeekDays.map(function (weekDay, weekDayIndex) { return (react_1["default"].createElement(Text_1["default"], { key: weekDayIndex, className: bem.element('day', {
+                        isToday: weekDay.isToday
+                    }) },
+                    react_1["default"].createElement("span", { className: bem.element('day-wrapper') }, weekDay.formattedDisplay))); })),
+                react_1["default"].createElement("div", { className: bem.element('table-grid') }, props.allHours.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('table-grid-row') }, renderWeekHours(hour))); }))))));
+}
+exports["default"] = react_1["default"].memo(WeekGrid);

package/content/CalendarSystem/WeekGrid/WeekGrid.scss

@@ -0,0 +1,154 @@
+@use "style/variables";
+
+:root {
+    --calendar-system-hour-border-color: #dbe2e6;
+    --calendar-system-time-background-color: #fff;
+    --calendar-system-today-background-color: #dbe2e6;
+    --calendar-system-today-border-color: #cbd5db;
+}
+
+html[data-theme="dark"] {
+    --calendar-system-hour-border-color: #333646;
+    --calendar-system-time-background-color: #4b4e5e;
+    --calendar-system-today-background-color: #191b1f;
+    --calendar-system-today-border-color: #333646;
+    --calendar-system-today-day-background-color: #651fff;
+}
+
+$calendar-system-hour-border-color: var(--calendar-system-hour-border-color);
+$calendar-system-time-background-color: var(--calendar-system-time-background-color);
+$calendar-system-today-background-color: var(--calendar-system-today-background-color);
+$calendar-system-today-border-color: var(--calendar-system-today-border-color);
+
+$calendar-border-style: 1px solid $calendar-system-hour-border-color;
+$calendar-today-border-style: 1px solid $calendar-system-today-border-color;
+
+.WeekGrid {
+    $root: &;
+    overflow-y: scroll;
+    margin-top: 11px;
+
+    @include variables.scrollWrapper(568px, 20px, variables.$scroll-thumb-color, variables.$scroll-track-color);
+
+    &__content {
+        display: flex;
+
+        #{$root}__hours-time {
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: space-around;
+            margin-right: 8px;
+
+            &-item {
+                width: 40px;
+                height: 24px;
+                border-radius: variables.$radius-small;
+                background-color: $calendar-system-time-background-color;
+                color: variables.$custom-text-color-base;
+                font-size: variables.$font-size-xs;
+                font-weight: variables.$font-weight-sm;
+                line-height: variables.$line-height-xs;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
+
+    &__table {
+        display: flex;
+        flex-flow: column nowrap;
+        width: calc(100% - 48px);
+
+        &-heading {
+            display: grid;
+            max-height: 100%;
+            grid-template-columns: repeat(7, 1fr);
+        }
+
+        &-grid {
+            width: auto;
+            display: grid;
+            grid-template-rows: repeat(24, auto);
+
+            &-row {
+                display: grid;
+                height: auto;
+                grid-template-columns: repeat(7, 1fr);
+                min-height: 80px;
+
+                //Borders
+                &:first-child .WeekHour__hour {
+                    border-top: $calendar-border-style;
+                }
+
+                .WeekHour__hour {
+                    border-right: $calendar-border-style;
+                    border-bottom: $calendar-border-style;
+
+                    &:first-child {
+                        border-left: $calendar-border-style;
+                    }
+                }
+
+                &:first-child .WeekHour__hour_isToday {
+                    border-top: $calendar-today-border-style;
+                }
+
+                .WeekHour__hour_isToday {
+                    background-color: $calendar-system-today-background-color;
+                    border-right: $calendar-today-border-style;
+                    border-bottom: $calendar-today-border-style;
+
+                    &:first-child {
+                        border-left: $calendar-today-border-style;
+                    }
+                }
+            }
+        }
+    }
+
+    &__hours-time {
+        margin-top: 32px;
+    }
+
+    &__day {
+        $dayRoot: &;
+
+        font-size: variables.$font-size-sm;
+        font-weight: variables.$font-weight-md;
+        line-height: variables.$line-height-sm;
+        padding: 8px 10px;
+        margin-bottom: 0;
+        display: flex;
+        justify-content: flex-end;
+
+        &_isToday {
+            padding: 4px 10px;
+            color: variables.$white;
+
+            #{$dayRoot}-wrapper {
+                position: relative;
+                padding: 4px;
+                background-color: variables.$primary;
+                border-radius: 200px;
+
+                &::before {
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    border: 3px solid variables.$primary-light;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    border-radius: inherit;
+                    transform: translate(-3px, -3px);
+                }
+            }
+        }
+    }
+}

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

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

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

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

@@ -0,0 +1,12 @@
+import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
+import './WeekHour.scss';
+interface IWeekHourProps {
+    dayOfWeek: IDay;
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+    hour: string;
+    openEditModal: (event: IEvent) => void;
+    openCreateModal: (eventInitialDay?: IDay) => void;
+}
+export default function WeekHour(props: IWeekHourProps): JSX.Element;
+export {};

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

@@ -0,0 +1,79 @@
+"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 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 cloneDeep_1 = __importDefault(require("lodash-es/cloneDeep"));
+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 _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);
+        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, "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]);
+    var handleOnContextMenuCreateClick = react_1["default"].useCallback(function (e) {
+        e.preventDefault();
+        var day = (0, cloneDeep_1["default"])(props.dayOfWeek);
+        day.date.setHours(Number((0, calendar_1.convertDate)(props.hour, 'HH:mm', 'H')), 0, 0, 0);
+        props.openCreateModal(day);
+    }, [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, onClick: handleEventClick, onContextMenu: handleOnContextMenuCreateClick },
+        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;

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

@@ -0,0 +1,108 @@
+@use "style/variables";
+@use "../../../../../scss/mixins";
+
+.WeekHour {
+    height: max-content;
+
+    &__hour {
+        $rootHour: &;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 1px;
+        min-height: 80px;
+        
+        &-event {
+            position: relative;
+            padding: 4px 8px;
+            overflow: hidden;
+            border-radius: 4px;
+            max-height: 78px;
+            cursor: pointer;
+
+            &:nth-child(n+4) {
+                display: none;
+            }
+
+            &-title {
+                font-size: variables.$font-size-sm;
+                font-weight: variables.$font-weight-sm;
+                line-height: variables.$line-height-sm;
+                color: #312c3a;
+
+                padding-right: 36px;
+                pointer-events: none;
+            }
+
+            &-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;
+                pointer-events: none;
+
+            }
+        }
+
+        &_hasOneEvent {
+            #{$rootHour}-event-title {
+                -webkit-line-clamp: 4; /* Число отображаемых строк */
+                display: -webkit-box; /* Включаем флексбоксы */
+                -webkit-box-orient: vertical; /* Вертикальная ориентация */
+                overflow: hidden;
+            }
+
+            #{$rootHour}-event {
+                max-height: 78px;
+            }
+        }
+
+        &_hasTwoEvents {
+            #{$rootHour}-event-title {
+                -webkit-line-clamp: 2; /* Число отображаемых строк */
+                display: -webkit-box; /* Включаем флексбоксы */
+                -webkit-box-orient: vertical; /* Вертикальная ориентация */
+                overflow: hidden;
+            }
+
+            #{$rootHour}-event {
+                max-height: 38px;
+            }
+        }
+
+        &_hasTreeEvents {
+            #{$rootHour}-event-title {
+                -webkit-line-clamp: 1; /* Число отображаемых строк */
+                display: -webkit-box; /* Включаем флексбоксы */
+                -webkit-box-orient: vertical; /* Вертикальная ориентация */
+                overflow: hidden;
+            }
+
+            #{$rootHour}-event {
+                max-height: 26px;
+                padding: 0 8px;
+            }
+
+            #{$rootHour}-event-time {
+                top: 0;
+                right: 8px;
+            }
+        }
+
+        &_isExpanded #{$rootHour}-event  { 
+            &:nth-child(n+4) {
+                display: block;
+            }
+        }
+    }
+
+    &__expand-button {
+        @include mixins.expand-button();
+    }
+
+    &__tooltip {
+        @include mixins.calendar-tooltip();
+    }
+}

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

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

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

package/content/Card/CardView.js

@@ -1,27 +1,50 @@
 "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;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var form_1 = require("@steroidsjs/core/ui/form");
+var Avatar_1 = __importDefault(require("@steroidsjs/core/ui/content/Avatar/Avatar"));
+var nav_1 = require("@steroidsjs/core/ui/nav");
+var content_1 = require("@steroidsjs/core/ui/content");
 function CardView(props) {
     var bem = (0, hooks_1.useBem)('CardView');
-    return (react_1["default"].createElement("div", { className: bem(bem.block({
-            orientation: props.orientation,
-            shape: props.shape,
-            color: props.color,
-            border: props.borderColor
-        }), props.className), style: props.style },
-        props.header && (react_1["default"].createElement("div", { className: bem.element('header') }, props.header)),
+    var hasContent = !!(props.title || props.buttons || props.links || props.description || props.children);
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
+        props.header && (react_1["default"].createElement("div", { className: bem.element('header', {
+                withoutCover: !props.cover && hasContent
+            }) },
+            react_1["default"].createElement("div", { className: bem.element('header-data') },
+                props.header.avatar && (react_1["default"].createElement(Avatar_1["default"], __assign({}, props.header.avatar, { className: bem(props.header.avatar.className, bem.element('header-avatar')) }))),
+                react_1["default"].createElement("div", { className: bem.element('header-text-content') },
+                    react_1["default"].createElement("h3", { className: bem.element('header-head') }, props.header.head),
+                    react_1["default"].createElement("p", { className: bem.element('header-subhead') }, props.header.subhead))),
+            props.header.menu && (react_1["default"].createElement("div", { className: bem.element('header-menu'), role: 'button' },
+                react_1["default"].createElement(content_1.Menu, __assign({}, props.header.menu)))))),
         props.cover && (react_1["default"].createElement("div", { className: bem.element('cover') },
-            react_1["default"].createElement("img", { src: props.cover, alt: 'cover-img' }))),
-        react_1["default"].createElement("div", { className: bem.element('content') },
-            props.title && (react_1["default"].createElement("div", { className: bem.element('title') }, props.title)),
+            react_1["default"].createElement("img", { src: props.cover, alt: 'Card cover img' }))),
+        hasContent && (react_1["default"].createElement("div", { className: bem.element('content') },
+            props.title && (react_1["default"].createElement("h3", { className: bem.element('title') }, props.title)),
             react_1["default"].createElement("div", { className: bem.element('content-inner') },
-                react_1["default"].createElement(react_1["default"].Fragment, null,
-                    props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description)),
-                    props.children))),
-        props.footer && (react_1["default"].createElement("div", { className: bem.element('footer') }, props.footer))));
+                props.description && (react_1["default"].createElement("p", { className: bem.element('description') }, props.description)),
+                props.buttons && (react_1["default"].createElement("div", { className: bem.element('buttons') }, props.buttons.map(function (button, buttonIndex) { return (react_1["default"].createElement(form_1.Button, __assign({}, button, { key: buttonIndex }))); }))),
+                props.links && (react_1["default"].createElement("div", { className: bem.element('links') }, props.links.map(function (link, linkIndex) { return (react_1["default"].createElement(nav_1.Link, __assign({}, link, { key: linkIndex }))); }))),
+                props.children))),
+        props.footer && (react_1["default"].createElement("div", { className: bem.element('footer') },
+            react_1["default"].createElement("h3", { className: bem.element('footer-head') }, props.footer.head),
+            react_1["default"].createElement("p", { className: bem.element('footer-subhead') }, props.footer.subhead)))));
 }
 exports["default"] = CardView;