diff --git a/packages/antd/docs/components/FormGrid.md b/packages/antd/docs/components/FormGrid.md
index 34b2002d69d..9a72c917cba 100644
--- a/packages/antd/docs/components/FormGrid.md
+++ b/packages/antd/docs/components/FormGrid.md
@@ -334,6 +334,167 @@ export default () => {
}
```
+## Query Form case
+
+```tsx
+import React, { useMemo, useState, useEffect, Fragment } from 'react'
+import { createForm } from '@formily/core'
+import { createSchemaField, FormProvider } from '@formily/react'
+import {
+ Form,
+ Input,
+ Select,
+ DatePicker,
+ FormItem,
+ FormGrid,
+ Submit,
+ Reset,
+ FormButtonGroup,
+} from '@formily/antd'
+
+const QueryForm: React.FC = (props) => {
+ const [expanded, setExpanded] = useState(false)
+ const [grid, setGrid] = useState()
+ const updateChildren = () => {
+ if (grid) {
+ grid.children.forEach((node, index) => {
+ if (index === grid.childSize - 1) return
+ node.element.style.display = !expanded && node.row > 1 ? 'none' : ''
+ })
+ }
+ }
+
+ const renderActions = () => {
+ return (
+
+ Query
+ Reset
+
+ )
+ }
+
+ const renderButtonGroup = () => {
+ if (grid?.rows < 2) {
+ return (
+
+ {renderActions()}
+
+ )
+ }
+
+ return (
+
+ {grid?.rows > 1 ? (
+
+ {
+ e.preventDefault()
+ setExpanded(!expanded)
+ }}
+ >
+ {expanded ? 'Fold' : 'UnFold'}
+
+
+ ) : null}
+ {renderActions()}
+
+ )
+ }
+ useEffect(() => {
+ updateChildren()
+ }, [expanded, grid])
+ return (
+
+ )
+}
+
+const SchemaField = createSchemaField({
+ components: {
+ QueryForm,
+ Input,
+ Select,
+ DatePicker,
+ FormItem,
+ },
+})
+
+export default () => {
+ const form = useMemo(() => createForm(), [])
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+```
+
## API
### FormGrid
diff --git a/packages/antd/docs/components/FormGrid.zh-CN.md b/packages/antd/docs/components/FormGrid.zh-CN.md
index a76b89be4b8..73b01afc123 100644
--- a/packages/antd/docs/components/FormGrid.zh-CN.md
+++ b/packages/antd/docs/components/FormGrid.zh-CN.md
@@ -334,6 +334,167 @@ export default () => {
}
```
+## 查询表单实现案例
+
+```tsx
+import React, { useMemo, useState, useEffect, Fragment } from 'react'
+import { createForm } from '@formily/core'
+import { createSchemaField, FormProvider } from '@formily/react'
+import {
+ Form,
+ Input,
+ Select,
+ DatePicker,
+ FormItem,
+ FormGrid,
+ Submit,
+ Reset,
+ FormButtonGroup,
+} from '@formily/antd'
+
+const QueryForm: React.FC = (props) => {
+ const [expanded, setExpanded] = useState(false)
+ const [grid, setGrid] = useState()
+ const updateChildren = () => {
+ if (grid) {
+ grid.children.forEach((node, index) => {
+ if (index === grid.childSize - 1) return
+ node.element.style.display = !expanded && node.row > 1 ? 'none' : ''
+ })
+ }
+ }
+
+ const renderActions = () => {
+ return (
+
+ 查询
+ 重置
+
+ )
+ }
+
+ const renderButtonGroup = () => {
+ if (grid?.rows < 2) {
+ return (
+
+ {renderActions()}
+
+ )
+ }
+
+ return (
+
+ {grid?.rows > 1 ? (
+
+ {
+ e.preventDefault()
+ setExpanded(!expanded)
+ }}
+ >
+ {expanded ? '收起' : '展开'}
+
+
+ ) : null}
+ {renderActions()}
+
+ )
+ }
+ useEffect(() => {
+ updateChildren()
+ }, [expanded, grid])
+ return (
+
+ )
+}
+
+const SchemaField = createSchemaField({
+ components: {
+ QueryForm,
+ Input,
+ Select,
+ DatePicker,
+ FormItem,
+ },
+})
+
+export default () => {
+ const form = useMemo(() => createForm(), [])
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+```
+
## API
### FormGrid
diff --git a/packages/grid/src/index.ts b/packages/grid/src/index.ts
index 9acd5572c0f..ff08f1e7891 100644
--- a/packages/grid/src/index.ts
+++ b/packages/grid/src/index.ts
@@ -12,6 +12,7 @@ export interface IGridOptions {
colWrap?: boolean
strictAutoFit?: boolean
onDigest?: (grid: Grid) => void
+ onInitialized?: (grid: Grid) => void
}
const SpanRegExp = /span\s*(\d+)/
@@ -127,6 +128,8 @@ const resolveChildren = (grid: Grid) => {
})
}
+const nextTick = (callback?: () => void) => Promise.resolve(0).then(callback)
+
export type GridNode = {
visible?: boolean
column?: number
@@ -292,8 +295,13 @@ export class Grid {
this.height = rect.height
}
resolveChildren(this)
- if (this.ready) {
+ nextTick(() => {
this.options?.onDigest?.(this)
+ })
+ if (!this.ready) {
+ nextTick(() => {
+ this.options?.onInitialized?.(this)
+ })
}
})
const mutationObserver = new ChildListMutationObserver(digest)
diff --git a/packages/next/docs/components/FormGrid.md b/packages/next/docs/components/FormGrid.md
index 21358f3527f..f4565704f2f 100644
--- a/packages/next/docs/components/FormGrid.md
+++ b/packages/next/docs/components/FormGrid.md
@@ -334,6 +334,167 @@ export default () => {
}
```
+## Query Form case
+
+```tsx
+import React, { useMemo, useState, useEffect, Fragment } from 'react'
+import { createForm } from '@formily/core'
+import { createSchemaField, FormProvider } from '@formily/react'
+import {
+ Form,
+ Input,
+ Select,
+ DatePicker,
+ FormItem,
+ FormGrid,
+ Submit,
+ Reset,
+ FormButtonGroup,
+} from '@formily/next'
+
+const QueryForm: React.FC = (props) => {
+ const [expanded, setExpanded] = useState(false)
+ const [grid, setGrid] = useState()
+ const updateChildren = () => {
+ if (grid) {
+ grid.children.forEach((node, index) => {
+ if (index === grid.childSize - 1) return
+ node.element.style.display = !expanded && node.row > 1 ? 'none' : ''
+ })
+ }
+ }
+
+ const renderActions = () => {
+ return (
+
+ Query
+ Reset
+
+ )
+ }
+
+ const renderButtonGroup = () => {
+ if (grid?.rows < 2) {
+ return (
+
+ {renderActions()}
+
+ )
+ }
+
+ return (
+
+ {grid?.rows > 1 ? (
+
+ {
+ e.preventDefault()
+ setExpanded(!expanded)
+ }}
+ >
+ {expanded ? 'Fold' : 'UnFold'}
+
+
+ ) : null}
+ {renderActions()}
+
+ )
+ }
+ useEffect(() => {
+ updateChildren()
+ }, [expanded, grid])
+ return (
+
+ )
+}
+
+const SchemaField = createSchemaField({
+ components: {
+ QueryForm,
+ Input,
+ Select,
+ DatePicker,
+ FormItem,
+ },
+})
+
+export default () => {
+ const form = useMemo(() => createForm(), [])
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+```
+
## API
### FormGrid
diff --git a/packages/next/docs/components/FormGrid.zh-CN.md b/packages/next/docs/components/FormGrid.zh-CN.md
index f1b6f25a7d9..0cafacdb566 100644
--- a/packages/next/docs/components/FormGrid.zh-CN.md
+++ b/packages/next/docs/components/FormGrid.zh-CN.md
@@ -334,6 +334,167 @@ export default () => {
}
```
+## 查询表单实现案例
+
+```tsx
+import React, { useMemo, useState, useEffect, Fragment } from 'react'
+import { createForm } from '@formily/core'
+import { createSchemaField, FormProvider } from '@formily/react'
+import {
+ Form,
+ Input,
+ Select,
+ DatePicker,
+ FormItem,
+ FormGrid,
+ Submit,
+ Reset,
+ FormButtonGroup,
+} from '@formily/next'
+
+const QueryForm: React.FC = (props) => {
+ const [expanded, setExpanded] = useState(false)
+ const [grid, setGrid] = useState()
+ const updateChildren = () => {
+ if (grid) {
+ grid.children.forEach((node, index) => {
+ if (index === grid.childSize - 1) return
+ node.element.style.display = !expanded && node.row > 1 ? 'none' : ''
+ })
+ }
+ }
+
+ const renderActions = () => {
+ return (
+
+ 查询
+ 重置
+
+ )
+ }
+
+ const renderButtonGroup = () => {
+ if (grid?.rows < 2) {
+ return (
+
+ {renderActions()}
+
+ )
+ }
+
+ return (
+
+ {grid?.rows > 1 ? (
+
+ {
+ e.preventDefault()
+ setExpanded(!expanded)
+ }}
+ >
+ {expanded ? '收起' : '展开'}
+
+
+ ) : null}
+ {renderActions()}
+
+ )
+ }
+ useEffect(() => {
+ updateChildren()
+ }, [expanded, grid])
+ return (
+
+ )
+}
+
+const SchemaField = createSchemaField({
+ components: {
+ QueryForm,
+ Input,
+ Select,
+ DatePicker,
+ FormItem,
+ },
+})
+
+export default () => {
+ const form = useMemo(() => createForm(), [])
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+```
+
## API
### FormGrid