[RFC] Attachment component

[zombieJ]

Summary

新增 Attachment 组件用于附件上传、关联能力支持。

Motivation

上传管理中有多种方式，对于纯文件上传使用 antd Upload 即可：

对于拖拽以及附件管理，则需要封装支持：

• 有实体时默认为上传提示面板，拖拽后转换为附件列表
• 无实体时，拖拽则直接显示模糊效果

API

无实体做纯全屏 Upload 监听

<Attachment getDropContainer{() => document.body}>
  <Button />
</Attachement>

有实体做面板使用

<Attachment
  // 无附件时展示配置
  placeholder={{
    icon: <CloudUploadOutlined />,
    title: "拖拽上传",
    description: "支持 pdf, txt, jpg 格式"
  }}

  // 有附件时展示配置
  overflow="scroll | wrap | responsive"
  
  // 数据
  data={data}
  onChange={onChange}
/>

属性	说明	类型	默认值
children	子元素存在时作为 Upload 功能使用	ReactElement	-
getDropContainer	设置需要拖拽放置的目标，当鼠标拖拽文件时会提示用户到这个位置	-
placeholder	没有附件时展示的内容	{ icon, title, description } | ReactElement	-
overflow	超出时设置滚动效果	scroll | wrap | responsive	responsive
classNames	语义化自定义样式	Record<SemanticType, string>	-
styles	语义化自定义样式	Record<SemanticType, CSSProps>	-
data	数据列表	antdFile[]	-
onChange	数据列表变化回调	(files: antdFile[]) => void	-

type SemanticType = 'placeholder' | 'item' | 'list';

Sender 配合示例

const header = (
  <Sender.Header open={open}>
    <Attachment  data={data} onChange={setData} />
  </Sender.Header>
);

<Sender
  header={header}
  onSubmit={(text) => {
    agent.request({
      message: { text, data },
    });
    setData([]);
    setOpen(false);
  }}
/>

What's more

关联外部站点、文档等功能，待设计。

[YumoImer]

data -> items

[zombieJ]

一下子让我纠结了，antd 的规范里和数据相关的新的都叫 data，和渲染相关的叫 items。这里看起来两者都可以。