feat: Add custom actions for conversations

components/attachments/index.en-US.md

@@ -61,12 +61,12 @@ interface PlaceholderType {
 ### Attachments.FileCard Props
 
 | Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- | --- |
 | prefixCls | The prefix of the style class name | string | - | - |
 | className | Style class name | string | - | - |
 | style | Style Object | React.CSSProperties | - | - |
 | item | Attachment, same as Upload `UploadFile` | Attachment | - | - |
-| onRemove | Callback function when attachment is removed | (item: Attachment) => void | - | - |
+| onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when the return value is false or a Promise which resolve(false) or reject | (item: Attachment) => boolean | Promise | - | - |
 | imageProps | Image config, same as [Image](https://ant.design/components/image) | ImageProps | - | - |
 
 ## Semantic DOM

components/attachments/index.zh-CN.md

@@ -64,12 +64,12 @@ interface PlaceholderType {
 ### Attachments.FileCard Props
 
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- | --- |
 | prefixCls | 样式类名的前缀 | string | - | - |
 | className | 样式类名 | string | - | - |
 | style | 样式对象 | React.CSSProperties | - | - |
 | item | 附件，同 Upload `UploadFile` | Attachment | - | - |
-| onRemove | 附件移除时的回调函数 | (item: Attachment) => void | - | - |
+| onRemove | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除 | (item: Attachment) => boolean | Promise | - | - |
 | imageProps | 图片属性，同 antd [Image](https://ant.design/components/image) 属性 | ImageProps | - | - |
 
 ## Semantic DOM

components/conversations/Item.tsx

@@ -1,19 +1,20 @@
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Dropdown, Tooltip, Typography } from 'antd';
 import classnames from 'classnames';
-import React from 'react';
+import React, { useEffect } 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';
+import type { ActionsRender, Conversation } from './interface';
 
 export interface ConversationsItemProps
   extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> {
   info: Conversation;
   prefixCls?: string;
   direction?: DirectionType;
   menu?: MenuProps;
+  actions?: React.ReactNode | ActionsRender;
   active?: boolean;
   onClick?: (info: Conversation) => void;
 }
@@ -23,7 +24,8 @@
 };
 
 const ConversationsItem: React.FC<ConversationsItemProps> = (props) => {
-  const { prefixCls, info, className, direction, onClick, active, menu, ...restProps } = props;
+  const { prefixCls, info, className, direction, onClick, active, menu, actions, ...restProps } =
+    props;
 
   const domProps = pickAttrs(restProps, {
     aria: true,
@@ -61,6 +63,43 @@
     }
   };
 
+  // ============================ Menu ============================
+  const menuNode = (
+    <Dropdown
+      menu={menu}
+      placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'}
+      trigger={['click']}
+      disabled={disabled}
+      onOpenChange={onOpenChange}
+    >
+      <EllipsisOutlined
+        onClick={stopPropagation}
+        disabled={disabled}
+        className={`${prefixCls}-menu-icon`}
+      />
+    </Dropdown>
+  );
+
+  // ============================ Actions ============================
+  let actionNode: React.ReactNode = <></>;
+
+  if (typeof actions === 'function') {
+    actionNode = actions(menuNode, {
+      components: {
+        menuNode,
+      },
+      value: info,
+    });
+  } else if (actions) {
+    actionNode = actions;
+  }
+
+  useEffect(() => {
+    if (!React.isValidElement(actionNode)) {
+      console.error('Action is Valid Element : %s', actionNode);
+    }
+  }, [actionNode]);
+
   // ============================ Render ============================
   return (
     <Tooltip
@@ -79,21 +118,8 @@
         >
           {info.label}
         </Typography.Text>
-        {menu && !disabled && (
-          <Dropdown
-            menu={menu}
-            placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'}
-            trigger={['click']}
-            disabled={disabled}
-            onOpenChange={onOpenChange}
-          >
-            <EllipsisOutlined
-              onClick={stopPropagation}
-              disabled={disabled}
-              className={`${prefixCls}-menu-icon`}
-            />
-          </Dropdown>
-        )}
+        {actions && !disabled && React.isValidElement(actionNode) && actionNode}
+        {menu && !actions && !disabled && menuNode}
       </li>
     </Tooltip>
   );