[RFC] Actions 2.0

[vanndxh]

Summary

预设四大常用功能：分页、反馈、复制、朗读

Motivation

1.0 版本的 Actions 仅实现了一些基础功能，用户想要使用一些常用功能也需要自己自定义很多内容，所以考虑在 2.0 对组件进行升级，预设若干高频常用功能，方便用户一键配置使用的同时，支持导出到外部场景使用

Detailed Design

Props

由于是对 items 进行预设配置，主要针对类型 ItemType 进行修改

• 增加入参 type，接收若干预设好的字符串，满足条件时触发特定渲染
• 增加可选附带参数 value
• pagination：分页功能下表示当前页码
  • feedback：反馈功能下表示当前状态
  • copy：复制功能下表示当前复制的值
  • read：朗读功能下表示当前朗读的值
• 增加可选附带参数 onChange
  • pagination：分页功能下表示当前页码变更回调
  • feedback：反馈功能下表示当前状态变更回调
• 增加预设相关参数 total：总页数
  在目前这 4 个预设内容的情况下，暂定入参修改如下

{
  /**
   * @desc 预设功能 - 通用 - 值
   * @descEN Preset function - common - value
   * @pagination 分页功能下表示当前页码
   * @feedback 反馈功能下表示当前状态
   * @copy 复制功能下表示当前复制的值
   * @read 朗读功能下表示当前朗读的值
   */
  value?: string | number;
  /**
   * @desc 预设功能 - 通用 - 值变更回调
   * @descEN Preset function - common - onChange
   * @pagination 分页功能下表示当前页码变更回调
   * @feedback 反馈功能下表示当前状态变更回调
   */
  onChange?: (val: string | number) => void;
    /**
   * @desc 预设功能 - 分页 - 总页数
   * @descEN Preset function - pagination - total page number
   */
    total?: number;
}

Custom render

对渲染内容进行修改，在原基础之上增加逻辑，优先对 type 进行特定渲染，原逻辑则作为兜底使用，伪代码如下

const renderPresetContent = () => {
  switch (type) {
    case 'pagination':
      return (
        <Pagination
          current={value as number}
          total={total}
          onChange={onChange}
          pageSize={1}
          simple={{ readOnly: true }}
          />
      );
    case 'feedback':
      return <StopOutlined />;
    case 'copy':
      return (
        <CopyOutlined
          onClick={() =>
            navigator.clipboard.writeText(value as string).then(() => {
              message.success('复制成功');
            })
          }
          />
      );
    case 'read':
      return <StopOutlined />;
    default:
      return <div className={`${prefixCls}-list-item-icon`}>{icon}</div>;
  }
};

Component export

需要注意，这里目前共 4 个子组件，后续可能会进行扩展，相对较为复杂的部分例如 Feedback 最终会单独以子组件的形式导出，例如
Actions.Feedback

Example Usage

使用时，可以将 items 用 state 的方式传入，后续需要修改值的时候，使用 onChange 来触发，伪代码如下

const PresetDemo: React.FC = () => {
  const initialItems = [
    {
      key: 'pagination',
      type: 'pagination',
      label: 'pagination',
      value: 2,
      total: 10,
      onChange: (val: number) => {
        setItems((pre) =>
          pre.map((item) => (item.key === 'pagination' ? { ...item, value: val } : item)),
                );
      },
    },
    {
      key: 'feedback',
      type: 'feedback',
    },
    {
      key: 'copy',
      type: 'copy',
      label: 'copy',
      value: '这是一段要复制的文本',
    },
    {
      key: 'read',
      type: 'read',
      label: 'read',
      value: '这是一段要朗读的文本',
    },
  ];

  const [items, setItems] = useState<any[]>(initialItems);

  return <Actions items={items} />;
};

[vanndxh]

• 不要直接透出 type，参考 Antd.Table，使用默认参考配置的方式，帮助用户
• 考虑 renderProps 替代 实际入参