feat(form): support grid layout

[Dunqing]

close: #4723

更好用的表单布局方式

grid布局使用起来体验更好，这个其实应该由antd支持会更加完美

Featues

• [x] ProForm support
  • [x] Group
  • [x] FormList
  • [x] FieldSet
• [x] SchemaForm support
• [x] ModalForm support
• [x] DrawerForm support
• [x] StepsForm support

Note

1. width如果未设置或者为xs, md内部定义好的枚举宽度时会默认用 width: 100% 覆盖
2. 只支持内部组件使用grid模式，自定义组件需要自己用 Col 包裹
3. rowProps 默认参数为 { gutter: 8 }
4. colProps 默认参数为 { xs: 24 } 使用了span 默认参数为空

Demo

1. https://pro-components-preview-pr-4859.surge.sh/~demos/form-form-layout/
2. https://pro-components-preview-pr-4859.surge.sh/~demos/schemaform-schema

QueryFilter之后可以采用这种方案重构支持更好的表单自适应布局

[github-actions[bot]]

🎊 PR Preview has been successfully built and deployed to https://pro-components-preview-pr-4859.surge.sh

[lgtm-com[bot]]

This pull request introduces 2 alerts when merging 74558c56bc1796ba816108369f5cef93feee9447 into 3ba76bee0d34ac2bc509c843eb23be3eee1ad22e - view on LGTM.com

new alerts:

• 2 for Unused variable, import, function or class

[lgtm-com[bot]]

This pull request introduces 2 alerts when merging f984c6df6968decce1f22583a8484e08153396bd into 3ba76bee0d34ac2bc509c843eb23be3eee1ad22e - view on LGTM.com

new alerts:

• 2 for Unused variable, import, function or class

[lgtm-com[bot]]

This pull request introduces 1 alert when merging c68cbd460fd7b3d0db5a9821a2d58dc091a98c08 into 482f562b7034826c9acdda6955c00d3f1899b139 - view on LGTM.com

new alerts:

• 1 for Unused variable, import, function or class

[codecov[bot]]

Codecov Report

Merging #4859 (633bb23) into master (b572328) will increase coverage by 0.00%. The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master    #4859   +/-   ##
=======================================
  Coverage   99.49%   99.49%           
=======================================
  Files         202      203    +1     
  Lines        6493     6529   +36     
  Branches     2276     2284    +8     
=======================================
+ Hits         6460     6496   +36     
  Misses         33       33           

Impacted Files	Coverage Δ
packages/form/src/FieldContext.tsx	100.00% <ø> (ø)
packages/form/src/components/SchemaForm/index.tsx	100.00% <ø> (ø)
...src/components/SchemaForm/layoutType/StepsForm.tsx	100.00% <ø> (ø)
...m/src/components/SchemaForm/valueType/formList.tsx	100.00% <ø> (ø)
...rm/src/components/SchemaForm/valueType/formSet.tsx	100.00% <ø> (ø)
...form/src/components/SchemaForm/valueType/group.tsx	100.00% <ø> (ø)
packages/form/src/BaseForm/BaseForm.tsx	98.59% <100.00%> (+0.03%)	:arrow_up:
packages/form/src/BaseForm/createField.tsx	100.00% <100.00%> (ø)
packages/form/src/components/FieldSet/index.tsx	100.00% <100.00%> (ø)
packages/form/src/components/Group/index.tsx	100.00% <100.00%> (ø)
... and 3 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update b572328...633bb23. Read the comment docs.

[chenshuai2144]

md 的行为不要改？ 加个auto你觉得怎么样？

[Dunqing]

md 的行为不要改？

这个行为只在grid模式下被忽略，主要是需要设置为100%会让整体布局看起来整齐些

加个auto你觉得怎么样？

100%的考虑其实是让表单项跟随Col的宽度，在grid模式下所有的宽度都由Col控制，Col宽度的控制交给colProps其实也就是用户自己控制了。

所以我认为100%会更好些，如果用户有自己的想法设置了个非枚举sm, md就不会设置100%

[chenshuai2144]

现在的主要思路还是错落有致，和设计师的需求有点不一样了

[Dunqing]

现在的主要思路还是错落有致，和设计师的需求有点不一样了

如果有设计规范那就按设计规范来吧

我调整为不改动宽度

[Dunqing]

看着挺奇怪的

[chenshuai2144]

这几个input 默认是百分之百？

[Dunqing]

这几个input 默认是百分之百？

select 和 input 是

[Dunqing]

width还是得100%看着正常些，我回退下

[chenshuai2144]

不要默认百分百，会弄挂很多人的，还是做个auto吧

[Dunqing]

不要默认百分百，会弄挂很多人的，还是做个auto吧

auto是这样的

布局得重新弄了

[Dunqing]

grid模式下 默认百分比，用户只需要控制colProps属性布局 其他情况下，用户需要控制宽度和colProps配合布局，增加了布局成本

antd中input, select. cascader, treeSelect都会默认百分比但DatePicker之类的不会导致布局很奇怪，所以我就强制百分比了，挺难抉择的

[chenshuai2144]

还有改动吗？ 完成度感觉挺高了

[Dunqing]

还有改动吗？

完成度感觉挺高了

没改动了

另外我发现是antd的文档部分demo会设置宽度100%，组件应该没有设置百分比