[RFC]Add custom actions for conversations

[kimteayon]

Summary

为Conversations 组件增加自定义操作功能，以支持菜单按钮的修改以及其他用户功能的实现（例如置顶等）。

#592

Motivation

1、需要可修改memu icon。
2、可以自定义 actions。
3、memu 和 自定义actions可以换顺序。

API

interface

actions

属性	说明	类型	默认值	版本
actions	自定义操作按钮	ReactNode | (oriNode, info: { components:{ menuNode: ReactNode}, value : Conversation }) => ReactNode	-	-
menu	会话操作菜单	MenuProps | ((value: Conversation) => MenuProps)	-	-

menu: MenuProps

新增 icon?: ReactNode

describe

目前actions仅有menu操作，考虑后续扩展同时返回了 oriNode 和 components

usage

  const menuConfig: ConversationsProps['menu'] = (conversation) => ({
    icon: <PlusSquareOutlined />,
    items: [
      {
        label: 'Operation 1',
        key: 'operation1',
        icon: <EditOutlined />,
      },
      {
        label: 'Operation 2',
        key: 'operation2',
        icon: <StopOutlined />,
        disabled: true,
      },
      {
        label: 'Operation 3',
        key: 'operation3',
        icon: <DeleteOutlined />,
        danger: true,
      },
    ],
    onClick: (menuInfo) => {
      message.info(`Click ${conversation.key} - ${menuInfo.key}`);
    },
  });
<Conversations
     defaultActiveKey="item1"
     actions={(_, { components: { menuNode }, value }) => {
        return (
          <>
            <Tooltip title={value.label}>
              <ShareAltOutlined />
            </Tooltip>
            {menuNode}
          </>
        );
      }}
     menu={menuConfig}
     items={items}
     style={style}
 />

snapshot

[Upxuan]

Fine

[afc163]

本来 menu 已经把所有扩展菜单都已经收掉了，置顶功能按目前的设计规范也可以放到 menu 里：

如果不考虑新增除了 ... 之外的 action 图标的话，目前这里要解决的问题实际上只有 #592 自定义触发图标。

那是否用 menu 属性自定义 trigger 就够了。

不命名为 icon 的原因是这里可以不是图标。

  const menuConfig: ConversationsProps['menu'] = (conversation) => ({
+   trigger: <PlusSquareOutlined />,
    items: [
      {
        label: 'Operation 1',
        key: 'operation1',
        icon: <EditOutlined />,
      },
      {
        label: 'Operation 2',
        key: 'operation2',
        icon: <StopOutlined />,
        disabled: true,
      },
      {
        label: 'Operation 3',
        key: 'operation3',
        icon: <DeleteOutlined />,
        danger: true,
      },
    ],
    onClick: (menuInfo) => {
      message.info(`Click ${conversation.key} - ${menuInfo.key}`);
    },
  });

[kimteayon]

是否可以考虑如果 items 没有配置或者为空的情况下 onClick 可以在点击 trigger 的时候生效

[kimteayon]

originalNode 这个目前看是没有必要性

[afc163]

是否可以考虑如果 items 没有配置或者为空的情况下 onClick 可以在点击 trigger 的时候生效

当然可以，不过 trigger: <div onClick={onClick}>xxx</div> 貌似是一样的效果。

[Upxuan]

trigger可以满足需求，如果支持扩展的话组件拓展性会更好。

另外如果要常驻trigger（不只在hover会话时才出现），只能自己覆盖样式了吧

[kimteayon]

嗯 这个实现的时候会考虑下

[kimteayon]

结论：menuConfig 新增可选配置 trigger，并处理click事件和显示时机

const menuConfig: ConversationsProps['menu'] = (conversation) => ({
+   trigger: <PlusSquareOutlined />,
    items: [
      {
        label: 'Operation 1',
        key: 'operation1',
        icon: <EditOutlined />,
      },
      {
        label: 'Operation 2',
        key: 'operation2',
        icon: <StopOutlined />,
        disabled: true,
      },
      {
        label: 'Operation 3',
        key: 'operation3',
        icon: <DeleteOutlined />,
        danger: true,
      },
    ],
    onClick: (menuInfo) => {
      message.info(`Click ${conversation.key} - ${menuInfo.key}`);
    },
  });

[afc163]

@zombieJ @YumoImer 有空也可以顺便看看。