feat(grid): support dynamic fold/unfold column

alibaba · Nov 13, 2021 · a8b738e · a8b738e
1 parent 58b1de5
commit a8b738e
Show file tree

Hide file tree

Showing 5 changed files with 653 additions and 1 deletion.
diff --git 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 (
+      <Fragment>
+        <Submit onSubmit={console.log}>Query</Submit>
+        <Reset>Reset</Reset>
+      </Fragment>
+    )
+  }
+
+  const renderButtonGroup = () => {
+    if (grid?.rows < 2) {
+      return (
+        <FormButtonGroup.FormItem>
+          <FormButtonGroup>{renderActions()}</FormButtonGroup>
+        </FormButtonGroup.FormItem>
+      )
+    }
+
+    return (
+      <Fragment>
+        {grid?.rows > 1 ? (
+          <FormButtonGroup>
+            <a
+              href=""
+              onClick={(e) => {
+                e.preventDefault()
+                setExpanded(!expanded)
+              }}
+            >
+              {expanded ? 'Fold' : 'UnFold'}
+            </a>
+          </FormButtonGroup>
+        ) : null}
+        <FormButtonGroup align="right">{renderActions()}</FormButtonGroup>
+      </Fragment>
+    )
+  }
+  useEffect(() => {
+    updateChildren()
+  }, [expanded, grid])
+  return (
+    <Form {...props} layout="vertical" feedbackLayout="terse">
+      <FormGrid
+        maxColumns={4}
+        maxWidth={240}
+        onInitialized={(grid) => {
+          setGrid(grid)
+          updateChildren()
+        }}
+      >
+        {props.children}
+        <FormGrid.GridColumn
+          gridSpan={-1}
+          style={{ display: 'flex', justifyContent: 'space-between' }}
+        >
+          {renderButtonGroup()}
+        </FormGrid.GridColumn>
+      </FormGrid>
+    </Form>
+  )
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    QueryForm,
+    Input,
+    Select,
+    DatePicker,
+    FormItem,
+  },
+})
+
+export default () => {
+  const form = useMemo(() => createForm(), [])
+  return (
+    <FormProvider form={form}>
+      <SchemaField>
+        <SchemaField.Object x-component="QueryForm">
+          <SchemaField.String
+            name="input1"
+            title="Input 1"
+            x-component="Input"
+            x-decorator="FormItem"
+          />
+          <SchemaField.String
+            name="input2"
+            title="Input 2"
+            x-component="Input"
+            x-decorator="FormItem"
+          />
+
+          <SchemaField.String
+            name="select1"
+            title="Select 1"
+            x-component="Select"
+            x-decorator="FormItem"
+          />
+          <SchemaField.String
+            name="select2"
+            title="Select 2"
+            x-component="Select"
+            x-decorator="FormItem"
+          />
+          <SchemaField.String
+            name="date"
+            title="DatePicker"
+            x-component="DatePicker"
+            x-decorator="FormItem"
+          />
+          <SchemaField.String
+            name="dateRange"
+            title="DatePicker.RangePicker"
+            x-component="DatePicker.RangePicker"
+            x-decorator="FormItem"
+            x-decorator-props={{
+              gridSpan: 2,
+            }}
+          />
+          <SchemaField.String
+            name="select3"
+            title="Select 3"
+            x-component="Select"
+            x-decorator="FormItem"
+          />
+        </SchemaField.Object>
+      </SchemaField>
+    </FormProvider>
+  )
+}
+```
+
 ## API
 
 ### FormGrid

diff --git 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 (
+      <Fragment>
+        <Submit onSubmit={console.log}>查询</Submit>
+        <Reset>重置</Reset>
+      </Fragment>
+    )
+  }
+
+  const renderButtonGroup = () => {
+    if (grid?.rows < 2) {
+      return (
+        <FormButtonGroup.FormItem>
+          <FormButtonGroup>{renderActions()}</FormButtonGroup>
+        </FormButtonGroup.FormItem>
+      )
+    }
+
+    return (
+      <Fragment>
+        {grid?.rows > 1 ? (
+          <FormButtonGroup>
+            <a
+              href=""
+              onClick={(e) => {
+                e.preventDefault()
+                setExpanded(!expanded)
+              }}
+            >
+              {expanded ? '收起' : '展开'}
+            </a>
+          </FormButtonGroup>
+        ) : null}
+        <FormButtonGroup align="right">{renderActions()}</FormButtonGroup>
+      </Fragment>
+    )
+  }
+  useEffect(() => {
+    updateChildren()
+  }, [expanded, grid])
+  return (
+    <Form {...props} layout="vertical" feedbackLayout="terse">
+      <FormGrid
+        maxColumns={4}
+        maxWidth={240}
+        onInitialized={(grid) => {
+          setGrid(grid)
+          updateChildren()
+        }}
+      >
+        {props.children}
+        <FormGrid.GridColumn
+          gridSpan={-1}
+          style={{ display: 'flex', justifyContent: 'space-between' }}
+        >
+          {renderButtonGroup()}
+        </FormGrid.GridColumn>
+      </FormGrid>
+    </Form>
+  )
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    QueryForm,
+    Input,
+    Select,
+    DatePicker,
+    FormItem,
+  },
+})
+
+export default () => {
+  const form = useMemo(() => createForm(), [])
+  return (
+    <FormProvider form={form}>
+      <SchemaField>
+        <SchemaField.Object x-component="QueryForm">
+          <SchemaField.String
+            name="input1"
+            title="Input 1"
+            x-component="Input"
+            x-decorator="FormItem"
+          />
+          <SchemaField.String
+            name="input2"
+            title="Input 2"
+            x-component="Input"
+            x-decorator="FormItem"
+          />
+
+          <SchemaField.String
+            name="select1"
+            title="Select 1"
+            x-component="Select"
+            x-decorator="FormItem"
+          />
+          <SchemaField.String
+            name="select2"
+            title="Select 2"
+            x-component="Select"
+            x-decorator="FormItem"
+          />
+          <SchemaField.String
+            name="date"
+            title="DatePicker"
+            x-component="DatePicker"
+            x-decorator="FormItem"
+          />
+          <SchemaField.String
+            name="dateRange"
+            title="DatePicker.RangePicker"
+            x-component="DatePicker.RangePicker"
+            x-decorator="FormItem"
+            x-decorator-props={{
+              gridSpan: 2,
+            }}
+          />
+          <SchemaField.String
+            name="select3"
+            title="Select 3"
+            x-component="Select"
+            x-decorator="FormItem"
+          />
+        </SchemaField.Object>
+      </SchemaField>
+    </FormProvider>
+  )
+}
+```
+
 ## API
 
 ### FormGrid

diff --git 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<HTMLElement>) => void
+  onInitialized?: (grid: Grid<HTMLElement>) => void
 }
 
 const SpanRegExp = /span\s*(\d+)/
@@ -127,6 +128,8 @@ const resolveChildren = (grid: Grid<HTMLElement>) => {
   })
 }
 
+const nextTick = (callback?: () => void) => Promise.resolve(0).then(callback)
+
 export type GridNode = {
   visible?: boolean
   column?: number
@@ -292,8 +295,13 @@ export class Grid<Container extends HTMLElement> {
           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)