@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/components/{TUIChatHeader/TUIChatHeaderDefault.tsx → ChatHeader/ChatHeaderDefault.tsx}

@@ -1,29 +1,32 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
 import TencentCloudChat, { Conversation, Group, Profile } from '@tencentcloud/chat';
 import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
 import { Avatar } from '../Avatar';
-import { handleDisplayAvatar } from '../untils';
+import { handleDisplayAvatar } from '../utils';
 import { isH5 } from '../../utils/env';
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
-import { useUIManager } from '../../context';
+import { useUIManager, useTUIChatActionContext } from '../../context';
+import { startCall } from '../Chat/utils';
 
 export interface TUIChatHeaderDefaultProps {
-  title?: string,
-  avatar?: React.ReactElement | string,
-  isOnline?: boolean,
-  conversation?: Conversation,
-  pluginComponentList?: Array<React.ComponentType>,
+  title?: string;
+  avatar?: React.ReactElement | string;
+  isOnline?: boolean;
+  conversation?: Conversation;
+  pluginComponentList?: React.ComponentType[];
+  enableCall?: boolean;
 }
 
 export interface TUIChatHeaderBasicProps extends TUIChatHeaderDefaultProps {
-  isLive?: boolean,
-  opateIcon?: React.ReactElement | string,
+  isLive?: boolean;
+  opateIcon?: React.ReactElement | string;
 }
 
-function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
+function TUIChatHeaderDefaultWithContext<T extends TUIChatHeaderBasicProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     title: propTitle = '',
     avatar: propAvatar,
@@ -31,11 +34,13 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     conversation,
     isLive,
     opateIcon,
+    enableCall: propCallEnabled = false,
   } = props;
+  const { callButtonClicked } = useTUIChatActionContext('TUIChat');
   const { setActiveContact } = useUIManager('TUIContact');
   const [title, setTitle] = useState(propTitle);
   const [avatar, setAvatar] = useState<React.ReactElement | string>('');
-
+  const [isShowCallIcon, setIsShowCallIcon] = useState<boolean>(false);
   useEffect(() => {
     setTitle(propTitle);
     if (propAvatar) {
@@ -44,6 +49,8 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     switch (conversation?.type) {
       case TencentCloudChat.TYPES.CONV_C2C:
         handleC2C(conversation.userProfile, conversation?.remark);
+        const isCalling = TUICore.getService(TUIConstants.TUICalling.SERVICE.NAME) ? true : false;
+        setIsShowCallIcon(isCalling && propCallEnabled);
         break;
       case TencentCloudChat.TYPES.CONV_GROUP:
         handleGroup(conversation.groupProfile);
@@ -57,26 +64,28 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     }
   }, [conversation]);
 
-  const handleC2C = (userProfile: Profile, remark?: string) => {
+  function handleC2C(userProfile: Profile, remark?: string) {
     if (!title) {
       setTitle(remark || userProfile?.nick || userProfile?.userID);
     }
     if (!propAvatar) {
       setAvatar(<Avatar size={32} image={handleDisplayAvatar(userProfile.avatar)} />);
     }
-  };
+  }
 
-  const handleGroup = (groupProfile: Group) => {
+  function handleGroup(groupProfile: Group) {
     if (!title) {
       setTitle(groupProfile?.name || groupProfile?.groupID);
     }
     if (!propAvatar) {
-      setAvatar(<Avatar
-        size={32}
-        image={handleDisplayAvatar(groupProfile.avatar, TencentCloudChat.TYPES.CONV_GROUP)}
-      />);
+      setAvatar(
+        <Avatar
+          size={32}
+          image={handleDisplayAvatar(groupProfile.avatar, TencentCloudChat.TYPES.CONV_GROUP)}
+        />,
+      );
     }
-  };
+  }
 
   const back = () => {
     TUIConversationService.switchConversation('');
@@ -86,29 +95,64 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
   const openTUIManage = () => {
     setTUIManageShow && setTUIManageShow(true);
   };
-
+  const handleCall = (callMediaType: number) => {
+    const userID = conversation?.userProfile?.userID || '';
+    const callType = conversation?.type || TencentCloudChat.TYPES.CONV_C2C;
+    startCall({ callType, callMediaType, userIDList: [userID], callButtonClicked });
+  };
   return (
     <header
       className={`tui-chat-header ${isLive ? 'tui-chat-live-header' : ''}`}
       key={conversation?.conversationID}
     >
-      {isH5 && (<div style={{ paddingRight: '10px' }}><Icon onClick={back} type={IconTypes.BACK} width={9} height={16} /></div>)}
+      {isH5 && (
+        <div style={{ paddingRight: '10px' }}>
+          <Icon onClick={back} type={IconTypes.BACK} width={9} height={16} />
+        </div>
+      )}
       <div
-        className={`tui-chat-header-left ${conversation?.type === TencentCloudChat.TYPES.CONV_SYSTEM ? 'system' : ''}`}
+        className={`tui-chat-header-left ${
+          conversation?.type === TencentCloudChat.TYPES.CONV_SYSTEM
+            ? 'system'
+            : ''
+        }`}
       >
         {conversation?.type !== TencentCloudChat.TYPES.CONV_SYSTEM && avatar}
       </div>
       <div className="header-content">
         <h3 className="title">{title}</h3>
       </div>
+      {isShowCallIcon && (
+        <div className="call-btn-container">
+          <Icon
+            className="call-btn"
+            onClick={() =>
+              handleCall(2)}
+            type={IconTypes.VIDEOCALL}
+            width={24}
+          />
+          <Icon
+            className="call-btn"
+            onClick={() =>
+              handleCall(1)}
+            type={IconTypes.VOICECALL}
+            width={20}
+          />
+        </div>
+      )}
       <div className="tui-chat-header-right">
         <div className="header-handle">
-          {
-            opateIcon || <Icon className="header-handle-more" onClick={openTUIManage} type={IconTypes.ELLIPSE} width={18} height={5} />
-          }
+          {opateIcon || (
+            <Icon
+              className="header-handle-more"
+              onClick={openTUIManage}
+              type={IconTypes.ELLIPSE}
+              width={18}
+              height={5}
+            />
+          )}
         </div>
       </div>
-
     </header>
   );
 }
@@ -116,8 +160,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
 const MemoizedTUIChatHeaderDefault = React.memo(TUIChatHeaderDefaultWithContext) as
 typeof TUIChatHeaderDefaultWithContext;
 
-export function TUIChatHeaderDefault(props: TUIChatHeaderBasicProps)
-:React.ReactElement {
+export function ChatHeaderDefault(props: TUIChatHeaderBasicProps): React.ReactElement {
   const options = { ...props };
   return <MemoizedTUIChatHeaderDefault {...options} />;
 }

package/src/components/ChatHeader/index.ts

@@ -0,0 +1,2 @@
+export * from './ChatHeader';
+export * from './ChatHeaderDefault';

package/src/components/{TUIChatHeader → ChatHeader}/styles/layout.scss

@@ -8,40 +8,39 @@
   align-items: center;
 
   @include theme() {
-    background-color: get(bg-primary);
+    background-color: get(bg-color-operate);
   }
 
   &-left {
     display: flex;
     align-items: center;
   }
+
   .header-content {
     flex: 1;
     padding: 0 8px;
   }
-  &-right {
-    .header-handle {
-      &-more {
-       padding: 10px 3px;
-      }
+
+  .call-btn-container {
+    display: flex;
+    margin-right: 10px;
+
+    .call-btn {
+      margin-right: 16px;
     }
   }
+
   .title {
-    font-family: PingFangSC-Medium;
     font-style: normal;
     font-weight: 700;
     font-size: 14px;
 
     @include theme() {
-      color: get(text-primary);
+      color: get(text-color-primary);
     }
-
   }
+
   .system {
     height: 32px;
   }
 }
-
-.tui-chat-live-header {
-
-}

package/src/components/{TUIManage/TUIManage.tsx → ChatSetting/ChatSetting.tsx}

@@ -1,44 +1,41 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Conversation} from '@tencentcloud/chat';
+import { Conversation } from '@tencentcloud/chat';
+import { TUIStore } from '@tencentcloud/chat-uikit-engine';
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { Switch } from '../Switch';
-import { useUIKit, useUIManager } from '../../context';
+import { useUIManager } from '../../context';
 import { isH5, isPC } from '../../utils/env';
 import { getMessageProfile } from '../ConversationPreview/utils';
-import { useConversationUpdate } from '../TUIConversationList/hooks/useConversationUpdate';
-import { useConversation } from '../../hooks';
 
-
-function UnMemoizedTUIManage<T>(
-):React.ReactElement {
+function UnMemoizedChatSetting<T>(
+): React.ReactElement {
   const { t } = useTranslation();
   const [conversation, setConversation] = useState<Conversation>();
   const [profile, setProfile] = useState<any>();
   const [isPinned, setIsPinned] = useState<boolean>(false);
   const [forceUpdateCount, setForceUpdateCount] = useState(0);
-  const { chat } = useUIKit('TUIManage');
   const {
     conversation: activeConversation,
     setActiveConversation,
     TUIManageShow,
     setTUIManageShow,
   } = useUIManager('TUIManage');
-  useConversationUpdate(undefined, () => {
-    setForceUpdateCount((count) => count + 1);
-  });
-  const { pinConversation, deleteConversation } = useConversation(chat);
+
   const pinChatChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setIsPinned(e.target.checked);
-    conversation?.conversationID && pinConversation({
-      conversationID: conversation.conversationID,
-      isPinned: e.target.checked,
-    });
+    if (conversation?.conversationID) {
+      const conversationModel = TUIStore.getConversationModel(conversation?.conversationID);
+      conversationModel && conversationModel.pinConversation();
+    }
   };
   const handleDelete = () => {
-    conversation?.conversationID && deleteConversation(conversation.conversationID);
+    if (conversation?.conversationID) {
+      const conversationModel = TUIStore.getConversationModel(conversation?.conversationID);
+      conversationModel && conversationModel.deleteConversation();
+    }
     setActiveConversation(undefined);
   };
   const close = () => {
@@ -95,7 +92,7 @@ function UnMemoizedTUIManage<T>(
               <div className="manage-handle-title">
                 {t('TUIConversation.Pin')}
               </div>
-              <Switch onChange={(e: any)=> {pinChatChange(e)}} checked={isPinned} />
+              <Switch onChange={(e: any) => { pinChatChange(e); }} checked={isPinned} />
             </div>
             {isPC && (
               <div
@@ -115,5 +112,5 @@ function UnMemoizedTUIManage<T>(
   );
 }
 
-export const TUIManage = React.memo(UnMemoizedTUIManage) as unknown as
-typeof UnMemoizedTUIManage;
+export const ChatSetting = React.memo(UnMemoizedChatSetting) as unknown as
+typeof UnMemoizedChatSetting;

package/src/components/ChatSetting/index.ts

@@ -0,0 +1 @@
+export * from './ChatSetting';

package/src/components/{TUIManage → ChatSetting}/styles/index.scss

@@ -1,10 +1,17 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-manage {
   display: flex;
   flex-direction: column;
   width: 22%;
   max-width: 300px;
   min-width: 200px;
-  border-left: 1px solid #f9fafb;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+    border-left: 1px solid get(stroke-color-primary);
+  }
 
   .red {
     color: #ff584c !important;
@@ -19,8 +26,6 @@
       margin-right: 10px;
       font-weight: 700;
       font-size: 14px;
-      font-family: PingFangSC-Medium;
-      line-height: 17px;
     }
   }
 
@@ -39,30 +44,29 @@
         text-align: center;
         font-weight: 700;
         font-size: 24px;
-        font-family: PingFangSC-Medium;
-        line-height: 29px;
         margin-bottom: 10px;
       }
 
       .info-id {
-        font-weight: 400;
-        font-size: 12px;
-        font-family: PingFangSC-Medium;
-        line-height: 14px;
-        color: #666;
+        font-size: 16px;
         margin-bottom: 30px;
         text-align: center;
+        @include theme() {
+          color: get(text-color-secondary);
+        }
       }
     }
 
     .tui-manage-handle {
       .manage-handle-box {
         display: flex;
-        background: rgba(249, 249, 249, 94%);
         align-items: center;
         justify-content: space-between;
         padding: 10px;
-        box-sizing: border-box;
+
+        @include theme() {
+          background: get(bg-color-operate);
+        }
 
         &:nth-child(2) {
           margin-top: 10px;
@@ -71,9 +75,10 @@
 
         .manage-handle-title {
           font-size: 16px;
-          font-family: PingFangSC-Medium;
-          line-height: 22px;
-          color: rgba(0, 0, 0, 60%);
+
+          @include theme() {
+            color: get(text-color-primary);
+          }
         }
       }
     }
@@ -91,5 +96,8 @@
   max-width: 100%;
   min-width: 100%;
   z-index: 1;
-  background: #fff;
+
+  @include theme() {
+    background: get(bg-color-operate);
+  }
 }

package/src/components/Checkbox/index.tsx

@@ -4,21 +4,21 @@ import { Icon, IconTypes } from '../Icon';
 import './styles/index.scss';
 
 interface onChangeParams {
-  checked?: boolean,
-  value?: any,
+  checked?: boolean;
+  value?: any;
 }
 
 interface SelectProps {
-  checked?: boolean,
-  className?: string,
-  onChange?: (data?: onChangeParams) => void,
-  value?: any,
-  id?: string,
+  checked?: boolean;
+  className?: string;
+  onChange?: (data?: onChangeParams) => void;
+  value?: any;
+  id?: string;
 }
 
 export function Checkbox<
-T extends SelectProps
->(props:React.PropsWithChildren<T>) {
+  T extends SelectProps,
+>(props: React.PropsWithChildren<T>) {
   const {
     checked: propsChecked = false,
     className,

package/src/components/Checkbox/styles/color.scss

@@ -1,11 +1,22 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .info {
-  background: #FFFFFF;
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
 }
+
 .warn {
-  color: #FFFFFF;
-  background: #faad14;
+  @include theme() {
+    background-color: get(text-color-warning);
+    color: #fff;
+  }
 }
+
 .error {
-  color: #FFFFFF;
-  background: #ff4d4f;
-}
+  @include theme() {
+    background-color: get(text-color-error);
+    color: #fff;
+  }
+}

package/src/components/{TUIContact/TUIContact.tsx → Contact/Contact.tsx}

@@ -3,16 +3,16 @@ import { useTranslation } from 'react-i18next';
 import {
   TUIContactContextProvider,
   TUIContactContextValue,
-} from '../../context/TUIContactContext';
+} from '../../context/ContactContext';
 import { isH5 } from '../../utils/env';
 import { useUIManager } from '../../context';
 import useTUIContact from './hooks/useTUIContact';
-import { TUIContactList } from './TUIContactList/TUIContactList';
-import { TUIContactSearch } from '../TUIContactSearch/TUIContactSearch';
+import { ContactList } from './ContactList/ContactList';
+import { ContactSearch } from '../ContactSearch/ContactSearch';
 import { Icon, IconTypes } from '../Icon';
 import './index.scss';
 
-export function UnMemoizedTUIContact<T>(
+export function UnMemoizedContact<T>(
   props: PropsWithChildren<T>,
 ): React.ReactElement {
   const { children } = props;
@@ -57,41 +57,41 @@ export function UnMemoizedTUIContact<T>(
     <TUIContactContextProvider value={TUIContactValue}>
       {children || (
         <div className={`tui-contacts ${isH5 ? 'tui-contacts-h5' : ''} `}>
-            {!isShowAddFriend && (
-              <>
-                <div className="tui-contacts-header">
-                  <div className="tui-contact-input">
-                    <TUIContactSearch />
-                  </div>
-                  <Icon
-                    onClick={addFriend}
-                    type={IconTypes.ADDFRIEND}
-                    width={24}
-                    height={24}
-                  />
+          {!isShowAddFriend && (
+            <>
+              <div className="tui-contacts-header">
+                <div className="tui-contact-input">
+                  <ContactSearch />
                 </div>
-                <TUIContactList />
-              </>
-            )}
-            {isShowAddFriend && (
-              <>
-                <div className="tui-contacts-add-header">
-                  <Icon
-                    onClick={addFriendBack}
-                    type={IconTypes.BACK}
-                    width={9}
-                    height={16}
-                  />
-                  <div className="tui-contacts-add-header-title">
-                    {t('TUIContact.Add Friend')}
-                  </div>
+                <Icon
+                  onClick={addFriend}
+                  type={IconTypes.ADDFRIEND}
+                  width={24}
+                  height={24}
+                />
+              </div>
+              <ContactList />
+            </>
+          )}
+          {isShowAddFriend && (
+            <>
+              <div className="tui-contacts-add-header">
+                <Icon
+                  onClick={addFriendBack}
+                  type={IconTypes.BACK}
+                  width={9}
+                  height={16}
+                />
+                <div className="tui-contacts-add-header-title">
+                  {t('TUIContact.Add Friend')}
                 </div>
-                <TUIContactSearch />
-              </>
-            )}
+              </div>
+              <ContactSearch />
+            </>
+          )}
         </div>
       )}
     </TUIContactContextProvider>
   );
 }
-export const TUIContact = React.memo(UnMemoizedTUIContact);
+export const Contact = React.memo(UnMemoizedContact);

package/src/components/{TUIContact/TUIContactInfo/TUIContactInfo.tsx → Contact/ContactInfo/ContactInfo.tsx}

@@ -11,10 +11,10 @@ import { FriendApplicationInfo } from './friendApplication';
 import './index.scss';
 
 interface TUIContactInfoProps {
-  className?: string,
-  showChats?: () => void,
+  className?: string;
+  showChats?: () => void;
 }
-export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
+export function UnMemoizedContactInfo<T extends TUIContactInfoProps>(
   props: PropsWithChildren<T>,
 ): React.ReactElement {
   const { showChats } = props;
@@ -32,4 +32,4 @@ export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
     </div>
   );
 }
-export const TUIContactInfo = React.memo(UnMemoizedTUIContactInfo);
+export const ContactInfo = React.memo(UnMemoizedContactInfo);