@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/components/{TUIContact/TUIContactInfo → Contact/ContactInfo}/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 → Contact/ContactList/ContactList.tsx}

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import TencentCloudChat from '@tencentcloud/chat';
 import { isH5 } from '../../../utils/env';
 import { useUIManager, useTUIContactContext } from '../../../context';
-import useContactInfo from '../TUIContactInfo/hooks/useContactInfo';
+import useContactInfo from '../ContactInfo/hooks/useContactInfo';
 import useTUIContact from '../hooks/useTUIContact';
 import { Avatar, defaultUserAvatar } from '../../Avatar';
 import rightArrow from '../../Icon/images/right-arrow.svg';
@@ -11,14 +11,14 @@ 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 {
+function UnMemoizedContactList<T>(): React.ReactElement {
   const { setActiveContact } = useUIManager();
   const { t } = useTranslation();
   const {
@@ -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>
-            );
-          })}
+            </div>
+          );
+        })}
         <RenderContactList
-          type={'block'}
+          type="block"
           title={t('TUIContact.Blocked List')}
           isShow={isShowBlocklist}
           setShow={setShowBlocklist}
           list={blocklistProfile}
         />
         <RenderContactList
-          type={'group'}
+          type="group"
           title={t('TUIContact.Group List')}
           setShow={setShowGrouplist}
           isShow={isShowGrouplist}
           list={groupList}
         />
         <RenderContactList
-          type={'friend'}
+          type="friend"
           title={t('TUIContact.Friends')}
           setShow={setShowFriends}
           isShow={iShowFriends}
@@ -168,4 +172,4 @@ const RenderContactList = ({ type, isShow, setShow, list, title } : RenderContac
     )
   );
 }
-export const TUIContactList = React.memo(UnMemoizedTUIContactList);
+export const ContactList = React.memo(UnMemoizedContactList);

package/src/components/{TUIContact/TUIContactList → Contact/ContactList}/index.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-contacts-list {
   flex: 1 1 auto;
   min-width: 360px;
@@ -5,33 +7,47 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  border-right: 1px solid #F9FAFB;
   text-align: initial;
-  overflow-y: scroll;
-  overflow-x: hidden;
+  overflow: hidden scroll;
+
+  @include theme() {
+    color: get(text-color-primary);
+  }
+
   .tui-contacts-title {
     display: flex;
     justify-content: space-between;
   }
+
   .tui-contacts-list-title {
     display: flex;
     padding: 10px 20px;
+    cursor: pointer;
   }
+
   .tui-contacts-list-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 20px;
+
+    .contacts-list-icon {
+      font-size: 12px;
+
+      @include theme() {
+        color: get(text-color-primary);
+      }
+    }
   }
+
   .tui-contacts-list-item {
     align-items: center;
     cursor: pointer;
     display: flex;
     padding: 10px 20px;
     text-align: center;
-    font-family: PingFangSC-Medium;
     font-size: 14px;
-    line-height: 20px;
+
     .tui-contacts-list-item-card {
       display: flex;
       padding: 0 10px;
@@ -40,39 +56,41 @@
       justify-content: space-between;
       flex: 1;
     }
+
     .tui-contacts-list-item-container {
       margin-left: 10px;
     }
+
+    .text-ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     .tui-contacts-list-item-text {
       color: #999;
       font-size: 12px;
       text-align: left;
-      @extend .text-ellipsis
+
+      @extend .text-ellipsis;
     }
+
     .tui-contacts-list-btn-text {
       color: #999;
       font-size: 12px;
       text-align: left;
     }
+
     .tui-contacts-list-item-name {
-      color: #000;
-      font-weight: 400;
-      text-align: left;
-      @extend .text-ellipsis
+      @extend .text-ellipsis;
     }
-
-  }
-  .text-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
+
   .application-btn {
     width: 30px;
     height: 14px;
     padding: 5px;
     border-radius: 15px;
-    border: none;
     font-size: 10px;
     text-align: center;
     line-height: 14px;
@@ -80,16 +98,18 @@
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
-    border: 1px solid #006EFF;
-    background: #006EFF;
+    border: 1px solid #006eff;
+    background: #006eff;
     color: #fff;
   }
 }
+
 ::-webkit-scrollbar {
   display: none;
 }
+
 .tui-contacts-list-h5 {
   min-width: 100%;
   width: 100%;
   max-width: 100%;
-}
+}

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

@@ -43,13 +43,13 @@ function useTUIContact() {
   };
 
   const getFriendList = async () => {
-    const { code, data } = await chat.getFriendList();
+    const { code, data } = await chat?.getFriendList();
     if (code === 0) {
       setFriendList(data);
     }
   };
   const getBlocklist = async () => {
-    const { data: _blocklist } = await chat.getBlacklist();
+    const { data: _blocklist } = await chat?.getBlacklist();
     if (_blocklist.length === 0) {
       return;
     }
@@ -57,7 +57,7 @@ function useTUIContact() {
     getBlocklistProfile(_blocklist);
   };
 
-  const getBlocklistProfile = async (_blocklist: Array<string>) => {
+  const getBlocklistProfile = async (_blocklist: string[]) => {
     const { data } = await chat.getUserProfile({
       userIDList: _blocklist,
     });

package/src/components/{TUIContact → Contact}/index.scss

@@ -1,3 +1,5 @@
+@use "../../styles/colors/color-theme" as *;
+
 .tui-contacts {
   height: 100%;
   min-width: 360px;
@@ -7,66 +9,83 @@
   position: relative;
   text-align: initial;
   overflow: hidden;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+
   .tui-contacts-header {
     position: relative;
     display: flex;
     align-items: center;
     padding: 10px 20px 10px 10px;
   }
+
   .tui-contact-input {
     width: 100%;
   }
+
   .tui-contacts-add {
-    display: flex;
-    color: #147AFF;
+    color: #147aff;
     font-size: 20px;
     align-items: center;
     cursor: pointer;
     display: flex;
     text-align: center;
+
     .tui-conversation-create-icon {
       display: flex;
       align-items: center;
       justify-content: center;
     }
   }
+
   .tui-contacts-add-header {
     align-items: center;
-    background-color: #f9fafb;
     display: flex;
     flex-direction: row;
     padding: 16px 20px;
     text-align: center;
     margin-bottom: 10px;
+
+    @include theme() {
+      background-color: get(bg-color-operate);
+    }
+
     .tui-contacts-add-header-title {
-      color: #000;
-      font-family: PingFangSC-Medium;
       font-size: 20px;
       font-weight: 600;
-      letter-spacing: -.41px;
-      line-height: 32px;
       margin-left: 10px;
+
+      @include theme() {
+        color: get(text-color-primary);
+      }
     }
   }
+
   .no-result {
     padding: 0 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
+
     &-icon {
       margin: 100px auto 50px;
     }
+
     &-message {
-      color: #999999;
-      font-weight: 400;
       font-size: 16px;
-      font-family: PingFangSC-Medium;
       line-height: 22px;
+
+      @include theme() {
+        color: get(text-color-secondary);
+      }
     }
   }
 }
+
 .tui-contacts-h5 {
   min-width: 100%;
   width: 100%;
   max-width: 100%;
-}
+}

package/src/components/Contact/index.ts

@@ -0,0 +1,3 @@
+export * from './ContactList/ContactList';
+export * from './ContactInfo/ContactInfo';
+export * from './Contact';

package/src/components/{TUIContactSearch/TUIContactSearch.tsx → ContactSearch/ContactSearch.tsx}

@@ -7,7 +7,7 @@ import { Avatar, defaultUserAvatar } from '../Avatar';
 import { Input } from '../Input';
 import './index.scss';
 
-export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
+export function UnMemoizedContactSearch<T>(): React.ReactElement {
   const { setActiveContact } = useUIManager('TUIContactSearch');
   const { t } = useTranslation();
   const { friendList, setShowContactList } = useTUIContactContext('TUIContactList');
@@ -47,7 +47,7 @@ export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
   const setContactProfile = async (profile: any) => {
     const isFriend = await checkFriend(profile);
     if (isFriend) {
-      const friendProfile = friendList?.find((item) => item.userID === searchedValue);
+      const friendProfile = friendList?.find(item => item.userID === searchedValue);
       friendProfile && setActiveContact({ type: 'friend', data: friendProfile });
       return;
     }
@@ -72,11 +72,12 @@ export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
       />
       {isShowSearchResult && searchResult.length === 0
         ? (
-          <div className="tui-contact-search-item">
-            {t('TUIContact.No Result')}
+            <div className="tui-contact-search-item">
+              {t('TUIContact.No Result')}
 
-          </div>
-        ) : searchResult.map((item, index) => {
+            </div>
+          )
+        : searchResult.map((item, index) => {
           const { userID, avatar, nick } = item;
           return (
             <div
@@ -96,4 +97,4 @@ export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
     </div>
   );
 }
-export const TUIContactSearch = React.memo(UnMemoizedTUIContactSearch);
+export const ContactSearch = React.memo(UnMemoizedContactSearch);