[RFC] Add trigger to Bubble's Semantic DOM - for Bubble

[chenluda]

Summary

为 Bubble 的 Semantic DOM (footer, header, extra...) 添加 trigger 触发操作。

link to: 为 Bubble 和 BubbleList 组件的 footer 属性增加可控的 hover 样式 #489

API

Semantic DOM

属性	说明	类型	默认值
trigger	触发方式	always | never | click | hover	always

usage

1：最新气泡的 Semantic DOM 正常显示，历史气泡按 trigger 触发

const roles = (bubble, index) => {
  const isLatest = index == (messages.length - 1).toString();
  switch (bubble.role) {
    case "bot":
      return {
        placement: "start",
        avatar: { icon: <UserOutlined />, style: fooAvatar },
        typing: { step: 2, interval: 50 },
        header: {
          trigger: isLatest ? "always" : "never",
          content: botHeaderContent
        },
        footer: {
          trigger: isLatest ? "always" : "hover",
          content: footerHeaderContent
        },
      };
    case "user":
      return {
        placement: "end",
        avatar: { icon: <UserOutlined />, style: barAvatar },
        header: {
          trigger: "never",
          content: userHeaderContent
        },
        footer: {
          trigger: "hover",
          content: userFooterContent
        },
      };
  }
};

<Bubble.List
  ref={listRef}
  className="bubble-list"
  roles={roles}
  items={messages.map((msg, index) => ({
    key: index,
    role: msg.role,
    content: msg.text,
    time: msg.time,
  }))}
/>

[YumoImer]

我在想，header 、footer 等参数支持直接传入 ReactNode 或 undefined，那 trigger?: 'always' | 'never' 这两个选项有没有必要。

[chenluda]

trigger?: 'always' | 'never' 这两个选项已经去除。

---

Semantic DOM

属性	说明	类型	默认值
trigger	触发方式	click | hover	-

usage

实现的方式有些变动：最新气泡的 Semantic DOM 正常显示，历史气泡按 trigger 触发：

const roles = (bubble, index) => {
  const isLatest = index == (messages.length - 1).toString();
  switch (bubble.role) {
    case "bot":
      return {
        placement: "start",
        avatar: { icon: <UserOutlined />, style: fooAvatar },
        typing: { step: 2, interval: 50 },
        header: isLatest ? botHeaderContent : ''",
        footer: isLatest ? footerHeaderContent: {
            trigger: "hover",
            content: footerHeaderContent
          },
      };
    case "user":
      return {
        placement: "end",
        avatar: { icon: <UserOutlined />, style: barAvatar },
        footer: {
          trigger: "hover",
          content: userFooterContent
        },
      };
  }
};

[YumoImer]

我这暂时没问题了。先不启动 PR 哈，等大家都过一下。🙏

@ant-design/ant-design-x Review please