@tencentcloud/chat-uikit-react 2.3.1 → 3.0.1

package/src/components/Contact/ContactInfo/friendInfo.tsx

@@ -1,106 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { Friend } from '@tencentcloud/chat';
-import { TUIConversationService, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { useUIManagerStore } from '../../../store';
-import { BasicInfo } from './basicInfo';
-import { Switch } from '../../Switch';
-import useContactInfo from './hooks/useContactInfo';
-import { DivWithEdit } from '../../DivWithEdit';
-import '../index.scss';
-
-interface Props {
-  friend: Friend;
-  showChats?: () => void;
-}
-export function UnMemoizedFriendInfo<T extends Props>(
-  props: T,
-): React.ReactElement {
-  const { chat } = useUIManagerStore();
-  const {
-    contactData, setActiveContact, setActiveConversation,
-  } = useUIManagerStore('TUIContact');
-  const { t } = useUIKit();
-  const { friend, showChats } = props;
-  const { userID, profile, remark } = friend;
-  const [isEditName, setIsEditRemark] = useState('');
-  const [remarkValue, setRemarkValue] = useState('');
-  const [isAddToBlocklist, setIsAddToBlocklist] = useState(false);
-  const {
-    addToBlocklist,
-    deleteFriend,
-  } = useContactInfo();
-  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);
-    setActiveContact();
-  };
-
-  const deleteFriendHandler = async () => {
-    await deleteFriend(userID);
-    setActiveContact();
-  };
-  const openC2CConversation = () => {
-    const conversationID = `C2C${userID}`;
-    showChats && showChats();
-    TUIConversationService.switchConversation(conversationID).then(
-      (conversationModel: IConversationModel) => {
-        setActiveConversation(conversationModel.getConversation());
-      },
-    );
-  };
-
-  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/Contact/ContactInfo/groupInfo.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { TUIConversationService, IGroupModel, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { useUIManagerStore } from '../../../store';
-import { Icon, IconTypes } from '../../Icon';
-import { isH5 } from '../../../utils/env';
-import '../index.scss';
-import { Avatar, defaultUserAvatar } from '../../Avatar';
-
-interface Props {
-  group: IGroupModel;
-  showChats?: () => void;
-}
-
-export function UnMemoizedGroupInfo<T extends Props>(
-  props: T,
-): React.ReactElement {
-  const { group, showChats } = props;
-
-  const { setActiveContact, setActiveConversation } = useUIManagerStore('TUIContact');
-  const { t } = useUIKit();
-  const { groupID, name, avatar } = group;
-
-  const back = () => {
-    TUIConversationService.switchConversation('');
-    setActiveContact();
-  };
-  const openGroupConversation = () => {
-    const conversationID = `GROUP${groupID}`;
-    showChats && showChats();
-    TUIConversationService.switchConversation(conversationID).then(
-      (conversationModel: IConversationModel) => {
-        setActiveConversation(conversationModel.getConversation());
-      },
-    );
-  };
-
-  return (
-    <>
-      <div className="tui-contact-info-header">
-        {isH5 && (
-          <Icon
-            width={9}
-            height={16}
-            type={IconTypes.BACK}
-            onClick={back}
-          />
-        )}
-        <div className="header-container">
-          <div className="header-container-avatar">
-            <Avatar size={60} image={avatar || defaultUserAvatar} />
-            <div className="header-container-name">{name || groupID}</div>
-          </div>
-          <div className="header-container-text">{`groupID:${groupID}`}</div>
-        </div>
-      </div>
-      <div className="tui-contact-info-content">
-        <div className="content-btn-container">
-          <div className="content-item-btn confirm-btn" role="button" tabIndex={0} onClick={openGroupConversation}>{t('TUIContact.Send Message')}</div>
-        </div>
-      </div>
-    </>
-  );
-}
-export const GroupInfo = React.memo(UnMemoizedGroupInfo);

package/src/components/Contact/ContactInfo/hooks/useContactInfo.tsx

@@ -1,102 +0,0 @@
-import React, { useCallback } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
-import { Toast } from '../../../Toast';
-import { useUIManagerStore } from '../../../../store';
-
-function useContactInfo() {
-  const { chat } = useUIManagerStore();
-
-  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) {
-            case TencentCloudChat.TYPES.SNS_TYPE_NO_RELATION:
-              resolve(false);
-              break;
-            case TencentCloudChat.TYPES.SNS_TYPE_A_WITH_B:
-              resolve(false);
-              break;
-            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/Contact/ContactInfo/index.scss

@@ -1,136 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.tui-contact-info {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  padding: 60px;
-  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;
-        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;
-      min-height: 56px;
-    }
-
-    .content-item-wording {
-      padding: 6px 0;
-      font-size: 16px;
-      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 {
-      margin-right: 5px;
-    }
-
-    .content-item-text {
-      flex: 1;
-      display: flex;
-      flex-direction: row;
-      overflow: hidden;
-    }
-
-    .content-btn-container {
-      display: flex;
-      padding: 30px;
-      justify-content: center;
-
-      .content-item-btn {
-        margin: 15px;
-        padding: 8px 20px;
-        border-radius: 25px;
-        border: none;
-        font-size: 14px;
-        text-align: center;
-        letter-spacing: 0;
-        min-width: 100px;
-        cursor: pointer;
-        -webkit-user-select: none;
-        user-select: none;
-      }
-
-      .delete-btn {
-        @include theme() {
-          color: get(text-color-error);
-          border: 1px solid get(border-color-error);
-        }
-      }
-
-      .confirm-btn {
-        @include theme() {
-          color: #fff;
-          background-color: get(text-color-link);
-        }
-      }
-    }
-  }
-}
-
-.tui-contact-info-h5 {
-  padding: 8px;
-}

package/src/components/Contact/ContactList/ContactList.tsx

@@ -1,176 +0,0 @@
-import React, { useState } from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import TencentCloudChat from '@tencentcloud/chat';
-import { isH5 } from '../../../utils/env';
-import { useTUIContactContext } from '../../../context';
-import { useUIManagerStore } from '../../../store';
-import useContactInfo from '../ContactInfo/hooks/useContactInfo';
-import useTUIContact from '../hooks/useTUIContact';
-import { Avatar, defaultUserAvatar } from '../../Avatar';
-import rightArrow from '../../Icon/images/right-arrow.svg';
-import downArrow from '../../Icon/images/down-arrow.png';
-import './index.scss';
-
-interface RenderContactListProps {
-  type: 'group' | 'block' | 'friend';
-  isShow: boolean;
-  title: string;
-  list: any[] | undefined;
-  setShow: (value: boolean) => void;
-}
-
-function UnMemoizedContactList<T>(): React.ReactElement {
-  const { setActiveContact } = useUIManagerStore();
-  const { t } = useUIKit();
-  const {
-    isShowContactList, friendList, blocklistProfile, friendApplicationList,
-  } = useTUIContactContext('TUIContactList');
-  const {
-    acceptFriendApplication,
-  } = useContactInfo();
-  const { groupList } = useTUIContact();
-  const [iShowFriendApplication, setShowFriendApplication] = useState(false);
-  const [iShowFriends, setShowFriends] = useState(false);
-  const [isShowBlocklist, setShowBlocklist] = useState(false);
-  const [isShowGrouplist, setShowGrouplist] = useState(false);
-
-  const acceptFriendApplicationHandle = (e: any, userID: string) => {
-    e.stopPropagation();
-    acceptFriendApplication(userID);
-    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">
-            {isShow
-              ? <i className="iconfont contacts-list-icon">&#xe605;</i>
-              : <i className="iconfont contacts-list-icon">&#xe606;</i>}
-          </div>
-        </div>
-        {isShow
-        && list?.map((item: any) => {
-          const { userID, groupID, avatar, name, nick } = item.profile || item;
-          const showName = item.remark || nick || userID || name || groupID;
-          return (
-            <div
-              role="button"
-              tabIndex={0}
-              className="tui-contacts-list-item"
-              key={userID || groupID}
-              onClick={() => {
-                setActiveContact({ type, data: item });
-              }}
-            >
-              <Avatar size={30} image={avatar || defaultUserAvatar} />
-              <div className="tui-contacts-list-item-container">
-                <p className="tui-contacts-list-item-name">{ showName }</p>
-              </div>
-            </div>
-          );
-        })}
-      </>
-    );
-  };
-  // eslint-disable-next-line
-  // @ts-ignore
-  return (
-    isShowContactList && (
-      <div className={`tui-contacts-list ${isH5 ? 'tui-contacts-list-h5' : ''} `}>
-        <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">
-            {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}
-                  </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>
-          );
-        })}
-        <RenderContactList
-          type="block"
-          title={t('TUIContact.Blocked List')}
-          isShow={isShowBlocklist}
-          setShow={setShowBlocklist}
-          list={blocklistProfile}
-        />
-        <RenderContactList
-          type="group"
-          title={t('TUIContact.Group List')}
-          setShow={setShowGrouplist}
-          isShow={isShowGrouplist}
-          list={groupList}
-        />
-        <RenderContactList
-          type="friend"
-          title={t('TUIContact.Friends')}
-          setShow={setShowFriends}
-          isShow={iShowFriends}
-          list={friendList}
-        />
-      </div>
-    )
-  );
-}
-export const ContactList = React.memo(UnMemoizedContactList);

package/src/components/Contact/ContactList/index.scss

@@ -1,115 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.tui-contacts-list {
-  flex: 1 1 auto;
-  min-width: 360px;
-  max-width: 360px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  text-align: initial;
-  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-size: 14px;
-
-    .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;
-    }
-
-    .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;
-    }
-
-    .tui-contacts-list-btn-text {
-      color: #999;
-      font-size: 12px;
-      text-align: left;
-    }
-
-    .tui-contacts-list-item-name {
-      @extend .text-ellipsis;
-    }
-  }
-
-  .application-btn {
-    width: 30px;
-    height: 14px;
-    padding: 5px;
-    border-radius: 15px;
-    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;
-}
-
-.tui-contacts-list-h5 {
-  min-width: 100%;
-  width: 100%;
-  max-width: 100%;
-}