FormLayout 目前的设计可能会给开发者带来困惑

[liuweiGL]

描述

FormLayout 目前使用了 2 个 context 来维护配置信息，导致的问题：

1. shallow 属性的含义可能并不准确（下面详细说）。
2. 开发人员使用 useFormLayout 的时候存在额外负担以及功能缺失。

使用场景

首先我封装了一个 SchemaForm，SchemaForm 中嵌套了@formily/antd Form 组件，即表单层面存在一个 FormLayout 配置信息。
然后我使用 FormLayout 再封装一个 FormBlock 组件，用来实现 V1 中的表单布局。
目前一个表单中的结构可能为：

  <SchemaForm>
      <FormBlock>
        <CustomUIComponent />
      </FormBlock>
    </SchemaForm>

问题

额外的负担

1. 主要是在 FormBlock 组件中获取 FormLayout 信息的时候需要使用同时使用 useFormLayout & useFormShallowLayout 才能获取到完整的 layout 信息，开发人员被迫面向源码编程。
2. FormBlock 也需要像 FormItem 组件一样覆盖一下 FormShallowLayout.Provider 的值。

语义 & 功能缺失

现在假设 SchemaForm & FormBlock 中的 FormLayout 为 shallow=false，按照 shallow 的语义，CustomUIComponent 组件中 useFormLayout 获取到的 layout 是否应该为 Object.assign( {}, ... parentLayout, SchemaForm#layout, FormBLock#layout )？目前的设置只能获取到父节点的 layout 信息。

建议

把 FormLayout & FormShallowLayout 合并成 FormLayout，然后根据 shallow 属性来传递 context value 即可：

const FormLayout: React.FC<IFormLayoutProps> & {
  useFormLayout: () => IFormLayoutProps
  useFormShallowLayout: () => IFormLayoutProps
} = ({ shallow, children, prefixCls, className, style, ...props }) => {
   const parentLayout = useFormLayout()
   const providerValue =  shallow ? props: {
     ...parentLayout,
     ...props
   }
  return (
    <div  style={style}>
      <FormLayoutContext.Provider value={providerValue}>
          {children}
        </FormLayoutContext.Provider>
    </div>
  )
}

[janryWang]

这样改了之后对现有API的影响是什么

[liuweiGL]

没太理解你是指哪方面的，FormLayout 这边的话就是少了个 useFormShallowLayout hook。

[janryWang]

Ok，明白了，这个问题其实我也有感觉到不太合理，撑着beta版可以改掉

[liuweiGL]

这个要现在调整吗？

[janryWang]

要，一起改了吧