@tencentcloud/chat-uikit-react 2.2.7 → 2.2.9

package/src/components/ConversationCreate/hooks/useConversationCreate.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import TencentCloudChat, { Conversation, Friend, Profile } from '@tencentcloud/chat';
+import { StoreName, TUIStore, TUIUserService, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import TencentCloudChat, { Friend, Profile } from '@tencentcloud/chat';
 import { strChineseFirstPy } from '../static/word';
-import { useProfile } from '../../../hooks';
 
 export const useConversationCreate = (
-  chat: any,
-  conversationList: Conversation[],
+  conversationList: IConversationModel[],
   setFriendListResultHandler?: (
     newFriendListResult: object,
     setFriendListResult: React.Dispatch<React.SetStateAction<{ string: object[] }>>
@@ -20,30 +19,27 @@ export const useConversationCreate = (
     }
     return strChineseFirstPy.charAt(uni - 19968);
   };
-  const queryFriendList = async () => {
+  const queryFriendList = async (friendList: Friend[]) => {
     const frequentlyConversationProfile = conversationList.filter(
-      (item: Conversation) => item?.type === TencentCloudChat.TYPES.CONV_C2C,
-    ).slice(0, 5).map((item: Conversation) => item?.userProfile);
-    const { code, data } = await chat?.getFriendList() || {};
-    if (code === 0) {
-      const sortResult = handleData(
-        data.map((item: Friend) => item.profile),
-        frequentlyConversationProfile,
-      );
-      setFriendListSortResult(sortResult);
-      if (setFriendListResultHandler) {
-        setFriendListResultHandler(sortResult, setFriendListSortResult);
-      }
+      (item: IConversationModel) => item?.type === TencentCloudChat.TYPES.CONV_C2C,
+    ).slice(0, 5).map((item: IConversationModel) => item?.userProfile);
+    const sortResult = handleData(
+      friendList?.map((item: Friend) => item.profile),
+      frequentlyConversationProfile,
+    );
+    setFriendListSortResult(sortResult);
+    if (setFriendListResultHandler) {
+      setFriendListResultHandler(sortResult, setFriendListSortResult);
     }
   };
-  const handleData = (profileList: Profile[], frequentlyConversationProfile?: any) => {
+  function handleData(profileList: Profile[], frequentlyConversationProfile?: any) {
     const sortResult: any = {
       '#': [],
     };
     for (let i = 65; i <= 90; i += 1) {
       sortResult[String.fromCharCode(i)] = [];
     }
-    profileList.forEach((profile) => {
+    profileList?.forEach((profile) => {
       const { nick, userID } = profile;
       const first = getFirstLetter(nick || userID);
       if (first >= 'a' && first <= 'z') {
@@ -58,21 +54,20 @@ export const useConversationCreate = (
       sortResult[key].sort((a: any, b: any) => {
         const { nick: aNick, userID: aUserID } = a;
         const { nick: bNick, userID: bUserID } = b;
-        if (aNick || aUserID < bNick || bUserID) {
-          return 1;
-        } if (aNick || aUserID === bNick || bUserID) {
+        if (aNick || aUserID <= bNick || bUserID) {
           return 1;
         }
         return -1;
       });
     });
     return sortResult;
-  };
-  const { getUserProfile } = useProfile(chat);
+  }
+  // const { getUserProfile } = useProfile();
   const getFriendListSortSearchResult = async (searchValue: string) => {
     if (!searchValue) return friendListSortResult;
-    const { data: profileList } = await getUserProfile([searchValue]);
-
+    const { data } = await TUIUserService.getUserProfile({
+      userIDList: [searchValue],
+    });
     const result: any = {};
     let isIncludes = false;
     Object.keys(friendListSortResult).forEach((key) => {
@@ -97,11 +92,23 @@ export const useConversationCreate = (
     if (process.env?.REACT_APP_ONLINE === 'TencentCloudDemo') {
       return result;
     }
-    return !isIncludes ? handleData(profileList) : result;
+    return !isIncludes ? handleData(data) : result;
   };
+
+  function onFriendListUpdated(list: Friend[]) {
+    queryFriendList(list);
+  }
+
   useEffect(() => {
-    queryFriendList();
-  }, [chat]);
+    TUIStore.watch(StoreName.FRIEND, {
+      friendList: onFriendListUpdated,
+    });
+    return () => {
+      TUIStore.unwatch(StoreName.FRIEND, {
+        friendList: onFriendListUpdated,
+      });
+    };
+  }, []);
   return {
     getFirstLetter,
     queryFriendList,

package/src/components/ConversationCreate/index.ts

@@ -1,6 +1,7 @@
 export * from './ConversationCreate';
 export * from './ConversationCreateSelectView';
-export * from './ConversationCreatGroupDetail';
+export * from './ConversationCreateGroupDetail';
 export * from './ConversationCreateUserSelectList';
 export * from './hooks/useConversationCreate';
 export * from './ConversationGroupTypeInfo';
+export * from './ConversationCreateButton';

package/src/components/ConversationCreate/styles/{ConversationCreatGroupDetail.scss → ConversationCreateGroupDetail.scss}

@@ -1,6 +1,11 @@
 @use "../../../styles/colors/color-theme" as *;
 
 .tui-conversation-create-group-detail {
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+  overflow-y: scroll;
+
   @include theme() {
     color: get(text-color-primary);
   }
@@ -49,7 +54,7 @@
         align-items: center;
         display: flex;
         flex-direction: column;
-        width: calc((100% - 10px) / 6);
+        // width: calc((100% - 10px) / 6);
         padding: 6px;
         box-sizing: border-box;
 

package/src/components/ConversationCreate/styles/conversationCreateButton.scss

@@ -0,0 +1,5 @@
+.tui-conversation-create-button {
+  display: flex;
+  align-items: center;
+  margin: 10px;
+}

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

@@ -1,5 +1,29 @@
 @use "../../../styles/colors/color-theme" as *;
 
+.uikit-conversation-create-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.tui-conversation-create {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+}
+
 .tui-conversation-create-header {
   display: flex;
   flex-direction: row;
@@ -24,6 +48,12 @@
   }
 }
 
+.tui-conversation-create-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .tui-conversation-create-search-input {
   margin: 10px;
 }
@@ -92,10 +122,12 @@
   }
 }
 
-.tui-conversation-create {
+.tui-conversation-create-select-list-container {
   overflow-y: auto;
+  flex: 1 1 auto;
+  padding: 0 10px;
 
-  .tui-conversation-create-container {
+  .tui-conversation-create-select-list {
     position: relative;
 
     .tui-group-container {

package/src/components/ConversationList/ConversationList.scss

@@ -0,0 +1,29 @@
+@use "../../styles/colors/color-theme" as *;
+
+.uikit-chat-list {
+  flex: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  text-align: initial;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+
+  .uikit-chat-list__header--searching {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .uikit-chat-list__header--creating {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}

package/src/components/ConversationList/ConversationList.tsx

@@ -0,0 +1,155 @@
+import React, { PropsWithChildren, useState } from 'react';
+import { CreateGroupParams, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { useConversationList, ConversationListProvider } from '../../context/ConversationListContext';
+import { ConversationListHeader as DefaultConversationListHeader, type IConversationListHeaderProps } from './ConversationListHeader';
+import { ConversationListContent as DefaultConversationListContent, type IConversationListContentProps } from './ConversationListContent';
+import { ConversationSearch as DefaultConversationSearch, type IConversationSearchProps } from '../ConversationSearch';
+import { ConversationPreview, ConversationPreviewUI as DefaultConversationPreviewUI, type IConversationPreviewUIProps } from '../ConversationPreview';
+import { ConversationCreate as DefaultConversationCreate, type IConversationCreateProps } from '../ConversationCreate';
+import { ConversationActions as DefaultConversationActions, type IConversationActionsConfig, type IConversationActionsProps } from '../ConversationActions';
+import { PlaceHolder as DefaultPlaceHolder, PlaceHolderTypes } from '../PlaceHolder';
+import { Avatar as DefaultAvatar, AvatarProps } from '../Avatar';
+import { isH5 } from '../../utils/env';
+import cs from 'classnames';
+
+import './ConversationList.scss';
+
+interface IConversationListProps {
+  /** Determines whether the conversation search input appears on the conversation list view. (Default: True) */
+  enableSearch?: boolean;
+  /** Determines whether the conversation creation button appears on the conversation list view. (Default: True) */
+  enableCreate?: boolean;
+  /** Determines whether the conversation action button appears on the conversation list view. (Default: True) */
+  enableActions?: boolean;
+  /** Specifies the prop to customize action on the conversation list item. */
+  actionsConfig?: IConversationActionsConfig;
+  /** Specifies a react component to customize the header of the conversation list. */
+  Header?: React.ComponentType<IConversationListHeaderProps>;
+  /** Specifies a react component to customize the conversation list component. */
+  List?: React.ComponentType<IConversationListContentProps>;
+  /** Specifies a react component to customize the conversation preview. */
+  Preview?: React.ComponentType<IConversationPreviewUIProps>;
+  /** Specifies a react component to customize the conversation create component. */
+  ConversationCreate?: React.ComponentType<IConversationCreateProps>;
+  /** Specifies a react component to customize the conversation search. */
+  ConversationSearch?: React.ComponentType<IConversationSearchProps>;
+  /** Specifies a react component to customize the conversation actions in conversation preview. */
+  ConversationActions?: React.ComponentType<IConversationActionsProps>;
+  /** Specifies a react component to customize the placeholder when the conversation list is empty. */
+  PlaceholderEmptyList?: React.ReactNode;
+  /** Specifies a react component to customize the placeholder when the conversation list is loading. */
+  PlaceholderLoading?: React.ReactNode;
+  /** Specifies a react component to customize the placeholder when the conversation list loaded error. */
+  PlaceholderLoadError?: React.ReactNode;
+  /** Specifies a react component to customize the avatar in list. */
+  Avatar?: React.ComponentType<AvatarProps>;
+  /** Specifies a function to filter conversations in the conversation list. */
+  filter?: (conversationList: IConversationModel[]) => IConversationModel[];
+  /** Specifies a function to sort conversations in the conversation list. */
+  sort?: (conversationList: IConversationModel[]) => IConversationModel[];
+  /** Specifies the prop to receive callback when a user clicks a conversation in the conversation list. */
+  onSelectConversation?: (conversation: IConversationModel) => void;
+  /** Specifies the prop to execute custom operations before creating a channel. */
+  onBeforeCreateConversation?: (params: string | CreateGroupParams) => string | CreateGroupParams;
+  /** Specifies the prop to receive callback when a conversation is created. */
+  onConversationCreated?: (conversation: IConversationModel) => void;
+  /** The custom class name */
+  className?: string;
+  /** The custom css style */
+  style?: React.CSSProperties;
+}
+
+function ConversationListComponent<T extends IConversationListProps>(
+  props: T,
+): React.ReactElement {
+  const {
+    enableSearch = true,
+    enableCreate = true,
+    enableActions = true,
+    actionsConfig,
+    Header = DefaultConversationListHeader,
+    List = DefaultConversationListContent,
+    Preview = DefaultConversationPreviewUI,
+    ConversationCreate = DefaultConversationCreate,
+    ConversationSearch = DefaultConversationSearch,
+    ConversationActions = DefaultConversationActions,
+    PlaceholderEmptyList = <DefaultPlaceHolder type={PlaceHolderTypes.NO_CONVERSATIONS} />,
+    PlaceholderLoading = <DefaultPlaceHolder type={PlaceHolderTypes.LOADING} />,
+    PlaceholderLoadError = <DefaultPlaceHolder type={PlaceHolderTypes.WRONG} />,
+    Avatar = DefaultAvatar,
+    onSelectConversation,
+    onBeforeCreateConversation,
+    onConversationCreated,
+    className,
+    style,
+  } = props;
+
+  const {
+    conversationList,
+    filteredAndSortedConversationList,
+    isLoading,
+    isLoadError,
+  } = useConversationList();
+
+  const [isCreateModelShow, setIsCreateModelShow] = useState(false);
+
+  return (
+    <div
+      className={cs(className, 'uikit-chat-list', {
+        'uikit-chat-list--mobile': isH5,
+      })}
+      style={style}
+    >
+      <Header>
+        <ConversationSearch
+          visible={enableSearch}
+          conversationList={conversationList}
+          Avatar={Avatar}
+          ResultPreview={ConversationPreview}
+        />
+        <ConversationCreate
+          className={cs({
+            'uikit-chat-list__header--creating': isCreateModelShow,
+          })}
+          visible={enableCreate}
+          onChangeCreateModelVisible={visible => setIsCreateModelShow(visible)}
+          onBeforeCreateConversation={onBeforeCreateConversation}
+          onConversationCreated={onConversationCreated}
+        />
+      </Header>
+      <List
+        empty={filteredAndSortedConversationList.length === 0}
+        loading={isLoading}
+        error={isLoadError}
+        PlaceholderEmptyList={PlaceholderEmptyList}
+        PlaceholderLoadError={PlaceholderLoadError}
+        PlaceholderLoading={PlaceholderLoading}
+      >
+        {filteredAndSortedConversationList.map((conversation: IConversationModel) => (
+          <ConversationPreview
+            key={conversation.conversationID}
+            conversation={conversation}
+            enableActions={enableActions}
+            Preview={Preview}
+            Avatar={Avatar}
+            ConversationActions={ConversationActions}
+            onSelectConversation={onSelectConversation}
+            actionsConfig={actionsConfig}
+          />
+        ))}
+      </List>
+    </div>
+  );
+}
+
+function ConversationList<T extends IConversationListProps>(
+  props: PropsWithChildren<T>,
+): React.ReactElement {
+  return (
+    <ConversationListProvider filter={props.filter} sort={props.sort}>
+      <ConversationListComponent {...props} />
+    </ConversationListProvider>
+  );
+}
+
+export { ConversationList, IConversationListProps };

package/src/components/ConversationList/ConversationListContent/ConversationListContent.scss

@@ -0,0 +1,16 @@
+@use "../../../styles/colors/color-theme" as *;
+
+.uikit-chat-list__container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden auto;
+  box-sizing: border-box;
+  min-width: 0;
+  text-align: initial;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+}

package/src/components/ConversationList/ConversationListContent/ConversationListContent.tsx

@@ -0,0 +1,63 @@
+import cs from 'classnames';
+import { PlaceHolder, PlaceHolderTypes } from '../../PlaceHolder';
+import './ConversationListContent.scss';
+
+interface IConversationListContentProps {
+  /** Renders a customized component in the conversation list main. */
+  children: React.ReactNode;
+  /** Indicates whether the chat list is empty */
+  empty?: boolean;
+  /** Indicates whether the chat list is currently loading */
+  loading?: boolean;
+  /** Indicates whether there was an error loading the chat list */
+  error?: boolean;
+  /** A custom component to display when the chat list is empty */
+  PlaceholderEmptyList?: React.ReactNode;
+  /** A custom component to display while the chat list is loading */
+  PlaceholderLoading?: React.ReactNode;
+  /** A custom component to display when there is an error loading the chat list */
+  PlaceholderLoadError?: React.ReactNode;
+  /** The custom class name */
+  className?: string;
+  /** The custom css style */
+  style?: React.CSSProperties;
+}
+
+function ConversationListContent<T extends IConversationListContentProps>(
+  props: T,
+): React.ReactElement {
+  const {
+    children,
+    empty = false,
+    loading = false,
+    error = false,
+    PlaceholderEmptyList = <PlaceHolder type={PlaceHolderTypes.NO_CONVERSATIONS} />,
+    PlaceholderLoading = <PlaceHolder type={PlaceHolderTypes.LOADING} />,
+    PlaceholderLoadError = <PlaceHolder type={PlaceHolderTypes.WRONG} />,
+    className,
+    style,
+  } = props;
+
+  let content;
+
+  if (error) {
+    content = PlaceholderLoadError;
+  } else if (loading) {
+    content = PlaceholderLoading;
+  } else if (empty) {
+    content = PlaceholderEmptyList;
+  } else {
+    content = children;
+  }
+
+  return (
+    <div
+      className={cs('uikit-chat-list__container', className)}
+      style={style}
+    >
+      {content}
+    </div>
+  );
+}
+
+export { ConversationListContent, IConversationListContentProps };

package/src/components/ConversationList/ConversationListContent/index.ts

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

package/src/components/ConversationList/ConversationListHeader/ConversationListHeader.scss

@@ -0,0 +1,28 @@
+@use "../../../styles/colors/color-theme" as *;
+
+.uikit-chat-list__header {
+  display: flex;
+  overflow: hidden;
+  flex-direction: row;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  min-width: 0;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+
+  .uikit-conversation-search + .uikit-conversation-create-container .uikit-conversation-create-button {
+    margin-left: 0;
+  }
+
+  .uikit-chat-list__header__left,
+  .uikit-chat-list__header__right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+}

package/src/components/ConversationList/ConversationListHeader/ConversationListHeader.tsx

@@ -0,0 +1,43 @@
+import cs from 'classnames';
+import './ConversationListHeader.scss';
+
+interface IConversationListHeaderProps {
+  /** The main of the conversation list header */
+  children: React.ReactNode;
+  /** A custom component to display in the left area of header */
+  left?: React.ReactNode;
+  /** A custom component to display in the right area of header */
+  right?: React.ReactNode;
+  /** The custom class name */
+  className?: string;
+  /** The custom css style */
+  style?: React.CSSProperties;
+}
+
+function ConversationListHeader<T extends IConversationListHeaderProps>(
+  props: T,
+): React.ReactElement {
+  const {
+    children,
+    left,
+    right,
+    className,
+    style,
+  } = props;
+
+  return (
+    <div
+      className={cs(
+        'uikit-chat-list__header',
+        className,
+      )}
+      style={style}
+    >
+      <div className="uikit-chat-list__header__left">{left}</div>
+      {children}
+      <div className="uikit-chat-list__header__right">{right}</div>
+    </div>
+  );
+}
+
+export { ConversationListHeader, IConversationListHeaderProps };

package/src/components/ConversationList/ConversationListHeader/index.ts

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

package/src/components/ConversationList/index.ts

@@ -0,0 +1,3 @@
+export * from './ConversationList';
+export * from './ConversationListHeader';
+export * from './ConversationListContent';