@tencentcloud/chat-uikit-react 1.1.1 → 1.2.0

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

@@ -0,0 +1,90 @@
+.tui-contacts-list {
+  flex: 1 1 auto;
+  min-width: 360px;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-right: 1px solid #F9FAFB;
+  text-align: initial;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  .tui-contacts-title {
+    display: flex;
+    justify-content: space-between;
+  }
+  .tui-contacts-list-title {
+    display: flex;
+    padding: 10px 20px;
+  }
+  .tui-contacts-list-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 20px;
+  }
+  .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;
+      overflow: hidden;
+      align-items: center;
+      justify-content: space-between;
+      flex: 1;
+    }
+    .tui-contacts-list-item-container {
+      margin-left: 10px;
+    }
+    .tui-contacts-list-item-text {
+      color: #999;
+      font-size: 12px;
+      text-align: left;
+      @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
+    }
+
+  }
+  .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;
+    letter-spacing: 0;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    border: 1px solid #006EFF;
+    background: #006EFF;
+    color: #fff;
+  }
+}
+::-webkit-scrollbar {
+  display: none;
+}

package/src/components/TUIContact/hooks/useTUIContact.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import TencentCloudChat from '@tencentcloud/chat';
+import { useTUIKitContext } from '../../../context';
+
+function useTUIContact() {
+  const { chat } = useTUIKitContext();
+  const [friendList, setFriendList] = useState([]);
+  const [blockList, setBlockList] = useState([]);
+  const [friendApplicationList, setFriendApplicationList] = useState([]);
+  const [blocklistProfile, setBlocklistProfile] = useState([]);
+  const [isShowContactList, setShowContactList] = useState(true);
+
+  useEffect(() => {
+    getFriendList();
+    getBlocklist();
+    getFriendApplicationList();
+  }, [chat]);
+
+  useEffect(() => {
+    chat?.on(TencentCloudChat.EVENT.BLACKLIST_UPDATED, onBlocklistUpdated);
+    chat?.on(TencentCloudChat.EVENT.FRIEND_LIST_UPDATED, onFriendListUpdated);
+    chat?.on(
+      TencentCloudChat.EVENT.FRIEND_APPLICATION_LIST_UPDATED,
+      onFriendApplicationListUpdated,
+    );
+  }, [chat]);
+  const getFriendApplicationList = async () => {
+    const { data } = await chat.getFriendApplicationList();
+    setFriendApplicationList(data?.friendApplicationList);
+  };
+
+  const getFriendList = async () => {
+    const { code, data } = await chat.getFriendList();
+    if (code === 0) {
+      setFriendList(data);
+    }
+  };
+  // todo: 获取 100个
+  const getBlocklist = async () => {
+    const { data: _blocklist } = await chat.getBlacklist();
+    if (_blocklist.length === 0) {
+      return;
+    }
+    setBlockList(_blocklist);
+    getBlocklistProfile(_blocklist);
+  };
+
+  const getBlocklistProfile = async (_blocklist: Array<string>) => {
+    const { data } = await chat.getUserProfile({
+      userIDList: _blocklist,
+    });
+    setBlocklistProfile(data);
+  };
+  const onFriendApplicationListUpdated = (event) => {
+    setFriendApplicationList(event?.data?.friendApplicationList);
+  };
+  const onBlocklistUpdated = (event) => {
+    setBlockList(event.data);
+    getBlocklistProfile(event.data);
+  };
+
+  const onFriendListUpdated = (event) => {
+    setFriendList(event.data);
+  };
+
+  return {
+    friendList,
+    blocklistProfile,
+    friendApplicationList,
+    blockList,
+    isShowContactList,
+    setShowContactList,
+  };
+}
+
+export default useTUIContact;

package/src/components/TUIContact/index.scss

@@ -0,0 +1,67 @@
+.tui-contacts {
+  height: 100%;
+  min-width: 360px;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  text-align: initial;
+  overflow: hidden;
+  .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;
+    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;
+    .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;
+    }
+  }
+  .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;
+    }
+  }
+}

package/src/components/TUIContact/index.ts

@@ -0,0 +1,3 @@
+export * from './TUIContactList/TUIContactList';
+export * from './TUIContactInfo/TUIContactInfo';
+export * from './TUIContact';

package/src/components/TUIContactSearch/TUIContactSearch.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useTUIKitContext, useTUIContactContext } from '../../context';
+import useContactSearch from './hooks/useContactSearch';
+import { Icon, IconTypes } from '../Icon';
+import { Avatar, defaultUserAvatar } from '../Avatar';
+import { Input } from '../Input';
+import './index.scss';
+
+export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
+  const { chat, setActiveContact } = useTUIKitContext('TUIContactSearch');
+  const { t } = useTranslation();
+  const { friendList, setShowContactList } = useTUIContactContext('TUIContactList');
+  const [isShowSearchResult, setShowSearchResult] = useState(false);
+  const { checkFriend, isBlock, getUserProfile } = useContactSearch();
+  const [searchedValue, setSearchedValue] = useState('');
+  const [searchResult, setSearchResult] = useState([]);
+
+  const searchValueChange = (e) => {
+    if (e.target?.value === '') {
+      setShowContactList(true);
+      setShowSearchResult(false);
+      setSearchResult([]);
+      return;
+    }
+    setShowSearchResult(true);
+    setSearchedValue(e.target?.value);
+    setShowContactList(false);
+  };
+
+  const searchValueBlur = (e) => {
+    setSearchedValue(e.target?.value);
+  };
+
+  const onFocusSearch = () => {
+    setActiveContact();
+  };
+
+  const getUserProfileHandler = async () => {
+    if (searchedValue) {
+      getUserProfile(searchedValue).then((res) => {
+        const { data: userProfile } = res;
+        setSearchResult(userProfile);
+      });
+    }
+  };
+  const setContactProfile = async (profile: any) => {
+    const isFriend = await checkFriend(profile);
+    if (isFriend) {
+      const friendProfile = friendList.find((item) => item.userID === searchedValue);
+      setActiveContact({ type: 'friend', data: friendProfile });
+      return;
+    }
+    if (isBlock(profile.userID)) {
+      setActiveContact({ type: 'block', data: profile });
+      return;
+    }
+    // set 数据
+    setActiveContact({ type: 'addFriend', data: profile });
+  };
+  return (
+    <div className="tui-contact-search">
+      <Input
+        className="tui-contact-search-input"
+        placeholder={t('TUIContact.Enter a userID')}
+        clearable
+        value={searchedValue}
+        onBlur={searchValueBlur}
+        onFocus={onFocusSearch}
+        onChange={searchValueChange}
+        onKeyDown={getUserProfileHandler}
+        prefix={<Icon type={IconTypes.SEARCH} height={16} width={16} />}
+      />
+      {isShowSearchResult && searchResult.length === 0
+        ? (
+          <div className="tui-contact-search-item">
+            {t('TUIContact.No Result')}
+
+          </div>
+        ) : searchResult.map((item, index) => {
+          const { userID, avatar, nick } = item;
+          return (
+            <div
+              className="tui-contact-search-item"
+              role="button"
+              tabIndex={0}
+              key={userID}
+              onClick={() => {
+                setContactProfile(item);
+              }}
+            >
+              <Avatar size={30} image={avatar || defaultUserAvatar} />
+              <div className="search-item-name">{nick || userID}</div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+export const TUIContactSearch = React.memo(UnMemoizedTUIContactSearch);

package/src/components/TUIContactSearch/hooks/useContactSearch.tsx

@@ -0,0 +1,32 @@
+import TencentCloudChat from '@tencentcloud/chat';
+import { useTUIKitContext, useTUIContactContext } from '../../../context';
+
+function useContactSearch() {
+  const { blockList } = useTUIContactContext('TUIContactList');
+  const { chat } = useTUIKitContext('TUIContactSearch');
+
+  // 好友相关
+  // 判断是否为双向好友关系
+  const checkFriend = (info: any): Promise<any> => chat.checkFriend({
+    userIDList: [info?.userID],
+    type: TencentCloudChat.TYPES.SNS_CHECK_TYPE_BOTH,
+  }).then((res: any) => res?.data?.successUserIDList[0]?.relation
+      === TencentCloudChat.TYPES.SNS_TYPE_BOTH_WAY);
+
+  const isBlock = (userID: string) => (
+    blockList.includes(userID)
+  );
+  const getUserProfile = (userID: string) => (
+    chat.getUserProfile({
+      userIDList: [userID],
+    })
+  );
+
+  return {
+    checkFriend,
+    isBlock,
+    getUserProfile,
+  };
+}
+
+export default useContactSearch;

package/src/components/TUIContactSearch/index.scss

@@ -0,0 +1,24 @@
+.tui-contact-search {
+  width: 100%;
+  position: relative;
+  text-align: initial;
+  align-items: center;
+  justify-content: space-between;
+  .tui-contact-search-input {
+    margin: 0 10px;
+  }
+  .tui-contact-search-text {
+    color: #147AFF;
+    font-size: 14px;
+  }
+  .tui-contact-search-item {
+    position: absolute;
+    margin: 10px 20px;
+    display: flex;
+    align-items: center;
+    .search-item-name {
+     padding-left: 10px;
+    }
+  }
+}
+

package/src/components/TUIConversationList/TUIConversationList.tsx

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Conversation } from '@tencentcloud/chat';
 import { useTUIKitContext } from '../../context';
 import useConversationList from './hooks/useConversationList';
@@ -8,7 +9,6 @@ import {
   ConversationListContainer,
   ConversationListContainerProps,
 } from '../ConversationPreview/ConversationListContainer';
-import { Profile } from '../Profile';
 import { ConversationSearchInput, ConversationSearchResult } from '../ConversationSearch';
 import { ConversationCreate } from '../ConversationCreate';
 import { Icon, IconTypes } from '../Icon';
@@ -35,6 +35,7 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
     onConversationListUpdated,
     filterConversation: propsFilterConversation,
   } = props;
+  const { t } = useTranslation();
   const {
     chat, customClasses, conversation, setActiveConversation, setTUIProfileShow,
   } = useTUIKitContext('TUIConversationList');
@@ -85,7 +86,6 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
     setSearchValue('');
     setConversationCreated(true);
   };
-  const { myProfile } = useTUIKitContext();
   const conversationListRef = useRef(null);
   return (
     <div className={`tui-conversation ${customClasses || ''}`} ref={conversationListRef}>
@@ -99,7 +99,6 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
           )
           : (
             <>
-              <Profile profile={myProfile} handleAvatar={() => { setTUIProfileShow(true); }} />
               <div className="tui-conversation-header">
                 <ConversationSearchInput
                   value={searchValue}
@@ -121,7 +120,7 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
                   ? (
                     <div className="no-result">
                       <Icon className="no-result-icon" type={IconTypes.EFFORT} width={42} height={42} />
-                      <div className="no-result-message">No conversation</div>
+                      <div className="no-result-message">{t('TUIConversation.No conversation')}</div>
                     </div>
                   )
                   : searchValue

package/src/components/TUIConversationList/index.scss

@@ -1,8 +1,8 @@
 .tui-conversation {
-  height: 100%;
+  height: 0;
+  flex: 1;
   min-width: 360px;
   max-width: 400px;
-  width: 30%;
   display: flex;
   flex-direction: column;
   position: relative;

package/src/components/TUIKit/TUIKit.tsx

@@ -7,9 +7,11 @@ import './styles/index.scss';
 import { TUIConversation } from '../TUIConversation';
 import { TUIChat } from '../TUIChat';
 import { TUIManage } from '../TUIManage';
+import '../../locales/index';
 
 export interface ChatProps {
   chat?: ChatSDK | null,
+  language?: string,
   customClasses?: unknown,
   activeConversation?: Conversation,
 }
@@ -19,21 +21,25 @@ export function TUIKit<
   props:PropsWithChildren<T>,
 ):React.ReactElement {
   const {
-    children, chat, customClasses, activeConversation,
+    children, chat, customClasses, activeConversation, language,
   } = props;
   (window as any).tencent_cloud_im_csig_react_uikit_23F_xa = true;
   const {
     conversation,
+    contactData,
     setActiveConversation,
     myProfile,
     TUIManageShow,
     setTUIManageShow,
     TUIProfileShow,
     setTUIProfileShow,
-  } = useTUIKit({ chat, activeConversation });
+    setActiveContact,
+  } = useTUIKit({ chat, activeConversation, language });
   const chatContextValue = useCreateTUIKitContext({
     chat,
+    language,
     conversation,
+    contactData,
     setActiveConversation,
     customClasses,
     myProfile,
@@ -41,6 +47,7 @@ export function TUIKit<
     setTUIManageShow,
     TUIProfileShow,
     setTUIProfileShow,
+    setActiveContact,
   });
 
   return (

package/src/components/TUIKit/hooks/useCreateTUIKitContext.tsx

@@ -4,7 +4,9 @@ import { TUIKitContextValue } from '../../../context/TUIKitContext';
 export const useCreateTUIKitContext = (value:TUIKitContextValue) => {
   const {
     chat,
+    language,
     conversation,
+    contactData,
     customClasses,
     setActiveConversation,
     myProfile,
@@ -12,12 +14,15 @@ export const useCreateTUIKitContext = (value:TUIKitContextValue) => {
     setTUIManageShow,
     TUIProfileShow,
     setTUIProfileShow,
+    setActiveContact,
   } = value;
 
   const TUIKitContext = useMemo(
     () => ({
       chat,
+      language,
       conversation,
+      contactData,
       customClasses,
       setActiveConversation,
       myProfile,
@@ -25,9 +30,12 @@ export const useCreateTUIKitContext = (value:TUIKitContextValue) => {
       setTUIManageShow,
       TUIProfileShow,
       setTUIProfileShow,
+      setActiveContact,
     }),
     [
+      language,
       conversation,
+      contactData,
       customClasses,
       chat,
       TUIManageShow,

package/src/components/TUIKit/hooks/useTUIKit.tsx

@@ -1,27 +1,61 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import TencentCloudChat, {
+import { useTranslation } from 'react-i18next';
+import {
   ChatSDK,
   Conversation,
-  Group,
   Profile,
+  Friend,
+  FriendApplication,
 } from '@tencentcloud/chat';
 
+interface blockData {
+  type: 'block',
+  data: Profile
+}
+
+interface friendData {
+  type: 'friend',
+  data: Friend
+}
+
+interface friendApplicationData {
+  type: 'friendApplication',
+  data: FriendApplication
+}
+
+interface addFriendData {
+  type: 'addFriend',
+  data: Profile
+}
+
+export type UseContactParams = blockData | friendData |
+friendApplicationData | addFriendData| undefined;
+
 export interface UseChatParams{
   chat: ChatSDK,
   activeConversation?: Conversation,
+  language?: string,
 }
-export const useTUIKit = ({ chat, activeConversation: paramsActiveConversation }:UseChatParams) => {
+
+export const useTUIKit = ({
+  chat, activeConversation: paramsActiveConversation,
+  language,
+}:UseChatParams) => {
+  const { i18n } = useTranslation();
   const [conversation, setConversation] = useState<Conversation>(paramsActiveConversation);
   const [myProfile, setMyProfile] = useState<Profile>();
   const [TUIManageShow, setTUIManageShow] = useState<boolean>(false);
   const [TUIProfileShow, setTUIProfileShow] = useState<boolean>(false);
+  const [contactData, setContactData] = useState<UseContactParams>();
+
   useEffect(() => {
+    i18n.changeLanguage(language);
     const getMyProfile = async () => {
       const res = await chat?.getMyProfile();
       setMyProfile(res?.data);
     };
     getMyProfile();
-  }, [chat]);
+  }, [chat, language]);
   const setActiveConversation = useCallback(
     (activeConversation?: Conversation) => {
       if (activeConversation) {
@@ -34,17 +68,22 @@ export const useTUIKit = ({ chat, activeConversation: paramsActiveConversation }
     },
     [chat],
   );
+  const setActiveContact = (actionContactData: UseContactParams) => {
+    setContactData(actionContactData);
+  };
 
   useEffect(() => {
     setConversation(paramsActiveConversation);
   }, [paramsActiveConversation]);
   return {
     conversation,
+    contactData,
     setActiveConversation,
     myProfile,
     TUIManageShow,
     setTUIManageShow,
     TUIProfileShow,
     setTUIProfileShow,
+    setActiveContact,
   };
 };

package/src/components/TUIManage/TUIManage.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
@@ -9,6 +10,7 @@ import { useConversationUpdate } from '../TUIConversationList/hooks/useConversat
 import { useConversation } from '../../hooks';
 
 export function TUIManage() {
+  const { t } = useTranslation();
   const [conversation, setConversation] = useState(null);
   const [profile, setProfile] = useState(null);
   const [isPinned, setIsPinned] = useState(false);
@@ -48,7 +50,7 @@ export function TUIManage() {
   <div className="tui-manage">
     <div className="tui-manage-title">
       <Icon type={IconTypes.CANCEL} width={16} height={16} onClick={close} />
-      <span>Conversation Information</span>
+      <span>{t('TUIConversation.Conversation Information')}</span>
     </div>
     <div className="tui-manage-container">
       <div className="tui-manage-info">
@@ -70,14 +72,14 @@ export function TUIManage() {
       </div>
       <div className="tui-manage-handle">
         <div className="manage-handle-box">
-          <div className="manage-handle-title">Pin</div>
+          <div className="manage-handle-title">{t('TUIConversation.Pin')}</div>
           <Switch
             onChange={pinChatChange}
             checked={isPinned}
           />
         </div>
         <div className="manage-handle-box" role="presentation" onClick={handleDelete}>
-          <div className="manage-handle-title red">Delete</div>
+          <div className="manage-handle-title red">{t('TUIConversation.Delete')}</div>
         </div>
       </div>
     </div>