@tencentcloud/chat-uikit-react 1.2.2 → 2.1.2

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Profile } from '@tencentcloud/chat';
+import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
+import { useTUIKitContext } from '../../../context';
+import { Icon, IconTypes } from '../../Icon';
+import { isH5 } from '../../../utils/env';
+
 import { Avatar, defaultUserAvatar } from '../../Avatar';
 
 interface Props {
@@ -14,8 +19,21 @@ export function UnMemoizedBasicInfo<T extends Props>(
   const {
     userID, nick, selfSignature, avatar,
   } = profile;
+  const { setActiveContact } = useTUIKitContext('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} />

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Friend } from '@tencentcloud/chat';
+import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
 import { useTUIKitContext } from '../../../context';
 import { BasicInfo } from './basicInfo';
 import { Switch } from '../../Switch';
@@ -60,7 +61,9 @@ export function UnMemoizedFriendInfo<T extends Props>(
     setActiveContact();
   };
   const openC2CConversation = async () => {
-    const conversation = await createConversation(`C2C${userID}`);
+    const conversationID = `C2C${userID}`;
+    const conversation = await createConversation(conversationID);
+    TUIConversationService.switchConversation(conversationID);
     setActiveConversation(conversation);
     openChat();
   };

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

@@ -28,6 +28,7 @@
         line-height: 50px;
         font-weight: 400;
         color: #999999;
+        word-break: break-all;
       }
     }
   }
@@ -106,3 +107,7 @@
     }
   }
 }
+.tui-contact-info-h5 {
+  padding: 8px;
+ 
+}

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import TencentCloudChat from '@tencentcloud/chat';
+import { isH5 } from '../../../utils/env';
 import { useTUIKitContext, useTUIContactContext } from '../../../context';
 import useContactInfo from '../TUIContactInfo/hooks/useContactInfo';
 
@@ -31,7 +32,7 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
   };
   return (
     isShowContactList && (
-      <div className="tui-contacts-list">
+      <div className={`tui-contacts-list ${isH5 ? 'tui-contacts-list-h5' : ''} `}>
         <div
           className="tui-contacts-title"
           role="button"
@@ -130,7 +131,7 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
           tabIndex={0}
           onClick={() => setShowFriends(!iShowFriends)}
         >
-          <div className="tui-contacts-list-title">{t('TUIContact.Friend')}</div>
+          <div className="tui-contacts-list-title">{t('TUIContact.Friends')}</div>
           <div className="tui-contacts-list-icon">
             <img src={iShowFriends ? downArrow : rightArrow} alt="" />
           </div>

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

@@ -88,3 +88,8 @@
 ::-webkit-scrollbar {
   display: none;
 }
+.tui-contacts-list-h5 {
+  min-width: 100%;
+  width: 100%;
+  max-width: 100%;
+}

package/src/components/TUIContact/index.scss

@@ -65,3 +65,8 @@
     }
   }
 }
+.tui-contacts-h5 {
+  min-width: 100%;
+  width: 100%;
+  max-width: 100%;
+}

package/src/components/TUIConversation/TUIConversation.tsx

@@ -35,10 +35,7 @@ export function UnMemoizedTUIConversation<T extends TUIConversationProps>(
   return (
     <TUIConversationProvider value={TUIConversationValue}>
       {children || (
-        <>
-          <TUIConversationList />
-          <TUIProfile />
-        </>
+        <TUIConversationList />
       )}
     </TUIConversationProvider>
   );

package/src/components/TUIConversationList/TUIConversationList.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Conversation } from '@tencentcloud/chat';
 import { useTUIKitContext } from '../../context';
+import { isH5 } from '../../utils/env';
 import useConversationList from './hooks/useConversationList';
 import './index.scss';
 import { ConversationPreview, ConversationPreviewUIComponentProps } from '../ConversationPreview';
@@ -17,6 +18,7 @@ import { useConversationUpdate } from './hooks/useConversationUpdate';
 import { useTUIConversationContext } from '../../context/TUIConversationContext';
 
 interface Props {
+  componentVisibleOptions?: any,
   filters?: object,
   sort?: object,
   options?: object,
@@ -34,31 +36,41 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
     Container = ConversationListContainer,
     onConversationListUpdated,
     filterConversation: propsFilterConversation,
+    componentVisibleOptions = {
+      isProfileShow: true,
+      isSearchInputShow: true,
+      isContainerShow: true,
+    },
   } = props;
   const { t } = useTranslation();
   const {
-    chat, customClasses, conversation, setActiveConversation, setTUIProfileShow,
+    chat,
+    customClasses,
+    conversation,
+    setActiveConversation,
+    setTUIProfileShow,
   } = useTUIKitContext('TUIConversationList');
-  const {
-    filterConversation: contextFilterConversation,
-  } = useTUIConversationContext('TUIConversationList');
+  const { filterConversation: contextFilterConversation } = useTUIConversationContext('TUIConversationList');
   const filterConversation = propsFilterConversation || contextFilterConversation;
   const [conversationUpdateCount, setConversationUpdateCount] = useState(0);
   const forceUpdate = () => setConversationUpdateCount((count) => count + 1);
 
   const activeConversationHandler = (
     conversationList: Array<Conversation>,
-    setConversationList: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
+    setConversationList: React.Dispatch<
+      React.SetStateAction<Array<Conversation>>
+    >,
   ) => {
     if (!conversationList.length) {
       return;
     }
     setActiveConversation(conversation);
   };
-  const {
-    conversationList,
-    setConversationList,
-  } = useConversationList(chat, activeConversationHandler, filterConversation);
+  const { conversationList, setConversationList } = useConversationList(
+    chat,
+    activeConversationHandler,
+    filterConversation,
+  );
   useConversationUpdate(
     setConversationList,
     onConversationListUpdated,
@@ -68,13 +80,16 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
   const [searchValue, setSearchValue] = useState('');
   const [searchResult, setSearchResult] = useState(conversationList);
   const [conversationCreated, setConversationCreated] = useState(false);
+  const [activeConversationID, setActiveConversationID] = useState('');
 
   const handleSearchValueChange = (e) => {
     setSearchValue(e.target?.value);
     if (e.target?.value) {
       const result = conversationList.filter(
         // eslint-disable-next-line max-len
-        (item) => (getDisplayTitle(item) as string).toLocaleLowerCase().includes(e.target?.value.toLocaleLowerCase()),
+        (item) => (getDisplayTitle(item) as string)
+          .toLocaleLowerCase()
+          .includes(e.target?.value.toLocaleLowerCase()),
       );
       setSearchResult(result);
     } else {
@@ -88,65 +103,76 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
   };
   const conversationListRef = useRef(null);
   return (
-    <div className={`tui-conversation ${customClasses || ''}`} ref={conversationListRef}>
-      {
-        conversationCreated
-          ? (
-            <ConversationCreate
-              conversationList={conversationList}
-              setConversationCreated={setConversationCreated}
-            />
-          )
-          : (
-            <>
-              <div className="tui-conversation-header">
-                <ConversationSearchInput
-                  value={searchValue}
-                  clearable
-                  onChange={handleSearchValueChange}
+    <div
+      className={`tui-conversation ${isH5 ? 'tui-conversation-h5' : ''} ${customClasses || ''} `}
+      ref={conversationListRef}
+    >
+      {conversationCreated ? (
+        <ConversationCreate
+          conversationList={conversationList}
+          setConversationCreated={setConversationCreated}
+        />
+      ) : (
+        <>
+          {componentVisibleOptions.isSearchInputShow && (
+            <div className="tui-conversation-header">
+              <ConversationSearchInput
+                value={searchValue}
+                clearable
+                onChange={handleSearchValueChange}
+              />
+              <div className="tui-conversation-create-icon">
+                <Icon
+                  onClick={handleConversationCreate}
+                  type={IconTypes.CREATE}
+                  height={24}
+                  width={24}
                 />
-                <div className="tui-conversation-create-icon">
+              </div>
+            </div>
+          )}
+          {componentVisibleOptions.isContainerShow && (
+            <Container setConversationList={setConversationList}>
+              {/* eslint-disable-next-line no-nested-ternary */}
+              {conversationList.length === 0 ? (
+                <div className="no-result">
                   <Icon
-                    onClick={handleConversationCreate}
-                    type={IconTypes.CREATE}
-                    height={24}
-                    width={24}
+                    className="no-result-icon"
+                    type={IconTypes.EFFORT}
+                    width={42}
+                    height={42}
                   />
+                  <div className="no-result-message">No conversation</div>
                 </div>
-              </div>
-              <Container setConversationList={setConversationList}>
-                {/* eslint-disable-next-line no-nested-ternary */}
-                {conversationList.length === 0
-                  ? (
-                    <div className="no-result">
-                      <Icon className="no-result-icon" type={IconTypes.EFFORT} width={42} height={42} />
-                      <div className="no-result-message">{t('TUIConversation.No conversation')}</div>
-                    </div>
-                  )
-                  : searchValue
-                    ? (
-                      <ConversationSearchResult
-                        Preview={Preview}
-                        searchValue={searchValue}
-                        result={searchResult}
-                      />
-                    )
-                    : conversationList.map((item) => {
-                      const previewProps = {
-                        activeConversation: conversation,
-                        conversation: item,
-                        setActiveConversation,
-                        Preview,
-                        conversationUpdateCount,
-                      };
-                      return (
-                        <ConversationPreview key={item.conversationID} {...previewProps} />
-                      );
-                    })}
-              </Container>
-            </>
-          )
-      }
+              ) : searchValue ? (
+                <ConversationSearchResult
+                  Preview={Preview}
+                  searchValue={searchValue}
+                  result={searchResult}
+                />
+              ) : (
+                conversationList.map((item) => {
+                  const previewProps = {
+                    activeConversation: conversation,
+                    conversation: item,
+                    setActiveConversation,
+                    Preview,
+                    conversationUpdateCount,
+                    activeConversationID,
+                    setActiveConversationID,
+                  };
+                  return (
+                    <ConversationPreview
+                      key={item.conversationID}
+                      {...previewProps}
+                    />
+                  );
+                })
+              )}
+            </Container>
+          )}
+        </>
+      )}
     </div>
   );
 }

package/src/components/TUIConversationList/index.scss

@@ -35,3 +35,8 @@
     }
   }
 }
+.tui-conversation-h5 {
+  min-width: 100%;
+  width: 100%;
+  max-width: 100%;
+}

package/src/components/TUIKit/TUIKit.tsx

@@ -1,13 +1,25 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useState, useEffect } from 'react';
 import { ChatSDK, Conversation } from '@tencentcloud/chat';
-import { useTUIKit } from './hooks/useTUIKit';
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import { useTranslation } from 'react-i18next';
+import { isH5, isPC } from '../../utils/env';
+import { useTUIKit, UseContactParams } from './hooks/useTUIKit';
 import { useCreateTUIKitContext } from './hooks/useCreateTUIKitContext';
 import { TUIKitProvider } from '../../context/TUIKitContext';
 import './styles/index.scss';
+import './styles/h5.scss';
 import { TUIConversation } from '../TUIConversation';
 import { TUIChat } from '../TUIChat';
 import { TUIManage } from '../TUIManage';
+import { TUIProfile } from '../TUIProfile';
+import { TUIContact } from '../TUIContact';
+import { TUIContactInfo } from '../TUIContact/TUIContactInfo/TUIContactInfo';
+import { TUIKIT_TABBAR } from '../../constants';
 import '../../locales/index';
+import chats from '../Icon/images/chats.svg';
+import chatsSelected from '../Icon/images/chats-selected.svg';
+import contacts from '../Icon/images/contacts.svg';
+import contactsSelected from '../Icon/images/contacts-selected.svg';
 
 export interface ChatProps {
   chat?: ChatSDK | null,
@@ -15,13 +27,111 @@ export interface ChatProps {
   customClasses?: unknown,
   activeConversation?: Conversation,
 }
+
+interface RenderPCProps {
+  moduleValue: string,
+  tabbarRender: any,
+  setModuleValue: (value: string) => void
+}
+interface RenderH5Props {
+  moduleValue: string,
+  currentConversationID: string,
+  tabbarRender: any,
+  contactData: UseContactParams,
+  setModuleValue: (value: string) => void
+}
+
+const tabbarList = [
+  {
+    id: 1,
+    name: TUIKIT_TABBAR.CHATS,
+    icon: chats,
+    selectedIcon: chatsSelected,
+    value: TUIKIT_TABBAR.CHATS,
+  },
+  {
+    id: 2,
+    name: TUIKIT_TABBAR.CONTACTS,
+    icon: contacts,
+    selectedIcon: contactsSelected,
+    value: TUIKIT_TABBAR.CONTACTS,
+  },
+];
+const TUIMessageInputConfig = {
+  className: 'sample-h5-input',
+  isTransmitter: true,
+};
+
+function RenderForPC({ moduleValue, tabbarRender, setModuleValue } : RenderPCProps) {
+  return (
+    <>
+      <div className="sample-chat-left-container">
+        <TUIProfile className="sample-chat-profile" />
+        {tabbarRender}
+        {moduleValue === TUIKIT_TABBAR.CHATS && <TUIConversation />}
+        {moduleValue === TUIKIT_TABBAR.CONTACTS && <TUIContact />}
+      </div>
+      {moduleValue === TUIKIT_TABBAR.CHATS && (
+      <>
+        <TUIChat />
+        <TUIManage />
+      </>
+      )}
+      {moduleValue === TUIKIT_TABBAR.CONTACTS && (
+      <TUIContact>
+        <TUIContactInfo
+          showChat={() => {
+            setModuleValue(TUIKIT_TABBAR.CHATS);
+          }}
+        />
+      </TUIContact>
+      )}
+    </>
+  );
+}
+
+function RenderForH5({
+  moduleValue, contactData, tabbarRender, currentConversationID, setModuleValue,
+}: RenderH5Props) {
+  return (
+    <>
+      {!currentConversationID && !contactData && (
+      <div className="sample-chat-h5-container">
+        <TUIProfile className="sample-profile" />
+        {tabbarRender}
+        {moduleValue === TUIKIT_TABBAR.CHATS && <TUIConversation />}
+        {moduleValue === TUIKIT_TABBAR.CONTACTS && <TUIContact />}
+      </div>
+      )}
+      {moduleValue === TUIKIT_TABBAR.CHATS && currentConversationID && (
+      <>
+        <TUIChat TUIMessageInputConfig={TUIMessageInputConfig} />
+        <TUIManage />
+      </>
+      )}
+      { moduleValue === TUIKIT_TABBAR.CONTACTS && contactData && (
+        <TUIContact>
+          <TUIContactInfo
+            showChat={() => {
+              setModuleValue(TUIKIT_TABBAR.CHATS);
+            }}
+          />
+        </TUIContact>
+      )}
+    </>
+  );
+}
 export function TUIKit<
   T extends ChatProps
   >(
   props:PropsWithChildren<T>,
 ):React.ReactElement {
+  const [currentConversationID, setCurrentConversationID] = useState<string>('');
+  const [moduleValue, setModuleValue] = useState('chats');
+  const { t } = useTranslation();
+
   const {
-    children, chat, customClasses, activeConversation, language,
+    children, chat, customClasses, activeConversation, language = 'en',
   } = props;
   (window as any).tencent_cloud_im_csig_react_uikit_23F_xa = true;
   const {
@@ -49,17 +159,49 @@ export function TUIKit<
     setTUIProfileShow,
     setActiveContact,
   });
+  useEffect(() => {
+    TUIStore.watch(StoreName.CONV, {
+      currentConversationID: onCurrentConversationID,
+    });
+    return () => {
+      TUIStore.unwatch(StoreName.CONV, {
+        currentConversationID: onCurrentConversationID,
+      });
+    };
+  }, []);
+
+  const onCurrentConversationID = (id: string) => {
+    setCurrentConversationID(id);
+  };
+  const switchTabbar = (value: string) => {
+    setModuleValue(value);
+  };
+
+  const tabbarRender = (
+    <div className="sample-chat-tab">
+      {tabbarList.map((item: any) => (
+        <div
+          className="sample-chat-tab-container"
+          key={item.id}
+          role="presentation"
+          onClick={() => {
+            switchTabbar(item.value);
+          }}
+        >
+          <img src={moduleValue === item.value ? item.selectedIcon : item.icon} alt="" />
+          <p className={`sample-chat-tab-text ${moduleValue === item.value ? 'sample-chat-tab-active' : ''}`}>
+            {t(item.name)}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
 
   return (
     <TUIKitProvider value={chatContextValue}>
       <div className="tui-kit">
-        {children || (
-          <>
-            <TUIConversation />
-            <TUIChat />
-            <TUIManage />
-          </>
-        )}
+        {children || (isPC && <RenderForPC moduleValue={moduleValue} tabbarRender={tabbarRender} setModuleValue={setModuleValue} />)
+        || (isH5 && <RenderForH5 contactData={contactData} moduleValue={moduleValue} tabbarRender={tabbarRender} currentConversationID={currentConversationID} setModuleValue={setModuleValue} />)}
       </div>
     </TUIKitProvider>
   );

package/src/components/TUIKit/styles/h5.scss

@@ -0,0 +1,34 @@
+.App {
+  height: 100%;
+}
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+.sample-chat-h5 {
+  position:relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  &-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    .sample-profile {
+      position: absolute;
+      top: 0;
+      z-index: 1;
+      width:100%;
+      max-width: 100%;
+      min-width: 100%;
+    }
+    .tui-kit-input-box.tui-kit-input-box--focus {
+      outline: none;
+    }
+  }
+  .tui-message-input .tui-kit-input-box--focus {
+    outline: none;
+  }
+}