Merge pull request #28 from 1eeing/release/9.8.0

update v9.8.6
netease-kit · Jul 22, 2024 · dc7f022 · dc7f022
2 parents 7a3012a + 80b5382
commit dc7f022
Show file tree

Hide file tree

Showing 19 changed files with 592 additions and 379 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": "9.8.0",
+  "version": "9.8.6",
   "description": "云信即时通讯组件",
   "license": "MIT",
   "main": "lib/index.js",
@@ -62,7 +62,7 @@
     "antd": "^4.16.3",
     "mobx": "^6.6.1",
     "mobx-react": "^7.5.2",
-    "react-string-replace": "^1.1.0"
-  },
-  "gitHead": "2460a56b946207f24db9a8d74c10d3776aa5f267"
+    "react-string-replace": "^1.1.0",
+    "react-virtualized": "^9.22.5"
+  }
 }
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
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Input, message } from 'antd'
 import {
   useTranslation,
@@ -91,31 +91,34 @@ const ChatForwardModal: React.FC<ChatForwardModalProps> = ({
     store.uiStore,
   ])
 
-  const itemAvatarRender = (data: SelectModalItemProps) => {
-    const { scene, to } = parseSessionId(data.key)
-    if (scene === 'p2p') {
-      return (
-        <ComplexAvatarContainer
-          prefix={commonPrefix}
-          canClick={false}
-          account={to}
-          size={32}
-        />
-      )
-    }
-    if (scene === 'team') {
-      const team = store.teamStore.teams.get(to)
-      return (
-        <CrudeAvatar
-          account={to}
-          avatar={team?.avatar || ''}
-          nick={team?.name || ''}
-          size={32}
-        />
-      )
-    }
-    return null
-  }
+  const itemAvatarRender = useCallback(
+    (data: SelectModalItemProps) => {
+      const { scene, to } = parseSessionId(data.key)
+      if (scene === 'p2p') {
+        return (
+          <ComplexAvatarContainer
+            prefix={commonPrefix}
+            canClick={false}
+            account={to}
+            size={32}
+          />
+        )
+      }
+      if (scene === 'team') {
+        const team = store.teamStore.teams.get(to)
+        return (
+          <CrudeAvatar
+            account={to}
+            avatar={team?.avatar || ''}
+            nick={team?.name || ''}
+            size={32}
+          />
+        )
+      }
+      return null
+    },
+    [commonPrefix, store.teamStore.teams]
+  )
 
   const handleCommentChange = (e: any) => {
     setComment(e.target.value)
@@ -146,15 +149,17 @@ const ChatForwardModal: React.FC<ChatForwardModalProps> = ({
     }
   }
 
+  const handleSearchChang = useCallback((value) => {
+    setIsSearching(!!value)
+  }, [])
+
   return (
     <SelectModal
       title={t('forwardText')}
       visible={visible}
       datasource={datasource}
       itemAvatarRender={itemAvatarRender}
-      onSearchChange={(value) => {
-        setIsSearching(!!value)
-      }}
+      onSearchChange={handleSearchChang}
       type="radio"
       min={1}
       okText={t('sendBtnText')}

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,
@@ -58,9 +58,9 @@ const GroupTransferModal: React.FC<GroupActionModalProps> = ({
     }
   }
 
-  const handleSelect = (value: SelectModalItemProps[]) => {
+  const handleSelect = useCallback((value: SelectModalItemProps[]) => {
     setSelectedMemberId(value[0].key)
-  }
+  }, [])
 
   const datasource: SelectModalItemProps[] = useMemo(() => {
     const _showMembers = members.map((item) => {
@@ -77,16 +77,19 @@ const GroupTransferModal: React.FC<GroupActionModalProps> = ({
     return _showMembers
   }, [[members]])
 
-  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,
@@ -33,28 +33,35 @@ const ChatTeamMemberModal: React.FC<ChatTeamMemberModalProps> = observer(
       .getTeamMember(teamId)
       .filter((item) => item.account !== store.userStore.myUserInfo.account)
 
-    const datasource = teamMembers.map((item) => ({
-      key: item.account,
-      label: store.uiStore.getAppellation({
-        account: item.account,
-        teamId: item.teamId,
-      }),
-    }))
+    const datasource = useMemo(
+      () =>
+        teamMembers.map((item) => ({
+          key: item.account,
+          label: store.uiStore.getAppellation({
+            account: item.account,
+            teamId: item.teamId,
+          }),
+        })),
+      [store.uiStore, teamMembers]
+    )
 
     const teamManagerAccounts = teamMembers
       .filter((item) => item.type === 'manager')
       .map((item) => item.account)
 
-    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,9 +1,10 @@
-import React, { FC, useMemo, useState } from 'react'
+import React, { FC, useCallback, useMemo, useState } from 'react'
 import { GroupItem, GroupItemProps } from './GroupItem'
 import { TeamMember } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInterface'
 import { Input } from 'antd'
 import { SearchOutlined } from '@ant-design/icons'
 import { useStateContext, useTranslation } from '../../../common'
+import { AutoSizer, List } from 'react-virtualized'
 
 export interface GroupListProps {
   myMemberInfo: TeamMember
@@ -46,6 +47,44 @@ const GroupList: FC<GroupListProps> = ({
     return _sortedMembers
   }, [members, groupSearchText])
 
+  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.account} {...itemProps} />
+          </div>
+        )
+      )
+    },
+    [
+      afterSendMsgClick,
+      commonPrefix,
+      myMemberInfo,
+      onRemoveTeamMemberClick,
+      prefix,
+      renderTeamMemberItem,
+      showMembers,
+    ]
+  )
+
   return (
     <div className={`${_prefix}-wrap`}>
       <Input
@@ -56,25 +95,24 @@ const GroupList: FC<GroupListProps> = ({
         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.account} {...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/style/groupList.less b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamSetting/style/groupList.less
@@ -6,9 +6,14 @@
 .@{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
@@ -375,6 +375,21 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
       [msgOperMenu, store.msgStore]
     )
 
+    const resetSettingState = useCallback(() => {
+      setAction(undefined)
+      setGroupCreateVisible(false)
+      setSettingDrawerVisible(false)
+    }, [])
+
+    const resetState = useCallback(() => {
+      resetSettingState()
+      setInputValue('')
+      setLoadingMore(false)
+      setNoMore(false)
+      setReceiveMsgBtnVisible(false)
+      setForwardMessage(undefined)
+    }, [resetSettingState])
+
     const onGroupCreate = useCallback(
       async ({
         name,
@@ -405,24 +420,9 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
           }
         }
       },
-      [store.teamStore, t]
+      [store.teamStore, t, resetSettingState]
     )
 
-    const resetSettingState = () => {
-      setAction(undefined)
-      setGroupCreateVisible(false)
-      setSettingDrawerVisible(false)
-    }
-
-    const resetState = useCallback(() => {
-      resetSettingState()
-      setInputValue('')
-      setLoadingMore(false)
-      setNoMore(false)
-      setReceiveMsgBtnVisible(false)
-      setForwardMessage(undefined)
-    }, [])
-
     const handleForwardModalSend = () => {
       scrollToBottom()
       setForwardMessage(undefined)
@@ -593,7 +593,7 @@ const P2pChatContainer: React.FC<P2pChatContainerProps> = observer(
       return () => {
         nim.off('msg', onMsg)
       }
-    }, [nim, sessionId])
+    }, [nim, sessionId, scrollToBottom])
 
     return session ? (
       <div className={`${prefix}-wrap`}>