@tencentcloud/chat-uikit-react 1.2.2 → 2.1.0

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,24 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useState, useEffect } from 'react';
 import { ChatSDK, Conversation } from '@tencentcloud/chat';
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import { useTranslation } from 'react-i18next';
+import { isH5, isPC } from '../../utils/env';
 import { useTUIKit } 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 '../../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 +26,94 @@ export interface ChatProps {
   customClasses?: unknown,
   activeConversation?: Conversation,
 }
+
+interface RenderPCProps {
+  moduleValue: string,
+  tabbarRender: any,
+  setModuleValue: (value: string) => void
+}
+interface RenderH5Props {
+  currentConversationID: string
+}
+
+const tabbarList = [
+  {
+    id: 1,
+    name: 'chats',
+    icon: chats,
+    selectedIcon: chatsSelected,
+    value: 'chats',
+  },
+  {
+    id: 2,
+    name: 'contacts',
+    icon: contacts,
+    selectedIcon: contactsSelected,
+    value: '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 === 'chats' && <TUIConversation />}
+        {moduleValue === 'contacts' && <TUIContact />}
+      </div>
+      {moduleValue === 'chats' && (
+      <>
+        <TUIChat />
+        <TUIManage />
+      </>
+      )}
+      {moduleValue === 'contacts' && (
+      <TUIContact>
+        <TUIContactInfo
+          showChat={() => {
+            setModuleValue('chats');
+          }}
+        />
+      </TUIContact>
+      )}
+    </>
+  );
+}
+
+function RenderForH5({ currentConversationID }: RenderH5Props) {
+  return (
+    <>
+      {!currentConversationID && (
+      <div className="sample-chat-h5-container">
+        <TUIProfile className="sample-profile" />
+        <TUIConversation />
+      </div>
+      )}
+      {currentConversationID && (
+      <>
+        <TUIChat TUIMessageInputConfig={TUIMessageInputConfig} />
+        <TUIManage />
+      </>
+      )}
+    </>
+  );
+}
 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 +141,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 currentConversationID={currentConversationID} />)}
       </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;
+  }
+}

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

@@ -7,3 +7,106 @@
   background-color: #FFFFFF;
   text-align: initial;
 }
+.sample-chat {
+  position:relative;
+  margin: 0 auto;
+  width: calc(100% - 20rem);
+  min-width: 850px;
+  height: 86%;
+  box-sizing: border-box;
+  border-radius: 12px;
+  overflow: hidden;
+  &-profile {
+    position: absolute;
+    top: 0;
+    z-index: 1;
+  }
+  &-left-container {
+    max-width: 360px;
+    min-width: 360px;
+    display: flex;
+    flex-direction: column;
+  }
+  &-tab {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin: 12px;
+  }
+  &-tab-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  &-tab-text {
+    font-size: 15px;
+    line-height: 25px;
+    text-align: center;
+  }
+  &-tab-active {
+    color: #147AFF;
+  }
+}
+.tuikit-container {
+  display: flex;
+  height: 100%;
+  position: relative;
+  text-align: initial;
+  box-shadow: 0 11px 20px 0 rgba(0,0,0,.3);
+}
+.tui-chat-default {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position-x: -17px;
+  background-position-y: 173px;
+  padding: 100px 40px 0;
+  header {
+    display: flex;
+    align-items: center;
+    font-size: 1.75rem;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: #000;
+    letter-spacing: 0;
+    img {
+      width: 32px;
+      margin: 0 10px;
+    }
+  }
+  .content {
+    max-width: 393px;
+    font-size: 16px;
+    line-height: 24px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    color: #666;
+    letter-spacing: 0;
+    padding: 36px 0 20px;
+  }
+  .link {
+    font-size: 14px;
+    line-height: 20px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    color: #666;
+    letter-spacing: 0;
+    a {
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: #006eff;
+      letter-spacing: 0;
+      text-decoration: none;
+      padding: 0 5px;
+    }
+  }
+}
+
+
+body {
+  #webpack-dev-server-client-overlay {
+    display: none !important;
+  }
+}

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

@@ -45,3 +45,23 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+html, body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+*{  
+  -webkit-touch-callout:none; 
+  -webkit-user-select:none;   
+  -khtml-user-select:none;  
+  -moz-user-select:none;
+  -ms-user-select:none;  
+  user-select:none;  
+}
+.text-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

package/src/components/TUIManage/TUIManage.tsx

@@ -5,6 +5,7 @@ import { Icon, IconTypes } from '../Icon';
 import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { Switch } from '../Switch';
 import { useTUIKitContext } from '../../context';
+import { isH5, isPC } from '../../utils/env';
 import { getMessageProfile } from '../ConversationPreview/utils';
 import { useConversationUpdate } from '../TUIConversationList/hooks/useConversationUpdate';
 import { useConversation } from '../../hooks';
@@ -46,43 +47,66 @@ export function TUIManage() {
     setIsPinned(activeConversation ? activeConversation.isPinned : false);
   }, [activeConversation, forceUpdateCount]);
 
-  return TUIManageShow && activeConversation && (
-  <div className="tui-manage">
-    <div className="tui-manage-title">
-      <Icon type={IconTypes.CANCEL} width={16} height={16} onClick={close} />
-      <span>{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)
-            }
-          />
+  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="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={pinChatChange}
-            checked={isPinned}
-          />
-        </div>
-        <div className="manage-handle-box" role="presentation" onClick={handleDelete}>
-          <div className="manage-handle-title red">{t('TUIConversation.Delete')}</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={pinChatChange} 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>
-    </div>
-  </div>
+    )
   );
 }