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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/content/Chat/ChatView.js +19 -9
  2. package/content/Chat/ChatView.scss +7 -1
  3. package/content/Chat/views/ChatInput/ChatInputView.d.ts +1 -0
  4. package/content/Chat/views/ChatInput/ChatInputView.js +1 -1
  5. package/package.json +2 -2
package/content/Chat/ChatView.js CHANGED
@@ -27,26 +27,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  };
28
28
  exports.__esModule = true;
29
29
  var react_1 = __importStar(require("react"));
30
- var react_use_1 = require("react-use");
31
30
  var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
32
31
  var ChatInput_1 = __importDefault(require("./views/ChatInput"));
33
32
  var BubblesDateGroup_1 = __importDefault(require("./views/BubblesDateGroup"));
34
33
  function ChatView(props) {
35
34
  var bem = (0, useBem_1["default"])('ChatView');
36
- var endOfMessagesRef = (0, react_1.useRef)(null);
37
- (0, react_use_1.useUpdateEffect)(function () {
38
- endOfMessagesRef === null || endOfMessagesRef === void 0 ? void 0 : endOfMessagesRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
35
+ var wrapperRef = (0, react_1.useRef)(null);
36
+ var contentRef = (0, react_1.useRef)(null);
37
+ var prevContentHeightRef = (0, react_1.useRef)(null);
38
+ (0, react_1.useEffect)(function () {
39
+ var wrapperHeight = wrapperRef.current.clientHeight;
40
+ var contentHeight = contentRef.current.clientHeight;
41
+ var wrapperScrollTop = wrapperRef.current.scrollTop;
42
+ if (!prevContentHeightRef.current || wrapperScrollTop === prevContentHeightRef.current - wrapperHeight) {
43
+ wrapperRef.current.scrollTo({
44
+ top: contentHeight - wrapperHeight,
45
+ left: 0,
46
+ behavior: prevContentHeightRef.current ? 'smooth' : 'auto'
47
+ });
48
+ }
49
+ prevContentHeightRef.current = contentHeight;
39
50
  }, [props.groupedMessagesByDates]);
40
51
  var renderChatScreen = (0, react_1.useCallback)(function () { return (react_1["default"].createElement("div", { className: bem.element('screen') },
41
- react_1["default"].createElement("div", { className: bem.element('content') },
42
- Object.entries(props.groupedMessagesByDates)
52
+ react_1["default"].createElement("div", { className: bem.element('wrapper'), ref: wrapperRef },
53
+ react_1["default"].createElement("div", { className: bem.element('content'), ref: contentRef }, Object.entries(props.groupedMessagesByDates)
43
54
  .map(function (_a) {
44
55
  var date = _a[0], groupedMessages = _a[1];
45
56
  return (react_1["default"].createElement(BubblesDateGroup_1["default"], { key: date, date: date, groupedMessages: groupedMessages, currentUser: props.currentUser }));
46
- }),
47
- react_1["default"].createElement("div", { ref: endOfMessagesRef })))); }, [bem, props.groupedMessagesByDates, props.currentUser]);
57
+ }))))); }, [bem, props.groupedMessagesByDates, props.currentUser]);
48
58
  return (react_1["default"].createElement("div", { className: bem.block() },
49
59
  renderChatScreen(),
50
- react_1["default"].createElement(ChatInput_1["default"], { chatId: props.chatId })));
60
+ react_1["default"].createElement(ChatInput_1["default"], { chatId: props.chatId, onSendMessage: props.onSendMessage })));
51
61
  }
52
62
  exports["default"] = ChatView;
package/content/Chat/ChatView.scss CHANGED
@@ -26,9 +26,10 @@ $sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
26
26
  justify-content: flex-end;
27
27
  align-items: center;
28
28
  margin-bottom: 10px;
29
+ position: relative;
29
30
  }
30
31
 
31
- &__content {
32
+ &__wrapper {
32
33
  position: relative;
33
34
  width: 100%;
34
35
  height: 100%;
@@ -50,4 +51,9 @@ $sidebar-scroll-track-color: var(--sidebar-scroll-track-color);
50
51
  margin-top: 15px;
51
52
  }
52
53
  }
54
+
55
+ &__content {
56
+ position: relative;
57
+ transition: all 6s;
58
+ }
53
59
  }
package/content/Chat/views/ChatInput/ChatInputView.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import './ChatInputView.scss';
2
2
  interface IChatInputProps {
3
3
  chatId: string;
4
+ onSendMessage: (data: any) => void;
4
5
  }
5
6
  export default function ChatInputView(props: IChatInputProps): JSX.Element;
6
7
  export {};
package/content/Chat/views/ChatInput/ChatInputView.js CHANGED
@@ -35,7 +35,7 @@ function ChatInputView(props) {
35
35
  var renderInputActions = (0, react_1.useCallback)(function () { return (react_1["default"].createElement("div", { className: bem.element('actions') },
36
36
  react_1["default"].createElement(form_1.Button, { className: bem.element('action'), icon: "send", type: "submit" }))); }, [bem]);
37
37
  return (react_1["default"].createElement("div", { className: bem.block() },
38
- react_1["default"].createElement(form_1.Form, { formId: props.chatId, className: bem.element('form'), useRedux: true },
38
+ react_1["default"].createElement(form_1.Form, { formId: props.chatId, className: bem.element('form'), onSubmit: props.onSendMessage, useRedux: true },
39
39
  react_1["default"].createElement(form_1.InputField, { className: bem.element('input'), attribute: "text", size: "lg", required: true, placeholder: __('Введите сообщение'), addonAfter: renderInputActions() }))));
40
40
  }
41
41
  exports["default"] = ChatInputView;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@steroidsjs/bootstrap",
3
- "version": "3.0.0-beta.115",
3
+ "version": "3.0.0-beta.116",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
37
37
  "react-use": "^17.4.0"
38
38
  },
39
39
  "devDependencies": {
40
- "@steroidsjs/core": "^3.0 || >=3.0.0-beta.99",
40
+ "@steroidsjs/core": "^3.0 || >=3.0.0-beta.100",
41
41
  "@steroidsjs/eslint-config": "^2.1.4",
42
42
  "@types/enzyme": "^3.10.8",
43
43
  "@types/googlemaps": "^3.43.3",