update im

netease-kit · Jul 22, 2024 · 10e766d · 10e766d
1 parent 2594c0d
commit 10e766d
Show file tree

Hide file tree

Showing 25 changed files with 641 additions and 372 deletions.
diff --git a/react/src/YXUIKit/im-kit-ui/package.json b/react/src/YXUIKit/im-kit-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xkit-yx/im-kit-ui",
-  "version": "10.3.0",
+  "version": "10.3.1",
   "description": "云信即时通讯组件",
   "license": "MIT",
   "main": "lib/index.js",
@@ -60,7 +60,8 @@
     "mobx": "^6.6.1",
     "mobx-react": "^7.5.2",
     "nim-web-sdk-ng": "10.3.0",
-    "react-string-replace": "^1.1.0"
+    "react-string-replace": "^1.1.0",
+    "react-virtualized": "^9.22.5"
   },
-  "gitHead": "5309f0b247ec3584301aa3ec5f8df0c3cbcd0966"
+  "gitHead": "45e04861b1ab80e65b14e6b57c9fd1de60a9a1b0"
 }
diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/Container.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/Container.tsx
@@ -115,7 +115,11 @@ export interface ChatContainerProps {
    自定义渲染群组成员 item
    */
   renderTeamMemberItem?: (
-    params: GroupItemProps
+    params: GroupItemProps & {
+      renderKey: string
+      renderIndex: number
+      renderStyle: React.CSSProperties
+    }
   ) => JSX.Element | null | undefined
   /**
    自定义渲染消息头像

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatAddMembers/index.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatAddMembers/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { message, Modal } from 'antd'
 import { FriendSelect, useTranslation } from '../../../common'
 // import { SearchInput } from '@x-kit-react/search-kit'
@@ -52,6 +52,10 @@ const ChatAddMemebers: React.FC<ChatAddMemebersProps> = ({
     setSelectedAccounts(defaultAccounts)
   }
 
+  const handleSelect = useCallback((selectedList: string[]) => {
+    setSelectedAccounts(selectedList)
+  }, [])
+
   return (
     <Modal
       className={`${_prefix}-wrap`}
@@ -69,7 +73,7 @@ const ChatAddMemebers: React.FC<ChatAddMemebersProps> = ({
         <FriendSelect
           max={200}
           prefix={commonPrefix}
-          onSelect={(selectedList) => setSelectedAccounts(selectedList)}
+          onSelect={handleSelect}
           selectedAccounts={selectedAccounts}
           disabledAccounts={defaultAccounts}
         />

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatCollectionList/CollectionItem.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatCollectionList/CollectionItem.tsx
@@ -104,6 +104,8 @@ const CollectionItem: React.FC<CollectionItemProps> = ({
       <Dropdown
         trigger={['contextMenu']}
         overlay={<Menu onClick={handleMenuClick} items={menuItems} />}
+        getPopupContainer={(triggerNode) => triggerNode}
+        overlayClassName={`${_prefix}-dropdown`}
       >
         <div className={`${_prefix}-wrap`}>
           <ParseSession msg={msg} prefix={commonPrefix} />

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatForwardModal/index.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatForwardModal/index.tsx
@@ -317,9 +317,9 @@ const ChatForwardModal: React.FC<ChatForwardModalProps> = observer(
       }
     }
 
-    const handleSelectChange = (value: SelectModalItemProps[]) => {
+    const handleSelectChange = useCallback((value: SelectModalItemProps[]) => {
       setSelected(value.map((item) => item.key))
-    }
+    }, [])
 
     const handleSelectDelete = (value: SelectModalItemProps) => {
       setSelected(selected.filter((item) => item !== value.key))

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatGroupTransferModal/index.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatGroupTransferModal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { message } from 'antd'
 import {
   ComplexAvatarContainer,
@@ -54,9 +54,9 @@ const GroupTransferModal: React.FC<GroupActionModalProps> = observer(
       }
     }
 
-    const handleSelect = (value: SelectModalItemProps[]) => {
+    const handleSelect = useCallback((value: SelectModalItemProps[]) => {
       setSelectedMemberId(value[0].key)
-    }
+    }, [])
 
     const datasource: SelectModalItemProps[] = useMemo(() => {
       const aiUsers = store.aiUserStore.getAIUserList()
@@ -81,16 +81,19 @@ const GroupTransferModal: React.FC<GroupActionModalProps> = observer(
       return _showMembers
     }, [members, store.uiStore, store.aiUserStore])
 
-    const itemAvatarRender = (data: SelectModalItemProps) => {
-      return (
-        <ComplexAvatarContainer
-          prefix={commonPrefix}
-          canClick={false}
-          account={data.key}
-          size={32}
-        />
-      )
-    }
+    const itemAvatarRender = useCallback(
+      (data: SelectModalItemProps) => {
+        return (
+          <ComplexAvatarContainer
+            prefix={commonPrefix}
+            canClick={false}
+            account={data.key}
+            size={32}
+          />
+        )
+      },
+      [commonPrefix]
+    )
 
     return (
       <SelectModal

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamMemberModal/index.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamMemberModal/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { message } from 'antd'
 import {
   useTranslation,
@@ -36,15 +36,21 @@ const ChatTeamMemberModal: React.FC<ChatTeamMemberModalProps> = observer(
 
     const aiUsers = store.aiUserStore.getAIUserList()
 
-    const datasource = teamMembers
-      .filter((item) => aiUsers.every((ai) => ai.accountId !== item.accountId))
-      .map((item) => ({
-        key: item.accountId,
-        label: store.uiStore.getAppellation({
-          account: item.accountId,
-          teamId: item.teamId,
-        }),
-      }))
+    const datasource = useMemo(
+      () =>
+        teamMembers
+          .filter((item) =>
+            aiUsers.every((ai) => ai.accountId !== item.accountId)
+          )
+          .map((item) => ({
+            key: item.accountId,
+            label: store.uiStore.getAppellation({
+              account: item.accountId,
+              teamId: item.teamId,
+            }),
+          })),
+      [aiUsers, store.uiStore, teamMembers]
+    )
 
     const teamManagerAccounts = teamMembers
       .filter(
@@ -54,16 +60,19 @@ const ChatTeamMemberModal: React.FC<ChatTeamMemberModalProps> = observer(
       )
       .map((item) => item.accountId)
 
-    const itemAvatarRender = (data: SelectModalItemProps) => {
-      return (
-        <ComplexAvatarContainer
-          account={data.key}
-          canClick={false}
-          prefix={commonPrefix}
-          size={32}
-        />
-      )
-    }
+    const itemAvatarRender = useCallback(
+      (data: SelectModalItemProps) => {
+        return (
+          <ComplexAvatarContainer
+            account={data.key}
+            canClick={false}
+            prefix={commonPrefix}
+            size={32}
+          />
+        )
+      },
+      [commonPrefix]
+    )
 
     const handleOk = async (data: SelectModalItemProps[]) => {
       try {

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamSetting/GroupList.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamSetting/GroupList.tsx
@@ -1,18 +1,23 @@
-import React, { FC, useEffect, useMemo, useState } from 'react'
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { GroupItem, GroupItemProps } from './GroupItem'
 import { V2NIMTeamMember } from 'nim-web-sdk-ng/dist/v2/NIM_BROWSER_SDK/V2NIMTeamService'
 import { Input } from 'antd'
 import { SearchOutlined } from '@ant-design/icons'
 import { useStateContext, useTranslation } from '../../../common'
 import { observer } from 'mobx-react'
+import { AutoSizer, List } from 'react-virtualized'
 
 export interface GroupListProps {
   myMemberInfo: V2NIMTeamMember
   members: V2NIMTeamMember[]
   onRemoveTeamMemberClick: (member: V2NIMTeamMember) => void
   afterSendMsgClick?: () => void
   renderTeamMemberItem?: (
-    params: GroupItemProps
+    params: GroupItemProps & {
+      renderKey: string
+      renderIndex: number
+      renderStyle: React.CSSProperties
+    }
   ) => JSX.Element | null | undefined
   prefix?: string
   commonPrefix?: string
@@ -62,6 +67,44 @@ const GroupList: FC<GroupListProps> = observer(
       return _sortedMembers
     }, [members, groupSearchText, store.uiStore])
 
+    const rowRenderer = useCallback(
+      ({ index, key, style }) => {
+        const item = showMembers[index]
+        const itemProps: GroupItemProps & {
+          renderKey: string
+          renderIndex: number
+          renderStyle: React.CSSProperties
+        } = {
+          member: item,
+          onRemoveTeamMemberClick,
+          afterSendMsgClick,
+          myMemberInfo,
+          prefix,
+          commonPrefix,
+          renderIndex: index,
+          renderKey: key,
+          renderStyle: style,
+        }
+
+        return (
+          renderTeamMemberItem?.(itemProps) ?? (
+            <div key={key} style={style}>
+              <GroupItem key={item.accountId} {...itemProps} />
+            </div>
+          )
+        )
+      },
+      [
+        afterSendMsgClick,
+        commonPrefix,
+        myMemberInfo,
+        onRemoveTeamMemberClick,
+        prefix,
+        renderTeamMemberItem,
+        showMembers,
+      ]
+    )
+
     return (
       <div className={`${_prefix}-wrap`}>
         <Input
@@ -72,26 +115,24 @@ const GroupList: FC<GroupListProps> = observer(
           placeholder={t('searchTeamMemberPlaceholder')}
           onChange={(e) => handleSearch(e.target.value)}
         />
-        {showMembers.length ? (
-          showMembers.map((item) => {
-            const itemProps = {
-              member: item,
-              onRemoveTeamMemberClick,
-              afterSendMsgClick,
-              myMemberInfo,
-              prefix,
-              commonPrefix,
-            }
-
-            return (
-              renderTeamMemberItem?.(itemProps) ?? (
-                <GroupItem key={item.accountId} {...itemProps} />
-              )
-            )
-          })
-        ) : (
-          <div className={`${_prefix}-no-result`}>{t('searchNoResText')}</div>
-        )}
+        <div className={`${_prefix}-list`}>
+          {showMembers.length ? (
+            <AutoSizer>
+              {({ height, width }) => (
+                <List
+                  height={height}
+                  overscanRowCount={10}
+                  rowCount={showMembers.length}
+                  rowHeight={60}
+                  rowRenderer={rowRenderer}
+                  width={width}
+                />
+              )}
+            </AutoSizer>
+          ) : (
+            <div className={`${_prefix}-no-result`}>{t('searchNoResText')}</div>
+          )}
+        </div>
       </div>
     )
   }

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamSetting/index.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamSetting/index.tsx
@@ -48,7 +48,11 @@ export interface ChatTeamSettingProps {
   afterSendMsgClick?: () => void
   setNavHistoryStack: (stack: HistoryStack[]) => void
   renderTeamMemberItem?: (
-    params: GroupItemProps
+    params: GroupItemProps & {
+      renderKey: string
+      renderIndex: number
+      renderStyle: React.CSSProperties
+    }
   ) => JSX.Element | null | undefined
 
   prefix?: string

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamSetting/style/groupList.less b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamSetting/style/groupList.less
@@ -6,9 +6,15 @@
 .@{prefix-cls}-wrap {
   width: 100%;
   height: 100%;
-  overflow-y: auto;
   padding: 0 10px;
 }
+
+.@{prefix-cls}-list {
+  width: 100%;
+  height: calc(100% - 57px);
+  overflow-y: auto;
+}
+
 .@{prefix-cls}-input {
   margin: 15px 0 10px 0;
    background-color: @yx-background-color-6!important;

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/containers/p2pChatContainer.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/containers/p2pChatContainer.tsx
@@ -166,6 +166,23 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
     >(undefined)
     const [translateOpen, setTranslateOpen] = useState(false)
 
+    const resetSettingState = useCallback(() => {
+      setAction(undefined)
+      setGroupCreateVisible(false)
+      setSettingDrawerVisible(false)
+    }, [])
+
+    const resetState = useCallback(() => {
+      resetSettingState()
+      setInputValue('')
+      setLoadingMore(false)
+      setNoMore(false)
+      setReceiveMsgBtnVisible(false)
+      setForwardMessage(undefined)
+      setTranslateOpen(false)
+      store.aiUserStore.resetAIProxy()
+    }, [store.aiUserStore, resetSettingState])
+
     const getHistory = useCallback(
       async (endTime: number, lastMsgId?: string) => {
         try {
@@ -568,7 +585,6 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
       },
       [
         msgOperMenu,
-        mentionMembers,
         store.msgStore,
         store.userStore.users,
         store.uiStore,
@@ -609,23 +625,6 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
       store.userStore.myUserInfo.accountId,
     ])
 
-    const resetSettingState = () => {
-      setAction(undefined)
-      setGroupCreateVisible(false)
-      setSettingDrawerVisible(false)
-    }
-
-    const resetState = useCallback(() => {
-      resetSettingState()
-      setInputValue('')
-      setLoadingMore(false)
-      setNoMore(false)
-      setReceiveMsgBtnVisible(false)
-      setForwardMessage(undefined)
-      setTranslateOpen(false)
-      store.aiUserStore.resetAIProxy()
-    }, [store.aiUserStore])
-
     const handleForwardModalSend = () => {
       scrollToBottom()
       setForwardMessage(undefined)