v10.5.0

react/package.json

@@ -2,14 +2,14 @@
   "private": true,
   "author": "netease",
   "scripts": {
-    "dev": "umi dev",
-    "build": "umi build",
+    "dev": "NODE_OPTIONS=--openssl-legacy-provider && umi dev",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider && umi dev",
     "start": "umi dev"
   },
   "dependencies": {
     "@xkit-yx/call-kit": "^3.0.0",
     "@xkit-yx/call-kit-react-ui": "^0.6.0",
-    "@xkit-yx/im-kit-ui": "^10.x",
+    "@xkit-yx/im-kit-ui": "^10.5.1",
     "react-dom": "^16.8.0",
     "umi": "^3.5.40"
   },

react/src/YXUIKit/im-kit-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xkit-yx/im-kit-ui",
-  "version": "10.3.3",
+  "version": "10.5.1",
   "description": "云信即时通讯组件",
   "license": "MIT",
   "main": "lib/index.js",

react/src/YXUIKit/im-kit-ui/src/chat/components/ChatForwardModal/index.tsx

@@ -9,29 +9,14 @@ import {
 } from '../../../common'
 import { SelectModalItemProps } from '../../../common/components/SelectModal'
 import { V2NIMMessageForUI } from '@xkit-yx/im-store-v2/dist/types/types'
-import { V2NIMConst } from 'nim-web-sdk-ng'
+import { V2NIMConst } from 'nim-web-sdk-ng/dist/esm/nim'
 import { groupByPy, logger } from '../../../utils'
 import { observer } from 'mobx-react'
 
 const localStorageKey = '__yx_im_recent_forward__'
 const localStorageMax = 5
 const selectedMax = 9
 
-const getUniqueLatestItems = (items: ChatRecentForwardItem[]) => {
-  const map = new Map<string, ChatRecentForwardItem>()
-
-  items.forEach((item) => {
-    const exist = map.get(item.key)
-
-    if (!exist || exist.time < item.time) {
-      map.set(item.key, item)
-    }
-  })
-  return [...map.values()]
-    .sort((a, b) => b.time - a.time)
-    .slice(0, localStorageMax)
-}
-
 export type TabKey = 'conversation' | 'friend' | 'team'
 
 export interface ChatRecentForwardItem extends SelectModalItemProps {
@@ -48,7 +33,7 @@ export interface ChatForwardModalProps {
   commonPrefix?: string
 }
 
-const ChatForwardModal: React.FC<ChatForwardModalProps> = observer(
+const ChatMessageForwardModal: React.FC<ChatForwardModalProps> = observer(
   ({
     msg,
     visible,
@@ -66,12 +51,9 @@ const ChatForwardModal: React.FC<ChatForwardModalProps> = observer(
 
     const myAccount = store.userStore.myUserInfo.accountId
 
+    // 用于获取最近转发列表
     const finalStoreKey = `${localStorageKey}-${myAccount}`
 
-    useEffect(() => {
-      resetState()
-    }, [visible])
-
     const _prefix = `${prefix}-forward-modal`
 
     const friends = groupByPy(
@@ -142,7 +124,7 @@ const ChatForwardModal: React.FC<ChatForwardModalProps> = observer(
         hide: tab !== 'conversation',
       })) as SelectModalItemProps[]
 
-    const datasource = [...conversations, ...friends, ...teams]
+    const dataSource = [...conversations, ...friends, ...teams]
 
     const recentForward = useMemo(() => {
       let res: ChatRecentForwardItem[] = []
@@ -277,6 +259,21 @@ const ChatForwardModal: React.FC<ChatForwardModalProps> = observer(
       )
     }, [t, tab, _prefix])
 
+    const getUniqueLatestItems = (items: ChatRecentForwardItem[]) => {
+      const map = new Map<string, ChatRecentForwardItem>()
+
+      items.forEach((item) => {
+        const exist = map.get(item.key)
+
+        if (!exist || exist.time < item.time) {
+          map.set(item.key, item)
+        }
+      })
+      return [...map.values()]
+        .sort((a, b) => b.time - a.time)
+        .slice(0, localStorageMax)
+    }
+
     const handleCommentChange = (e: any) => {
       setComment(e.target.value)
     }
@@ -325,19 +322,24 @@ const ChatForwardModal: React.FC<ChatForwardModalProps> = observer(
       setSelected(selected.filter((item) => item !== value.key))
     }
 
+    useEffect(() => {
+      resetState()
+    }, [visible])
+
     return (
       <SelectModal
         title={t('forwardText')}
         visible={visible}
         tabRenderer={tabRenderer}
-        datasource={datasource}
+        datasource={dataSource}
         defaultValue={selected}
         itemAvatarRender={itemAvatarRender}
         recentRenderer={recentRenderer}
         type="checkbox"
         max={selectedMax}
         min={1}
         okText={t('sendBtnText')}
+        cancelText={t('cancelText')}
         showLeftTitle={false}
         rightTitle={t('sendToText')}
         bottomRenderer={
@@ -359,4 +361,4 @@ const ChatForwardModal: React.FC<ChatForwardModalProps> = observer(
   }
 )
 
-export default ChatForwardModal
+export default ChatMessageForwardModal

react/src/YXUIKit/im-kit-ui/src/chat/components/ChatGroupTransferModal/index.tsx

@@ -7,8 +7,8 @@ import {
   SelectModal,
 } from '../../../common'
 import { SelectModalItemProps } from '../../../common/components/SelectModal'
-import { V2NIMTeamMember } from 'nim-web-sdk-ng/dist/v2/NIM_BROWSER_SDK/V2NIMTeamService'
-import { V2NIMConst } from 'nim-web-sdk-ng'
+import { V2NIMTeamMember } from 'nim-web-sdk-ng/dist/esm/nim/src/V2NIMTeamService'
+import { V2NIMConst } from 'nim-web-sdk-ng/dist/esm/nim'
 import { observer } from 'mobx-react'
 
 interface GroupActionModalProps {
@@ -107,6 +107,7 @@ const GroupTransferModal: React.FC<GroupActionModalProps> = observer(
         type="radio"
         min={1}
         okText={t('okText')}
+        cancelText={t('cancelText')}
         onOk={handleOk}
         onCancel={handleCancel}
         prefix={commonPrefix}

react/src/YXUIKit/im-kit-ui/src/chat/components/ChatMessageInput/useImgPaste.ts

@@ -0,0 +1,50 @@
+import React, { useCallback, MutableRefObject } from 'react'
+
+interface useImgPasteProps {
+  focus?: boolean
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>
+  onSendImg: (file: File) => void
+}
+
+export const useImgPaste = (props: useImgPasteProps) => {
+  const { textareaRef, onSendImg } = props
+
+  const handleImgPaste = useCallback(
+    async (e: React.ClipboardEvent | any) => {
+      if (!(e.clipboardData && e.clipboardData.items)) {
+        return
+        // 右键粘贴
+      } else if (e.clipboardData.files.length) {
+        if (e.clipboardData.files[0].type.match(/^image\//i)) {
+          return onSendImg && onSendImg(e.clipboardData.files[0])
+        }
+      }
+
+      const { types, items } = e.clipboardData
+
+      types.find((type, index) => {
+        const item = items[index]
+
+        switch (type) {
+          case 'Files': {
+            const file = item.getAsFile()
+
+            if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
+              onSendImg && onSendImg(file)
+            }
+
+            return true
+          }
+
+          default:
+            return true
+        }
+      })
+    },
+    [textareaRef, onSendImg]
+  )
+
+  return {
+    handleImgPaste,
+  }
+}

react/src/YXUIKit/im-kit-ui/src/chat/components/ChatTeamMemberModal/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../../common'
 import { observer } from 'mobx-react'
 import { SelectModalItemProps } from '../../../common/components/SelectModal'
-import { V2NIMConst } from 'nim-web-sdk-ng'
+import { V2NIMConst } from 'nim-web-sdk-ng/dist/esm/nim'
 
 export interface ChatTeamMemberModalProps {
   visible: boolean
@@ -124,6 +124,8 @@ const ChatTeamMemberModal: React.FC<ChatTeamMemberModalProps> = observer(
         type="checkbox"
         max={localOptions.teamManagerLimit}
         leftTitle={t('teamMemberText')}
+        cancelText={t('cancelText')}
+        okText={t('okText')}
         onOk={handleOk}
         onCancel={onCancel}
         prefix={commonPrefix}

react/src/YXUIKit/im-kit-ui/src/common/components/CommonIcon/index.tsx

@@ -2,8 +2,8 @@ import { createFromIconfontCN } from '@ant-design/icons'
 
 const CommonIcon = createFromIconfontCN({
   scriptUrl: [
-    '//yx-web-nosdn.netease.im/sdk-release/yunxun-imweb-iconfont.js',
-    '//at.alicdn.com/t/c/font_3429868_qdz7pcft7cg.js',
+    'https://yx-web-nosdn.netease.im/common/b38b4b232eb3933d8cb7ea16b2464f05/yunxun-imweb-iconfont.js',
+    'https://at.alicdn.com/t/c/font_3429868_fwpfhemf2p.js',
   ], // 在 iconfont.cn 上生成
 })
 

react/src/YXUIKit/im-kit-ui/src/common/components/SelectModal/index.tsx

@@ -21,7 +21,7 @@ export interface SelectModalProps {
   onDelete?: (value: SelectModalItemProps) => void
   onOk: (data: SelectModalItemProps[]) => Promise<void>
   onCancel: () => void
-  okText?: string
+  okText: string
   title?: string
   defaultValue?: string[]
   bottomRenderer?: React.ReactNode
@@ -36,6 +36,7 @@ export interface SelectModalProps {
   rightTitle?: string
   closable?: boolean
   width?: number
+  cancelText: string
 
   prefix?: string
 }
@@ -66,6 +67,7 @@ export const SelectModal: React.FC<SelectModalProps> = ({
   rightTitle,
   closable = true,
   width = 720,
+  cancelText,
 
   prefix = 'common',
 }) => {
@@ -297,6 +299,7 @@ export const SelectModal: React.FC<SelectModalProps> = ({
   return (
     <Modal
       okText={okText}
+      cancelText={cancelText}
       title={title}
       okButtonProps={{ disabled: selected.length < min, loading: sending }}
       width={width}