@tencentcloud/chat-uikit-react 2.2.4 → 2.2.6

package/dist/esm/context/TUIKitContext.d.ts

@@ -1,25 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { ChatSDK, Conversation, Profile } from '@tencentcloud/chat';
-import { UseContactParams } from '../components/TUIKit/hooks/useTUIKit.js';
-
-interface TUIKitContextValue {
-    chat: ChatSDK;
-    language: string;
-    conversation?: Conversation;
-    contactData?: UseContactParams;
-    setActiveConversation: (conversation?: Conversation) => void;
-    customClasses?: unknown;
-    myProfile?: Profile;
-    TUIManageShow?: boolean;
-    setTUIManageShow?: React.Dispatch<React.SetStateAction<boolean>>;
-    TUIProfileShow?: boolean;
-    setActiveContact: (UseContactParams?: UseContactParams) => void;
-    setTUIProfileShow?: React.Dispatch<React.SetStateAction<boolean>>;
-}
-declare const TUIKitContext: React.Context<TUIKitContextValue | undefined>;
-declare function TUIKitProvider({ children, value }: PropsWithChildren<{
-    value: TUIKitContextValue;
-}>): React.ReactElement;
-declare const useTUIKitContext: (componentName?: string) => TUIKitContextValue;
-
-export { TUIKitContext, TUIKitContextValue, TUIKitProvider, useTUIKitContext };

package/dist/esm/context/TUIKitContext.js

@@ -1 +0,0 @@
-import{__assign as r}from"tslib";import{jsx as t}from"react/jsx-runtime";import e,{useContext as o}from"react";var i=e.createContext(void 0);function n(e){var o=e.children,n=e.value;return t(i.Provider,r({value:n},{children:o}))}var a=function(r){var t=o(i);return!t&&r?{}:t};export{i as TUIKitContext,n as TUIKitProvider,a as useTUIKitContext};

package/src/components/TUIKit/TUIKit.tsx

@@ -1,228 +0,0 @@
-import React, { PropsWithChildren, useState, useEffect } from 'react';
-import { ChatSDK, Conversation } from '@tencentcloud/chat';
-import { TUIStore, StoreName, IConversationModel, TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { TUILogin } from '@tencentcloud/tui-core';
-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?: any,
-  language?: string,
-  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
-          showChats={() => {
-            setModuleValue(TUIKIT_TABBAR.CHATS);
-          }}
-        />
-      </TUIContact>
-      )}
-    </>
-  );
-}
-
-function RenderForH5({
-  moduleValue, contactData, tabbarRender, currentConversationID, setModuleValue,
-}: RenderH5Props) {
-  return (
-    <div className='sample-chat-h5'>
-      {!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
-            showChats={() => {
-              setModuleValue(TUIKIT_TABBAR.CHATS);
-            }}
-          />
-        </TUIContact>
-      )}
-    </div>
-  );
-}
-export function TUIKit<
-  T extends ChatProps
-  >(
-  props:PropsWithChildren<T>,
-):React.ReactElement {
-  const [moduleValue, setModuleValue] = useState('chats');
-  const { t } = useTranslation();
-  const {
-    children,
-    chat = TUILogin.getContext().chat,
-    customClasses,
-    activeConversation,
-    language = 'en-US',
-  } = props;
-
-  (window as any).tencent_cloud_im_csig_react_uikit_23F_xa = true;
-  const {
-    conversation,
-    contactData,
-    setActiveConversation,
-    myProfile,
-    TUIManageShow,
-    setTUIManageShow,
-    TUIProfileShow,
-    setTUIProfileShow,
-    setActiveContact,
-  } = useTUIKit({ chat, activeConversation, language });
-  const chatContextValue = useCreateTUIKitContext({
-    chat,
-    language,
-    conversation,
-    contactData,
-    setActiveConversation,
-    customClasses,
-    myProfile,
-    TUIManageShow,
-    setTUIManageShow,
-    TUIProfileShow,
-    setTUIProfileShow,
-    setActiveContact,
-  });
-  useEffect(() => {
-    TUIStore.watch(StoreName.CONV, {
-      currentConversation: onCurrentConversation,
-    });
-    return () => {
-      TUIStore.unwatch(StoreName.CONV, {
-        currentConversation: onCurrentConversation,
-      });
-    };
-  }, []);
-
-  const switchTabbar = (value: string) => {
-    setModuleValue(value);
-    TUIConversationService.switchConversation('');
-  };
-  const onCurrentConversation = (conversationModel: IConversationModel) => {
-    setActiveConversation(conversationModel?.getConversation());
-  };
-
-  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 ||
-          (isPC && (
-            <RenderForPC
-              moduleValue={moduleValue}
-              tabbarRender={tabbarRender}
-              setModuleValue={setModuleValue}
-            />
-          )) ||
-          (isH5 && (
-            <RenderForH5
-              contactData={contactData}
-              moduleValue={moduleValue}
-              tabbarRender={tabbarRender}
-              currentConversationID={conversation?.conversationID || ''}
-              setModuleValue={setModuleValue}
-            />
-          ))}
-      </div>
-    </TUIKitProvider>
-  );
-}

package/src/components/TUIKit/hooks/useCreateTUIKitContext.tsx

@@ -1,48 +0,0 @@
-import React, { useMemo } from 'react';
-import { TUIKitContextValue } from '../../../context/TUIKitContext';
-
-export const useCreateTUIKitContext = (value:TUIKitContextValue) => {
-  const {
-    chat,
-    language,
-    conversation,
-    contactData,
-    customClasses,
-    setActiveConversation,
-    myProfile,
-    TUIManageShow,
-    setTUIManageShow,
-    TUIProfileShow,
-    setTUIProfileShow,
-    setActiveContact,
-  } = value;
-
-  const TUIKitContext = useMemo(
-    () => ({
-      chat,
-      language,
-      conversation,
-      contactData,
-      customClasses,
-      setActiveConversation,
-      myProfile,
-      TUIManageShow,
-      setTUIManageShow,
-      TUIProfileShow,
-      setTUIProfileShow,
-      setActiveContact,
-    }),
-    [
-      language,
-      conversation,
-      contactData,
-      customClasses,
-      chat,
-      TUIManageShow,
-      TUIProfileShow,
-      setTUIProfileShow,
-      myProfile,
-    ],
-  );
-  return TUIKitContext;
-};

package/src/components/TUIKit/hooks/useTUIKit.tsx

@@ -1,99 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import {
-  TUIStore,
-  StoreName,
-  IGroupModel
-} from '@tencentcloud/chat-uikit-engine';
-import { useTranslation } from 'react-i18next';
-import {
-  ChatSDK,
-  Conversation,
-  Profile,
-  Friend,
-  FriendApplication,
-} from '@tencentcloud/chat';
-
-interface blockData {
-  type: 'block',
-  data: Profile
-}
-
-interface friendData {
-  type: 'friend',
-  data: Friend
-}
-
-interface friendApplicationData {
-  type: 'friendApplication',
-  data: FriendApplication
-}
-
-interface addFriendData {
-  type: 'addFriend',
-  data: Profile
-}
-
-interface GroupData {
-  type: 'group',
-  data: IGroupModel
-}
-
-export type UseContactParams = blockData | friendData |
-friendApplicationData | addFriendData| GroupData | undefined;
-
-export interface UseChatParams{
-  chat: ChatSDK,
-  activeConversation?: Conversation,
-  language?: string,
-}
-
-export const useTUIKit = ({
-  chat, activeConversation: paramsActiveConversation,
-  language,
-}:UseChatParams) => {
-  const { i18n } = useTranslation();
-  const [conversation, setConversation] = useState<Conversation | undefined>(paramsActiveConversation);
-  const [myProfile, setMyProfile] = useState<Profile>();
-  const [TUIManageShow, setTUIManageShow] = useState<boolean>(false);
-  const [TUIProfileShow, setTUIProfileShow] = useState<boolean>(false);
-  const [contactData, setContactData] = useState<UseContactParams>();
-
-  useEffect(() => {
-    i18n.changeLanguage(language);
-    TUIStore.watch(StoreName.USER, {
-      userProfile: (userProfileData: any) => {
-        setMyProfile(userProfileData);
-      },
-    });
-  }, [language]);
-  const setActiveConversation = useCallback(
-    (activeConversation?: Conversation) => {
-      if (activeConversation) {
-        chat?.setMessageRead({ conversationID: activeConversation.conversationID });
-      }
-      if (conversation && (activeConversation?.conversationID !== conversation.conversationID)) {
-        setTUIManageShow(false);
-      }
-      setConversation(activeConversation);
-    },
-    [chat],
-  );
-  const setActiveContact = (actionContactData?: UseContactParams) => {
-    setContactData(actionContactData);
-  };
-
-  useEffect(() => {
-    paramsActiveConversation && setConversation(paramsActiveConversation);
-  }, [paramsActiveConversation]);
-  return {
-    conversation,
-    contactData,
-    setActiveConversation,
-    myProfile,
-    TUIManageShow,
-    setTUIManageShow,
-    TUIProfileShow,
-    setTUIProfileShow,
-    setActiveContact,
-  };
-};

package/src/components/TUIKit/index.ts

@@ -1,3 +0,0 @@
-export * from './TUIKit';
-export * from './hooks/useTUIKit';
-export * from './hooks/useCreateTUIKitContext';

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

@@ -1,34 +0,0 @@
-.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

@@ -1,112 +0,0 @@
-@import "reset";
-.tui-kit {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  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

@@ -1,67 +0,0 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-a,a:link,a:visited,a:hover,a:active{
-  text-decoration: none;
-  color:inherit;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol, ul {
-  list-style: none;
-}
-blockquote, q {
-  quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-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/context/TUIKitContext.tsx

@@ -1,39 +0,0 @@
-import React, { PropsWithChildren, useContext } from 'react';
-import {
-  ChatSDK,
-  Conversation,
-  Profile,
-} from '@tencentcloud/chat';
-import { UseContactParams } from '../components/TUIKit/hooks/useTUIKit';
-
-export interface TUIKitContextValue {
-    chat: ChatSDK,
-    language: string,
-    conversation?: Conversation,
-    contactData?: UseContactParams,
-    setActiveConversation: (conversation?: Conversation) => void,
-    customClasses?: unknown,
-    myProfile?: Profile,
-    TUIManageShow?: boolean,
-    setTUIManageShow?: React.Dispatch<React.SetStateAction<boolean>>,
-    TUIProfileShow?: boolean,
-    setActiveContact: (UseContactParams?: UseContactParams) => void,
-    setTUIProfileShow?: React.Dispatch<React.SetStateAction<boolean>>,
-}
-export const TUIKitContext = React.createContext<TUIKitContextValue | undefined>(undefined);
-export function TUIKitProvider({ children, value }:PropsWithChildren<{
-    value: TUIKitContextValue
-}>):React.ReactElement {
-  return (
-    <TUIKitContext.Provider value={(value as unknown) as TUIKitContextValue}>
-      {children}
-    </TUIKitContext.Provider>
-  );
-}
-export const useTUIKitContext = (componentName?:string):TUIKitContextValue => {
-  const contextValue = useContext(TUIKitContext);
-  if (!contextValue && componentName) {
-    return {} as TUIKitContextValue;
-  }
-  return (contextValue as unknown) as TUIKitContextValue;
-};