Merge pull request #21 from 1eeing/main

update uikit 9.8.0
netease-kit · Feb 23, 2024 · 7a3012a · 7a3012a
2 parents 96c483a + 03453b1
commit 7a3012a
Show file tree

Hide file tree

Showing 16 changed files with 393 additions and 45 deletions.
diff --git a/react/package.json b/react/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "@xkit-yx/call-kit": "^2.0.1",
     "@xkit-yx/call-kit-react-ui": "^0.4.1",
-    "@xkit-yx/im-kit-ui": "^9.7.0",
+    "@xkit-yx/im-kit-ui": "^9.8.0",
     "react-dom": "^16.8.0",
     "umi": "^3.5.40"
   },

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.7.0",
+  "version": "9.8.0",
   "description": "云信即时通讯组件",
   "license": "MIT",
   "main": "lib/index.js",
@@ -33,15 +33,15 @@
     "gulp-typescript": "^6.0.0-alpha.1",
     "less": "^4.1.1",
     "less-plugin-npm-import": "^2.1.0",
-    "nim-web-sdk-ng": "0.15.0",
+    "nim-web-sdk-ng": "0.17.0",
     "postcss": "^8.3.5",
     "postcss-nested": "^5.0.5",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "rollup": "^2.39.0",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-typescript2": "^0.31.0",
     "sass": "^1.58.3",
     "typescript": "^4.6.4"
   },
@@ -56,13 +56,13 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
-    "@xkit-yx/core-kit": "^0.11.0",
-    "@xkit-yx/im-store": "^0.1.0",
+    "@xkit-yx/core-kit": "^0.13.0",
+    "@xkit-yx/im-store": "^0.2.0",
     "@xkit-yx/utils": "^0.5.6",
     "antd": "^4.16.3",
     "mobx": "^6.6.1",
     "mobx-react": "^7.5.2",
     "react-string-replace": "^1.1.0"
   },
-  "gitHead": "f3ce7aa9536c224fcdc0e4a1a26b333be1036442"
+  "gitHead": "2460a56b946207f24db9a8d74c10d3776aa5f267"
 }
diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatMessageInput/index.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatMessageInput/index.tsx
@@ -8,7 +8,16 @@ import React, {
   useCallback,
   useEffect,
 } from 'react'
-import { Input, Upload, Popover, message, Button, Spin } from 'antd'
+import {
+  Input,
+  Upload,
+  Popover,
+  message,
+  Button,
+  Spin,
+  Dropdown,
+  Menu,
+} from 'antd'
 import { IMMessage } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterface'
 import {
   CommonIcon,
@@ -48,6 +57,7 @@ export interface ChatMessageInputProps {
   onSendText: (value: string, ext?: Record<string, unknown>) => void
   onSendFile: (file: File) => void
   onSendImg: (file: File) => void
+  onSendVideo: (file: File) => void
   onRemoveReplyMsg?: () => void
 }
 
@@ -80,6 +90,7 @@ const ChatMessageInput = observer(
       onSendText,
       onSendFile,
       onSendImg,
+      onSendVideo,
       onRemoveReplyMsg,
     } = props
     const _prefix = `${prefix}-message-input`
@@ -108,7 +119,7 @@ const ChatMessageInput = observer(
         visible: true,
         render: () => {
           return (
-            <Button type="text" disabled={mute}>
+            <Button size="small" disabled={mute}>
               <Popover
                 trigger="click"
                 visible={emojiVisible}
@@ -131,22 +142,61 @@ const ChatMessageInput = observer(
         render: () => {
           return (
             <Button size="small" disabled={mute}>
-              {uploadImageLoading ? (
-                <Spin indicator={LoadingIcon} />
-              ) : (
-                <Upload
-                  beforeUpload={onBeforeUploadImgHandler}
-                  showUploadList={false}
-                  accept=".jpg,.png,.jpeg,.gif"
-                  // action={onUploadImgHandler}
-                  className={`${_prefix}-icon-upload`}
-                >
-                  <CommonIcon
-                    className={`${_prefix}-icon-image`}
-                    type="icon-tupian"
+              <Dropdown
+                placement="top"
+                arrow={false}
+                overlay={
+                  <Menu
+                    items={[
+                      {
+                        key: 'sendImg',
+                        label: (
+                          <Upload
+                            beforeUpload={onBeforeUploadImgHandler}
+                            showUploadList={false}
+                            accept=".jpg,.png,.jpeg,.gif"
+                            // action={onUploadImgHandler}
+                            className={`${_prefix}-icon-upload`}
+                          >
+                            <CommonIcon
+                              className={`${_prefix}-icon-image`}
+                              type="icon-tupian"
+                            />
+                            <span style={{ padding: '0 30px 0 3px' }}>
+                              {t('imgText')}
+                            </span>
+                          </Upload>
+                        ),
+                      },
+                      {
+                        key: 'sendVideo',
+                        label: (
+                          <Upload
+                            beforeUpload={onBeforeUploadVideoHandler}
+                            showUploadList={false}
+                            accept=".mp4,.mov,.avi,.wmv,.mkv,.flv,.rmvb,.3gp,.mpeg,.m4v,.vob,.webm"
+                            // action={onUploadImgHandler}
+                            className={`${_prefix}-icon-upload`}
+                          >
+                            <CommonIcon
+                              className={`${_prefix}-icon-image`}
+                              type="icon-shipin8"
+                            />
+                            <span style={{ padding: '0 30px 0 3px' }}>
+                              {t('videoText')}
+                            </span>
+                          </Upload>
+                        ),
+                      },
+                    ]}
                   />
-                </Upload>
-              )}
+                }
+              >
+                <CommonIcon
+                  className={`${_prefix}-icon-image`}
+                  type="icon-tupian"
+                />
+              </Dropdown>
             </Button>
           )
         },
@@ -486,6 +536,24 @@ const ChatMessageInput = observer(
       return false
     }
 
+    const onBeforeUploadVideoHandler = (
+      file: File
+    ): boolean | Promise<void | Blob | File> => {
+      const isLimit = file.size / 1024 / 1000 > MAX_UPLOAD_FILE_SIZE
+
+      if (isLimit) {
+        message.error(
+          `${t('uploadLimitText')}${MAX_UPLOAD_FILE_SIZE}${t(
+            'uploadLimitUnit'
+          )}`
+        )
+      } else {
+        onSendVideo(file)
+      }
+
+      return false
+    }
+
     // const onUploadImgHandler = (file: any): any => {
     //   onSendImg(file)
     // }

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatMessageInput/style/index.ts b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatMessageInput/style/index.ts
@@ -4,5 +4,7 @@ import 'antd/lib/upload/style'
 import 'antd/lib/message/style'
 import 'antd/lib/button/style'
 import 'antd/lib/spin/style'
+import 'antd/lib/dropdown/style'
+import 'antd/lib/menu/style'
 import './chatAtMemberList.less'
 import './index.less'
diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatMessageItem/index.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatMessageItem/index.tsx
@@ -41,6 +41,8 @@ export interface MessageItemProps {
   replyMsg?: IMMessage
   normalStatusRenderer?: React.ReactNode
   msgOperMenu?: MsgOperMenuItem[]
+  onSendImg: (file: File, randomId?: string) => Promise<void>
+  onSendVideo: (file: File, randomId?: string) => Promise<void>
   onResend: (msg: IMMessage) => void
   onReeditClick: (msg: IMMessage) => void
   onMessageAction: (key: MenuItemKey, msg: IMMessage) => void
@@ -61,6 +63,8 @@ export const ChatMessageItem: React.FC<MessageItemProps> = observer(
     normalStatusRenderer,
     msgOperMenu,
     onResend,
+    onSendImg,
+    onSendVideo,
     onMessageAction,
     onMessageAvatarAction,
     onReeditClick,
@@ -83,6 +87,10 @@ export const ChatMessageItem: React.FC<MessageItemProps> = observer(
       attach,
       idClient,
       status,
+      // @ts-ignore
+      uploadProgress,
+      // @ts-ignore
+      uploadFileInfo,
       time,
       type,
       scene,
@@ -113,6 +121,24 @@ export const ChatMessageItem: React.FC<MessageItemProps> = observer(
       oldBody = '',
     } = attach || { type: '', canRecall: false, canEdit: false, oldBody: '' }
 
+    const handleResendMsg = () => {
+      // 如果是上传过程中失败的图片和视频消息，则重新发送
+      if (uploadFileInfo && ['image', 'video'].includes(msg.type)) {
+        switch (msg.type) {
+          case 'image':
+            onSendImg(uploadFileInfo.file, msg.idClient)
+            break
+          case 'video':
+            onSendVideo(uploadFileInfo.file, msg.idClient)
+            break
+          default:
+            break
+        }
+      } else {
+        onResend(msg)
+      }
+    }
+
     const renderSendStatus = () => {
       if (status === 'sending') {
         return <LoadingOutlined className={`${_prefix}-status-icon`} />
@@ -125,7 +151,7 @@ export const ChatMessageItem: React.FC<MessageItemProps> = observer(
           <Tooltip title={t('sendMsgFailedText')}>
             <ExclamationCircleFilled
               className={`${_prefix}-status-icon-fail`}
-              onClick={() => onResend(msg)}
+              onClick={handleResendMsg}
             />
           </Tooltip>
         )
@@ -170,7 +196,7 @@ export const ChatMessageItem: React.FC<MessageItemProps> = observer(
           icon: <CommonIcon type="icon-huifu" />,
         },
         {
-          show: 1,
+          show: uploadProgress === void 0 ? 1 : 0,
           label: t('deleteText'),
           key: 'delete',
           icon: <DeleteOutlined />,

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatP2pMessageList/index.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatP2pMessageList/index.tsx
@@ -48,6 +48,8 @@ const ChatP2pMessageList = observer(
         noMore,
         myAccount,
         onResend,
+        onSendImg,
+        onSendVideo,
         onMessageAction,
         onReeditClick,
         onScroll,
@@ -79,6 +81,8 @@ const ChatP2pMessageList = observer(
                 replyMsg: replyMsgsMap[msg.idClient],
                 member,
                 onResend,
+                onSendImg,
+                onSendVideo,
                 onReeditClick,
                 onMessageAction,
               }) ?? (
@@ -100,6 +104,8 @@ const ChatP2pMessageList = observer(
                   }
                   myAccount={myAccount}
                   onResend={onResend}
+                  onSendImg={onSendImg}
+                  onSendVideo={onSendVideo}
                   onMessageAction={onMessageAction}
                   onReeditClick={onReeditClick}
                   renderMessageAvatar={renderMessageAvatar}

diff --git a/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamMessageList/index.tsx b/react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamMessageList/index.tsx
@@ -51,6 +51,8 @@ const ChatTeamMessageList = forwardRef<
       noMore,
       myAccount,
       onResend,
+      onSendImg,
+      onSendVideo,
       onMessageAction,
       onMessageAvatarAction,
       onReeditClick,
@@ -83,6 +85,8 @@ const ChatTeamMessageList = forwardRef<
               replyMsg: replyMsgsMap[msg.idClient],
               members,
               onResend,
+              onSendImg,
+              onSendVideo,
               onReeditClick,
               onMessageAction,
             }) ?? (
@@ -105,6 +109,8 @@ const ChatTeamMessageList = forwardRef<
                 }
                 myAccount={myAccount}
                 onResend={onResend}
+                onSendImg={onSendImg}
+                onSendVideo={onSendVideo}
                 onMessageAction={onMessageAction}
                 onMessageAvatarAction={onMessageAvatarAction}
                 onReeditClick={onReeditClick}