fix: megalayout columns (#871)

* feat: update responsive * feat: add polyfill for next * feat: add unittest
alibaba · May 24, 2020 · 9bff1f2 · 9bff1f2
1 parent 1d28108
commit 9bff1f2
Show file tree

Hide file tree

Showing 14 changed files with 518 additions and 208 deletions.
diff --git a/docs/zh-cn/jsx-develop/mega-layout-antd.md b/docs/zh-cn/jsx-develop/mega-layout-antd.md
@@ -659,6 +659,57 @@ const App = () => {
 ReactDOM.render(<App />, document.getElementById('root'))
 ```
 
+# 复杂grid嵌套
+
+```jsx
+import React, { useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import {
+  createVirtualBox,
+  Form,
+  FormItem,
+  FormButtonGroup,
+  createFormActions,
+  Submit,
+  Reset
+} from '@formily/antd' // 或者 @formily/next
+import styled, { css } from 'styled-components'
+import { MegaLayout, Input, DatePicker } from '@formily/antd-components'
+import Printer from '@formily/printer'
+
+import 'antd/dist/antd.css'
+
+const App = () => {
+  return (
+      <Form>
+        <MegaLayout
+          labelAlign="top"
+          grid
+          full
+          autoRow
+          columns={3}
+        >
+          <FormItem name="listx1" mega-props={{ span: 2 }} title="组件1" component={DatePicker} />
+          <FormItem name="listx2" title="组件2" component={DatePicker} />
+          <FormItem name="listx3" title="组件3" component={DatePicker} />
+          <MegaLayout columns={2} span={2} autoRow>
+            <FormItem name="listy1" title="组件1" component={DatePicker} />
+            <FormItem name="listy2" title="组件2" component={DatePicker} />
+            <FormItem name="listy3" title="组件3" component={DatePicker} />
+            <MegaLayout columns={3} span={3} autoRow>
+              <FormItem name="listz1" title="组件1" component={DatePicker} />
+              <FormItem name="listz2" title="组件2" component={DatePicker} />
+              <FormItem name="listz3" title="组件3" component={DatePicker} />
+            </MegaLayout>
+          </MegaLayout>
+        </MegaLayout>        
+      </Form>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
 ### 常见复杂布局
 
 ```jsx

diff --git a/docs/zh-cn/jsx-develop/mega-layout.md b/docs/zh-cn/jsx-develop/mega-layout.md
@@ -613,6 +613,56 @@ const App = () => {
 ReactDOM.render(<App />, document.getElementById('root'))
 ```
 
+# 复杂grid嵌套
+
+```jsx
+import React, { useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import {
+  createVirtualBox,
+  Form,
+  FormItem,
+  FormButtonGroup,
+  createFormActions,
+  Submit,
+  Reset
+} from '@formily/next' // 或者 @formily/next
+import styled, { css } from 'styled-components'
+import { MegaLayout, Input, DatePicker } from '@formily/next-components'
+import Printer from '@formily/printer'
+
+import '@alifd/next/dist/next.css'
+
+const App = () => {
+  return (
+      <Form>
+        <MegaLayout
+          labelAlign="top"
+          grid
+          full
+          autoRow
+          columns={3}
+        >
+          <FormItem name="listx1" mega-props={{ span: 2 }} title="组件1" component={DatePicker} />
+          <FormItem name="listx2" title="组件2" component={DatePicker} />
+          <FormItem name="listx3" title="组件3" component={DatePicker} />
+          <MegaLayout columns={2} span={2} autoRow>
+            <FormItem name="listy1" title="组件1" component={DatePicker} />
+            <FormItem name="listy2" title="组件2" component={DatePicker} />
+            <FormItem name="listy3" title="组件3" component={DatePicker} />
+            <MegaLayout columns={3} span={3} autoRow>
+              <FormItem name="listz1" title="组件1" component={DatePicker} />
+              <FormItem name="listz2" title="组件2" component={DatePicker} />
+              <FormItem name="listz3" title="组件3" component={DatePicker} />
+            </MegaLayout>
+          </MegaLayout>
+        </MegaLayout>        
+      </Form>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
 
 # 响应式布局
 

diff --git a/docs/zh-cn/schema-develop/mega-layout-antd.md b/docs/zh-cn/schema-develop/mega-layout-antd.md
@@ -682,6 +682,7 @@ const App = () => {
 ReactDOM.render(<App />, document.getElementById('root'))
 ```
 
+
 ### 联动控制 display / visible
 
 ```jsx
@@ -736,6 +737,60 @@ const App = () => {
 ReactDOM.render(<App />, document.getElementById('root'))
 ```
 
+# 复杂grid嵌套
+
+```jsx
+import React, { useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import {
+  createVirtualBox,
+  SchemaForm,
+  FormSlot,
+  SchemaMarkupField as Field,
+  FormButtonGroup,
+  createFormActions,
+  Submit,
+  Reset
+} from '@formily/antd' // 或者 @formily/next
+import styled, { css } from 'styled-components'
+import { FormMegaLayout, Input, DatePicker } from '@formily/antd-components'
+import Printer from '@formily/printer'
+
+import 'antd/dist/antd.css'
+
+const App = () => {
+  return (
+    <Printer>
+      <SchemaForm components={{ DatePicker, Input }}>
+        <FormMegaLayout
+          labelAlign="top"
+          grid
+          full
+          autoRow
+          columns={3}
+        >
+          <Field name="listx1" x-mega-props={{ span: 2 }} title="组件1" x-component="DatePicker" />
+          <Field name="listx2" title="组件2" x-component="DatePicker" />
+          <Field name="listx3" title="组件3" x-component="DatePicker" />
+          <FormMegaLayout columns={2} span={2} autoRow>
+            <Field name="listy1" title="组件1" x-component="DatePicker" />
+            <Field name="listy2" title="组件2" x-component="DatePicker" />
+            <Field name="listy3" title="组件3" x-component="DatePicker" />
+            <FormMegaLayout columns={3} span={3} autoRow>
+              <Field name="listz1" title="组件1" x-component="DatePicker" />
+              <Field name="listz2" title="组件2" x-component="DatePicker" />
+              <Field name="listz3" title="组件3" x-component="DatePicker" />
+            </FormMegaLayout>
+          </FormMegaLayout>
+        </FormMegaLayout>        
+      </SchemaForm>
+    </Printer>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
 ### 常见复杂布局
 
 ```jsx

diff --git a/docs/zh-cn/schema-develop/mega-layout.md b/docs/zh-cn/schema-develop/mega-layout.md
@@ -736,6 +736,60 @@ const App = () => {
 ReactDOM.render(<App />, document.getElementById('root'))
 ```
 
+# 复杂grid嵌套
+
+```jsx
+import React, { useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import {
+  createVirtualBox,
+  SchemaForm,
+  FormSlot,
+  SchemaMarkupField as Field,
+  FormButtonGroup,
+  createFormActions,
+  Submit,
+  Reset
+} from '@formily/next' // 或者 @formily/next
+import styled, { css } from 'styled-components'
+import { FormMegaLayout, Input, DatePicker } from '@formily/next-components'
+import Printer from '@formily/printer'
+
+import '@alifd/next/dist/next.css'
+
+const App = () => {
+  return (
+    <Printer>
+      <SchemaForm components={{ DatePicker, Input }}>
+        <FormMegaLayout
+          labelAlign="top"
+          grid
+          full
+          autoRow
+          columns={3}
+        >
+          <Field name="listx1" x-mega-props={{ span: 2 }} title="组件1" x-component="DatePicker" />
+          <Field name="listx2" title="组件2" x-component="DatePicker" />
+          <Field name="listx3" title="组件3" x-component="DatePicker" />
+          <FormMegaLayout columns={2} span={2} autoRow>
+            <Field name="listy1" title="组件1" x-component="DatePicker" />
+            <Field name="listy2" title="组件2" x-component="DatePicker" />
+            <Field name="listy3" title="组件3" x-component="DatePicker" />
+            <FormMegaLayout columns={3} span={3} autoRow>
+              <Field name="listz1" title="组件1" x-component="DatePicker" />
+              <Field name="listz2" title="组件2" x-component="DatePicker" />
+              <Field name="listz3" title="组件3" x-component="DatePicker" />
+            </FormMegaLayout>
+          </FormMegaLayout>
+        </FormMegaLayout>        
+      </SchemaForm>
+    </Printer>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
 # 常见复杂布局
 
 ```jsx