@tencentcloud/chat-uikit-wechat - npm Package Compare versions

Comparing version 1.1.5 to 1.1.6

CHANGELOG.md

@@ -0,1 +1,6 @@
+## 1.1.6  (2023-11-03)
+### 优化
+- 优化 messageInput 唤起手机键盘时，阻挡 messageList
+- 优化 messageList 滑动的底部，新消息没有滑动到可视区域
+
 ## 1.1.5  (2023-9-13)
@@ -2,0 +7,0 @@ ### 新增

components/TUIChat/components/MessageInput/index.js

@@ -62,2 +62,3 @@ import logger from '../../../../utils/logger';
     hasCallKit: false,
+    textareaHeight: 0,
   },
@@ -238,2 +239,3 @@
       }
+      this.triggerEvent('inputHeightChange', {});
       this.setData({
@@ -468,2 +470,14 @@ displayFlag: targetFlag,
     onInputValueChange(event) {
+      const query = wx.createSelectorQuery().in(this);
+      query.select('#textarea').boundingClientRect();
+      query.exec((res) => {
+        // 获取 textarea 组件的实际高度
+        const height = res[0].height;
+        if (this.data.textareaHeight !== height) {
+          this.triggerEvent('inputHeightChange', {});
+          this.setData({
+            textareaHeight: height,
+          })
+        }
+      });
       if (event.detail.message || event.detail.value) {
@@ -537,2 +551,3 @@ this.setData({
     },
+
     // 监听是否获取焦点，有焦点则向父级传值，动态改变input组件的高度。
@@ -539,0 +554,0 @@ inputBindFocus(event) {

components/TUIChat/components/MessageList/index.js

@@ -92,3 +92,3 @@ import dayjs from '../../../../utils/dayjs';
     // 是否在最底部
-    isScrollToBottom:false,
+    isScrollToBottom: true,
     chatContainerHeight:0,
@@ -197,2 +197,12 @@ // 修改的群资料
     },
+    updateScrollToBottom() {
+      const ID = `ID-${this.filterSystemMessageID(this.data.messageList[this.data.messageList.length - 1].ID)}`;
+      this.setData({
+        jumpAim: '',
+      },() => {
+        this.setData({
+          jumpAim: ID
+        })
+      })
+    },
     // 更新已读更新
@@ -233,34 +243,2 @@ updateReadByPeer(event) {
         }
-        // 判断收到的消息是否是正在输入状态消息。由于正在输入状态消息是自定义消息，需要对自定义消息进行一个过滤，是自定义消息但不是正在输入状态消息，则新消息未读数加1，不是自定义消息则新消息未读数直接加1
-        if (this.data.messageList.length > 12 && !message.isRead) {
-          try {
-            const typingMessage = JSON.parse(item.payload.data);
-            this.setData({
-              typingMessage,
-            });
-          } catch (error) {
-          }
-          if ((item.type === MESSAGE_TYPE_TEXT.TIM_CUSTOM_ELEM && this.data.typingMessage.businessID !== BUSINESS_ID_TEXT.USER_TYPING) || item.type !== MESSAGE_TYPE_TEXT.TIM_CUSTOM_ELEM) {
-            this.data.newMessageCount.push(message);
-            this.setData({
-              newMessageCount: this.data.newMessageCount,
-            });
-            // 当滚轮在最底部的时候
-            if(this.data.isScrollToBottom) {
-              // 跳转到最新的消息
-              setTimeout(() => {
-                this.handleJumpNewMessage();
-              },300)
-            } else {
-              // 不在最底部的时候弹出未读消息
-              this.setData({
-                showUnreadMessageCount: true,
-              });
-            }
-          }
-        } else {
-          this.setData({
-            showUnreadMessageCount: false,
-          });
-        }
       });
@@ -287,2 +265,3 @@ // 若需修改消息，需将内存的消息复制一份，不能直接更改消息，防止修复内存消息，导致其他消息监听处发生消息错误
       });
+
       this.data.messageList = this.data.messageList.concat(list);
@@ -292,2 +271,18 @@ this.setData({
       });
+      if (list.length > 0) {
+        // 当滚轮在最底部的时候
+        if(this.data.isScrollToBottom) {
+          // 跳转到最新的消息
+          setTimeout(() => {
+            this.handleJumpNewMessage();
+          },300)
+        } else {
+          // 不在最底部的时候弹出未读消息
+          const newMessageCount = this.data.newMessageCount.concat(list);
+          this.setData({
+            newMessageCount,
+            showUnreadMessageCount: true,
+          });
+        }
+      }
       if (this.data.conversation.type === 'GROUP') {
@@ -468,2 +463,3 @@ const groupOperationType = this.data.messageList.slice(-1)[0].payload?.operationType || 0;
         newMessageCount: [],
+        isScrollToBottom: true,
       });
@@ -492,2 +488,4 @@ },
         showUnreadMessageCount: false,
+        newMessageCount: [],
+        isScrollToBottom: true,
       });
@@ -647,3 +645,4 @@ },
       // 滚动条在底部
-      if(event.detail.scrollHeight - (event.detail.scrollTop + this.data.chatContainerHeight) <= 0) {
+      const currentScorollPos = Math.round(event.detail.scrollTop + this.data.chatContainerHeight);
+      if(event.detail.scrollHeight - currentScorollPos <= 0) {
         isScrollToBottom = true;
@@ -650,0 +649,0 @@ }

components/TUIChat/index.js

@@ -185,2 +185,4 @@ // TUIKit-WChat/Chat/index.js
         'viewData.style': newInputStyle,
+      },() => {
+        this.selectComponent('#MessageList').updateScrollToBottom();
       });
@@ -194,2 +196,5 @@ },
     },
+    inputHeightChange() {
+      this.selectComponent('#MessageList').updateScrollToBottom();
+    },
     typing(event) {
@@ -196,0 +201,0 @@ const { STRING_TEXT, FEAT_NATIVE_CODE } = constant;

package.json

 {
   "name": "@tencentcloud/chat-uikit-wechat",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "TUIKit 是基于 IM SDK 实现的一套 UI 组件，其包含会话、聊天、群组、个人资料等功能，基于 TUIKit 组件您可以像搭积木一样快速搭建起自己的业务逻辑。",
@@ -34,4 +34,6 @@ "main": "index.js",
     "tim-profanity-filter-plugin": "^0.9.0",
-    "@tencentcloud/chat": "^3.2.0"
+    "@tencentcloud/chat": "^3.2.0",
+    "@tencentcloud/call-uikit-wechat": "^3.0.4",
+    "aegis-mp-sdk": "1.36.7"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

460693

increased by0.11%

Lines of code

5644

increased by0.28%

Worsened metrics

Dependency count

5

increased by66.67%

Dependency changes

• + Added@tencentcloud/call-uikit-wechat@^3.0.4

• + Addedaegis-mp-sdk@1.36.7

• + Added@tencentcloud/call-uikit-wechat@3.3.9(transitive)

• + Added@tencentcloud/tui-core@2.3.2(transitive)

• + Addedaegis-mp-sdk@1.36.7(transitive)

• + Addedminiprogram-api-typings@3.12.3(transitive)

• + Addedtim-profanity-filter-plugin@1.1.0(transitive)

• + Addedtrtc-wx-sdk@1.1.12(transitive)

• + Addedtuicall-engine-wx@2.2.9(transitive)