From 16be58cc3af42606b14a49e0bcf6e277262918a3 Mon Sep 17 00:00:00 2001 From: quirkyvar Date: Thu, 20 Aug 2020 21:11:31 +0800 Subject: [PATCH] feat(layout/docs): update docs and fix layout (#1003) fix: layout and enhanced docs --- docs/zh-cn/schema-develop/form-extension.md | 55 ++++++++++++++++++- .../__snapshots__/layout.spec.tsx.snap | 4 +- packages/antd/src/__tests__/layout.spec.tsx | 8 +-- .../src/components/FormMegaLayout/inset.tsx | 2 +- .../__snapshots__/layout.spec.tsx.snap | 4 +- packages/next/src/__tests__/layout.spec.tsx | 8 +-- .../src/components/FormMegaLayout/inset.tsx | 2 +- packages/react/src/types.ts | 2 +- 8 files changed, 68 insertions(+), 17 deletions(-) diff --git a/docs/zh-cn/schema-develop/form-extension.md b/docs/zh-cn/schema-develop/form-extension.md index 951455d7c01..ca749604a8d 100644 --- a/docs/zh-cn/schema-develop/form-extension.md +++ b/docs/zh-cn/schema-develop/form-extension.md @@ -170,7 +170,7 @@ ReactDOM.render(, 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(, 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 ( , 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
+ {children} +
+} + +CustomLayout.isVirtualFieldComponent = true + +const App = () => { + return ( + + + + + + ) +} + +ReactDOM.render(, 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 index ada0f880533..f7e12085864 100644 --- 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 index f4d5f4886f8..0582805257d 100644 --- 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().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 index 719286ae4ee..f0ad1f0218e 100644 --- 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 index b960334d45c..c93cbc0b4b2 100644 --- 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 index b2d69b2cbd2..33d423ac5f9 100644 --- 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().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 index adc666f1fdf..50f358d8465 100644 --- 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 index 3165307f979..b2107a1d782 100644 --- 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