@steroidsjs/bootstrap 3.0.0-beta.114 → 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/content/Kanban/views/KanbanModal/KanbanModalView.scss

@@ -12,6 +12,7 @@ html[data-theme="dark"] {
 
 $badge-background-color: var(--badge-background-color);
 $badge-text-color: var(--badge-text-color);
+$html-field-text-color: #312c3a;
 
 .KanbanModalView {
   min-width: 536px;
@@ -46,6 +47,10 @@ $badge-text-color: var(--badge-text-color);
       flex-flow: column nowrap;
       gap: 16px;
     }
+
+    &_html-field {
+      width: 1040px;
+    }
   }
 
   &__assigner {
@@ -180,6 +185,12 @@ $badge-text-color: var(--badge-text-color);
   .RadioListFieldView_horizontal {
     gap: 24px;
   }
+
+  .ck-content {
+    max-height: 332px;
+    overflow: scroll;
+    color: $html-field-text-color;
+  }
 }
 
 .ModalView {

package/content/Kanban/views/KanbanModal/views/CreateOrEditTaskModalContent/CreateOrEditTaskModalContentView.js

@@ -73,7 +73,7 @@ function CreateOrEditTaskModalContentView(props) {
                     react_1["default"].createElement(form_1.InputField, { attribute: "description", size: "md", showClear: true }))),
             react_1["default"].createElement("div", { className: props.bem.element('row') },
                 react_1["default"].createElement("div", { className: props.bem.element('label') }),
-                react_1["default"].createElement("div", { className: props.bem.element('right', 'column') },
+                react_1["default"].createElement("div", { className: props.bem.element('right', 'html-field') },
                     react_1["default"].createElement(form_1.HtmlField, { attribute: "fullDescription", size: "md" }))),
             !!((_d = props.tags) === null || _d === void 0 ? void 0 : _d.length) && (react_1["default"].createElement("div", { className: props.bem.element('row', 'tags-field') },
                 react_1["default"].createElement(Label_1["default"], { className: props.bem.element('label'), content: __('Добавить теги') }),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.114",
+    "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",