@steroidsjs/bootstrap 3.0.0-beta.115 → 3.0.0-beta.117

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,24 @@
 @use "../../scss/variables";
 
 .ChartView {
+    height: auto;
+    &__title {
+        font-size: variables.$font-size-lg;
+        font-weight: variables.$font-weight-lg;
+        line-height: variables.$line-height-lg;
+    }
 
-  text {
-    fill: variables.$text-color !important;
-  }
-}
+    &__controls {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+    }
+
+    &__controls + div { 
+        height: var(--chart-custom-height) !important;
+    }
+
+    text {
+        fill: variables.$text-color !important;
+    }
+}

package/content/Chat/ChatView.js

@@ -27,26 +27,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = __importStar(require("react"));
-var react_use_1 = require("react-use");
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 var ChatInput_1 = __importDefault(require("./views/ChatInput"));
 var BubblesDateGroup_1 = __importDefault(require("./views/BubblesDateGroup"));
 function ChatView(props) {
     var bem = (0, useBem_1["default"])('ChatView');
-    var endOfMessagesRef = (0, react_1.useRef)(null);
-    (0, react_use_1.useUpdateEffect)(function () {
-        endOfMessagesRef === null || endOfMessagesRef === void 0 ? void 0 : endOfMessagesRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+    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('content') },
-            Object.entries(props.groupedMessagesByDates)
+        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 }));
-            }),
-            react_1["default"].createElement("div", { ref: endOfMessagesRef })))); }, [bem, props.groupedMessagesByDates, props.currentUser]);
+            }))))); }, [bem, props.groupedMessagesByDates, props.currentUser]);
     return (react_1["default"].createElement("div", { className: bem.block() },
         renderChatScreen(),
-        react_1["default"].createElement(ChatInput_1["default"], { chatId: props.chatId })));
+        react_1["default"].createElement(ChatInput_1["default"], { chatId: props.chatId, onSendMessage: props.onSendMessage })));
 }
 exports["default"] = ChatView;

package/content/Chat/ChatView.scss

@@ -26,9 +26,10 @@ $sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
     justify-content: flex-end;
     align-items: center;
     margin-bottom: 10px;
+    position: relative;
   }
 
-  &__content {
+  &__wrapper {
     position: relative;
     width: 100%;
     height: 100%;
@@ -50,4 +51,9 @@ $sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
       margin-top: 15px;
     }
   }
+
+  &__content {
+    position: relative;
+    transition: all 6s;
+  }
 }

package/content/Chat/views/ChatInput/ChatInputView.d.ts

@@ -1,6 +1,7 @@
 import './ChatInputView.scss';
 interface IChatInputProps {
     chatId: string;
+    onSendMessage: (data: any) => void;
 }
 export default function ChatInputView(props: IChatInputProps): JSX.Element;
 export {};

package/content/Chat/views/ChatInput/ChatInputView.js

@@ -35,7 +35,7 @@ function ChatInputView(props) {
     var renderInputActions = (0, react_1.useCallback)(function () { return (react_1["default"].createElement("div", { className: bem.element('actions') },
         react_1["default"].createElement(form_1.Button, { className: bem.element('action'), icon: "send", type: "submit" }))); }, [bem]);
     return (react_1["default"].createElement("div", { className: bem.block() },
-        react_1["default"].createElement(form_1.Form, { formId: props.chatId, className: bem.element('form'), useRedux: true },
+        react_1["default"].createElement(form_1.Form, { formId: props.chatId, className: bem.element('form'), onSubmit: props.onSendMessage, useRedux: true },
             react_1["default"].createElement(form_1.InputField, { className: bem.element('input'), attribute: "text", size: "lg", required: true, placeholder: __('Введите сообщение'), addonAfter: renderInputActions() }))));
 }
 exports["default"] = ChatInputView;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.115",
+    "version": "3.0.0-beta.117",
     "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.99",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.101",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",