Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support PrefixNameContext in Form #39564

Closed
YinDongFang opened this issue Dec 14, 2022 · 13 comments · Fixed by #39580
Closed

Support PrefixNameContext in Form #39564

YinDongFang opened this issue Dec 14, 2022 · 13 comments · Fixed by #39580

Comments

@YinDongFang
Copy link
Contributor

YinDongFang commented Dec 14, 2022

What problem does this feature solve?

业务中使用Form组件开发大型表单。比如用来创建K8s资源对象(Application等)有大量字段和多层嵌套层级。比如:
application.container.lifecycle.postStart.exec.command
application.container.lifecycle.preStop.exec.command
application.container.metadata.annotations.lbcinstance
application.container.metadata.annotations.bound
...

手动配置每个Form.Item的name字段会有大量重复的prefix,比如:
['application', 'xxx1'], ['application', 'xxx2'], ['application', 'xxx3'] ...
(同一级最多可能10-20个字段)

What does the proposed API look like?

<PrefixContext.Provider value={["application", "container"]}>
  <PrefixContext.Provider value={["lifecycle"]}>
    <Form.Item name="postStart">
    {/* 实际name:["application", "container", "lifecycle", "postStart" ] */}
    </Form.Item>
    <Form.Item name="preStop">
    {/* 实际name:["application", "container", "lifecycle", "preStop" ] */}
    </Form.Item>
  </PrefixContext.Provider>
  <PrefixContext.Provider value={["metadata", "annotations"]}>
    <Form.Item name="lbcinstance">
    {/* 实际name:["application", "container", "metadata", "annotations", "lbcinstance" ] */}
    </Form.Item>
    <Form.Item name="bound">
    {/* 实际name:["application", "container", "metadata", "annotations", "bound" ] */}
    </Form.Item>
  </PrefixContext.Provider>
</PrefixContext.Provider>
@github-actions
Copy link
Contributor

github-actions bot commented Dec 14, 2022

You may look for issues:

  1. 50% Undisabled component form #37590

🤖 By issues-similarity-analysis

@YinDongFang
Copy link
Contributor Author

YinDongFang commented Dec 14, 2022

目前rc-field-form中已经通过FieldContext实现。可以单独实现一个PrefixContext并且暴露出来

PR:react-component/field-form#541

@zombieJ
Copy link
Member

zombieJ commented Dec 14, 2022

感觉有点裸,需要讨论一下。

@Wxh16144
Copy link
Member

mark,我在想这个功能是不是业务同学实现 Context 比较好 ,而非组件库去做

@zombieJ
Copy link
Member

zombieJ commented Dec 15, 2022

API 添加会比较慎重,和几个 Collaborator 聊了一下。感觉可以先做个 Demo 出来,让开发者进行封装。

@YinDongFang
Copy link
Contributor Author

业务自行实现的问题在于List组件已经添加了prefixName,在List中的Item会出现问题

比如:https://codesandbox.io/s/prefixnamecontext-demo-m7l7pz

@YinDongFang
Copy link
Contributor Author

业务自行实现的问题在于List组件已经添加了prefixName,在List中的Item会出现问题

比如:https://codesandbox.io/s/prefixnamecontext-demo-m7l7pz

@zombieJ 麻烦确认一下这个demo。List中的Item会同时接收到自定义的prefix和List内部的prefix

@zombieJ
Copy link
Member

zombieJ commented Dec 15, 2022

嗯,看起来 List 需要其他方式封装。

@zombieJ
Copy link
Member

zombieJ commented Dec 15, 2022

@YinDongFang
Copy link
Contributor Author

业务上在List中可能还会使用PrefixProvider

目前业务上的实现是:https://codesandbox.io/s/prefixnamecontext-demo-forked-kw8rub?file=/demo.tsx

虽然能实现,但是觉得为了避免和List的重复,实现起来和理解起来会很绕

感觉如果能够原生暴露出来会很方便

@zombieJ
Copy link
Member

zombieJ commented Dec 15, 2022

@YinDongFang
Copy link
Contributor Author

这样很清晰👍

不过业务上还有一个需求🤣。因为字段嵌套层级太深,如果字段之间有依赖关系时目前是使用相对路径的。
比如:application.containers[0].metadata.annotations.lbcinstance字段依赖application.containers[0].metadata.annotations.bound字段。
目前是通过useContext(PrefixContext).fullpath获取到完整前缀,比如["application", "containers", 0, "metadata", "annotations"],然后dependencies=[[...prefix, "bound"]]。按照大佬上边的demo,containers是一个List,获取到的prefix只是[0, "metadata", "annotations"]这一段?

@zombieJ
Copy link
Member

zombieJ commented Dec 15, 2022

这个就是你上面的例子,Context 搞两条路径,一个存要传导的,一个存全量的。只要分割清楚就好了哈~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants