feat(layout/docs): update docs and fix layout (#1003)

fix: layout and enhanced docs
alibaba · Aug 20, 2020 · 16be58c · 16be58c
1 parent 2654230
commit 16be58c
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 17 deletions.
diff --git a/docs/zh-cn/schema-develop/form-extension.md b/docs/zh-cn/schema-develop/form-extension.md
@@ -170,7 +170,7 @@ ReactDOM.render(<App />, document.getElementById('root'))
 扩展 Schema Field 组件可以说是我们平时用的最多的扩展方案，主要是用于扩展具体字段 UI 组件，目前我们提供的扩展方式主要有：
 
 - SchemaForm 中传入 components 扩展(要求组件满足 value/onChange API)
-- SchemaForm 中传入 components 组件拥有 isFieldComponent 静态属性，可以拿到 FieldProps
+- SchemaForm 中传入 components 组件拥有 isFieldComponent 静态属性，可以拿到 FieldProps, 获取更多内容，则可以通过 useSchemaProps 方法
 - registerFormField 全局注册扩展组件，要求传入组件名和具体组件，同时，如果针对满足 value/onChange 的组件，需要用 connect 包装，不包装，需要手动同步状态(借助 mutators)
 - registerFormFields 全局批量注册扩展组件，同时，如果针对满足 value/onChange 的组件，需要用 connect 包装，不包装，需要手动同步状态(借助 mutators)
 
@@ -179,7 +179,7 @@ ReactDOM.render(<App />, document.getElementById('root'))
 ```tsx
 import React, { useState } from 'react'
 import ReactDOM from 'react-dom'
-import { SchemaForm, SchemaMarkupField as Field } from '@formily/antd' // 或者 @formily/next
+import { SchemaForm, SchemaMarkupField as Field, useSchemaProps } from '@formily/antd' // 或者 @formily/next
 import 'antd/dist/antd.css'
 
 const CustomComponent = props => {
@@ -192,6 +192,7 @@ const CustomComponent = props => {
 }
 
 const CustomFieldComponent = props => {
+  const schemaProps = useSchemaProps()
   return (
     <input
       value={props.value || ''}
@@ -329,12 +330,62 @@ ReactDOM.render(<App />, document.getElementById('root'))
 
 - SchemaForm 中传入 components 只要组件拥有 isVirtualFieldComponent 静态属性，那么会被当做虚拟组件，同时组件属性可以拿到 VirtualFieldProps
 
+- 通过 isVirtualFieldComponent (推荐)
+
 - registerVirtualBox 全局扩展
 
 - createVirtualBox 全局扩展
 
 - createControllerBox 全局扩展
 
+
+**通过 isVirtualFieldComponent (推荐)**
+
+通过 `isVirtualFieldComponent` 声明为 `VirtualBox`，可以通过 `useSchemaProps` 拿到完整上下文内容。
+
+```jsx
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom'
+import {
+  SchemaForm,
+  SchemaMarkupField as Field,
+  useSchemaProps,
+} from '@formily/antd' // 或者 @formily/next
+import { Input } from '@formily/antd-components'
+import 'antd/dist/antd.css'
+
+const CustomLayout = (props) => {
+  const { children } = props
+  const schemaProps = useSchemaProps()
+  return <div style={{ border: '1px solid red', padding: 10 }}>
+    {children}
+  </div>
+}
+
+CustomLayout.isVirtualFieldComponent = true
+
+const App = () => {
+  return (
+    <SchemaForm
+      components={{
+        Input,
+        CustomLayout,
+      }}
+    >
+      <Field
+        x-component="CustomLayout"
+        type="object"
+      >
+        <Field name="name" title="Name" x-component="Input" />
+      </Field>
+    </SchemaForm>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+
 **registerVirtualBox 全局扩展**
 
 最原始的布局组件扩展方式，扩展完组件之后，布局组件使用方式与正常 Field 使用方式一样,扩展组件内部也能拿到完整的 FieldProps

diff --git a/packages/antd/src/__tests__/__snapshots__/layout.spec.tsx.snap b/packages/antd/src/__tests__/__snapshots__/layout.spec.tsx.snap
@@ -297,7 +297,7 @@ exports[`inset mode inset style 1`] = `
   max-width: 100%;
 }
 
-.c0 .ant-form-item.mega-layout-item.ant-row {
+.c0.mega-layout-item .ant-form-item.ant-row {
   padding-left: 0;
   border: none;
 }
@@ -575,7 +575,7 @@ exports[`inset mode item inset style(hasBorder) 1`] = `
   max-width: 100%;
 }
 
-.c0 .ant-form-item.mega-layout-item.ant-row {
+.c0.mega-layout-item .ant-form-item.ant-row {
   padding-left: 0;
   border: none;
 }

diff --git a/packages/antd/src/__tests__/layout.spec.tsx b/packages/antd/src/__tests__/layout.spec.tsx
@@ -632,8 +632,8 @@ describe('inset mode', () => {
     expect(tree).toHaveStyleRule('color', 'red', { modifier: `.mega-layout-item-inset-has-error .mega-layout-item-inset-help` })
     expect(tree).toHaveStyleRule('color', '#FF6A00', { modifier: `.mega-layout-item-inset-has-warning .mega-layout-item-inset-help` })
     expect(tree).toHaveStyleRule('display', 'none', { modifier: `.ant-form-item-explain` })
-    expect(tree).toHaveStyleRule('padding-left', '0', { modifier: `.ant-form-item.mega-layout-item.ant-row` })
-    expect(tree).toHaveStyleRule('border', 'none', { modifier: `.ant-form-item.mega-layout-item.ant-row` })
+    expect(tree).toHaveStyleRule('padding-left', '0', { modifier: `&.mega-layout-item .ant-form-item.ant-row` })
+    expect(tree).toHaveStyleRule('border', 'none', { modifier: `&.mega-layout-item .ant-form-item.ant-row` })
   })
 
   test('inset style(hasBorder)', () => {
@@ -702,8 +702,8 @@ describe('inset mode', () => {
     const tree = renderer.create(<Mega />).toJSON()
 
     expect(tree).toMatchSnapshot()    
-    expect(tree).toHaveStyleRule('padding-left', '0', { modifier: `.ant-form-item.mega-layout-item.ant-row` })
-    expect(tree).toHaveStyleRule('border', 'none', { modifier: `.ant-form-item.mega-layout-item.ant-row` })
+    expect(tree).toHaveStyleRule('padding-left', '0', { modifier: `&.mega-layout-item .ant-form-item.ant-row` })
+    expect(tree).toHaveStyleRule('border', 'none', { modifier: `&.mega-layout-item .ant-form-item.ant-row` })
     expect(tree).not.toHaveStyleRule('display', 'none', { modifier: `.ant-form-item-explain` })
     expect(tree).not.toHaveStyleRule('flex-direction', 'column', { modifier: `.mega-layout-item-inset` })
     expect(tree).not.toHaveStyleRule('flex-direction', 'column', { modifier: `.mega-layout-item-inset` })

diff --git a/packages/antd/src/components/FormMegaLayout/inset.tsx b/packages/antd/src/components/FormMegaLayout/inset.tsx
@@ -24,7 +24,7 @@ const insetStyle = (props) => {
                 border-radius: 4px;
             }
         ` : `
-            .ant-form-item.mega-layout-item.ant-row {
+            &.mega-layout-item .ant-form-item.ant-row {
                 padding-left: 0;
                 border: none;
             }

diff --git a/packages/next/src/__tests__/__snapshots__/layout.spec.tsx.snap b/packages/next/src/__tests__/__snapshots__/layout.spec.tsx.snap
@@ -177,7 +177,7 @@ exports[`inset mode inset style 1`] = `
   display: flex;
 }
 
-.c0 .next-form-item.mega-layout-item {
+.c0.mega-layout-item .next-form-item {
   padding-left: 0;
   border: none;
 }
@@ -295,7 +295,7 @@ exports[`inset mode item inset style(hasBorder) 1`] = `
   display: flex;
 }
 
-.c0 .next-form-item.mega-layout-item {
+.c0.mega-layout-item .next-form-item {
   padding-left: 0;
   border: none;
 }

diff --git a/packages/next/src/__tests__/layout.spec.tsx b/packages/next/src/__tests__/layout.spec.tsx
@@ -702,8 +702,8 @@ describe('inset mode', () => {
     expect(tree).toHaveStyleRule('color', 'red', { modifier: `.mega-layout-item-inset-has-error .mega-layout-item-inset-help` })
     expect(tree).toHaveStyleRule('color', '#FF6A00', { modifier: `.mega-layout-item-inset-has-warning .mega-layout-item-inset-help` })
     expect(tree).toHaveStyleRule('display', 'none', { modifier: `.next-form-item-help` })
-    expect(tree).toHaveStyleRule('padding-left', '0', { modifier: `.next-form-item.mega-layout-item` })
-    expect(tree).toHaveStyleRule('border', 'none', { modifier: `.next-form-item.mega-layout-item` })
+    expect(tree).toHaveStyleRule('padding-left', '0', { modifier: `&.mega-layout-item .next-form-item` })
+    expect(tree).toHaveStyleRule('border', 'none', { modifier: `&.mega-layout-item .next-form-item` })
   })
 
   test('inset style(hasBorder)', () => {
@@ -745,8 +745,8 @@ describe('inset mode', () => {
     const tree = renderer.create(<Mega />).toJSON()
 
     expect(tree).toMatchSnapshot()    
-    expect(tree).toHaveStyleRule('padding-left', '0', { modifier: `.next-form-item.mega-layout-item` })
-    expect(tree).toHaveStyleRule('border', 'none', { modifier: `.next-form-item.mega-layout-item` })
+    expect(tree).toHaveStyleRule('padding-left', '0', { modifier: `&.mega-layout-item .next-form-item` })
+    expect(tree).toHaveStyleRule('border', 'none', { modifier: `&.mega-layout-item .next-form-item` })
     expect(tree).not.toHaveStyleRule('display', 'none', { modifier: `.next-form-item-help` })
     expect(tree).not.toHaveStyleRule('flex-direction', 'column', { modifier: `.mega-layout-item-inset` })
     expect(tree).not.toHaveStyleRule('flex-direction', 'column', { modifier: `.mega-layout-item-inset` })

diff --git a/packages/next/src/components/FormMegaLayout/inset.tsx b/packages/next/src/components/FormMegaLayout/inset.tsx
@@ -13,7 +13,7 @@ const insetStyle = (props) => {
                 border-radius: 4px;
             }
         ` : `
-            .next-form-item.mega-layout-item {
+            &.mega-layout-item .next-form-item {
                 padding-left: 0;
                 border: none;
             }

diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
@@ -21,7 +21,7 @@ export interface ILayoutProps {
   isRoot?: boolean
   isLayout?: boolean
   defaultSettings?: any
-  children?: (props: ILayoutProps) => React.ReactElement
+  children?: any
   full?: boolean
   layoutProps?: any
   className?: string