@steroidsjs/bootstrap 3.0.0-beta.98 → 3.0.0

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/Chart/ChartView.js

@@ -16,6 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var form_1 = require("@steroidsjs/core/ui/form");
+var nav_1 = require("@steroidsjs/core/ui/nav");
 var DEFAULT_AXIS_PARAMS = {
     tickSize: 5,
     tickPadding: 5,
@@ -41,7 +44,14 @@ function ChartView(props) {
     var bem = (0, hooks_1.useBem)('ChartView');
     var ChartComponent = props.chartComponent;
     var defaultChartConfig = (props.useDefaultLineChartConfig && DEFAULT_LINE_CHART_CONFIG) || {};
-    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: __assign({ height: "".concat(props.height, "px") }, props.style) },
-        react_1["default"].createElement(ChartComponent, __assign({ data: props.data }, defaultChartConfig, props.config))));
+    var customChartHeightVariable = { '--chart-custom-height': "".concat(props.chartHeight, "px") };
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: __assign(__assign(__assign({}, props.style), { height: "".concat(props.wrapperHeight, "px") }), customChartHeightVariable) },
+        props.title && (react_1["default"].createElement(typography_1.Title, { type: "h3", content: props.title, className: bem.element('title') })),
+        react_1["default"].createElement("div", { className: bem.element('controls') },
+            props.checkboxes && (react_1["default"].createElement(form_1.CheckboxListField, __assign({}, props.checkboxes))),
+            props.buttonGroup && (react_1["default"].createElement(nav_1.ButtonGroup, __assign({}, props.buttonGroup)))),
+        react_1["default"].createElement(ChartComponent, __assign({ style: {
+                height: "".concat(props.chartHeight, "px !important")
+            }, data: props.data }, defaultChartConfig, props.config))));
 }
 exports["default"] = ChartView;

package/content/Chart/ChartView.scss

@@ -1,8 +1,39 @@
 @use "../../scss/variables";
 
+:root {
+    --chart-grid-color:rgb(221, 221, 221);
+}
+
+html[data-theme="dark"] {
+    --chart-grid-color: rgba(255, 255, 255, 0.10);
+}
+
+$chart-grid-color: var(--chart-grid-color);
+
 .ChartView {
+    height: auto;
+    &__title {
+        font-size: variables.$font-size-lg;
+        font-weight: variables.$font-weight-lg;
+        line-height: variables.$line-height-lg;
+    }
+
+    &__controls {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+    }
+
+    &__controls + div {
+        height: var(--chart-custom-height) !important;
+    }
+
+    text {
+        font-family: variables.$font-family-nunito !important;
+        fill: variables.$text-color !important;
+    }
 
-  text {
-    fill: variables.$text-color !important;
-  }
-}
+    line {
+        stroke: $chart-grid-color !important;
+    }
+}

package/content/Chat/ChatView.d.ts

@@ -0,0 +1,2 @@
+import { IChatViewProps } from '@steroidsjs/core/ui/content/Chat/Chat';
+export default function ChatView(props: IChatViewProps): JSX.Element;

package/content/Chat/ChatView.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var BubblesDateGroup_1 = __importDefault(require("./views/BubblesDateGroup"));
+function ChatView(props) {
+    var bem = (0, useBem_1["default"])('ChatView');
+    // Scroll to bottom on new message
+    var wrapperRef = (0, react_1.useRef)(null);
+    var contentRef = (0, react_1.useRef)(null);
+    var prevContentHeightRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var wrapperHeight = wrapperRef.current.clientHeight;
+        var contentHeight = contentRef.current.clientHeight;
+        var wrapperScrollTop = wrapperRef.current.scrollTop;
+        if (!prevContentHeightRef.current || wrapperScrollTop === prevContentHeightRef.current - wrapperHeight) {
+            wrapperRef.current.scrollTo({
+                top: contentHeight - wrapperHeight,
+                left: 0,
+                behavior: prevContentHeightRef.current ? 'smooth' : 'auto'
+            });
+        }
+        prevContentHeightRef.current = contentHeight;
+    }, [props.groupedMessagesByDates]);
+    var renderChatScreen = (0, react_1.useCallback)(function () { return (react_1["default"].createElement("div", { className: bem.element('screen') },
+        react_1["default"].createElement("div", { className: bem.element('wrapper'), ref: wrapperRef },
+            react_1["default"].createElement("div", { className: bem.element('content'), ref: contentRef }, Object.entries(props.groupedMessagesByDates)
+                .map(function (_a) {
+                var date = _a[0], groupedMessages = _a[1];
+                return (react_1["default"].createElement(BubblesDateGroup_1["default"], { key: date, date: date, groupedMessages: groupedMessages, currentUser: props.currentUser }));
+            }))))); }, [bem, props.groupedMessagesByDates, props.currentUser]);
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        renderChatScreen(),
+        props.renderChatInput()));
+}
+exports["default"] = ChatView;

package/content/Chat/ChatView.scss

@@ -0,0 +1,59 @@
+@use "../../scss/variables";
+@use "../../scss/mixins";
+
+:root {
+  --chat-background-color: #fff;
+}
+
+html[data-theme="dark"] {
+  --chat-background-color: #101216;
+}
+
+$chat-background-color: var(--chat-background-color);
+$sidebar-scroll-thumb-color: var(--sidebar-scroll-thumb-color);
+$sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
+
+.ChatView {
+  display: flex;
+  flex-direction: column;
+
+  padding: 0 16px;
+  background-color: $chat-background-color;
+
+  &__screen {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: 10px;
+    position: relative;
+  }
+
+  &__wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin-right: -8px;
+    overflow-y: scroll;
+
+    @include mixins.scrollWrapper(#{700px}, 8px, $sidebar-scroll-thumb-color, $sidebar-scroll-track-color);
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      margin-bottom: 16px;
+      margin-top: 16px;
+    }
+
+    &:first-child {
+      margin-top: 15px;
+    }
+  }
+
+  &__content {
+    position: relative;
+    transition: all 6s;
+  }
+}

package/content/Chat/index.d.ts

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

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

package/content/Chat/views/BubbleMessage/BubbleMessageView.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IChatUser } from '@steroidsjs/core/ui/content/Chat/Chat';
+import './BubbleMessageView.scss';
+interface IBubbleMessageProps {
+    user: IChatUser;
+    text: string;
+    timestamp: string;
+    timeAgo: string;
+    isCurrentUser: boolean;
+    isFirstMessage?: boolean;
+    isLastMessage?: boolean;
+    isTodayMessage?: boolean;
+    files?: any[];
+}
+declare function BubbleMessageView(props: IBubbleMessageProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BubbleMessageView>;
+export default _default;