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

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.116",
     "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.100",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",