Merge pull request #674 from ant-design/feature

chore: sync feature to main branch

Author: afc163

components/bubble/BubbleList.tsx

@@ -27,7 +27,9 @@ export type BubbleDataType = BubbleProps & {
 
 export type RoleType = Partial<Omit<BubbleProps, 'content'>>;
 
-export type RolesType = Record<string, RoleType> | ((bubbleDataP: BubbleDataType, index: number) => RoleType);
+export type RolesType =
+  | Record<string, RoleType>
+  | ((bubbleDataP: BubbleDataType, index: number) => RoleType);
 
 export interface BubbleListProps extends React.HTMLAttributes<HTMLDivElement> {
   prefixCls?: string;

components/bubble/hooks/useTypedEffect.ts

@@ -15,7 +15,6 @@ const useTypedEffect = (
   typingStep: number,
   typingInterval: number,
 ): [typedContent: React.ReactNode | object, isTyping: boolean] => {
-
   const prevContentRef = React.useRef<React.ReactNode | object>('');
 
   const [typingIndex, setTypingIndex] = React.useState<number>(1);
@@ -26,7 +25,11 @@ const useTypedEffect = (
   useLayoutEffect(() => {
     if (!mergedTypingEnabled && isString(content)) {
       setTypingIndex(content.length);
-    } else if (isString(content) && isString(prevContentRef.current) && content.indexOf(prevContentRef.current) !== 0) {
+    } else if (
+      isString(content) &&
+      isString(prevContentRef.current) &&
+      content.indexOf(prevContentRef.current) !== 0
+    ) {
       setTypingIndex(1);
     }
     prevContentRef.current = content;
@@ -50,4 +53,4 @@ const useTypedEffect = (
   return [mergedTypingContent, mergedTypingEnabled && typingIndex < content.length];
 };
 
-export default useTypedEffect;
+export default useTypedEffect;

components/conversations/Item.tsx

@@ -1,9 +1,9 @@
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Dropdown, Tooltip, Typography } from 'antd';
+import type { MenuProps } from 'antd';
 import classnames from 'classnames';
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import type { MenuProps } from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import type { Conversation } from './interface';
@@ -13,7 +13,11 @@ export interface ConversationsItemProps
   info: Conversation;
   prefixCls?: string;
   direction?: DirectionType;
-  menu?: MenuProps;
+  menu?: MenuProps & {
+    trigger?:
+      | React.ReactNode
+      | ((conversation: Conversation, info: { originNode: React.ReactNode }) => React.ReactNode);
+  };
   active?: boolean;
   onClick?: (info: Conversation) => void;
 }
@@ -61,6 +65,25 @@ const ConversationsItem: React.FC<ConversationsItemProps> = (props) => {
     }
   };
 
+  // ============================ Menu ============================
+
+  const [trigger, dropdownMenu] = useMemo(() => {
+    const { trigger, ...dropdownMenu } = menu || {};
+    return [trigger, dropdownMenu];
+  }, [menu]);
+
+  const renderMenuTrigger = (conversation: Conversation) => {
+    const originTriggerNode = (
+      <EllipsisOutlined onClick={stopPropagation} className={`${prefixCls}-menu-icon`} />
+    );
+    if (trigger) {
+      return typeof trigger === 'function'
+        ? trigger(conversation, { originNode: originTriggerNode })
+        : trigger;
+    }
+    return originTriggerNode;
+  };
+
   // ============================ Render ============================
   return (
     <Tooltip
@@ -79,19 +102,15 @@ const ConversationsItem: React.FC<ConversationsItemProps> = (props) => {
         >
           {info.label}
         </Typography.Text>
-        {menu && !disabled && (
+        {!disabled && menu && (
           <Dropdown
-            menu={menu}
+            menu={dropdownMenu}
             placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'}
             trigger={['click']}
             disabled={disabled}
             onOpenChange={onOpenChange}
           >
-            <EllipsisOutlined
-              onClick={stopPropagation}
-              disabled={disabled}
-              className={`${prefixCls}-menu-icon`}
-            />
+            {renderMenuTrigger(info)}
           </Dropdown>
         )}
       </li>