@tencentcloud/chat-uikit-react 2.2.7 → 2.2.8

package/src/components/TUIConversationList/TUIConversationList.tsx

@@ -1,178 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Conversation } from '@tencentcloud/chat';
-import { useUIKit, useUIManager } from '../../context';
-import { isH5 } from '../../utils/env';
-import useConversationList from './hooks/useConversationList';
-import './index.scss';
-import { ConversationPreview, ConversationPreviewUIComponentProps } from '../ConversationPreview';
-import {
-  ConversationListContainer,
-  ConversationListContainerProps,
-} from '../ConversationPreview/ConversationListContainer';
-import { ConversationSearchInput, ConversationSearchResult } from '../ConversationSearch';
-import { ConversationCreate } from '../ConversationCreate';
-import { Icon, IconTypes } from '../Icon';
-import { getDisplayTitle } from '../ConversationPreview/utils';
-import { useConversationUpdate } from './hooks/useConversationUpdate';
-import { useTUIConversationContext } from '../../context/TUIConversationContext';
-
-interface Props {
-  componentVisibleOptions?: any,
-  filters?: object,
-  sort?: object,
-  options?: object,
-  Preview?: React.ComponentType<ConversationPreviewUIComponentProps>,
-  Container?: React.ComponentType<ConversationListContainerProps>,
-  onConversationListUpdated?: (
-    setConversationList: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
-    event: () => void
-  ) => void,
-  filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
-}
-export function UnMemoTUIConversationList<T extends Props>(props: T):React.ReactElement {
-  const {
-    Preview,
-    Container = ConversationListContainer,
-    onConversationListUpdated,
-    filterConversation: propsFilterConversation,
-    componentVisibleOptions = {
-      isProfileShow: true,
-      isSearchInputShow: true,
-      isContainerShow: true,
-    },
-  } = props;
-  const { t } = useTranslation();
-  const { chat } = useUIKit('TUIConversationList');
-  const {
-    customClasses,
-    conversation,
-    setActiveConversation,
-    setTUIProfileShow,
-  } = useUIManager('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>>
-    >,
-  ) => {
-    if (!conversationList.length) {
-      return;
-    }
-  };
-  const { conversationList, setConversationList } = useConversationList(
-    chat,
-    activeConversationHandler,
-    filterConversation,
-  );
-  useConversationUpdate(
-    setConversationList,
-    onConversationListUpdated,
-    forceUpdate,
-    filterConversation,
-  );
-  const [searchValue, setSearchValue] = useState('');
-  const [searchResult, setSearchResult] = useState(conversationList);
-  const [conversationCreated, setConversationCreated] = useState(false);
-  const [activeConversationID, setActiveConversationID] = useState('');
-
-  const handleSearchValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    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()),
-      );
-      setSearchResult(result);
-    } else {
-      setSearchResult([]);
-    }
-  };
-
-  const handleConversationCreate = () => {
-    setSearchValue('');
-    setConversationCreated(true);
-  };
-  const conversationListRef = useRef(null);
-  return (
-    <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>
-            </div>
-          )}
-          {componentVisibleOptions.isContainerShow && (
-            <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">No conversation</div>
-                </div>
-              ) : 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>
-  );
-}
-export const TUIConversationList = React.memo(UnMemoTUIConversationList);

package/src/components/TUIConversationList/hooks/useConversationList.tsx

@@ -1,42 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import TencentCloudChat, { ChatSDK, Conversation } from '@tencentcloud/chat';
-import {
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
-function useConversationList(
-  chat: ChatSDK,
-  activeConversationHandler?:(
-    conversationList: Array<Conversation>,
-    setConversationList: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
-  ) => void,
-  filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
-) {
-  const [conversationList, setConversationList] = useState<Array<Conversation>>([]);
-  const onConversationListUpdated = (list: any) => {
-    let resConversationList = [];
-    if (filterConversation) {
-      resConversationList = filterConversation(list);
-    } else {
-      resConversationList = list.filter(
-        (item: any) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
-      );
-    }
-    setConversationList(resConversationList);
-    if (activeConversationHandler) {
-      activeConversationHandler(resConversationList, setConversationList);
-    }
-  };
-
-  useEffect(() => {
-    TUIStore.watch(StoreName.CONV, {
-      conversationList: onConversationListUpdated,
-    }); 
-  }, [chat]);
-  return {
-    conversationList,
-    setConversationList,
-  };
-}
-
-export default useConversationList;

package/src/components/TUIConversationList/hooks/useConversationUpdate.tsx

@@ -1,38 +0,0 @@
-import React, { useEffect } from 'react';
-import TencentCloudChat, { Conversation } from '@tencentcloud/chat';
-import { useUIKit } from '../../../context';
-
-export const useConversationUpdate = (
-  setConversationList?: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
-  customHandler?: (
-    setConversationList: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
-    event: any
-  ) => void,
-  forceUpdate?: () => void,
-  filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
-) => {
-  const { chat } = useUIKit('useConversationUpdate');
-  useEffect(() => {
-    const onConversationListUpdated = (event:any) => {
-      if (setConversationList) {
-        if (filterConversation) {
-          setConversationList(filterConversation(event.data));
-        } else {
-          setConversationList(event.data.filter(
-            (item: any) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
-          ));
-        }
-      }
-      if (forceUpdate) {
-        forceUpdate();
-      }
-      if (customHandler && typeof customHandler === 'function') {
-        setConversationList && customHandler(setConversationList, event);
-      }
-    };
-    chat?.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);
-    return () => {
-      chat?.off(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);
-    };
-  }, [chat, customHandler]);
-};

package/src/components/TUIConversationList/index.scss

@@ -1,58 +0,0 @@
-@use "../../styles/colors/color-theme" as *;
-
-.tui-conversation {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  text-align: initial;
-  overflow: auto;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-  }
-
-  .tui-conversation-header {
-    display: flex;
-    padding: 10px 20px;
-
-    .tui-conversation-create-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-left: 10px;
-    }
-  }
-
-  .no-result {
-    padding: 0 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    &-icon {
-      margin: 100px auto 50px;
-    }
-
-    &-message {
-      color: #999;
-      font-weight: 400;
-      font-size: 16px;
-      font-family: PingFangSC-Medium;
-      line-height: 22px;
-    }
-  }
-}
-
-.tui-conversation-h5 {
-  .tui-conversation-header {
-    padding: 10px;
-  }
-
-  .conversation-list-container {
-    .conversation-preview-container {
-      padding: 0 10px;
-    }
-  }
-}

package/src/components/TUIConversationList/index.ts

@@ -1,2 +0,0 @@
-export * from './TUIConversationList';
-export * from './hooks/useConversationList';

package/src/components/TUIManage/index.ts

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

package/src/components/TUIMessageInput/index.ts

@@ -1,3 +0,0 @@
-export * from './TUIMessageInput';
-export * from './TUIMessageInputDefault';
-export * from './InputPluginsDefalut';

package/src/components/TUIMessageList/index.ts

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

package/src/components/TUIProfile/TUIProfile.tsx

@@ -1,50 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { Profile } from '../Profile';
-
-import './styles/index.scss';
-import { useMyProfile } from './hooks';
-import { TUIProfileDefault } from './TUIProfileDefault';
-import { useUIManager } from '../../context';
-
-interface TUIProfileProps {
-  className?: string,
-  TUIProfile?: React.ComponentType<any>,
-}
-
-function UnMemoizedTUIProfile<T extends TUIProfileProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    className,
-    TUIProfile: PropTUIProfile,
-  } = props;
-
-  const { myProfile, updateMyProfile } = useMyProfile();
-
-  const { setTUIProfileShow, TUIProfileShow } = useUIManager('TUIProfile');
-
-  const TUIProfileUIComponent = PropTUIProfile || TUIProfileDefault;
-
-  return (
-    <>
-    {/* //eslint-disable-next-line
-    @ts-ignore */}
-      <Profile
-        profile={myProfile}
-        handleAvatar={() => {
-          setTUIProfileShow && setTUIProfileShow(true);
-        }}
-      />
-      {TUIProfileShow && (
-        <TUIProfileUIComponent
-          className={className}
-          userInfo={myProfile}
-          update={updateMyProfile}
-        />
-      )}
-    </>
-  );
-}
-
-export const TUIProfile = React.memo(UnMemoizedTUIProfile) as
-typeof UnMemoizedTUIProfile;

package/src/components/TUIProfile/index.ts

@@ -1,2 +0,0 @@
-export * from './TUIProfile';
-export * from './TUIProfileDefault';

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

@@ -1,2 +0,0 @@
-@import "./layout.scss";
-@import "./color.scss";

package/src/context/TUIChatStateContext.tsx

@@ -1,50 +0,0 @@
-import React, {
-  PropsWithChildren, useContext, MutableRefObject, RefObject,
-} from 'react';
-import { Conversation, Message } from '@tencentcloud/chat';
-import { MessageListProps, TUIMessageInputBasicProps, TUIMessageProps } from '../components';
-import { OperateMessageParams } from '../components/TUIChat/hooks/useHandleMessage';
-
-export interface TUIChatStateContextValue {
-  conversation?: Conversation,
-  messageList?: Array<Message>,
-  nextReqMessageID?: string,
-  isCompleted?: boolean,
-  init?: boolean,
-  highlightedMessageId?: string,
-  lastMessageID?:string,
-  isSameLastMessageID?: boolean,
-  messageListRef?: RefObject<HTMLDivElement>,
-  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
-  operateData?: OperateMessageParams,
-  noMore?: boolean,
-  messageConfig?: TUIMessageProps,
-  cloudCustomData?: string,
-  TUIMessageInputConfig?: TUIMessageInputBasicProps,
-  audioSource?: HTMLAudioElement | null,
-  vidoeSource?: HTMLVideoElement | null,
-  TUIMessageListConfig?: MessageListProps,
-  uploadPendingMessageList?: Array<Message>,
-  firstSendMessage?: Message | null;
-  activeMessageID?: string,
-}
-
-export const TUIChatStateContext = React.createContext<TUIChatStateContextValue | null>(null);
-export function TUIChatStateContextProvider({ children, value }:PropsWithChildren<{
-    value: TUIChatStateContextValue
-}>):React.ReactElement {
-  return (
-    <TUIChatStateContext.Provider value={value}>
-      {children}
-    </TUIChatStateContext.Provider>
-  );
-}
-
-export function useTUIChatStateContext(componentName?:string)
-:TUIChatStateContextValue {
-  const contextValue = useContext(TUIChatStateContext);
-  if (!contextValue && componentName) {
-    return {} as TUIChatStateContextValue;
-  }
-  return (contextValue as unknown) as TUIChatStateContextValue;
-}

package/src/context/TUIConversationContext.tsx

@@ -1,29 +0,0 @@
-import React, { useContext } from 'react';
-import { Conversation } from '@tencentcloud/chat';
-import { TUIConversationList } from '../components';
-
-export interface TUIConversationContextValue {
-  createConversation?:(conversationID:string) => Promise<any>,
-  deleteConversation?:(conversationID:string) => Promise<any>,
-  filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
-}
-
-export const TUIConversationContext = React.createContext<TUIConversationContextValue>({});
-export function TUIConversationProvider({ children, value }:React.PropsWithChildren<{
-  value: TUIConversationContextValue
-}>) {
-  return (
-    <TUIConversationContext.Provider value={value}>
-      {children || (
-        <TUIConversationList />
-      )}
-    </TUIConversationContext.Provider>
-  );
-}
-export const useTUIConversationContext = (componentName?:string) => {
-  const contextValue = useContext(TUIConversationContext);
-  if (!contextValue && componentName) {
-    return {};
-  }
-  return contextValue;
-};

package/src/context/TUIMessageContext.tsx

@@ -1,56 +0,0 @@
-import React, { PropsWithChildren, ReactEventHandler, useContext } from 'react';
-import { Message } from '@tencentcloud/chat';
-import { MessagePluginsProps } from '../components';
-
-export enum messageShowType {
-   IN = 'in',
-   OUT = 'out',
-   ALL = 'all',
-   NONE = 'none',
-}
-
-export interface TUIMessageContextValue {
-  message?: Message,
-  handleDelete?: ReactEventHandler,
-  CustemElement?: React.ComponentType<{message: Message}>,
-  TextElement?: React.ComponentType<{message: Message}>,
-  ImageElement?: React.ComponentType<{message: Message}>,
-  VideoElement?: React.ComponentType<{message: Message}>,
-  AudioElement?: React.ComponentType<{message: Message}>,
-  FileElement?: React.ComponentType<{message: Message}>,
-  MergerElement?: React.ComponentType<{message: Message}>,
-  LocationElement?: React.ComponentType<{message: Message}>,
-  FaceElement?: React.ComponentType<{message: Message}>,
-  filter?: (data:Message) => void,
-  isShowTime?: boolean,
-  isShowRead?: boolean,
-  plugin?: MessagePluginsProps,
-  prefix?: React.ReactElement | string,
-  suffix?: React.ReactElement | string,
-  customName?: React.ReactElement,
-  showAvatar?: messageShowType,
-  showName?: messageShowType,
-  customAvatar?: React.ReactElement,
-  isShowProgress?: boolean,
-  Progress?: React.ComponentType<{message: Message}>,
-}
-
-export const TUIMessageContext = React.createContext<TUIMessageContextValue>({});
-export function TUIMessageContextProvider({ children, value }:PropsWithChildren<{
-    value: TUIMessageContextValue
-}>):React.ReactElement {
-  return (
-    <TUIMessageContext.Provider value={value}>
-      {children}
-    </TUIMessageContext.Provider>
-  );
-}
-
-export function useTUIMessageContext(componentName?:string)
-:TUIMessageContextValue {
-  const contextValue = useContext(TUIMessageContext);
-  if (!contextValue && componentName) {
-    return {} as TUIMessageContextValue;
-  }
-  return (contextValue as unknown) as TUIMessageContextValue;
-}

package/src/context/TUIMessageInputContext.tsx

@@ -1,55 +0,0 @@
-import React, {
-  PropsWithChildren,
-  ChangeEventHandler,
-  useContext,
-  KeyboardEventHandler,
-  MutableRefObject,
-} from 'react';
-import { PluginConfigProps } from '../components';
-import type { ICursorPos } from '../components/TUIMessageInput/hooks';
-import type { EmojiData } from '../components/TUIMessageInput/hooks/useEmojiPicker';
-import type { filesData } from '../components/TUIMessageInput/hooks/useUploadPicker';
-import type { MESSAGE_TYPE_NAME } from '../constants';
-
-interface dispatchParams {
-  type: string,
-  value?: string,
-}
-export interface TUIMessageInputContextValue {
-  text?: string,
-  disabled?: boolean,
-  dispatch?: (params: dispatchParams) => void,
-  handleChange?: ChangeEventHandler<HTMLTextAreaElement>,
-  handleSubmit?: (event: React.BaseSyntheticEvent) => void,
-  handleKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>,
-  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
-  onSelectEmoji?: (emoji: EmojiData) => void,
-  sendFaceMessage?: (emoji: EmojiData) => void,
-  sendUploadMessage?: (file: filesData, type: MESSAGE_TYPE_NAME) => void,
-  insertText?: (textToInsert: string) => void,
-  setText?: (textToInsert: string) => void,
-  focus?: boolean,
-  handlePasete?: (e:ClipboardEvent) => void,
-  setCursorPos?: (e:ICursorPos) => void,
-  pluginConfig?: PluginConfigProps,
-}
-
-export const TUIMessageInputContext = React.createContext<TUIMessageInputContextValue>({});
-export function TUIMessageInputContextProvider({ children, value }:PropsWithChildren<{
-    value: TUIMessageInputContextValue
-}>):React.ReactElement {
-  return (
-    <TUIMessageInputContext.Provider value={value}>
-      {children}
-    </TUIMessageInputContext.Provider>
-  );
-}
-
-export function useTUIMessageInputContext(componentName?:string)
-:TUIMessageInputContextValue {
-  const contextValue = useContext(TUIMessageInputContext);
-  if (!contextValue && componentName) {
-    return {} as TUIMessageInputContextValue;
-  }
-  return (contextValue as unknown) as TUIMessageInputContextValue;
-}