@tencentcloud/chat-uikit-react 2.3.1 → 3.0.1

package/src/components/ChatSetting/ChatSetting.tsx

@@ -1,117 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { TUIStore } from '@tencentcloud/chat-uikit-engine';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { Icon, IconTypes } from '../Icon';
-import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
-import { Switch } from '../Switch';
-import { useUIManagerStore } from '../../store';
-import { isH5, isPC } from '../../utils/env';
-import { getMessageProfile } from '../ConversationPreview/utils';
-import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
-
-import './styles/index.scss';
-
-function UnMemoizedChatSetting<T>(
-): React.ReactElement {
-  const { t } = useUIKit();
-  const [conversation, setConversation] = useState<IConversationModel>();
-  const [profile, setProfile] = useState<any>();
-  const [isPinned, setIsPinned] = useState<boolean>(false);
-  const [forceUpdateCount, setForceUpdateCount] = useState(0);
-  const {
-    conversation: activeConversation,
-    setActiveConversation,
-    TUIManageShow,
-    setTUIManageShow,
-  } = useUIManagerStore('TUIManage');
-
-  const pinChatChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setIsPinned(e.target.checked);
-    if (conversation?.conversationID) {
-      const conversationModel = TUIStore.getConversationModel(conversation?.conversationID);
-      conversationModel && conversationModel.pinConversation();
-    }
-  };
-  const handleDelete = () => {
-    if (conversation?.conversationID) {
-      const conversationModel = TUIStore.getConversationModel(conversation?.conversationID);
-      conversationModel && conversationModel.deleteConversation();
-    }
-    setActiveConversation(undefined);
-  };
-  const close = () => {
-    setTUIManageShow && setTUIManageShow(false);
-  };
-  useEffect(() => {
-    setConversation(activeConversation);
-    activeConversation && setProfile(getMessageProfile(activeConversation));
-    setIsPinned(activeConversation ? activeConversation.isPinned : false);
-  }, [activeConversation, forceUpdateCount]);
-  // eslint-disable-next-line
-  // @ts-ignore
-  return (
-    TUIManageShow
-    && activeConversation && (
-      <div className={`tui-manage ${isH5 ? 'tui-h5-manage' : ''}`}>
-        <div className="tui-manage-title">
-          {isPC && (
-            <Icon
-              onClick={close}
-              type={IconTypes.CANCEL}
-              width={9}
-              height={16}
-            />
-          )}
-          {isH5 && (
-            <Icon onClick={close} type={IconTypes.BACK} width={9} height={16} />
-          )}
-          <span style={{ marginLeft: '10px' }}>
-            {t('TUIConversation.Conversation Information')}
-          </span>
-        </div>
-        <div className="tui-manage-container">
-          <div className="tui-manage-info">
-            <div className="info-avatar">
-              <Avatar
-                size={64}
-                image={
-                  profile?.avatar
-                  || (profile?.groupID
-                    ? defaultGroupAvatarWork
-                    : defaultUserAvatar)
-                }
-              />
-            </div>
-            <div className="info-name">{profile?.nick || profile?.name}</div>
-            <div className="info-id">
-              ID:
-              {profile?.userID || profile?.groupID}
-            </div>
-          </div>
-          <div className="tui-manage-handle">
-            <div className="manage-handle-box">
-              <div className="manage-handle-title">
-                {t('TUIConversation.Pin')}
-              </div>
-              <Switch onChange={(e: any) => { pinChatChange(e); }} checked={isPinned} />
-            </div>
-            {isPC && (
-              <div
-                className="manage-handle-box"
-                role="presentation"
-                onClick={handleDelete}
-              >
-                <div className="manage-handle-title red">
-                  {t('TUIConversation.Delete')}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    )
-  );
-}
-
-export const ChatSetting = React.memo(UnMemoizedChatSetting) as unknown as
-typeof UnMemoizedChatSetting;

package/src/components/ChatSetting/index.ts

@@ -1 +0,0 @@
-export * from './ChatSetting';

package/src/components/ChatSetting/styles/index.scss

@@ -1,104 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.tui-manage {
-  display: flex;
-  flex-direction: column;
-  width: 22%;
-  max-width: 300px;
-  min-width: 200px;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-    color: get(text-color-primary);
-    border-left: 1px solid get(stroke-color-primary);
-  }
-
-  .red {
-    color: #ff584c !important;
-  }
-
-  .tui-manage-title {
-    display: flex;
-    align-items: center;
-    padding: 24px 10px;
-
-    span {
-      margin-right: 10px;
-      font-weight: 700;
-      font-size: 14px;
-    }
-  }
-
-  .tui-manage-container {
-    .tui-manage-info {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      .info-avatar {
-        margin-top: 40px;
-        margin-bottom: 20px;
-      }
-
-      .info-name {
-        text-align: center;
-        font-weight: 700;
-        font-size: 24px;
-        margin-bottom: 10px;
-      }
-
-      .info-id {
-        font-size: 16px;
-        margin-bottom: 30px;
-        text-align: center;
-
-        @include theme() {
-          color: get(text-color-secondary);
-        }
-      }
-    }
-
-    .tui-manage-handle {
-      .manage-handle-box {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 10px;
-
-        @include theme() {
-          background: get(bg-color-operate);
-        }
-
-        &:nth-child(2) {
-          margin-top: 10px;
-          cursor: pointer;
-        }
-
-        .manage-handle-title {
-          font-size: 16px;
-
-          @include theme() {
-            color: get(text-color-primary);
-          }
-        }
-      }
-    }
-  }
-}
-
-.tui-manage.tui-h5-manage {
-  border-left: none;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  max-width: 100%;
-  min-width: 100%;
-  z-index: 1;
-
-  @include theme() {
-    background: get(bg-color-operate);
-  }
-}

package/src/components/Contact/Contact.tsx

@@ -1,97 +0,0 @@
-import React, { PropsWithChildren, useMemo, useState } from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import {
-  TUIContactContextProvider,
-  TUIContactContextValue,
-} from '../../context/ContactContext';
-import { isH5 } from '../../utils/env';
-import { useUIManagerStore } from '../../store';
-import useTUIContact from './hooks/useTUIContact';
-import { ContactList } from './ContactList/ContactList';
-import { ContactSearch } from '../ContactSearch/ContactSearch';
-import { Icon, IconTypes } from '../Icon';
-import './index.scss';
-
-export function UnMemoizedContact<T>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const { children } = props;
-  const { t } = useUIKit();
-  const { setActiveContact } = useUIManagerStore('TUIContact');
-  const [isShowAddFriend, setShowAddFriend] = useState(false);
-  const addFriend = () => {
-    setActiveContact();
-    setShowAddFriend(true);
-  };
-  const addFriendBack = () => {
-    setActiveContact();
-    setShowAddFriend(false);
-  };
-  const {
-    friendList,
-    blockList,
-    blocklistProfile,
-    friendApplicationList,
-    isShowContactList,
-    setShowContactList,
-  } = useTUIContact();
-
-  const TUIContactValue: TUIContactContextValue = useMemo(
-    () => ({
-      friendList,
-      blockList,
-      blocklistProfile,
-      friendApplicationList,
-      isShowContactList,
-      setShowContactList,
-    }),
-    [
-      friendList,
-      blocklistProfile,
-      friendApplicationList,
-      isShowContactList,
-      setShowContactList,
-    ],
-  );
-  return (
-    <TUIContactContextProvider value={TUIContactValue}>
-      {children || (
-        <div className={`tui-contacts ${isH5 ? 'tui-contacts-h5' : ''} `}>
-          {!isShowAddFriend && (
-            <>
-              <div className="tui-contacts-header">
-                <div className="tui-contact-input">
-                  <ContactSearch />
-                </div>
-                <Icon
-                  onClick={addFriend}
-                  type={IconTypes.ADDFRIEND}
-                  width={24}
-                  height={24}
-                />
-              </div>
-              <ContactList />
-            </>
-          )}
-          {isShowAddFriend && (
-            <>
-              <div className="tui-contacts-add-header">
-                <Icon
-                  onClick={addFriendBack}
-                  type={IconTypes.BACK}
-                  width={9}
-                  height={16}
-                />
-                <div className="tui-contacts-add-header-title">
-                  {t('TUIContact.Add Friend')}
-                </div>
-              </div>
-              <ContactSearch />
-            </>
-          )}
-        </div>
-      )}
-    </TUIContactContextProvider>
-  );
-}
-export const Contact = React.memo(UnMemoizedContact);

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

@@ -1,35 +0,0 @@
-import React, {
-  PropsWithChildren,
-} from 'react';
-import { useUIManagerStore } from '../../../store';
-import { isH5 } from '../../../utils/env';
-import { FriendInfo } from './friendInfo';
-import { BlockInfo } from './blockInfo';
-import { AddFriendInfo } from './addFriendInfo';
-import { GroupInfo } from './groupInfo';
-import { FriendApplicationInfo } from './friendApplication';
-import './index.scss';
-
-interface TUIContactInfoProps {
-  className?: string;
-  showChats?: () => void;
-}
-export function UnMemoizedContactInfo<T extends TUIContactInfoProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const { showChats } = props;
-  const { contactData } = useUIManagerStore('TUIContact');
-  if (!contactData?.type) {
-    return (<> </>);
-  }
-  return (
-    <div className={`tui-contact-info ${isH5 ? 'tui-contact-info-h5' : ''} `}>
-      {contactData?.type === 'addFriend' && (<AddFriendInfo profile={contactData?.data} />)}
-      {contactData?.type === 'friend' && (<FriendInfo showChats={showChats} friend={contactData?.data} />)}
-      {contactData?.type === 'block' && (<BlockInfo profile={contactData?.data} />)}
-      {contactData?.type === 'group' && (<GroupInfo showChats={showChats} group={contactData?.data} />)}
-      {contactData?.type === 'friendApplication' && <FriendApplicationInfo application={contactData?.data} />}
-    </div>
-  );
-}
-export const ContactInfo = React.memo(UnMemoizedContactInfo);

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

@@ -1,88 +0,0 @@
-import React, { useState } from 'react';
-import { Profile } from '@tencentcloud/chat';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import useContactInfo from './hooks/useContactInfo';
-import { BasicInfo } from './basicInfo';
-import { DivWithEdit } from '../../DivWithEdit';
-
-interface Props {
-  profile: Profile;
-}
-export function UnMemoizedAddFriendInfo<T extends Props>(
-  props: T,
-): React.ReactElement {
-  const { profile } = props;
-  const { userID } = profile;
-  const { t } = useUIKit();
-  const [isEditName, setIsEditRemark] = useState('');
-  const [remark, setRemark] = useState('');
-  const [wording, setWording] = useState('');
-  const [isSendedAdd, setIsSendAddFriend] = useState(false);
-
-  const {
-    addFriend,
-  } = useContactInfo();
-  const handleSetEditRemark = () => {
-    setIsEditRemark('remark');
-  };
-
-  const addFriendHandler = async () => {
-    const options = {
-      userID,
-      remark,
-      wording,
-    };
-    await addFriend(options);
-    setIsSendAddFriend(true);
-  };
-
-  const editText = (data?: any) => {
-    setRemark(data?.value);
-    setIsEditRemark('');
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setWording(e.target.value);
-  };
-  return (
-    <>
-      <BasicInfo profile={profile} />
-      {!isSendedAdd
-        ? (
-            <div className="tui-contact-info-content">
-              <div className="content-item-wording">
-                <p className="content-item-label">{t('TUIContact.Enter the verification info')}</p>
-                <textarea className="content-item-wording-text" value={wording} onChange={(e: any) => { handleChange(e); }} />
-              </div>
-              <div className="content-item">
-                <p className="content-item-label">{t('TUIContact.remark')}</p>
-                <DivWithEdit
-                  name="remark"
-                  className="content-item-text"
-                  value={remark}
-                  type="text"
-                  toggle={handleSetEditRemark}
-                  isEdit={isEditName === 'remark'}
-                  confirm={editText}
-                  close={() => {
-                    setIsEditRemark('');
-                  }}
-                />
-              </div>
-              <div className="content-btn-container">
-                <div className="content-item-btn confirm-btn" role="button" tabIndex={0} onClick={addFriendHandler}>{t('TUIContact.Send application')}</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>
-          )}
-    </>
-  );
-}
-export const AddFriendInfo = React.memo(UnMemoizedAddFriendInfo);

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

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Profile } from '@tencentcloud/chat';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { useUIManagerStore } from '../../../store';
-import { Icon, IconTypes } from '../../Icon';
-import { isH5 } from '../../../utils/env';
-
-import { Avatar, defaultUserAvatar } from '../../Avatar';
-
-interface Props {
-  profile: Profile;
-}
-export function UnMemoizedBasicInfo<T extends Props>(
-  props: T,
-): React.ReactElement {
-  const { profile } = props;
-  const { t } = useUIKit();
-  const {
-    userID, nick, selfSignature, avatar,
-  } = profile;
-  const { setActiveContact } = useUIManagerStore('TUIContact');
-  const back = () => {
-    TUIConversationService.switchConversation('');
-    setActiveContact();
-  };
-  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">{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/Contact/ContactInfo/blockInfo.tsx

@@ -1,45 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Profile } from '@tencentcloud/chat';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { BasicInfo } from './basicInfo';
-import { Switch } from '../../Switch';
-import { useUIManagerStore } from '../../../store';
-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 } = useUIManagerStore('TUIContact');
-  const { t } = useUIKit();
-  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/Contact/ContactInfo/friendApplication.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import TencentCloudChat, { FriendApplication } from '@tencentcloud/chat';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { useUIManagerStore } from '../../../store';
-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 } = useUIManagerStore('TUIContact');
-  const { t } = useUIKit();
-  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);