@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

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

@@ -1,15 +1,16 @@
 import React from 'react';
+import type { IGroupModel } from '@tencentcloud/chat-uikit-engine';
+import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
 import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { TUIConversationService, IGroupModel, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { useUIManagerStore } from '../../../store';
+import { useUIManagerState } from '../../../states';
+import { Avatar, isH5 } from 'tuikit-atomicx-react';
 import { Icon, IconTypes } from '../../Icon';
-import { isH5 } from '../../../utils/env';
 import '../index.scss';
-import { Avatar, defaultUserAvatar } from '../../Avatar';
+import { defaultUserAvatar } from '../../../constant/avatar';
 
 interface Props {
   group: IGroupModel;
-  showChats?: () => void;
+  showChats?: (() => void) | undefined;
 }
 
 export function UnMemoizedGroupInfo<T extends Props>(
@@ -17,7 +18,7 @@ export function UnMemoizedGroupInfo<T extends Props>(
 ): React.ReactElement {
   const { group, showChats } = props;
 
-  const { setActiveContact, setActiveConversation } = useUIManagerStore('TUIContact');
+  const { setActiveContact, switchConversation } = useUIManagerState('TUIContact');
   const { t } = useUIKit();
   const { groupID, name, avatar } = group;
 
@@ -28,11 +29,7 @@ export function UnMemoizedGroupInfo<T extends Props>(
   const openGroupConversation = () => {
     const conversationID = `GROUP${groupID}`;
     showChats && showChats();
-    TUIConversationService.switchConversation(conversationID).then(
-      (conversationModel: IConversationModel) => {
-        setActiveConversation(conversationModel.getConversation());
-      },
-    );
+    switchConversation(conversationID);
   };
 
   return (
@@ -48,7 +45,7 @@ export function UnMemoizedGroupInfo<T extends Props>(
         )}
         <div className="header-container">
           <div className="header-container-avatar">
-            <Avatar size={60} image={avatar || defaultUserAvatar} />
+            <Avatar size='xl' src={avatar || defaultUserAvatar} />
             <div className="header-container-name">{name || groupID}</div>
           </div>
           <div className="header-container-text">{`groupID:${groupID}`}</div>

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

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
-import { Toast } from '../../../Toast';
-import { useUIManagerStore } from '../../../../store';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { useUIManagerState } from '../../../../states';
+import { Toast } from '@tencentcloud/uikit-base-component-react';
 
 function useContactInfo() {
-  const { chat } = useUIManagerStore();
+  const { chat } = useUIManagerState();
 
   const removeFromBlocklist = useCallback((userID: string) => {
     chat.removeFromBlacklist({
@@ -20,9 +20,8 @@ function useContactInfo() {
       wording: param?.wording,
     }).catch((error: any) => {
       console.warn('delete friend failed:', error);
-      Toast({
-        text: error,
-        type: 'error',
+      Toast.error({
+        message: error,
       });
     });
   }, [chat]);
@@ -42,7 +41,7 @@ function useContactInfo() {
   const acceptFriendApplication = useCallback((userID: string) => {
     chat.acceptFriendApplication({
       userID,
-      type: TencentCloudChat.TYPES.SNS_APPLICATION_AGREE_AND_ADD,
+      type: TUIChatEngine.TYPES.SNS_APPLICATION_AGREE_AND_ADD,
     });
   }, [chat]);
 
@@ -55,20 +54,20 @@ function useContactInfo() {
     new Promise((resolve, reject) => {
       chat.checkFriend({
         userIDList: [info?.userID],
-        type: TencentCloudChat.TYPES.SNS_CHECK_TYPE_BOTH,
+        type: TUIChatEngine.TYPES.SNS_CHECK_TYPE_BOTH,
       })
         .then((res: any) => {
           switch (res?.data?.successUserIDList[0]?.relation) {
-            case TencentCloudChat.TYPES.SNS_TYPE_NO_RELATION:
+            case TUIChatEngine.TYPES.SNS_TYPE_NO_RELATION:
               resolve(false);
               break;
-            case TencentCloudChat.TYPES.SNS_TYPE_A_WITH_B:
+            case TUIChatEngine.TYPES.SNS_TYPE_A_WITH_B:
               resolve(false);
               break;
-            case TencentCloudChat.TYPES.SNS_TYPE_B_WITH_A:
+            case TUIChatEngine.TYPES.SNS_TYPE_B_WITH_A:
               resolve(false);
               break;
-            case TencentCloudChat.TYPES.SNS_TYPE_BOTH_WAY:
+            case TUIChatEngine.TYPES.SNS_TYPE_BOTH_WAY:
               resolve(true);
               break;
             default:

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

@@ -1,4 +1,4 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .tui-contact-info {
   width: 100%;

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

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
 import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import TencentCloudChat from '@tencentcloud/chat';
-import { isH5 } from '../../../utils/env';
+import { defaultUserAvatar } from '../../../constant/avatar';
 import { useTUIContactContext } from '../../../context';
-import { useUIManagerStore } from '../../../store';
+import { useUIManagerState } from '../../../states';
+import { Avatar, isH5 } from 'tuikit-atomicx-react';
+import downArrow from '../../Icon/images/down-arrow.png';
+import rightArrow from '../../Icon/images/right-arrow.svg';
 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 {
@@ -20,7 +20,7 @@ interface RenderContactListProps {
 }
 
 function UnMemoizedContactList<T>(): React.ReactElement {
-  const { setActiveContact } = useUIManagerStore();
+  const { setActiveContact } = useUIManagerState();
   const { t } = useUIKit();
   const {
     isShowContactList, friendList, blocklistProfile, friendApplicationList,
@@ -40,46 +40,44 @@ function UnMemoizedContactList<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">
-            {isShow
-              ? <i className="iconfont contacts-list-icon">&#xe605;</i>
-              : <i className="iconfont contacts-list-icon">&#xe606;</i>}
-          </div>
+  const RenderContactList = ({ type, isShow, setShow, list, title }: RenderContactListProps) => (
+    <>
+      <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>
-        {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>
+      {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 src={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 (
@@ -117,7 +115,7 @@ function UnMemoizedContactList<T>(): React.ReactElement {
                 });
               }}
             >
-              <Avatar size={30} image={avatar || defaultUserAvatar} />
+              <Avatar src={avatar || defaultUserAvatar} />
               <div className="tui-contacts-list-item-card">
                 <div>
                   <p className="tui-contacts-list-item-name text-ellipsis">
@@ -129,10 +127,10 @@ function UnMemoizedContactList<T>(): React.ReactElement {
                     </p>
                   )}
                 </div>
-                {type === TencentCloudChat.TYPES.SNS_APPLICATION_SENT_BY_ME && (
+                {type === TUIChatEngine.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 && (
+                {type === TUIChatEngine.TYPES.SNS_APPLICATION_SENT_TO_ME && (
                   <div
                     className="application-btn"
                     role="button"

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

@@ -1,4 +1,4 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .tui-contacts-list {
   flex: 1 1 auto;
@@ -104,10 +104,6 @@
   }
 }
 
-::-webkit-scrollbar {
-  display: none;
-}
-
 .tui-contacts-list-h5 {
   min-width: 100%;
   width: 100%;

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

@@ -1,14 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
-import {
+import TUIChatEngine, {
   TUIStore,
   StoreName,
   IGroupModel,
 } from '@tencentcloud/chat-uikit-engine';
-import { useUIManagerStore } from '../../../store';
+import { useUIManagerState } from '../../../states';
 
 function useTUIContact() {
-  const { chat } = useUIManagerStore();
+  const { chat } = useUIManagerState();
   const [friendList, setFriendList] = useState([]);
   const [blockList, setBlockList] = useState([]);
   const [friendApplicationList, setFriendApplicationList] = useState([]);
@@ -30,10 +29,10 @@ function useTUIContact() {
     setGroupList(list);
   };
   useEffect(() => {
-    chat?.on(TencentCloudChat.EVENT.BLACKLIST_UPDATED, onBlocklistUpdated);
-    chat?.on(TencentCloudChat.EVENT.FRIEND_LIST_UPDATED, onFriendListUpdated);
+    chat?.on(TUIChatEngine.EVENT.BLACKLIST_UPDATED, onBlocklistUpdated);
+    chat?.on(TUIChatEngine.EVENT.FRIEND_LIST_UPDATED, onFriendListUpdated);
     chat?.on(
-      TencentCloudChat.EVENT.FRIEND_APPLICATION_LIST_UPDATED,
+      TUIChatEngine.EVENT.FRIEND_APPLICATION_LIST_UPDATED,
       onFriendApplicationListUpdated,
     );
   }, [chat]);

package/src/components/Contact/index.scss

@@ -1,4 +1,4 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .tui-contacts {
   height: 100%;

package/src/components/ContactSearch/ContactSearch.tsx

@@ -1,15 +1,16 @@
 import React, { useState } from 'react';
 import { useUIKit } from '@tencentcloud/uikit-base-component-react';
+import { defaultUserAvatar } from '../../constant/avatar';
 import { useTUIContactContext } from '../../context';
-import { useUIManagerStore } from '../../store';
-import useContactSearch from './hooks/useContactSearch';
+import { useUIManagerState } from '../../states';
 import { Icon, IconTypes } from '../Icon';
-import { Avatar, defaultUserAvatar } from '../Avatar';
 import { Input } from '../Input';
+import useContactSearch from './hooks/useContactSearch';
 import './index.scss';
+import { Avatar } from 'tuikit-atomicx-react';
 
 export function UnMemoizedContactSearch<T>(): React.ReactElement {
-  const { setActiveContact } = useUIManagerStore('TUIContactSearch');
+  const { setActiveContact } = useUIManagerState('TUIContactSearch');
   const { t } = useUIKit();
   const { friendList, setShowContactList } = useTUIContactContext('TUIContactList');
   const [isShowSearchResult, setShowSearchResult] = useState(false);
@@ -39,7 +40,7 @@ export function UnMemoizedContactSearch<T>(): React.ReactElement {
 
   const getUserProfileHandler = async () => {
     if (searchedValue) {
-      getUserProfile(searchedValue).then((res) => {
+      getUserProfile(searchedValue).then((res: any) => {
         const { data: userProfile } = res;
         setSearchResult(userProfile);
       });
@@ -73,11 +74,11 @@ export function UnMemoizedContactSearch<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>
-          )
+          </div>
+        )
         : searchResult.map((item, index) => {
           const { userID, avatar, nick } = item;
           return (
@@ -90,7 +91,7 @@ export function UnMemoizedContactSearch<T>(): React.ReactElement {
                 setContactProfile(item);
               }}
             >
-              <Avatar size={30} image={avatar || defaultUserAvatar} />
+              <Avatar src={avatar || defaultUserAvatar} />
               <div className="search-item-name">{nick || userID}</div>
             </div>
           );

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

@@ -1,16 +1,16 @@
-import TencentCloudChat from '@tencentcloud/chat';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
 import { useTUIContactContext } from '../../../context';
-import { useUIManagerStore } from '../../../store';
+import { useUIManagerState } from '../../../states';
 
 function useContactSearch() {
   const { blockList } = useTUIContactContext('TUIContactList');
-  const { chat } = useUIManagerStore();
+  const { chat } = useUIManagerState();
 
   const checkFriend = (info: any): Promise<any> => chat.checkFriend({
     userIDList: [info?.userID],
-    type: TencentCloudChat.TYPES.SNS_CHECK_TYPE_BOTH,
+    type: TUIChatEngine.TYPES.SNS_CHECK_TYPE_BOTH,
   }).then((res: any) => res?.data?.successUserIDList[0]?.relation
-    === TencentCloudChat.TYPES.SNS_TYPE_BOTH_WAY);
+    === TUIChatEngine.TYPES.SNS_TYPE_BOTH_WAY);
 
   const isBlock = (userID: string) => (
     blockList?.includes(userID)

package/src/components/ContactSearch/index.scss

@@ -1,4 +1,4 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .tui-contact-search {
   width: 100%;

package/src/components/DivWithEdit/DivWithEdit.tsx

@@ -1,12 +1,12 @@
-import React, {
-  PropsWithChildren, useLayoutEffect, useRef, useState,
+import type {
+  PropsWithChildren } from 'react';
+import { useLayoutEffect, useState,
 } from 'react';
-import { Icon, IconTypes } from '../Icon';
 import { Popup } from '../Popup';
-
-import './styles/index.scss';
 import { WithSelect } from './WithSelect';
 import { WithText } from './WithText';
+import './styles/index.scss';
+import { IconEdit1 } from '@tencentcloud/uikit-base-component-react';
 
 const elements = {
   text: WithText,
@@ -14,18 +14,18 @@ const elements = {
 };
 
 interface DivWithEditProps {
-  name?: string,
-  value?: string,
-  confirm?: (data?:any) => void,
-  className?: string,
-  classEditName?: string,
-  type?: string,
-  isEdit?: boolean,
-  toggle?: (name:string) => void,
-  close: () => void,
+  name?: string | undefined;
+  value?: string | undefined;
+  confirm?: ((data?: any) => void) | undefined;
+  className?: string | undefined;
+  classEditName?: string | undefined;
+  type?: string | undefined;
+  isEdit?: boolean | undefined;
+  toggle?: ((name: string) => void) | undefined;
+  close: () => void;
 }
 
-export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<T>) {
+export function DivWithEdit<T extends DivWithEditProps>(props: PropsWithChildren<T>) {
   const {
     value: propsValue,
     className,
@@ -49,7 +49,7 @@ export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<
   }, [propsValue]);
 
   const handleConfirm = (data: any) => {
-    confirm && confirm({
+    confirm?.({
       name,
       value: data,
     });
@@ -63,28 +63,34 @@ export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<
         close={close}
       >
         {
-        !isEdit && (
-        <div className="show">
-          <p>{value || '-'}</p>
-          <div className="icon">
-            <Icon className="icon-edit" width={12} height={12} type={IconTypes.EDIT} onClick={() => { toggle && name && toggle(name); }} />
-          </div>
-        </div>
-        )
-      }
+          !isEdit && (
+            <div className="show">
+              <p>{value || '-'}</p>
+              <div 
+                className="icon icon-edit"
+                onClick={() => {
+                  if (toggle && name) {
+                    toggle(name);
+                  }
+              }}>
+                <IconEdit1 />
+              </div>
+            </div>
+          )
+        }
         {
-        isEdit
-        && (
-        <WithEditElements
-          value={value}
-          confirm={handleConfirm}
-          className={classEditName}
-          close={close}
-        >
-          {children}
-        </WithEditElements>
-        )
-      }
+          isEdit
+          && (
+            <WithEditElements
+              value={value}
+              confirm={handleConfirm}
+              className={classEditName}
+              close={close}
+            >
+              {children}
+            </WithEditElements>
+          )
+        }
       </Popup>
     </div>
   );

package/src/components/DivWithEdit/WithSelect.tsx

@@ -3,6 +3,7 @@ import { Icon, IconTypes } from '../Icon';
 
 import './styles/index.scss';
 import { WithEditProps } from './WithText';
+import { IconChevronDown } from '@tencentcloud/uikit-base-component-react';
 
 interface WithSelectProps extends WithEditProps {
   list?: Array<any>,
@@ -19,10 +20,14 @@ export function WithSelect<T extends WithSelectProps>(props:PropsWithChildren<T>
 
   return (
     <div className={`edit ${className}`}>
-      <span>{value}</span>
-      <Icon className="icon" width={12} height={7} type={IconTypes.ARROW_DOWN} onClick={confirm} />
-      <div className="select">
-        {children}
+      <div className='select'>
+        <label>{value}</label>
+        <div className="select-content">
+          {children}
+        </div>
+      </div>
+      <div className='select-btn' onClick={confirm}>
+        <IconChevronDown />
       </div>
     </div>
   );

package/src/components/DivWithEdit/WithText.tsx

@@ -2,6 +2,7 @@ import React, {
   PropsWithChildren, useLayoutEffect, useRef, useState,
 } from 'react';
 import { Icon, IconTypes } from '../Icon';
+import { IconCheck } from '@tencentcloud/uikit-base-component-react';
 
 export interface WithEditProps {
   value?: string,
@@ -40,7 +41,9 @@ export function WithText<T extends WithEditProps>(props:PropsWithChildren<T>) {
       {/* // eslint-disable-next-line
       // @ts-ignore */}
       <input ref={inputRef} type="text" value={value} onChange={handleChange} />
-      <Icon className="icon" width={15} height={10.5} type={IconTypes.CONFIRM} onClick={handleConfirm} />
+      <div onClick={handleConfirm} >
+        <IconCheck />
+      </div>
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .div-with-edit {
   flex: 1;
@@ -21,6 +21,10 @@
     position: relative;
     word-break: break-all;
 
+    p {
+      margin: 0;
+    }
+
     .icon-edit {
       display: none;
     }
@@ -43,11 +47,7 @@
     align-items: center;
     justify-content: space-between;
     position: relative;
-    padding: 0 10px;
-
-    @include theme() {
-      border-bottom: 1px solid get(stroke-color-primary);
-    }
+    // padding: 0 10px;
 
     input {
       flex: 1;
@@ -61,6 +61,14 @@
     }
 
     .select {
+      flex: 1;
+      height: 100%;
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .select-content {
       position: absolute;
       min-width: 100%;
       z-index: 2;
@@ -73,7 +81,7 @@
         box-shadow: 0 11px 20px 0 get(shadow-color);
       }
 
-      &-list {
+      .select-list {
         &-item {
           padding: 7px 10px;
 

package/src/components/Icon/Icon.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import type React from 'react';
 import './styles/index.scss';
-import { IconTypes } from './type';
 import { ICON_CONFIG } from './config';
+import type { IconTypes } from './type';
 
 const changeTypeToIconComponent = (type: IconTypes) => {
   const src = ICON_CONFIG[type].url || '';
@@ -13,8 +13,8 @@ export interface IconProps {
   type?: IconTypes;
   height?: number;
   width?: number;
-  onClick?: (event: React.BaseSyntheticEvent) => void;
-  className?: string;
+  onClick?: ((event: React.BaseSyntheticEvent) => void) | undefined;
+  className?: string | undefined;
 }
 export function Icon(props: React.PropsWithChildren<IconProps>) {
   const {

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

@@ -1,4 +1,4 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 $primary-color: royalblue;
 
@@ -42,13 +42,13 @@ $primary-color: royalblue;
   animation: circle infinite 1s linear;
 
   @include theme() {
-    border: 3px solid get(text-color-disable);
+    border: 3px solid get(text-color-disabled);
     border-top-color: transparent;
   }
 
   &:hover {
     @include theme() {
-      border: 3px solid get(text-color-disable);
+      border: 3px solid get(text-color-disabled);
       border-top-color: transparent;
     }
   }