@tencentcloud/chat-uikit-react 0.0.3 → 1.0.0

package/src/components/TUIMessageList/hooks/useMessageListElement.tsx

@@ -1,22 +1,42 @@
-import React, { PropsWithChildren, useEffect, useMemo } from 'react';
+import React, {
+  PropsWithChildren, useMemo,
+} from 'react';
 import { Message } from 'tim-js-sdk';
+import { UnknowPorps } from '../../../context';
 import { TUIMessageProps } from '../../TUIMessage/TUIMessage';
+import { getTimeStamp } from '../../untils';
 
 interface MessageListElementProps {
   enrichedMessageList: Array<Message>;
-  TUIMessage?: React.ComponentType<TUIMessageProps>,
+  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>,
+  intervalsTimer?: number
 }
 
 function useMessageListElement <T extends MessageListElementProps>(
   props: PropsWithChildren<T>,
 ) {
-  const { enrichedMessageList, TUIMessage } = props;
+  const {
+    enrichedMessageList,
+    TUIMessage,
+    intervalsTimer,
+  } = props;
+
   return useMemo(() => enrichedMessageList?.map((item: Message, index:number) => {
     const key = `${JSON.stringify(item)}${index}`;
+    const preMessageTImer = index > 0 ? enrichedMessageList[index - 1]?.time : -1;
+    const currrentTimer = item?.time || 0;
+    const isShowIntervalsTImer = preMessageTImer !== -1
+      ? (currrentTimer - preMessageTImer) >= intervalsTimer : false;
     return (
-      <li className="message-list-item" key={key}>
-        <TUIMessage message={item} />
-      </li>
+      <>
+        {
+         isShowIntervalsTImer && <div className="message-list-time" key={`${currrentTimer + index}`}>{currrentTimer ? getTimeStamp(currrentTimer * 1000) : 0}</div>
+       }
+        <li className="message-list-item" key={key}>
+          <TUIMessage message={item} />
+        </li>
+
+      </>
     );
   }), [enrichedMessageList]);
 }

package/src/components/TUIMessageList/styles/layout.scss

@@ -1,7 +1,7 @@
 ul,li,div,p,label,span {
   margin: 0;
   padding: 0;
-} 
+}
 ul li {
   list-style: none;
 }
@@ -12,6 +12,9 @@ ul li {
   overflow-y: auto;
   position: relative;
   padding: 0 20px;
+  &.hide {
+    opacity: 0;
+  }
   &-item {
     display: grid;
     padding: 5px 0;
@@ -25,4 +28,13 @@ ul li {
     line-height: 17px;
     color: #999999;
   }
+  &-time {
+    color: #7a7a7a;
+    font-family: PingFangSC-Medium;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 14px;
+    padding: 10px;
+    text-align: center;
+  }
 }

package/src/components/index.ts

@@ -5,8 +5,19 @@ export * from './TUIChat';
 export * from './ConversationPreview';
 export * from './TUIChatHeader';
 export * from './TUIMessageList';
+export * from './TUIMessage';
 export * from './TUIMessageInput';
 export * from './TUIProfile';
 export * from './Avatar';
 export * from './ConversationSearch';
 export * from './TUIManage';
+export * from './Popup';
+export * from './Checkbox';
+export * from './DivWithEdit';
+export * from './Icon';
+export * from './EmptyStateIndicator';
+export * from './Input';
+export * from './Model';
+export * from './Plugins';
+export * from './Switch';
+export * from './Toast';

package/src/constants.ts

@@ -42,6 +42,9 @@ export enum CONSTANT_DISPATCH_TYPE {
   OPERATE_MESSAGE = 'operateMessage',
   SET_NO_MORE = 'setNoMore',
   SET_CURSOR_POS = 'setCursorPos',
+  SET_AUDIO_SOURCE = 'setAudioSource',
+  SET_VIDEO_SOURCE = 'setVideoSource',
+  UPDATE_UPLOAD_PENDDING_MESSAGE_LIST = 'updateUploadPenddingMessageList'
 }
 
 export enum MESSAGE_TYPE {

package/src/context/ComponentContext.tsx

@@ -8,7 +8,7 @@ export interface UnknowPorps {
 }
 
 export interface ComponentContextValue {
-  TUIMessage?: React.ComponentType<TUIMessageProps>,
+  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>,
   TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>,
   EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>,
   TUIMessageInput?: React.ComponentType<UnknowPorps>,

package/src/context/TUIChatActionContext.tsx

@@ -1,15 +1,19 @@
 import React, { PropsWithChildren, useContext } from 'react';
 import { Message } from 'tim-js-sdk';
 import type {
+  CreateCustomMessageProps,
   CreateFaceMessageProps,
   CreateForwardMessageProps,
+  CreateLocationMessageProps,
+  CreateMergerMessageProps,
+  CreateTextAtMessageProps,
   CreateTextMessageProps,
   CreateUploadMessageProps,
 } from '../components/TUIChat/hooks/useCreateMessage';
 import { OperateMessageParams } from '../components/TUIChat/hooks/useHandleMessage';
 
 export interface TUIChatActionContextValue {
-  sendMessage?: (message: Message) => Promise<void>,
+  sendMessage?: (message: Message, options?:any) => Promise<void>,
   removeMessage?: (message: Message) => void,
   updateMessage?: (messages: Array<Message>) => void,
   createTextMessage?: (options: CreateTextMessageProps) => Message,
@@ -18,10 +22,19 @@ export interface TUIChatActionContextValue {
   createVideoMessage?: (options: CreateUploadMessageProps) => Message,
   createFileMessage?: (options: CreateUploadMessageProps) => Message,
   createForwardMessage?: (options: CreateForwardMessageProps) => Message,
+  createCustomMessage?: (options: CreateCustomMessageProps) => Message,
+  createAudioMessage?: (options: CreateUploadMessageProps) => Message,
+  createTextAtMessage?: (options: CreateTextAtMessageProps) => Message,
+  createLocationMessage?: (options: CreateLocationMessageProps) => Message,
+  createMergerMessage?: (options: CreateMergerMessageProps) => Message,
   editLocalmessage?: (message: Message) => void,
   operateMessage?: (data?: OperateMessageParams) => void,
   loadMore?: () => Promise<void>,
   revokeMessage?: (message:Message) => Promise<Message>,
+  setAudioSource?: (source: HTMLAudioElement | null) => void,
+  setVideoSource?: (source: HTMLVideoElement | null) => void,
+  setHighlightedMessageId?: (highlightedMessageId: string) => void,
+  updataUploadPenddingMessageList?: (message?:Message) => void,
 }
 
 export const TUIChatActionContext = React.createContext<

package/src/context/TUIChatStateContext.tsx

@@ -2,6 +2,7 @@ import React, {
   PropsWithChildren, useContext, MutableRefObject, RefObject,
 } from 'react';
 import { Conversation, Message } from 'tim-js-sdk';
+import { MessageListProps, TUIMessageInputBasicProps, TUIMessageProps } from '../components';
 import { OperateMessageParams } from '../components/TUIChat/hooks/useHandleMessage';
 
 export interface TUIChatStateContextValue {
@@ -17,6 +18,13 @@ export interface TUIChatStateContextValue {
   textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
   operateData?: OperateMessageParams,
   noMore?: boolean,
+  messageConfig?: TUIMessageProps,
+  cloudCustomData?: string,
+  TUIMessageInputConfig?: TUIMessageInputBasicProps,
+  audioSource?: HTMLAudioElement,
+  vidoeSource?: HTMLVideoElement,
+  TUIMessageListConfig?: MessageListProps,
+  uploadPenddingMessageList?: Array<Message>,
 }
 
 export const TUIChatStateContext = React.createContext<TUIChatStateContextValue>(null);

package/src/context/TUIMessageContext.tsx

@@ -1,5 +1,13 @@
 import React, { PropsWithChildren, ReactEventHandler, useContext } from 'react';
 import { Message } from 'tim-js-sdk';
+import { MessagePluginsProps } from '../components';
+
+export enum messageShowType {
+   IN = 'in',
+   OUT = 'out',
+   ALL = 'all',
+   NONE = 'none',
+}
 
 export interface TUIMessageContextValue {
   message?: Message,
@@ -13,6 +21,18 @@ export interface TUIMessageContextValue {
   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>(undefined);

package/src/context/TUIMessageInputContext.tsx

@@ -5,6 +5,7 @@ import React, {
   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';
@@ -28,11 +29,9 @@ export interface TUIMessageInputContextValue {
   insertText?: (textToInsert: string) => void,
   setText?: (textToInsert: string) => void,
   focus?: boolean,
-  plugins?: Array<React.ReactElement>,
-  showNumber?: number,
-  MoreIcon?: React.ReactElement,
   handlePasete?: (e:ClipboardEvent) => void,
   setCursorPos?: (e:ICursorPos) => void,
+  pluginConfig?: PluginConfigProps,
 }
 
 export const TUIMessageInputContext = React.createContext<TUIMessageInputContextValue>(undefined);