[RFC] Modal 支持 Form 模式

[crazyair]

RFC

Summary

弹窗与表单耦合，支持弹窗表单场景

Motivation

弹窗表单是一个使用非常频繁的场景，但是现在却只是在 Antd Pro 中支持，而 Antd Pro 实现的代码也比较黑，需要 Antd 原生支持来解决这一问题

Detailed design

基础使用

const Demo = () => {
    return (
        <Form.Modal title="title">
            <Form.Item>
                <Input />
            </Form.Item>
        </Form.Modal>
    );
};

form 实例化场景使用

const CollectionCreateForm = () => {
    const { onCancel } = useContext(ActionContext);
    return (
        <Form.Modal title="title" onFinish={()=> onCancel()}>
            <Form.Item>
                <Input />
            </Form.Item>
        </Form.Modal>
    );
};

const Demo = () => {
    const [open, setOpen] = useState(false);

    return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        New Collection
      </Button>
      // 该组件功能为，open = true 加载子组件，open = false，即 Modal 关闭后的 afterClose 事件执行后，
      // 卸载子组件，达到 Modal 关闭后卸载 form 实例功能
      // 本组件的另一个功能点是可以满足 Modal 的 title 等 props 可以在 CollectionCreateForm 内动态配置
      <Action open={open} onCancel={() => setOpen(false)}>
        <CollectionCreateForm />
      </Action>
    </>
    );
};

Drawbacks

无

Alternatives

无

Unresolved questions

无

[kiner-tang]

这种是不是应该换一换，用 Modal.Form 比较合适

[crazyair]

这个待定，不管哪个主，只要用户能方便使用即可(demo 可能会加到 Form 里，算是 Form 的一个 ui 展示形式)，主要是先讨论是否可以耦合

[phamvantuan-alt]

这种是不是应该换一换，用 Modal.Form 比较合适

[phamvantuan-alt]

这种是不是应该换一换，用 Modal.Form 比较合适

[crazyair]

?

[whinc]

这个需求在管理系统中还是比较多的，探索方向可考虑如何提供一组通用的API或模式，实现表单与浮层的结合，这里浮层包括Modal、Drawer、Popover，甚至Tooltip和自定义的浮层

[crazyair]

第一步先支持 Modal，Drawer 可以再后面考虑，Popover Tooltip 其实不需要，因为他没有自己的 footer，你正常在 content 里写 Form 就可以

[whinc]

如果这要做，我觉得最好还是一开始就考虑全面，避免针对的场景过于定制化，antd 作为底层基础组件库，要么不做交给上层其他库处理，要做就应当做通用的底层API，避免引入应用层的特定场景逻辑。

Modal 和 Drawer 的封装可参考 Formily 的 FormDialog 和 FormDrawer https://antd.formilyjs.org/zh-CN/components/form-dialog
至于 Popover 和 Tooltip 感觉还有用使用场景的，可以参考 Formily 的 Editable 组件 https://antd.formilyjs.org/zh-CN/components/editable

[afc163]

如果觉得 Pro 的实现不完美，我建议直接改进和升级 Pro 的实现方式，个人不太希望在 antd 中增加两个原子组件的耦合组件。

[crazyair]

改不动呀，之前加他好友也没通过。

[crazyair]

另外那边封装的也比较重，这边只是简单支持 2 个组件的耦合，支持后，那边也可以方便修改 Modal + Form 实现方式

[whinc]

我比较赞同 afc163 的观点， 每个组件应当保持清晰的定位和可组合，交叉耦合的功能给以交给像 hooks、pro-components、formily 这样的上层应用库去处理，同时也可以减少 antd 后续升级迭代的历史包袱和维护成本，如果要放在 antd 处理，最好是提供抽象的范式或低级别 API，方便上层应用封装使用。

[crazyair]

目前是 pro 封装的比较重，实现的比较黑，现在有2个方案

1. antd 添加 Form + Modal 结合的实现
2. 提供 Form + Modal 的示例 demo: Add FormModal component #47576