@tencentcloud/chat-uikit-react 2.2.5 → 2.2.7

package/src/components/TUIChatHeader/styles/layout.scss

@@ -8,40 +8,47 @@
   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;
   }
+
+  .call-btn-container {
+    display: flex;
+    margin-right: 10px;
+
+    .call-btn {
+      margin-right: 16px;
+    }
+  }
+
   &-right {
     .header-handle {
       &-more {
-       padding: 10px 3px;
+        padding: 10px 3px;
       }
     }
   }
+
   .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/TUIContact/TUIContact.tsx

@@ -5,7 +5,7 @@ import {
   TUIContactContextValue,
 } from '../../context/TUIContactContext';
 import { isH5 } from '../../utils/env';
-import { useTUIKitContext } from '../../context';
+import { useUIManager } from '../../context';
 import useTUIContact from './hooks/useTUIContact';
 import { TUIContactList } from './TUIContactList/TUIContactList';
 import { TUIContactSearch } from '../TUIContactSearch/TUIContactSearch';
@@ -17,7 +17,7 @@ export function UnMemoizedTUIContact<T>(
 ): React.ReactElement {
   const { children } = props;
   const { t } = useTranslation();
-  const { setActiveContact } = useTUIKitContext('TUIContact');
+  const { setActiveContact } = useUIManager('TUIContact');
   const [isShowAddFriend, setShowAddFriend] = useState(false);
   const addFriend = () => {
     setActiveContact();

package/src/components/TUIContact/TUIContactInfo/TUIContactInfo.tsx

@@ -1,7 +1,7 @@
 import React, {
   PropsWithChildren,
 } from 'react';
-import { useTUIKitContext } from '../../../context';
+import { useUIManager } from '../../../context';
 import { isH5 } from '../../../utils/env';
 import { FriendInfo } from './friendInfo';
 import { BlockInfo } from './blockInfo';
@@ -18,7 +18,7 @@ export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
   props: PropsWithChildren<T>,
 ): React.ReactElement {
   const { showChats } = props;
-  const { contactData } = useTUIKitContext('TUIContact');
+  const { contactData } = useUIManager('TUIContact');
   if (!contactData?.type) {
     return (<> </>);
   }

package/src/components/TUIContact/TUIContactInfo/basicInfo.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Profile } from '@tencentcloud/chat';
 import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { useTUIKitContext } from '../../../context';
+import { useUIManager } from '../../../context';
 import { Icon, IconTypes } from '../../Icon';
 import { isH5 } from '../../../utils/env';
 
@@ -19,7 +19,7 @@ export function UnMemoizedBasicInfo<T extends Props>(
   const {
     userID, nick, selfSignature, avatar,
   } = profile;
-  const { setActiveContact } = useTUIKitContext('TUIContact');
+  const { setActiveContact } = useUIManager('TUIContact');
   const back = () => {
     TUIConversationService.switchConversation('');
     setActiveContact();

package/src/components/TUIContact/TUIContactInfo/blockInfo.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Profile } from '@tencentcloud/chat';
-import { useTUIKitContext } from '../../../context';
+import { useUIManager } from '../../../context';
 import { BasicInfo } from './basicInfo';
 import { Switch } from '../../Switch';
 import useContactInfo from './hooks/useContactInfo';
@@ -13,7 +13,7 @@ export function UnMemoizedBlockInfo<T extends Props>(
   props: T,
 ): React.ReactElement {
   const { profile } = props;
-  const { contactData, setActiveContact } = useTUIKitContext('TUIContact');
+  const { contactData, setActiveContact } = useUIManager('TUIContact');
   const { t } = useTranslation();
   const [isAddToBlocklist, setIsAddToBlocklist] = useState(false);
 

package/src/components/TUIContact/TUIContactInfo/friendApplication.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import TencentCloudChat, { FriendApplication } from '@tencentcloud/chat';
-import { useTUIKitContext } from '../../../context';
+import { useUIManager } from '../../../context';
 import { Avatar, defaultUserAvatar } from '../../Avatar';
 import useContactInfo from './hooks/useContactInfo';
 
@@ -11,7 +11,7 @@ interface Props {
 export function UnMemoizedFriendApplication<T extends Props>(
   props: T,
 ): React.ReactElement {
-  const { setActiveContact } = useTUIKitContext('TUIContact');
+  const { setActiveContact } = useUIManager('TUIContact');
   const { t } = useTranslation();
   const { application } = props;
   const {

package/src/components/TUIContact/TUIContactInfo/friendInfo.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Friend } from '@tencentcloud/chat';
 import { TUIConversationService, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { useTUIKitContext } from '../../../context';
+import { useUIKit, useUIManager } from '../../../context';
 import { BasicInfo } from './basicInfo';
 import { Switch } from '../../Switch';
 import useContactInfo from './hooks/useContactInfo';
@@ -16,9 +16,10 @@ interface Props {
 export function UnMemoizedFriendInfo<T extends Props>(
   props: T,
 ): React.ReactElement {
+  const { chat } = useUIKit();
   const {
-    chat, contactData, setActiveContact, setActiveConversation,
-  } = useTUIKitContext('TUIContact');
+    contactData, setActiveContact, setActiveConversation,
+  } = useUIManager('TUIContact');
   const { t } = useTranslation();
   const { friend, showChats } = props;
   const { userID, profile, remark } = friend;

package/src/components/TUIContact/TUIContactInfo/groupInfo.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TUIConversationService, IGroupModel, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { useTUIKitContext } from '../../../context';
+import { useUIManager } from '../../../context';
 import { Icon, IconTypes } from '../../Icon';
 import { isH5 } from '../../../utils/env';
 import '../index.scss';
@@ -16,8 +16,8 @@ export function UnMemoizedGroupInfo<T extends Props>(
   props: T,
 ): React.ReactElement {
   const { group, showChats } = props;
-  
-  const { setActiveContact, setActiveConversation } = useTUIKitContext('TUIContact');
+
+  const { setActiveContact, setActiveConversation } = useUIManager('TUIContact');
   const { t } = useTranslation();
   const { groupID, name, avatar } = group;
 

package/src/components/TUIContact/TUIContactInfo/hooks/useContactInfo.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
 import { Toast } from '../../../Toast';
-import { useTUIKitContext } from '../../../../context';
+import { useUIKit } from '../../../../context';
 
 function useContactInfo() {
-  const { chat } = useTUIKitContext('useContactInfo');
+  const { chat } = useUIKit('useContactInfo');
 
   const removeFromBlocklist = useCallback((userID: string) => {
     chat.removeFromBlacklist({

package/src/components/TUIContact/TUIContactInfo/index.scss

@@ -1,55 +1,77 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-contact-info {
   width: 100%;
   height: 100%;
   display: flex;
   padding: 60px;
-  box-sizing: border-box;
   flex-direction: column;
   overflow: hidden;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+
   .tui-contact-info-header {
     padding-bottom: 15px;
     border-bottom: 1px solid #ddd;
     overflow: hidden;
     box-sizing: border-box;
     width: 100%;
+
     .header-container {
       flex: 1;
+
       .header-container-avatar {
         display: flex;
         align-items: center;
         padding: 10px;
       }
+
       .header-container-name {
         font-size: 24px;
         padding: 15px;
+
+        @include theme() {
+          color: get(text-color-primary);
+        }
       }
+
       .header-container-text {
+        margin-top: 20px;
         font-size: 16px;
-        line-height: 50px;
-        font-weight: 400;
-        color: #999999;
         word-break: break-all;
+
+        @include theme() {
+          color: get(text-color-secondary);
+        }
       }
     }
   }
+
   .tui-contact-info-content {
     padding: 15px 0;
     overflow: hidden;
+
+    @include theme() {
+      color: get(text-color-secondary);
+    }
+
     .content-item {
       display: flex;
       flex-direction: row;
       align-items: center;
       padding: 6px 0;
       font-size: 16px;
-      font-weight: 400;
       min-height: 56px;
     }
+
     .content-item-wording {
       padding: 6px 0;
       font-size: 16px;
-      font-weight: 400;
       min-height: 56px;
     }
+
     .content-item-wording-text {
       margin-top: 5px;
       flex: 1;
@@ -61,53 +83,54 @@
       height: 100px;
       width: 95%;
     }
+
     .content-item-label {
-      color: #999;
       margin-right: 5px;
     }
+
     .content-item-text {
       flex: 1;
       display: flex;
       flex-direction: row;
-      color: #333;
       overflow: hidden;
     }
+
     .content-btn-container {
       display: flex;
       padding: 30px;
       justify-content: center;
+
       .content-item-btn {
         margin: 15px;
-        width: 122px;
-        height: 26px;
         padding: 8px 20px;
         border-radius: 25px;
         border: none;
         font-size: 14px;
         text-align: center;
-        line-height: 26px;
-        font-weight: 400;
         letter-spacing: 0;
         min-width: 100px;
         cursor: pointer;
         -webkit-user-select: none;
         user-select: none;
       }
+
       .delete-btn {
-        border: 1px solid #e54545;
-        background: transparent;
-        color: #e54545;
+        @include theme() {
+          color: get(text-color-error);
+          border: 1px solid get(border-color-error);
+        }
       }
+
       .confirm-btn {
-        border: 1px solid #006eff;
-        background: #006eff;
-        color: #fff;
+        @include theme() {
+          color: #fff;
+          background-color: get(text-color-link);
+        }
       }
-
     }
   }
 }
+
 .tui-contact-info-h5 {
   padding: 8px;
- 
-}
+}

package/src/components/TUIContact/TUIContactList/TUIContactList.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import TencentCloudChat from '@tencentcloud/chat';
 import { isH5 } from '../../../utils/env';
-import { useTUIKitContext, useTUIContactContext } from '../../../context';
+import { useUIManager, useTUIContactContext } from '../../../context';
 import useContactInfo from '../TUIContactInfo/hooks/useContactInfo';
 import useTUIContact from '../hooks/useTUIContact';
 import { Avatar, defaultUserAvatar } from '../../Avatar';
@@ -11,15 +11,15 @@ import downArrow from '../../Icon/images/down-arrow.png';
 import './index.scss';
 
 interface RenderContactListProps {
-  type: 'group' | 'block' | 'friend' ,
-  isShow: boolean,
-  title: string,
-  list: Array<any> | undefined,
-  setShow: (value: boolean) => void
+  type: 'group' | 'block' | 'friend';
+  isShow: boolean;
+  title: string;
+  list: any[] | undefined;
+  setShow: (value: boolean) => void;
 }
 
 function UnMemoizedTUIContactList<T>(): React.ReactElement {
-  const { setActiveContact } = useTUIKitContext();
+  const { setActiveContact } = useUIManager();
   const { t } = useTranslation();
   const {
     isShowContactList, friendList, blocklistProfile, friendApplicationList,
@@ -39,21 +39,23 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
     setActiveContact();
   };
 
-const RenderContactList = ({ type, isShow, setShow, list, title } : RenderContactListProps) => {
-  return (
-    <>
-      <div
-        className="tui-contacts-title"
-        role="button"
-        tabIndex={0}
-        onClick={() => setShow(!isShow)}
-      >
-        <div className="tui-contacts-list-title">{title}</div>
-        <div className="tui-contacts-list-icon">
-          <img src={isShow ? downArrow : rightArrow} alt="" />
+  const RenderContactList = ({ type, isShow, setShow, list, title }: RenderContactListProps) => {
+    return (
+      <>
+        <div
+          className="tui-contacts-title"
+          role="button"
+          tabIndex={0}
+          onClick={() => setShow(!isShow)}
+        >
+          <div className="tui-contacts-list-title">{title}</div>
+          <div className="tui-contacts-list-icon">
+            {isShow
+              ? <i className="iconfont contacts-list-icon">&#xe605;</i>
+              : <i className="iconfont contacts-list-icon">&#xe606;</i>}
+          </div>
         </div>
-      </div>
-      {isShow
+        {isShow
         && list?.map((item: any) => {
           const { userID, groupID, avatar, name, nick } = item.profile || item;
           const showName = item.remark || nick || userID || name || groupID;
@@ -74,9 +76,9 @@ const RenderContactList = ({ type, isShow, setShow, list, title } : RenderContac
             </div>
           );
         })}
-    </>
-  );
-}
+      </>
+    );
+  };
   // eslint-disable-next-line
   // @ts-ignore
   return (
@@ -90,75 +92,77 @@ const RenderContactList = ({ type, isShow, setShow, list, title } : RenderContac
         >
           <p className="tui-contacts-list-title">{t('TUIContact.New Contacts')}</p>
           <div className="tui-contacts-list-icon">
-            <img src={iShowFriendApplication ? downArrow : rightArrow} alt="" />
+            {iShowFriendApplication
+              ? <i className="iconfont contacts-list-icon">&#xe605;</i>
+              : <i className="iconfont contacts-list-icon">&#xe606;</i>}
           </div>
         </div>
         {iShowFriendApplication
-          && friendApplicationList?.map((item, index) => {
-            const {
-              userID, avatar, nick, wording, type,
-            } = item;
-            return (
-              <div
-                role="button"
-                tabIndex={0}
-                className="tui-contacts-list-item"
-                key={userID}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setActiveContact({
-                    type: 'friendApplication',
-                    data: item,
-                  });
-                }}
-              >
-                <Avatar size={30} image={avatar || defaultUserAvatar} />
-                <div className="tui-contacts-list-item-card">
-                  <div>
-                    <p className="tui-contacts-list-item-name text-ellipsis">
-                      {nick || userID}
+        && friendApplicationList?.map((item, index) => {
+          const {
+            userID, avatar, nick, wording, type,
+          } = item;
+          return (
+            <div
+              role="button"
+              tabIndex={0}
+              className="tui-contacts-list-item"
+              key={userID}
+              onClick={(e) => {
+                e.stopPropagation();
+                setActiveContact({
+                  type: 'friendApplication',
+                  data: item,
+                });
+              }}
+            >
+              <Avatar size={30} image={avatar || defaultUserAvatar} />
+              <div className="tui-contacts-list-item-card">
+                <div>
+                  <p className="tui-contacts-list-item-name text-ellipsis">
+                    {nick || userID}
+                  </p>
+                  {wording !== '' && (
+                    <p className="tui-contacts-list-item-text text-ellipsis">
+                      {wording}
                     </p>
-                    {wording !== '' && (
-                      <p className="tui-contacts-list-item-text text-ellipsis">
-                        {wording}
-                      </p>
-                    )}
-                  </div>
-                  {type === TencentCloudChat.TYPES.SNS_APPLICATION_SENT_BY_ME && (
-                  <p className="tui-contacts-list-btn-text text-ellipsis">{t('TUIContact.waiting for verification')}</p>
-                  )}
-                  {type === TencentCloudChat.TYPES.SNS_APPLICATION_SENT_TO_ME && (
-                    <div
-                      className="application-btn"
-                      role="button"
-                      tabIndex={0}
-                      onClick={(e) => {
-                        acceptFriendApplicationHandle(e, userID);
-                      }}
-                    >
-                      {t('TUIContact.Agree')}
-                    </div>
                   )}
                 </div>
+                {type === TencentCloudChat.TYPES.SNS_APPLICATION_SENT_BY_ME && (
+                  <p className="tui-contacts-list-btn-text text-ellipsis">{t('TUIContact.waiting for verification')}</p>
+                )}
+                {type === TencentCloudChat.TYPES.SNS_APPLICATION_SENT_TO_ME && (
+                  <div
+                    className="application-btn"
+                    role="button"
+                    tabIndex={0}
+                    onClick={(e) => {
+                      acceptFriendApplicationHandle(e, userID);
+                    }}
+                  >
+                    {t('TUIContact.Agree')}
+                  </div>
+                )}
               </div>
-            );
-          })}
-        <RenderContactList 
-          type={'block'}
+            </div>
+          );
+        })}
+        <RenderContactList
+          type="block"
           title={t('TUIContact.Blocked List')}
           isShow={isShowBlocklist}
           setShow={setShowBlocklist}
           list={blocklistProfile}
         />
-        <RenderContactList 
-          type={'group'}
+        <RenderContactList
+          type="group"
           title={t('TUIContact.Group List')}
           setShow={setShowGrouplist}
           isShow={isShowGrouplist}
           list={groupList}
         />
-        <RenderContactList 
-          type={'friend'}
+        <RenderContactList
+          type="friend"
           title={t('TUIContact.Friends')}
           setShow={setShowFriends}
           isShow={iShowFriends}