@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

package/src/components/ConversationPreview/ConversationPreview.tsx

@@ -1,260 +0,0 @@
-// ConversationPreview.tsx
-import React, { CSSProperties, useEffect, useRef, useState } from 'react';
-import cs from 'classnames';
-import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { Icon, IconTypes } from '../Icon';
-import { Avatar as DefaultAvatar, type AvatarProps } from '../Avatar';
-import { ConversationActions as DefaultConversationActions, type IConversationActionsConfig, type IConversationActionsProps } from '../ConversationActions';
-import { useConversationList } from '../../context/ConversationListContext';
-import { useUIManagerStore } from '../../store';
-import useLongPress from '../../hooks/useLongPress';
-import useMouseHover from '../../hooks/useMouseHover';
-import { generateHighlightTitle, getLatestMessagePreview } from './utils';
-import { getTimeStamp } from '../utils';
-import { isH5 } from '../../utils/env';
-
-import './ConversationPreview.scss';
-
-interface IConversationPreviewUIProps {
-  /** The conversation to be displayed */
-  conversation: IConversationModel;
-  /** If the component's Conversation is the active (selected) Conversation */
-  isSelected?: boolean;
-  /** Whether to show the ConversationActions */
-  enableActions?: boolean;
-  /** The string to be highlighted in the title */
-  highlightMatchString?: string;
-  /** The custom Avatar component */
-  Avatar?: React.ComponentType<AvatarProps>;
-  /** The custom Title component */
-  Title?: string | JSX.Element;
-  /** The custom last message abstract component */
-  LastMessageAbstract?: string | JSX.Element;
-  /** The custom last message abstract component */
-  LastMessageTimestamp?: string | JSX.Element;
-  /** The custom Unread component */
-  Unread?: string | JSX.Element;
-  /** The custom ConversationActions component */
-  ConversationActions?: React.ComponentType<IConversationActionsProps>;
-  /** Callback when the user click a conversation from conversation list */
-  onSelectConversation?: (conversation: IConversationModel) => void;
-  /** The custom ConversationActions config */
-  actionsConfig?: IConversationActionsConfig;
-  /** The custom class name */
-  className?: string;
-  /** The custom class style */
-  style?: CSSProperties;
-  /** The custom children node to override UI */
-  children?: React.ReactNode;
-}
-
-interface IConversationPreviewProps extends IConversationPreviewUIProps {
-  /** The custom Preview UI component */
-  Preview?: React.ComponentType<IConversationPreviewUIProps>;
-}
-
-function ConversationPreviewTitle(props: {
-  conversation: IConversationModel;
-  highlightMatchString?: string;
-}): string | JSX.Element {
-  const { conversation, highlightMatchString } = props;
-  return (
-    <div className="uikit-conversation-preview__title text-ellipsis">
-      {generateHighlightTitle(conversation, highlightMatchString).map((item, index) => (
-        <span
-          key={index}
-          className={cs({
-            'uikit-conversation-preview__title--highlight': item.isHighlight,
-            'uikit-conversation-preview__title--normal': !item.isHighlight,
-          })}
-        >
-          {item.text}
-        </span>
-      ))}
-    </div>
-  );
-}
-
-function ConversationPreviewTimestamp(props: {
-  conversation: IConversationModel;
-}): string | JSX.Element {
-  const { conversation } = props;
-  const { language } = useUIKit();
-  return (
-    <div className="uikit-conversation-preview__time">
-      {getTimeStamp(+(conversation.lastMessage?.lastTime || 0) * 1000, language)}
-    </div>
-  );
-}
-
-function ConversationPreviewAbstract(props: {
-  conversation: IConversationModel;
-}): string | JSX.Element {
-  const { conversation } = props;
-  const { myProfile } = useUIManagerStore();
-  return (
-    <div className="uikit-conversation-preview__abstract">
-      {getLatestMessagePreview(conversation, myProfile)}
-    </div>
-  );
-}
-
-function ConversationPreviewUnread(props: {
-  conversation: IConversationModel;
-}): string | JSX.Element {
-  const { conversation } = props;
-  let content;
-  if (conversation.isMuted) {
-    content = <Icon type={IconTypes.MUTE} width={16} height={16} />;
-  } else if (conversation.unreadCount > 99) {
-    content = '99+';
-  } else if (conversation.unreadCount === 0) {
-    content = null;
-  } else {
-    content = conversation.unreadCount;
-  }
-  return (
-    <div className="uikit-conversation-preview__unread">
-      {content}
-    </div>
-  );
-}
-
-function ConversationPreview<T extends IConversationPreviewProps>(
-  props: T,
-): React.ReactElement {
-  const {
-    conversation,
-    isSelected = false,
-    enableActions = true,
-    highlightMatchString,
-    Preview = ConversationPreviewUI,
-    Avatar = DefaultAvatar,
-    ConversationActions = DefaultConversationActions,
-    Title = ConversationPreviewTitle({ conversation, highlightMatchString }),
-    LastMessageTimestamp = ConversationPreviewTimestamp({ conversation }),
-    LastMessageAbstract = ConversationPreviewAbstract({ conversation }),
-    Unread = ConversationPreviewUnread({ conversation }),
-    onSelectConversation,
-    actionsConfig,
-    className,
-    style,
-    children,
-  } = props;
-
-  const { setCurrentConversation } = useConversationList();
-
-  return (
-    <Preview
-      conversation={conversation}
-      isSelected={isSelected}
-      enableActions={enableActions}
-      highlightMatchString={highlightMatchString}
-      Avatar={Avatar}
-      ConversationActions={ConversationActions}
-      Title={Title}
-      LastMessageTimestamp={LastMessageTimestamp}
-      LastMessageAbstract={LastMessageAbstract}
-      Unread={Unread}
-      onSelectConversation={onSelectConversation}
-      actionsConfig={actionsConfig}
-      className={className}
-      style={style}
-      children={children}
-    />
-  );
-}
-
-function ConversationPreviewUI<T extends IConversationPreviewUIProps>(
-  props: T,
-): React.ReactElement {
-  const {
-    conversation,
-    isSelected,
-    enableActions,
-    Avatar = DefaultAvatar,
-    ConversationActions = DefaultConversationActions,
-    Title,
-    LastMessageTimestamp,
-    LastMessageAbstract,
-    Unread,
-    onSelectConversation,
-    actionsConfig,
-    className,
-    style,
-    children,
-  } = props;
-
-  const {
-    currentConversation,
-    setCurrentConversation,
-  } = useConversationList();
-
-  const conversationPreviewRef = useRef<HTMLDivElement>(null);
-  const [isActionMenuActive, setIsActionMenuActive] = useState(false);
-
-  const isHovering = useMouseHover(conversationPreviewRef);
-  const onLongPress = useLongPress({}, {
-    delay: 500,
-    shouldPreventDefault: true,
-  });
-  const { isLongPressing } = onLongPress;
-
-  useEffect(() => {
-    setIsActionMenuActive(isHovering || isLongPressing);
-  }, [isHovering, isLongPressing]);
-
-  const onClick = () => {
-    onSelectConversation?.(conversation);
-    setCurrentConversation(conversation);
-  };
-
-  return (
-    <div
-      ref={conversationPreviewRef}
-      className={cs('uikit-conversation-preview', className, {
-        'uikit-conversation-preview--mobile': isH5,
-        'uikit-conversation-preview--active': isSelected || conversation.conversationID === currentConversation?.conversationID,
-        'uikit-conversation-preview--unread': !conversation.isMuted && conversation.unreadCount > 0,
-        'uikit-conversation-preview--pin': conversation.isPinned,
-        'uikit-conversation-preview--mute': conversation.isMuted,
-      })}
-      style={style}
-      onClick={onClick}
-    >
-      {children || (
-        <>
-          <div className="uikit-conversation-preview__avatar">
-            <Avatar
-              image={conversation.getAvatar()}
-              size={40}
-            />
-          </div>
-          <div className="uikit-conversation-preview__content">
-            {Title}
-            {LastMessageAbstract}
-          </div>
-          <div className="uikit-conversation-preview__external">
-            {Unread}
-            {(enableActions && isActionMenuActive)
-              ? (
-                  <ConversationActions
-                    conversation={conversation}
-                    {...actionsConfig}
-                  />
-                )
-              : LastMessageTimestamp}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-export {
-  ConversationPreview,
-  ConversationPreviewUI,
-  IConversationPreviewProps,
-  IConversationPreviewUIProps,
-};

package/src/components/ConversationPreview/index.ts

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

package/src/components/ConversationPreview/utils.tsx

@@ -1,145 +0,0 @@
-import TUIChatEngine, { IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { Conversation, Profile } from '@tencentcloud/chat';
-import { defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
-import { transformTextWithEmojiKeyToName } from '../MessageElement/utils/decodeText';
-
-interface IMessageProfile {
-  name?: string;
-  nick?: string;
-  groupID?: string;
-  userID?: string;
-  avatar?: string;
-}
-
-export const generateHighlightTitle = (
-  conversation: IConversationModel,
-  highlightMatchString?: string,
-): Array<{ text: string; isHighlight: boolean }> => {
-  const titleString = conversation.getShowName();
-  if (!highlightMatchString) return [{ text: titleString, isHighlight: false }];
-  const matchLowerCaseString = highlightMatchString.toLowerCase();
-  const titleList = titleString.split(new RegExp(`(${highlightMatchString})`, 'gi'))
-    .map((item: string) => { return { text: item, isHighlight: item.toLowerCase() === matchLowerCaseString }; });
-  return titleList;
-};
-
-export const getLatestMessagePreview = (
-  conversation: IConversationModel,
-  myProfile?: Profile,
-) => {
-  const { lastMessage, type } = conversation;
-  if (!lastMessage) {
-    return '';
-  }
-  const {
-    fromAccount, nick, nameCard, isRevoked,
-  } = lastMessage;
-  let { messageForShow } = lastMessage;
-  if (lastMessage.type === TUIChatEngine.TYPES.MSG_CUSTOM && lastMessage.payload?.description) {
-    messageForShow = lastMessage.payload.description;
-  }
-  let from = '';
-  switch (type) {
-    case TUIChatEngine.TYPES.CONV_GROUP:
-      from = lastMessage?.fromAccount === myProfile?.userID ? 'You' : `${nameCard || nick || fromAccount || ''}`;
-      from = `${from ? `${from}:` : ''}`;
-      break;
-    case TUIChatEngine.TYPES.CONV_C2C:
-      from = isRevoked ? 'you ' : '';
-      break;
-    default:
-  }
-  return (
-    <div style={{
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-    }}
-    >
-      <span>{from}</span>
-      <span>{lastMessage.isRevoked ? 'recalled a message' : transformTextWithEmojiKeyToName(messageForShow)}</span>
-    </div>
-  );
-};
-
-// The following is compatible with old versions
-export const getMessageProfile = (conversation: IConversationModel | Conversation): IMessageProfile => {
-  // eslint-disable-next-line
-  // @ts-ignore
-  if (!conversation) return null;
-  let result: IMessageProfile = {};
-  const { type, groupProfile, userProfile } = conversation;
-  switch (type) {
-    case TUIChatEngine.TYPES.CONV_C2C:
-      result = userProfile;
-      break;
-    case TUIChatEngine.TYPES.CONV_GROUP:
-      result = groupProfile;
-      break;
-    default:
-      break;
-  }
-  return result;
-};
-
-export const getDisplayTitle = (
-  conversation: IConversationModel,
-  searchValue?: string,
-  highlightColor = '#147AFF',
-): string | React.ReactElement => {
-  const {
-    name, nick, groupID, userID,
-  } = getMessageProfile(conversation);
-  const { type, remark } = conversation;
-  let title = '';
-  switch (type) {
-    case TUIChatEngine.TYPES.CONV_C2C:
-      title = remark || nick || userID || '';
-      break;
-    case TUIChatEngine.TYPES.CONV_GROUP:
-      title = name || groupID || '';
-      break;
-    default:
-      title = '';
-  }
-  const handleTitle = (str: string) => {
-    const tempStr = str.toLocaleLowerCase();
-    const pos = searchValue && tempStr.indexOf(searchValue.toLocaleLowerCase());
-    const titleList = str.split(new RegExp(`(${searchValue})`, 'gi'));
-    if (pos === '') return <></>;
-    return (
-      <div>
-        {searchValue && titleList.map((textItem: string, index: number) =>
-          (textItem.toLowerCase() === searchValue.toLowerCase())
-            ? (
-                <span key={index} style={{ color: highlightColor }}>{textItem}</span>
-              )
-            : (
-                <span key={index}>{textItem}</span>
-              ),
-        )}
-        ;
-      </div>
-    );
-  };
-  return !searchValue ? title : handleTitle(title);
-};
-
-export const getDisplayImage = (conversation: IConversationModel) => {
-  const { type } = conversation;
-  const { avatar } = getMessageProfile(conversation);
-  let displayImage = avatar;
-  if (!avatar) {
-    switch (type) {
-      case TUIChatEngine.TYPES.CONV_C2C:
-        displayImage = defaultUserAvatar;
-        break;
-      case TUIChatEngine.TYPES.CONV_GROUP:
-        displayImage = defaultGroupAvatarWork;
-        break;
-      default:
-        displayImage = defaultGroupAvatarWork;
-    }
-  }
-  return displayImage;
-};

package/src/components/ConversationSearch/ConversationSearch.scss

@@ -1,22 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.uikit-conversation-search {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  box-sizing: border-box;
-  position: relative;
-  z-index: 2;
-  overflow: hidden;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-    color: get(text-color-primary);
-  }
-
-  &.uikit-conversation-search--active {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-}

package/src/components/ConversationSearch/ConversationSearch.tsx

@@ -1,125 +0,0 @@
-import { useEffect, useState } from 'react';
-import classNames from 'classnames';
-import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { ConversationSearchInput as DefaultConversationSearchInput, type IConversationSearchInputProps } from './ConversationSearchInput/ConversationSearchInput';
-import { ConversationSearchResult as DefaultConversationSearchResult, type IConversationSearchResultProps } from './ConversationSearchResult/ConversationSearchResult';
-import { ConversationPreview as DefaultResultPreview, type IConversationPreviewProps } from '../ConversationPreview';
-import { Avatar as DefaultAvatar, type AvatarProps } from '../Avatar';
-
-import './ConversationSearch.scss';
-
-export interface IConversationSearchProps {
-  /** The list of conversations to be searched. */
-  conversationList: IConversationModel[];
-  /** Specifies a react component to customize the avatar in the search results. */
-  Avatar?: React.ComponentType<AvatarProps>;
-  /** Specifies a react component to customize the preview of search results. */
-  ResultPreview?: React.ComponentType<IConversationPreviewProps>;
-  /** Specifies a react component to customize the search input. */
-  ConversationSearchInput?: React.ComponentType<IConversationSearchInputProps>;
-  /** Specifies a react component to customize the search result. */
-  ConversationSearchResult?: React.ComponentType<IConversationSearchResultProps>;
-  /** Specifies a function to customize the search algorithm. This function takes the search value and the conversation list as parameters and returns the search results. */
-  searchFn?: (searchValue: string, conversationList: IConversationModel[]) => IConversationModel[];
-  /** Specifies a function to be called when the search input changes. This function takes the current search value as a parameter. */
-  onSearchChange?: (searchValue: string) => void;
-  /** Specifies a function to be called when the search input is focused. */
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  /** Specifies a function to be called when the search input is blurred. */
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  /** Specifies a function to be called when a search result is selected. This function takes the selected conversation as a parameter. */
-  onSelectResult?: (conversation: IConversationModel) => void;
-  /** Specifies whether the search component is visible. */
-  visible?: boolean;
-  /** Specifies a custom class name for the search component. */
-  className?: string;
-  /** The custom css style */
-  style?: React.CSSProperties;
-}
-
-export function defaultSearchFn(searchValue: string, conversationList: IConversationModel[]) {
-  if (!searchValue || conversationList?.length === 0) return [];
-  return conversationList.filter(item => item.getShowName().toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
-}
-
-export function ConversationSearch(props: IConversationSearchProps) {
-  const {
-    visible = true,
-    conversationList,
-    Avatar = DefaultAvatar,
-    searchFn = defaultSearchFn,
-    ResultPreview = DefaultResultPreview,
-    ConversationSearchInput = DefaultConversationSearchInput,
-    ConversationSearchResult = DefaultConversationSearchResult,
-    onSearchChange,
-    onFocus,
-    onBlur,
-    onSelectResult,
-    className,
-    style,
-  } = props;
-
-  const [searchValue, setSearchValue] = useState('');
-  const [searchResult, setSearchResult] = useState<IConversationModel[]>(conversationList);
-
-  const [isActive, setIsActive] = useState(false);
-  const [isFocus, setIsFocus] = useState(false);
-  const [isInputEmpty, setIsInputEmpty] = useState(true);
-
-  const onFocusHandler = (event: React.FocusEvent<HTMLInputElement>) => {
-    setIsFocus(true);
-    onFocus?.(event);
-  };
-
-  const onBlurHandler = (event: React.FocusEvent<HTMLInputElement>) => {
-    setIsFocus(false);
-    onBlur?.(event);
-  };
-
-  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchValue(e.target?.value);
-    setIsInputEmpty(e.target?.value.length === 0);
-    onSearchChange?.(e.target?.value);
-  };
-
-  useEffect(() => {
-    onSearchChange?.(searchValue);
-  }, [searchValue, onSearchChange]);
-
-  useEffect(() => {
-    setSearchResult(searchFn(searchValue, conversationList));
-  }, [conversationList, searchFn, searchValue]);
-
-  useEffect(() => {
-    setIsActive(!isInputEmpty);
-  }, [isFocus, isInputEmpty]);
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <div
-      className={classNames('uikit-conversation-search', className, {
-        'uikit-conversation-search--active': isActive,
-      })}
-      style={style}
-    >
-      <ConversationSearchInput
-        value={searchValue}
-        clearable={true}
-        onChange={onChangeHandler}
-        onFocus={onFocusHandler}
-        onBlur={onBlurHandler}
-      />
-      <ConversationSearchResult
-        visible={isActive}
-        Avatar={Avatar}
-        searchResult={searchResult}
-        searchValue={searchValue}
-        ResultPreview={ResultPreview}
-        onSelectResult={onSelectResult}
-      />
-    </div>
-  );
-}

package/src/components/ConversationSearch/ConversationSearchInput/ConversationSearchInput.scss

@@ -1,13 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.uikit-conversation-search-input {
-  height: 36px;
-  align-self: stretch;
-  margin: 10px;
-  box-sizing: border-box;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-    color: get(text-color-primary);
-  }
-}

package/src/components/ConversationSearch/ConversationSearchInput/ConversationSearchInput.tsx

@@ -1,42 +0,0 @@
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { Icon, IconTypes } from '../../Icon';
-import { Input, InputProps } from '../../Input';
-import classNames from 'classnames';
-
-import './ConversationSearchInput.scss';
-
-type IConversationSearchInputProps = InputProps;
-
-function ConversationSearchInput(props: IConversationSearchInputProps) {
-  const {
-    className,
-    placeholder,
-    clearable,
-    value,
-    onChange,
-    prefix = <Icon type={IconTypes.SEARCH} height={16} width={16} />,
-    onFocus,
-    onBlur,
-  } = props;
-  const { t } = useUIKit();
-  return (
-    <Input
-      className={classNames(
-        'uikit-conversation-search-input',
-        className,
-      )}
-      placeholder={placeholder || t('TUIConversation.Search')}
-      clearable={clearable}
-      value={value}
-      onChange={onChange}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      prefix={prefix}
-    />
-  );
-}
-
-export {
-  ConversationSearchInput,
-  IConversationSearchInputProps,
-};

package/src/components/ConversationSearch/ConversationSearchInput/index.ts

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

package/src/components/ConversationSearch/ConversationSearchResult/ConversationSearchResult.scss

@@ -1,15 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.uikit-conversation-search-result {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  box-sizing: border-box;
-  overflow: auto;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-    color: get(text-color-primary);
-  }
-}