@tencentcloud/chat-uikit-react 2.2.7 → 2.2.9

package/src/components/{TUIManage/TUIManage.tsx → ChatSetting/ChatSetting.tsx}

@@ -1,44 +1,41 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Conversation} from '@tencentcloud/chat';
+import { Conversation } from '@tencentcloud/chat';
+import { TUIStore } from '@tencentcloud/chat-uikit-engine';
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { Switch } from '../Switch';
-import { useUIKit, useUIManager } from '../../context';
+import { useUIManager } from '../../context';
 import { isH5, isPC } from '../../utils/env';
 import { getMessageProfile } from '../ConversationPreview/utils';
-import { useConversationUpdate } from '../TUIConversationList/hooks/useConversationUpdate';
-import { useConversation } from '../../hooks';
 
-
-function UnMemoizedTUIManage<T>(
-):React.ReactElement {
+function UnMemoizedChatSetting<T>(
+): React.ReactElement {
   const { t } = useTranslation();
   const [conversation, setConversation] = useState<Conversation>();
   const [profile, setProfile] = useState<any>();
   const [isPinned, setIsPinned] = useState<boolean>(false);
   const [forceUpdateCount, setForceUpdateCount] = useState(0);
-  const { chat } = useUIKit('TUIManage');
   const {
     conversation: activeConversation,
     setActiveConversation,
     TUIManageShow,
     setTUIManageShow,
   } = useUIManager('TUIManage');
-  useConversationUpdate(undefined, () => {
-    setForceUpdateCount((count) => count + 1);
-  });
-  const { pinConversation, deleteConversation } = useConversation(chat);
+
   const pinChatChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setIsPinned(e.target.checked);
-    conversation?.conversationID && pinConversation({
-      conversationID: conversation.conversationID,
-      isPinned: e.target.checked,
-    });
+    if (conversation?.conversationID) {
+      const conversationModel = TUIStore.getConversationModel(conversation?.conversationID);
+      conversationModel && conversationModel.pinConversation();
+    }
   };
   const handleDelete = () => {
-    conversation?.conversationID && deleteConversation(conversation.conversationID);
+    if (conversation?.conversationID) {
+      const conversationModel = TUIStore.getConversationModel(conversation?.conversationID);
+      conversationModel && conversationModel.deleteConversation();
+    }
     setActiveConversation(undefined);
   };
   const close = () => {
@@ -95,7 +92,7 @@ function UnMemoizedTUIManage<T>(
               <div className="manage-handle-title">
                 {t('TUIConversation.Pin')}
               </div>
-              <Switch onChange={(e: any)=> {pinChatChange(e)}} checked={isPinned} />
+              <Switch onChange={(e: any) => { pinChatChange(e); }} checked={isPinned} />
             </div>
             {isPC && (
               <div
@@ -115,5 +112,5 @@ function UnMemoizedTUIManage<T>(
   );
 }
 
-export const TUIManage = React.memo(UnMemoizedTUIManage) as unknown as
-typeof UnMemoizedTUIManage;
+export const ChatSetting = React.memo(UnMemoizedChatSetting) as unknown as
+typeof UnMemoizedChatSetting;

package/src/components/ChatSetting/index.ts

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

package/src/components/{TUIManage → ChatSetting}/styles/index.scss

@@ -48,10 +48,12 @@
       }
 
       .info-id {
-        font-size: 12px;
-        color: #666;
+        font-size: 16px;
         margin-bottom: 30px;
         text-align: center;
+        @include theme() {
+          color: get(text-color-secondary);
+        }
       }
     }
 

package/src/components/Checkbox/index.tsx

@@ -4,21 +4,21 @@ import { Icon, IconTypes } from '../Icon';
 import './styles/index.scss';
 
 interface onChangeParams {
-  checked?: boolean,
-  value?: any,
+  checked?: boolean;
+  value?: any;
 }
 
 interface SelectProps {
-  checked?: boolean,
-  className?: string,
-  onChange?: (data?: onChangeParams) => void,
-  value?: any,
-  id?: string,
+  checked?: boolean;
+  className?: string;
+  onChange?: (data?: onChangeParams) => void;
+  value?: any;
+  id?: string;
 }
 
 export function Checkbox<
-T extends SelectProps
->(props:React.PropsWithChildren<T>) {
+  T extends SelectProps,
+>(props: React.PropsWithChildren<T>) {
   const {
     checked: propsChecked = false,
     className,

package/src/components/{TUIContact/TUIContact.tsx → Contact/Contact.tsx}

@@ -3,16 +3,16 @@ import { useTranslation } from 'react-i18next';
 import {
   TUIContactContextProvider,
   TUIContactContextValue,
-} from '../../context/TUIContactContext';
+} from '../../context/ContactContext';
 import { isH5 } from '../../utils/env';
 import { useUIManager } from '../../context';
 import useTUIContact from './hooks/useTUIContact';
-import { TUIContactList } from './TUIContactList/TUIContactList';
-import { TUIContactSearch } from '../TUIContactSearch/TUIContactSearch';
+import { ContactList } from './ContactList/ContactList';
+import { ContactSearch } from '../ContactSearch/ContactSearch';
 import { Icon, IconTypes } from '../Icon';
 import './index.scss';
 
-export function UnMemoizedTUIContact<T>(
+export function UnMemoizedContact<T>(
   props: PropsWithChildren<T>,
 ): React.ReactElement {
   const { children } = props;
@@ -57,41 +57,41 @@ export function UnMemoizedTUIContact<T>(
     <TUIContactContextProvider value={TUIContactValue}>
       {children || (
         <div className={`tui-contacts ${isH5 ? 'tui-contacts-h5' : ''} `}>
-            {!isShowAddFriend && (
-              <>
-                <div className="tui-contacts-header">
-                  <div className="tui-contact-input">
-                    <TUIContactSearch />
-                  </div>
-                  <Icon
-                    onClick={addFriend}
-                    type={IconTypes.ADDFRIEND}
-                    width={24}
-                    height={24}
-                  />
+          {!isShowAddFriend && (
+            <>
+              <div className="tui-contacts-header">
+                <div className="tui-contact-input">
+                  <ContactSearch />
                 </div>
-                <TUIContactList />
-              </>
-            )}
-            {isShowAddFriend && (
-              <>
-                <div className="tui-contacts-add-header">
-                  <Icon
-                    onClick={addFriendBack}
-                    type={IconTypes.BACK}
-                    width={9}
-                    height={16}
-                  />
-                  <div className="tui-contacts-add-header-title">
-                    {t('TUIContact.Add Friend')}
-                  </div>
+                <Icon
+                  onClick={addFriend}
+                  type={IconTypes.ADDFRIEND}
+                  width={24}
+                  height={24}
+                />
+              </div>
+              <ContactList />
+            </>
+          )}
+          {isShowAddFriend && (
+            <>
+              <div className="tui-contacts-add-header">
+                <Icon
+                  onClick={addFriendBack}
+                  type={IconTypes.BACK}
+                  width={9}
+                  height={16}
+                />
+                <div className="tui-contacts-add-header-title">
+                  {t('TUIContact.Add Friend')}
                 </div>
-                <TUIContactSearch />
-              </>
-            )}
+              </div>
+              <ContactSearch />
+            </>
+          )}
         </div>
       )}
     </TUIContactContextProvider>
   );
 }
-export const TUIContact = React.memo(UnMemoizedTUIContact);
+export const Contact = React.memo(UnMemoizedContact);

package/src/components/{TUIContact/TUIContactInfo/TUIContactInfo.tsx → Contact/ContactInfo/ContactInfo.tsx}

@@ -11,10 +11,10 @@ import { FriendApplicationInfo } from './friendApplication';
 import './index.scss';
 
 interface TUIContactInfoProps {
-  className?: string,
-  showChats?: () => void,
+  className?: string;
+  showChats?: () => void;
 }
-export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
+export function UnMemoizedContactInfo<T extends TUIContactInfoProps>(
   props: PropsWithChildren<T>,
 ): React.ReactElement {
   const { showChats } = props;
@@ -32,4 +32,4 @@ export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
     </div>
   );
 }
-export const TUIContactInfo = React.memo(UnMemoizedTUIContactInfo);
+export const ContactInfo = React.memo(UnMemoizedContactInfo);

package/src/components/{TUIContact/TUIContactList/TUIContactList.tsx → Contact/ContactList/ContactList.tsx}

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import TencentCloudChat from '@tencentcloud/chat';
 import { isH5 } from '../../../utils/env';
 import { useUIManager, useTUIContactContext } from '../../../context';
-import useContactInfo from '../TUIContactInfo/hooks/useContactInfo';
+import useContactInfo from '../ContactInfo/hooks/useContactInfo';
 import useTUIContact from '../hooks/useTUIContact';
 import { Avatar, defaultUserAvatar } from '../../Avatar';
 import rightArrow from '../../Icon/images/right-arrow.svg';
@@ -18,7 +18,7 @@ interface RenderContactListProps {
   setShow: (value: boolean) => void;
 }
 
-function UnMemoizedTUIContactList<T>(): React.ReactElement {
+function UnMemoizedContactList<T>(): React.ReactElement {
   const { setActiveContact } = useUIManager();
   const { t } = useTranslation();
   const {
@@ -172,4 +172,4 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
     )
   );
 }
-export const TUIContactList = React.memo(UnMemoizedTUIContactList);
+export const ContactList = React.memo(UnMemoizedContactList);

package/src/components/Contact/index.ts

@@ -0,0 +1,3 @@
+export * from './ContactList/ContactList';
+export * from './ContactInfo/ContactInfo';
+export * from './Contact';

package/src/components/{TUIContactSearch/TUIContactSearch.tsx → ContactSearch/ContactSearch.tsx}

@@ -7,7 +7,7 @@ import { Avatar, defaultUserAvatar } from '../Avatar';
 import { Input } from '../Input';
 import './index.scss';
 
-export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
+export function UnMemoizedContactSearch<T>(): React.ReactElement {
   const { setActiveContact } = useUIManager('TUIContactSearch');
   const { t } = useTranslation();
   const { friendList, setShowContactList } = useTUIContactContext('TUIContactList');
@@ -47,7 +47,7 @@ export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
   const setContactProfile = async (profile: any) => {
     const isFriend = await checkFriend(profile);
     if (isFriend) {
-      const friendProfile = friendList?.find((item) => item.userID === searchedValue);
+      const friendProfile = friendList?.find(item => item.userID === searchedValue);
       friendProfile && setActiveContact({ type: 'friend', data: friendProfile });
       return;
     }
@@ -72,11 +72,12 @@ export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
       />
       {isShowSearchResult && searchResult.length === 0
         ? (
-          <div className="tui-contact-search-item">
-            {t('TUIContact.No Result')}
+            <div className="tui-contact-search-item">
+              {t('TUIContact.No Result')}
 
-          </div>
-        ) : searchResult.map((item, index) => {
+            </div>
+          )
+        : searchResult.map((item, index) => {
           const { userID, avatar, nick } = item;
           return (
             <div
@@ -96,4 +97,4 @@ export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
     </div>
   );
 }
-export const TUIContactSearch = React.memo(UnMemoizedTUIContactSearch);
+export const ContactSearch = React.memo(UnMemoizedContactSearch);

package/src/components/ConversationActions/ConversationActions.scss

@@ -0,0 +1,45 @@
+@use "../../styles/colors/color-theme" as *;
+
+.uikit-conversation-actions {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1 1;
+
+  .uikit-conversation-actions__container {
+    top: 0;
+    right: 0;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 10%);
+    bottom: initial;
+    padding: 14px 0;
+    box-sizing: border-box;
+    text-align: start;
+    white-space: nowrap;
+
+    .uikit-conversation-actions__item {
+      font-size: 16px;
+      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+      font-family: PingFangSC-Medium;
+      line-height: 19px;
+      padding: 6px 16px;
+      cursor: pointer;
+      font-weight: 500;
+      box-sizing: border-box;
+
+      &:hover {
+        @include theme() {
+          background-color: get(dropdown-color-active);
+        }
+      }
+    }
+
+    .uikit-conversation-actions__item--delete {
+      @include theme() {
+        color: get(text-color-error);
+      }
+    }
+  }
+
+  .uikit-conversation-actions__popup-icon {
+    transform: scale(1.5);
+  }
+}

package/src/components/ConversationActions/ConversationActions.tsx

@@ -0,0 +1,172 @@
+// ConversationActions.tsx
+import React, { useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import cs from 'classnames';
+
+import { Plugins } from '../Plugins';
+import { Icon, IconTypes } from '../Icon';
+
+import './ConversationActions.scss';
+
+interface IConversationActionsConfig {
+  /** Determines whether the pin button appears on the conversation actions list view. (Default: True) */
+  enablePin?: boolean;
+  /**  Determines whether the mute button appears on the conversation actions list view. (Default: True) */
+  enableMute?: boolean;
+  /** Determines whether the delete button appears on the conversation actions list view. (Default: True) */
+  enableDelete?: boolean;
+  /** Function to override the default behavior when user pin or unpin a conversation.  */
+  onConversationPin?: (conversation: IConversationModel, e?: React.MouseEvent) => void;
+  /** Function to override the default behavior when user mute or unmute a conversation. */
+  onConversationMute?: (conversation: IConversationModel, e?: React.MouseEvent) => void;
+  /** Function to override the default behavior when user delete a conversation. */
+  onConversationDelete?: (conversation: IConversationModel, e?: React.MouseEvent) => void;
+  /**
+   * An object containing custom conversation actions (key) and object (value).
+   * Each value is an object with the following properties:
+   * enable: Determines whether the custom action is enabled. (Default: True)
+   * label: The label of the custom action.
+   * onClick: The function to be called when the custom action is clicked.
+   * Note: The key of the custom action must be unique.
+   */
+  customConversationActions?: Record<string, IConversationActionItem>;
+  /** The icon react element to be displayed in the action popup. */
+  PopupIcon?: React.ReactElement;
+  /** An array of react elements to be displayed in the action popup. */
+  PopupElements?: React.ReactElement[];
+  /** The function to be called when the action popup is clicked. */
+  onClick?: (e: React.MouseEvent, key?: string, conversation?: IConversationModel) => void;
+}
+
+interface IConversationActionsProps extends IConversationActionsConfig {
+  /** The conversation model. */
+  conversation: IConversationModel;
+  /** The class name of the root element. */
+  className?: string;
+  /** The style of the root element. */
+  style?: React.CSSProperties;
+}
+
+interface IConversationActionItem {
+  /** Determines whether the custom action is enabled. (Default: True)  */
+  enable?: boolean;
+  /** label: The label of the custom action. */
+  label: string;
+  /** onClick: The function to be called when the custom action is clicked. */
+  onClick: (conversation: IConversationModel, e?: React.MouseEvent) => void;
+}
+
+interface IPluginsRef {
+  closeMore?: () => void;
+}
+
+const ConversationActions = (props: IConversationActionsProps) => {
+  const {
+    conversation,
+    PopupIcon,
+    enablePin = true,
+    enableMute: isMuteEnabled = true,
+    enableDelete: isDeleteEnabled = true,
+    onConversationPin,
+    onConversationMute,
+    onConversationDelete,
+    customConversationActions,
+    PopupElements,
+    onClick,
+    className,
+    style,
+  } = props;
+
+  const { t } = useTranslation();
+  const pluginsRef = useRef<IPluginsRef>(null);
+  const [conversationActions, setConversationActions] = React.useState<Record<string, IConversationActionItem>>({});
+
+  const defaultConversationActions: Record<string, IConversationActionItem> = {
+    delete: {
+      enable: isDeleteEnabled,
+      label: t('TUIConversation.Delete'),
+      onClick: onConversationDelete || ((_conversation: IConversationModel) => { _conversation.deleteConversation(); }),
+    },
+    pin: {
+      enable: enablePin,
+      label: t(conversation.isPinned ? 'TUIConversation.Unpin' : 'TUIConversation.Pin'),
+      onClick: onConversationPin || ((_conversation: IConversationModel) => { _conversation.pinConversation(); }),
+    },
+    mute: {
+      enable: isMuteEnabled,
+      label: t(conversation.isMuted ? 'TUIConversation.Unmute' : 'TUIConversation.Mute'),
+      onClick: onConversationMute || ((_conversation: IConversationModel) => { _conversation.muteConversation(); }),
+    },
+  };
+
+  useEffect(() => {
+    setConversationActions({
+      ...defaultConversationActions,
+      ...customConversationActions,
+    });
+  }, [conversation, customConversationActions]);
+
+  const onClickMenuItem = (e: React.MouseEvent, key: string) => {
+    pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
+    onClick?.(e, key, conversation);
+    conversationActions[key]?.onClick(conversation, e);
+  };
+
+  return (
+    <div
+      className={cs({
+        'uikit-conversation-actions': true,
+        className,
+      })}
+      style={style}
+      onClick={(e: React.MouseEvent) => {
+        e.stopPropagation();
+      }}
+    >
+      <Plugins
+        customClass="uikit-conversation-actions__container"
+        ref={pluginsRef}
+        plugins={(
+          PopupElements
+          || (
+            Object.keys(conversationActions).map((key: string) => {
+              if (conversationActions[key].enable === false) return null;
+              return (
+                <div
+                  key={key}
+                  className={cs(
+                    'uikit-conversation-actions__item',
+                    [`uikit-conversation-actions__item--${key}`],
+                  )}
+                  onClick={e => onClickMenuItem(e, key)}
+                >
+                  {conversationActions[key].label}
+                </div>
+              );
+            })
+          )
+        )}
+        showNumber={0}
+        MoreIcon={(
+          PopupIcon
+          || (
+            <Icon
+              className="uikit-conversation-actions__popup-icon"
+              width={16}
+              height={16}
+              type={IconTypes.MORE}
+            />
+          )
+        )}
+      />
+    </div>
+  );
+};
+
+export {
+  ConversationActions,
+  IConversationActionsProps,
+  IConversationActionItem,
+  IConversationActionsConfig,
+};

package/src/components/ConversationActions/index.ts

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