Merge pull request #6 from chenxtdo/main

9.3.0 开源 demo 更新
netease-kit · Jan 30, 2023 · d75fc33 · d75fc33
2 parents 556b0d0 + d370c5f
commit d75fc33
Show file tree

Hide file tree

Showing 78 changed files with 3,834 additions and 1,454 deletions.
diff --git a/react/package-lock.json b/react/package-lock.json
diff --git a/react/package.json b/react/package.json
@@ -9,7 +9,7 @@
     "start": "npm run dev"
   },
   "dependencies": {
-    "@xkit-yx/im-kit-ui": "^0.2.3",
+    "@xkit-yx/im-kit-ui": "^0.3.1",
     "umi": "^4.0.40"
   },
   "devDependencies": {

diff --git a/react/src/YXUIKit/chat-kit-ui/package.json b/react/src/YXUIKit/chat-kit-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xkit-yx/chat-kit-ui",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "聊天组件",
   "license": "MIT",
   "main": "lib/index.js",
@@ -55,13 +55,13 @@
     "react-string-replace": "^1.1.0"
   },
   "dependencies": {
-    "@xkit-yx/common-ui": "^0.5.1",
-    "@xkit-yx/core-kit": "^0.7.0",
-    "@xkit-yx/utils": "^0.4.5",
+    "@xkit-yx/common-ui": "^0.6.1",
+    "@xkit-yx/core-kit": "^0.8.0",
+    "@xkit-yx/utils": "^0.5.0",
     "antd": "^4.16.3",
     "mobx": "^6.6.1",
     "mobx-react": "^7.5.2",
     "react-string-replace": "^1.1.0"
   },
-  "gitHead": "7e7dcfd37b7b3cf860cad94a21cc22cdc9cd5957"
+  "gitHead": "e49d831a053536bb2a91ce0b9d8599d9c5cb755b"
 }
diff --git a/react/src/YXUIKit/chat-kit-ui/src/Container.tsx b/react/src/YXUIKit/chat-kit-ui/src/Container.tsx
@@ -1,7 +1,12 @@
 import React, { ReactNode } from 'react'
 import P2pChatContainer from './containers/p2pChatContainer'
 import TeamChatContainer from './containers/teamChatContainer'
-import { useStateContext, useEventTracking, Welcome } from '../../common-ui/src'
+import {
+  useStateContext,
+  useEventTracking,
+  Welcome,
+  Utils,
+} from '../../common-ui/src'
 import { TMsgScene } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterface'
 import { RenderP2pCustomMessageOptions } from './components/ChatP2pMessageList'
 import { RenderTeamCustomMessageOptions } from './components/ChatTeamMessageList'
@@ -12,6 +17,7 @@ import { observer } from 'mobx-react'
 import packageJson from '../package.json'
 import { TeamMember } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/TeamServiceInterface'
 import { FriendProfile } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/FriendServiceInterface'
+import { GroupItemProps } from './components/ChatTeamSetting/GroupItem'
 
 export interface ActionRenderProps extends ChatMessageInputProps {
   scene: TMsgScene
@@ -42,6 +48,14 @@ export interface ChatContainerProps {
     消息发送按钮组配置，不传使用默认的配置
     */
   actions?: Action[]
+  /**
+    是否需要显示 p2p 消息已读未读，默认 false
+    */
+  p2pMsgReceiptVisible?: boolean
+  /**
+    是否需要显示群组消息已读未读，默认 false
+    */
+  teamMsgReceiptVisible?: boolean
   /**
     发送文字消息的回调，一般用于默认的文字发送缺少想要的字段时
     */
@@ -84,9 +98,9 @@ export interface ChatContainerProps {
   /**
    自定义渲染群组成员 item
    */
-  renderTeamMemberItem?: (params: {
-    member: TeamMember & Partial<FriendProfile>
-  }) => JSX.Element | null | undefined
+  renderTeamMemberItem?: (
+    params: GroupItemProps
+  ) => JSX.Element | null | undefined
   /**
    样式前缀
    */
@@ -101,13 +115,16 @@ export const ChatContainer: React.FC<ChatContainerProps> = observer(
   ({
     selectedSession,
     actions,
+    p2pMsgReceiptVisible = false,
+    teamMsgReceiptVisible = false,
     onSendText,
     renderEmpty,
     renderP2pCustomMessage,
     renderTeamCustomMessage,
     renderHeader,
     renderP2pInputPlaceHolder,
     renderTeamInputPlaceHolder,
+    renderTeamMemberItem,
 
     prefix = 'chat',
     commonPrefix = 'common',
@@ -117,9 +134,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = observer(
     const finalSelectedSession =
       selectedSession || store.uiStore.selectedSession || ''
 
-    const scene = finalSelectedSession.split('-')[0] as TMsgScene
-
-    const to = finalSelectedSession.split('-')[1]
+    const { scene, to } = Utils.parseSessionId(finalSelectedSession)
 
     useEventTracking({
       appkey: initOptions.appkey,
@@ -135,6 +150,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = observer(
           commonPrefix={commonPrefix}
           scene={scene}
           to={to}
+          p2pMsgReceiptVisible={p2pMsgReceiptVisible}
           onSendText={onSendText}
           actions={actions}
           renderP2pCustomMessage={renderP2pCustomMessage}
@@ -147,11 +163,13 @@ export const ChatContainer: React.FC<ChatContainerProps> = observer(
           commonPrefix={commonPrefix}
           scene={scene}
           to={to}
+          teamMsgReceiptVisible={teamMsgReceiptVisible}
           onSendText={onSendText}
           actions={actions}
           renderTeamCustomMessage={renderTeamCustomMessage}
           renderHeader={renderHeader}
           renderTeamInputPlaceHolder={renderTeamInputPlaceHolder}
+          renderTeamMemberItem={renderTeamMemberItem}
         />
       ) : null
     ) : renderEmpty ? (

diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatCreateTeam/index.tsx b/react/src/YXUIKit/chat-kit-ui/src/components/ChatCreateTeam/index.tsx
@@ -57,6 +57,7 @@ const GroupCreate: React.FC<GroupCreateProps> = ({
           ...values,
           selectedAccounts,
           avatar,
+          name: values.name.trim(),
         })
         resetState()
       })
@@ -89,7 +90,7 @@ const GroupCreate: React.FC<GroupCreateProps> = ({
       cancelText={t('cancelText')}
       okText={t('createButtonText')}
     >
-      <Form form={form}>
+      <Form form={form} labelCol={{ span: 5 }}>
         <Form.Item
           label={t('teamTitle')}
           name="name"

diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/index.tsx b/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/index.tsx
@@ -1,15 +1,25 @@
 import React, { useState, useRef, Fragment } from 'react'
 import { Input, Upload, Popover, message, Button, Spin } from 'antd'
-import { CommonIcon, Constant, useTranslation } from '../../../../common-ui/src'
+import { IMMessage } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterface'
+import {
+  CommonIcon,
+  Constant,
+  getMsgContentTipByType,
+  Utils,
+  useTranslation,
+  useStateContext,
+} from '../../../../common-ui/src'
 import { Action } from '../../Container'
 import { MAX_UPLOAD_FILE_SIZE } from '../../constant'
-import { LoadingOutlined } from '@ant-design/icons'
+import { LoadingOutlined, CloseOutlined } from '@ant-design/icons'
 import { TMsgScene } from 'nim-web-sdk-ng/dist/NIM_BROWSER_SDK/MsgServiceInterface'
+import { observer } from 'mobx-react'
 
 const { TextArea } = Input
 export interface ChatMessageInputProps {
   prefix?: string
   placeholder?: string
+  replyMsg?: IMMessage
   scene: TMsgScene
   to: string
   actions?: Action[]
@@ -21,6 +31,7 @@ export interface ChatMessageInputProps {
   onSendText: (value: string) => void
   onSendFile: (file: File) => void
   onSendImg: (file: File) => void
+  onRemoveReplyMsg?: () => void
 }
 
 const mergeActions = (
@@ -40,27 +51,32 @@ const mergeActions = (
   })
 }
 
-const ChatMessageInput: React.FC<ChatMessageInputProps> = (props) => {
+const ChatMessageInput: React.FC<ChatMessageInputProps> = observer((props) => {
   const {
     prefix = 'chat',
     placeholder = '',
     actions,
+    scene,
+    to,
     mute = false,
     inputValue = '',
     uploadImageLoading = false,
     uploadFileLoading = false,
+    replyMsg,
     setInputValue,
     onSendText,
     onSendFile,
     onSendImg,
+    onRemoveReplyMsg,
   } = props
 
   const { t } = useTranslation()
+  const { store } = useStateContext()
   const _prefix = `${prefix}-message-input`
   const inputRef = useRef<any>(null)
   const [visible, setVisible] = useState<boolean>(false)
   const antIcon = <LoadingOutlined className={`${_prefix}-loading-spin`} spin />
-
+  const { EMOJI_ICON_MAP_CONFIG } = Utils.handleEmojiTranslate(t)
   const defaultActions: Action[] = [
     {
       action: 'emoji',
@@ -205,7 +221,7 @@ const ChatMessageInput: React.FC<ChatMessageInputProps> = (props) => {
 
   const emojiContent = (
     <>
-      {Object.keys(Constant.EMOJI_ICON_MAP_CONFIG).map((tag: string, index) => (
+      {Object.keys(EMOJI_ICON_MAP_CONFIG).map((tag: string, index) => (
         <span
           onClick={() => {
             onEmojiClickHandler(tag)
@@ -216,44 +232,62 @@ const ChatMessageInput: React.FC<ChatMessageInputProps> = (props) => {
         >
           <CommonIcon
             className={`${_prefix}-emoji-item-icon`}
-            type={Constant.EMOJI_ICON_MAP_CONFIG[tag]}
+            type={EMOJI_ICON_MAP_CONFIG[tag]}
           />
         </span>
       ))}
     </>
   )
 
+  const replyMsgContent = () => {
+    let content = `${t('replyText')} ${store.uiStore.getAppellation({
+      account: replyMsg?.from || '',
+      teamId: scene === 'team' ? to : '',
+    })}：`
+    content += replyMsg ? getMsgContentTipByType(replyMsg, t) : ''
+    return <div className={`${_prefix}-reply-content`}>{content}</div>
+  }
+
   // const isMute = useMemo(() => {
   //   return (teamInfo as ITeamInfo).mute && !isGroupOwner && !isGroupManager
   // }, [teamInfo, isGroupOwner, isGroupManager])
 
   return (
     <div className={`${prefix}-message-input`}>
       <div className={`${_prefix}-wrap`}>
-        <TextArea
-          ref={inputRef}
-          bordered={false}
-          className={`${_prefix}-textarea`}
-          placeholder={placeholder}
-          value={inputValue}
-          disabled={mute}
-          onChange={onInputChangeHandler}
-          onPressEnter={onPressEnterHandler}
-          autoSize={{ maxRows: 2 }}
-        />
-        <div className={`${_prefix}-icon-box`}>
-          {finalActions.map((item) =>
-            item.render && item.visible ? (
-              <Fragment key={item.action}>
-                {item.render({
-                  ...props,
-                  prefix: _prefix,
-                })}
-              </Fragment>
-            ) : null
-          )}
-        </div>
-        {/* <div
+        {!!replyMsg && (
+          <div className={`${_prefix}-reply-wrap`}>
+            <div className={`${_prefix}-reply-container`}>
+              <CloseOutlined onClick={() => onRemoveReplyMsg?.()} />
+              {replyMsgContent()}
+            </div>
+          </div>
+        )}
+        <div className={`${_prefix}-content`}>
+          <TextArea
+            ref={inputRef}
+            bordered={false}
+            className={`${_prefix}-textarea`}
+            placeholder={placeholder}
+            value={inputValue}
+            disabled={mute}
+            onChange={onInputChangeHandler}
+            onPressEnter={onPressEnterHandler}
+            autoSize={{ maxRows: 2 }}
+          />
+          <div className={`${_prefix}-icon-box`}>
+            {finalActions.map((item) =>
+              item.render && item.visible ? (
+                <Fragment key={item.action}>
+                  {item.render({
+                    ...props,
+                    prefix: _prefix,
+                  })}
+                </Fragment>
+              ) : null
+            )}
+          </div>
+          {/* <div
         contentEditable="true"
         ref={divRef}
         className={`${_prefix}-textarea`}
@@ -262,9 +296,10 @@ const ChatMessageInput: React.FC<ChatMessageInputProps> = (props) => {
         }}
         onKeyUp={onPressEnterHandler}
       ></div> */}
+        </div>
       </div>
     </div>
   )
-}
+})
 
 export default ChatMessageInput
diff --git a/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/style/index.less b/react/src/YXUIKit/chat-kit-ui/src/components/ChatMessageInput/style/index.less
@@ -11,8 +11,32 @@
   background: @yx-primary-color;
   border: 1px solid @yx-border-color-4;
   border-radius: @yx-primary-border-radius;
-  display: flex;
-  position: relative;
+  .@{prefix-cls}-reply-wrap {
+    padding: 12px 15px 0;
+    .@{prefix-cls}-reply-container {
+      height: 30px;
+      background: @yx-background-color-6;
+      border-radius: @yx-primary-border-radius;
+      color: @yx-text-color-2;
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+      font-size: 12px;
+      .@{prefix-cls}-reply-content {
+        border-left: 1px solid @yx-border-color-4;
+        margin-left: 8px;
+        padding-left: 5px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+        flex: 1;
+      }
+    }
+  }
+  .@{prefix-cls}-content {
+    display: flex;
+    position: relative;
+  }
 
   // .@{prefix-cls}-msg-tip {
   //   position: absolute;