@tencentcloud/chat-uikit-react 1.1.0 → 1.2.0

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Profile } from '@tencentcloud/chat';
+import { Avatar, defaultUserAvatar } from '../../Avatar';
+
+interface Props {
+  profile: Profile;
+}
+export function UnMemoizedBasicInfo<T extends Props>(
+  props: T,
+): React.ReactElement {
+  const { profile } = props;
+  const { t } = useTranslation();
+  const {
+    userID, nick, selfSignature, avatar,
+  } = profile;
+  return (
+    <div className="tui-contact-info-header">
+      <div className="header-container">
+        <div className="header-container-avatar">
+          <Avatar size={60} image={avatar || defaultUserAvatar} />
+          <div className="header-container-name">{nick || userID}</div>
+        </div>
+        <div className="header-container-text">{`ID:${userID}`}</div>
+        <div className="header-container-text">
+          {t('TUIContact.Signature')}
+          :
+          {selfSignature || ''}
+        </div>
+      </div>
+    </div>
+  );
+}
+export const BasicInfo = React.memo(UnMemoizedBasicInfo);

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

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Profile } from '@tencentcloud/chat';
+import { useTUIKitContext } from '../../../context';
+import { BasicInfo } from './basicInfo';
+import { Switch } from '../../Switch';
+import useContactInfo from './hooks/useContactInfo';
+
+interface Props {
+  profile: Profile;
+}
+export function UnMemoizedBlockInfo<T extends Props>(
+  props: T,
+): React.ReactElement {
+  const { profile } = props;
+  const { contactData, setActiveContact } = useTUIKitContext('TUIContact');
+  const { t } = useTranslation();
+  const [isAddToBlocklist, setIsAddToBlocklist] = useState(false);
+
+  const {
+    removeFromBlocklist,
+  } = useContactInfo();
+
+  useEffect(() => {
+    setIsAddToBlocklist(true);
+  }, [contactData]);
+
+  const removeFromBlocklistHandler = async () => {
+    await removeFromBlocklist(profile.userID);
+    setIsAddToBlocklist(false);
+    setActiveContact();
+  };
+  return (
+    <>
+      <BasicInfo profile={profile} />
+      <div className="tui-contact-info-content">
+        <div className="content-item">
+          <p className="content-item-label">{t('TUIContact.block')}</p>
+          <Switch className="content-item-text" onChange={removeFromBlocklistHandler} checked={isAddToBlocklist} />
+        </div>
+      </div>
+    </>
+  );
+}
+export const BlockInfo = React.memo(UnMemoizedBlockInfo);

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import TencentCloudChat, { FriendApplication } from '@tencentcloud/chat';
+import { useTUIKitContext } from '../../../context';
+import { Avatar, defaultUserAvatar } from '../../Avatar';
+import useContactInfo from './hooks/useContactInfo';
+
+interface Props {
+  application: FriendApplication;
+}
+export function UnMemoizedFriendApplication<T extends Props>(
+  props: T,
+): React.ReactElement {
+  const { setActiveContact } = useTUIKitContext('TUIContact');
+  const { t } = useTranslation();
+  const { application } = props;
+  const {
+    userID,
+    nick,
+    avatar,
+    type,
+    wording,
+  } = application;
+  const {
+    acceptFriendApplication,
+    refuseFriendApplication,
+  } = useContactInfo();
+  const acceptFriendApplicationHandler = () => {
+    setActiveContact();
+    acceptFriendApplication(userID);
+  };
+
+  const refuseFriendApplicationHandler = () => {
+    setActiveContact();
+    refuseFriendApplication(userID);
+  };
+
+  return (
+    <>
+      <div className="tui-contact-info-header">
+        <div className="header-container">
+          <div className="header-container-avatar">
+            <Avatar size={60} image={avatar || defaultUserAvatar} />
+            <div className="header-container-name">{nick || userID}</div>
+          </div>
+          <div className="header-container-text">{`ID:${userID}`}</div>
+        </div>
+      </div>
+      <div className="tui-contact-info-content">
+        <div className="content-item">
+          <p className="content-item-label">{t('TUIContact.verification info')}</p>
+          <p className="content-item-text">{wording}</p>
+        </div>
+      </div>
+      {type === TencentCloudChat.TYPES.SNS_APPLICATION_SENT_TO_ME && (
+        <div className="tui-contact-info-content">
+          <div className="content-btn-container">
+            <div className="content-item-btn delete-btn" role="button" tabIndex={0} onClick={refuseFriendApplicationHandler}>{t('TUIContact.Refuse')}</div>
+            <div className="content-item-btn confirm-btn" role="button" tabIndex={0} onClick={acceptFriendApplicationHandler}>{t('TUIContact.Agree')}</div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+export const FriendApplicationInfo = React.memo(UnMemoizedFriendApplication);

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

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Friend } from '@tencentcloud/chat';
+import { useTUIKitContext } from '../../../context';
+import { BasicInfo } from './basicInfo';
+import { Switch } from '../../Switch';
+import useContactInfo from './hooks/useContactInfo';
+import { DivWithEdit } from '../../DivWithEdit';
+import { useConversation } from '../../../hooks';
+import '../index.scss';
+
+interface Props {
+  friend: Friend;
+  openChat?: () => void,
+}
+export function UnMemoizedFriendInfo<T extends Props>(
+  props: T,
+): React.ReactElement {
+  const {
+    chat, contactData, setActiveContact, setActiveConversation,
+  } = useTUIKitContext('TUIContact');
+  const { t } = useTranslation();
+  const { friend, openChat } = props;
+  const { userID, profile, remark } = friend;
+  const [isEditName, setIsEditRemark] = useState('');
+  const [remarkValue, setRemarkValue] = useState('');
+  const [isAddToBlocklist, setIsAddToBlocklist] = useState(false);
+  const {
+    addToBlocklist,
+    deleteFriend,
+  } = useContactInfo();
+  const { createConversation } = useConversation(chat);
+  useEffect(() => {
+    setIsAddToBlocklist(false);
+    setRemarkValue(remark);
+  }, [contactData, remark]);
+
+  const handleSetEditRemark = () => {
+    setIsEditRemark('remark');
+  };
+
+  const editText = (data?: any) => {
+    chat.updateFriend({
+      userID,
+      remark: data?.value,
+    });
+    setRemarkValue(data?.value);
+    setIsEditRemark('');
+  };
+
+  const addToBlocklistHandler = async () => {
+    await addToBlocklist(userID);
+    setIsAddToBlocklist(true);
+    // 清空右侧 container 内容
+    setActiveContact();
+  };
+
+  const deleteFriendHandler = async () => {
+    await deleteFriend(userID);
+    setActiveContact();
+  };
+  const openC2CConversation = async () => {
+    const conversation = await createConversation(`C2C${userID}`);
+    setActiveConversation(conversation);
+    openChat();
+  };
+
+  return (
+    <>
+      <BasicInfo profile={profile} />
+      <div className="tui-contact-info-content">
+        <div className="content-item">
+          <p className="content-item-label">{t('TUIContact.remark')}</p>
+          <DivWithEdit
+            name="remark"
+            className="content-item-text"
+            value={remarkValue}
+            type="text"
+            toggle={handleSetEditRemark}
+            isEdit={isEditName === 'remark'}
+            confirm={editText}
+            close={() => {
+              setIsEditRemark('');
+            }}
+          />
+        </div>
+        <div className="content-item">
+          <p className="content-item-label">{t('TUIContact.block')}</p>
+          <Switch
+            className="content-item-text"
+            onChange={addToBlocklistHandler}
+            checked={isAddToBlocklist}
+          />
+        </div>
+        <div className="content-btn-container">
+          <div className="content-item-btn delete-btn" role="button" tabIndex={0} onClick={deleteFriendHandler}>{t('TUIContact.Delete friend')}</div>
+          <div className="content-item-btn confirm-btn" role="button" tabIndex={0} onClick={openC2CConversation}>{t('TUIContact.Send Message')}</div>
+        </div>
+      </div>
+    </>
+  );
+}
+export const FriendInfo = React.memo(UnMemoizedFriendInfo);

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

@@ -0,0 +1,112 @@
+import React, { useCallback } from 'react';
+import TencentCloudChat from '@tencentcloud/chat';
+import { Toast } from '../../../Toast';
+import { useTUIKitContext } from '../../../../context';
+
+function useContactInfo() {
+  const { chat } = useTUIKitContext('useContactInfo');
+
+  // 移除黑名单
+  const removeFromBlocklist = useCallback((userID: string) => {
+    chat.removeFromBlacklist({
+      userIDList: [userID],
+    });
+  }, [chat]);
+
+  // 添加好友
+  const addFriend = useCallback((param: any) => {
+    chat.addFriend({
+      to: param?.userID,
+      source: 'AddSource_Type_Web',
+      remark: param?.remark,
+      wording: param?.wording,
+    }).catch((error: any) => {
+      console.warn('delete friend failed:', error);
+      Toast({
+        text: error,
+        type: 'error',
+      });
+    });
+  }, [chat]);
+
+  // 删除好友
+  const deleteFriend = useCallback((userID: string) => {
+    chat.deleteFriend({
+      userIDList: [userID],
+    });
+  }, [chat]);
+
+  // 添加黑名单
+  const addToBlocklist = useCallback((userID: string) => {
+    chat.addToBlacklist({
+      userIDList: [userID],
+    });
+  }, [chat]);
+
+  const acceptFriendApplication = useCallback((userID: string) => {
+    chat.acceptFriendApplication({
+      userID,
+      type: TencentCloudChat.TYPES.SNS_APPLICATION_AGREE_AND_ADD,
+    });
+  }, [chat]);
+
+  const refuseFriendApplication = useCallback((userID: string) => {
+    chat.refuseFriendApplication({
+      userID,
+    });
+  }, [chat]);
+  // 好友相关
+  // 判断是否为双向好友关系
+  const isFriend = (info: any): Promise<boolean> => (
+    new Promise((resolve, reject) => {
+      chat.checkFriend({
+        userIDList: [info?.userID],
+        type: TencentCloudChat.TYPES.SNS_CHECK_TYPE_BOTH,
+      })
+        .then((res: any) => {
+          switch (res?.data?.successUserIDList[0]?.relation) {
+            // 无好友关系：A 的好友表中没有 B，B 的好友表中也没有 A
+            case TencentCloudChat.TYPES.SNS_TYPE_NO_RELATION:
+              resolve(false);
+              break;
+            // 单项好友：A 的好友表中有 B，但 B 的好友表中没有 A
+            case TencentCloudChat.TYPES.SNS_TYPE_A_WITH_B:
+              resolve(false);
+              break;
+            // 单项好友：A 的好友表中没有 B，但 B 的好友表中有 A
+            case TencentCloudChat.TYPES.SNS_TYPE_B_WITH_A:
+              resolve(false);
+              break;
+            // 双向好友关系
+            case TencentCloudChat.TYPES.SNS_TYPE_BOTH_WAY:
+              resolve(true);
+              break;
+            default:
+              resolve(false);
+              break;
+          }
+        })
+        .catch((error: any) => {
+          console.warn('checkFriend error', error);
+          reject(error);
+        });
+    })
+  );
+  const isBlock = async (userID: string) => {
+    const { data } = await chat.getBlacklist();
+    return data.includes(userID);
+  };
+
+  return {
+    addToBlocklist,
+    removeFromBlocklist,
+    isFriend,
+    isBlock,
+    addFriend,
+    deleteFriend,
+    acceptFriendApplication,
+    refuseFriendApplication,
+  };
+}
+
+export default useContactInfo;

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

@@ -0,0 +1,108 @@
+.tui-contact-info {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 60px;
+  box-sizing: border-box;
+  flex-direction: column;
+  overflow: hidden;
+  .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;
+      }
+      .header-container-text {
+        font-size: 16px;
+        line-height: 50px;
+        font-weight: 400;
+        color: #999999;
+      }
+    }
+  }
+  .tui-contact-info-content {
+    padding: 15px 0;
+    overflow: hidden;
+    .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;
+      border: 1px solid #e8e8e9;
+      border-radius: 4px;
+      padding: 4px;
+      color: inherit;
+      resize: none;
+      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;
+      }
+      .confirm-btn {
+        border: 1px solid #006eff;
+        background: #006eff;
+        color: #fff;
+      }
+
+    }
+  }
+}

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

@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import TencentCloudChat from '@tencentcloud/chat';
+import { useTUIKitContext, useTUIContactContext } from '../../../context';
+import useContactInfo from '../TUIContactInfo/hooks/useContactInfo';
+
+import { Avatar, defaultUserAvatar } from '../../Avatar';
+import rightArrow from '../../Icon/images/right-arrow.svg';
+import downArrow from '../../Icon/images/down-arrow.png';
+
+import './index.scss';
+
+function UnMemoizedTUIContactList<T>(): React.ReactElement {
+  const { setActiveContact } = useTUIKitContext();
+  const { t } = useTranslation();
+  const {
+    isShowContactList, friendList, blocklistProfile, friendApplicationList,
+  } = useTUIContactContext('TUIContactList');
+  const {
+    acceptFriendApplication,
+  } = useContactInfo();
+
+  const [iShowFriendApplication, setShowFriendApplication] = useState(false);
+  const [iShowFriends, setShowFriends] = useState(false);
+  const [isShowBlocklist, setShowBlocklist] = useState(false);
+
+  const acceptFriendApplicationHandle = (e: any, userID: string) => {
+    e.stopPropagation();
+    acceptFriendApplication(userID);
+    setActiveContact();
+  };
+  return (
+    isShowContactList && (
+      <div className="tui-contacts-list">
+        <div
+          className="tui-contacts-title"
+          role="button"
+          tabIndex={0}
+          onClick={() => setShowFriendApplication(!iShowFriendApplication)}
+        >
+          <p className="tui-contacts-list-title">{t('TUIContact.New Contacts')}</p>
+          <div className="tui-contacts-list-icon">
+            <img src={iShowFriendApplication ? downArrow : rightArrow} alt="" />
+          </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}
+                    </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>
+              </div>
+            );
+          })}
+        <div
+          className="tui-contacts-title"
+          role="button"
+          tabIndex={0}
+          onClick={() => setShowBlocklist(!isShowBlocklist)}
+        >
+          <div className="tui-contacts-list-title">{t('TUIContact.Blocked List')}</div>
+          <div className="tui-contacts-list-icon">
+            <img src={isShowBlocklist ? downArrow : rightArrow} alt="" />
+          </div>
+        </div>
+        {isShowBlocklist
+          && blocklistProfile.map((item, index) => {
+            const { userID, avatar, nick } = item;
+            return (
+              <div
+                role="button"
+                tabIndex={0}
+                className="tui-contacts-list-item"
+                key={userID}
+                onClick={() => {
+                  setActiveContact({ type: 'block', data: item });
+                }}
+              >
+                <Avatar size={30} image={avatar || defaultUserAvatar} />
+                <div className="tui-contacts-list-item-container">
+                  <p className="tui-contacts-list-item-name">{ nick || userID}</p>
+                </div>
+              </div>
+            );
+          })}
+        <div
+          className="tui-contacts-title"
+          role="button"
+          tabIndex={0}
+          onClick={() => setShowFriends(!iShowFriends)}
+        >
+          <div className="tui-contacts-list-title">{t('TUIContact.Friend')}</div>
+          <div className="tui-contacts-list-icon">
+            <img src={iShowFriends ? downArrow : rightArrow} alt="" />
+          </div>
+        </div>
+        {iShowFriends
+          && friendList.map((item, index) => {
+            const { userID, avatar, nick } = item.profile;
+            return (
+              <div
+                className="tui-contacts-list-item"
+                key={userID}
+                role="button"
+                tabIndex={0}
+                onClick={() => {
+                  setActiveContact({ type: 'friend', data: item });
+                }}
+              >
+                <Avatar size={30} image={avatar || defaultUserAvatar} />
+                <div className="tui-contacts-list-item-container">
+                  <p className="tui-contacts-list-item-name">{item.remark || nick || userID}</p>
+                </div>
+              </div>
+            );
+          })}
+      </div>
+    )
+  );
+}
+export const TUIContactList = React.memo(UnMemoizedTUIContactList);