feat: update snapshot and layout test for nested grid (#894)

alibaba · Jun 15, 2020 · 72619ec · 72619ec
1 parent 2606b5b
commit 72619ec
Show file tree

Hide file tree

Showing 7 changed files with 347 additions and 49 deletions.
diff --git a/docs/zh-cn/schema-develop/form-layout.md b/docs/zh-cn/schema-develop/form-layout.md
@@ -625,3 +625,193 @@ ReactDOM.render(<App />, document.getElementById('root'))
 - 从@formily/antd-components 中导出 FormTab
 - FormTab 中的渲染是会强制全部渲染的，主要是为了收集校验
 - 如果被隐藏的 Tab 校验错误，在 Tab Title 上会展现 Badge 小红标，同时浏览器自动滚动
+
+## 自适应复合栅格布局
+
+```jsx
+import React from "react";
+import ReactDOM from "react-dom";
+import { Button } from "antd";
+import {
+  PlusCircleOutlined
+} from '@ant-design/icons';
+import styled from "styled-components";
+import {
+  SchemaForm,
+  SchemaField,
+  SchemaMarkupField as Field,  
+  MegaLayout,
+  FormMegaLayout
+} from "@formily/antd";
+import { ArrayList } from "@formily/react-shared-components";
+import { toArr, isFn, FormPath } from "@formily/shared";
+import { FormCard, Input, Checkbox } from "@formily/antd-components";
+import "antd/dist/antd.css";
+
+const ArrayComponents = {
+  CircleButton: props => <Button {...props} />,
+  TextButton: props => <Button text {...props} />,
+  AdditionIcon: () => <div>+Add</div>,
+  RemoveIcon: () => <div>Remove</div>,
+  MoveDownIcon: () => <div>Down</div>,
+  MoveUpIcon: () => <div>Up</div>
+};
+
+const ArrayCustom = props => {
+  const { value, schema, className, editable, path, mutators } = props;
+  const {
+    renderAddition,
+    renderRemove,
+    renderMoveDown,
+    renderMoveUp,
+    renderEmpty,
+    renderExtraOperations,
+    ...componentProps
+  } = schema.getExtendsComponentProps() || {};
+
+  const onAdd = () => {
+    const items = Array.isArray(schema.items)
+      ? schema.items[schema.items.length - 1]
+      : schema.items;
+    mutators.push(items.getEmptyValue());
+  };
+
+  return (
+    <ArrayList
+      value={value}
+      minItems={schema.minItems}
+      maxItems={schema.maxItems}
+      editable={editable}
+      components={ArrayComponents}
+      renders={{
+        renderAddition,
+        renderRemove,
+        renderMoveDown,
+        renderMoveUp,
+        renderEmpty // 允许开发者覆盖默认
+      }}
+    >
+      <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
+        {toArr(value).map((item, index) => {
+          return (
+            <div style={{ marginBottom: "16px" }} key={index}>
+              <SchemaField path={FormPath.parse(path).concat(index)} />
+            </div>
+          );
+        })}
+      </div>
+      <ArrayList.Empty>
+        {({ children }) => {
+          return (
+            <div
+              {...componentProps}
+              size="small"
+              className={`card-list-item card-list-empty`}
+              onClick={onAdd}
+            >
+              <div>{children}</div>
+            </div>
+          );
+        }}
+      </ArrayList.Empty>
+      <ArrayList.Addition>
+        {({ children, isEmpty }) => {
+          if (!isEmpty) {
+            return (
+              <div
+                style={{ marginLeft: "12px", cursor: 'pointer' }}
+                className="array-cards-addition"
+                onClick={onAdd}
+              >
+                <PlusCircleOutlined style={{ color: '#1890ff' }}/>
+              </div>
+            );
+          }
+        }}
+      </ArrayList.Addition>
+    </ArrayList>
+  );
+};
+
+ArrayCustom.isFieldComponent = true;
+
+const App = () => {
+  return (
+    <SchemaForm components={{ Input, Checkbox, ArrayCustom }}>
+      <FormCard title="基本信息">
+        <FormMegaLayout
+          labelWidth="100"
+          grid
+          full
+          autoRow
+          labelAlign="left"
+          columns="3"
+          responsive={{ lg: 3, m: 2, s: 1 }}
+        >
+          <Field name="username" title="姓名" x-component="Input" required/>
+          <Field name="gender" title="性别" x-component="Input" required/>
+          <Field name="company" title="公司" x-component="Input" required/>
+          <Field title="固定电话" name="phoneList" type="array" required
+            default={[
+              { phone: '010-1234 5678' },
+              { phone: '010-1234 5678' }
+            ]}
+            x-component="ArrayCustom"
+          >
+            <Field type="object" x-mega-props={{ columns: 1 }}>
+              <Field name="phone" x-component="Input" />
+            </Field>
+          </Field>
+
+          <Field
+            title="部门职务"
+            name="departmentList"
+            type="array"
+            required
+            default={[
+              { group: "项目1部", position: '项目经理' },
+              { group: "项目1部", position: '研发经理', isManeger: true }
+            ]}
+            x-component="ArrayCustom"
+          >
+              <Field type="object" x-mega-props={{ columns: 2 }}>
+                <Field name="group" x-mega-props={{ span: 2 }} x-component="Input" />
+                <Field name="position" x-component="Input" />
+                <Field name="isManeger" x-component="Checkbox" x-component-props={{
+                  children: '是否主管'
+                }} />
+              </Field>
+          </Field>
+
+          <Field
+            title="手机号"
+            name="mobileList"
+            type="array"
+            required
+            default={[
+              { mobile: "136 0123 4567", enableSMS: true },
+              { mobile: "136 0123 4567", enableSMS: false }
+            ]}
+            x-component="ArrayCustom"
+          >
+            <Field type="object" x-mega-props={{ columns: 2 }}>
+              <Field name="mobile" x-component="Input" />
+              <Field name="enableSMS" x-component="Checkbox" x-component-props={{
+                children: '接受短信'
+              }} />
+            </Field>
+          </Field>
+        </FormMegaLayout>
+      </FormCard>      
+    </SchemaForm>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+**案例解析**
+
+- 结合自定义 ArrayList 以及 MegaLayout 的在栅格场景下的应用
+- 配合响应式布局，能够根据屏幕宽度进行自适应
+- 在 ArrayList场景下，如何通过Field（object）来改变columns
diff --git a/packages/antd/src/__tests__/__snapshots__/layout.spec.tsx.snap b/packages/antd/src/__tests__/__snapshots__/layout.spec.tsx.snap
@@ -50,6 +50,11 @@ exports[`inline style gutter item 1`] = `
   margin-right: 20px;
 }
 
+.c0 .ant-form-item-explain.show-help-leave {
+  -webkit-animation-duration: 0s;
+  animation-duration: 0s;
+}
+
 <div
   className="c0"
 />
@@ -79,6 +84,11 @@ exports[`inline style item 1`] = `
   margin-right: undefinedpx;
 }
 
+.c0 .ant-form-item-explain.show-help-leave {
+  -webkit-animation-duration: 0s;
+  animation-duration: 0s;
+}
+
 <div
   className="c0"
 />
@@ -108,6 +118,11 @@ exports[`inline style labelAlign:top item 1`] = `
   margin-right: undefinedpx;
 }
 
+.c0 .ant-form-item-explain.show-help-leave {
+  -webkit-animation-duration: 0s;
+  animation-duration: 0s;
+}
+
 <div
   className="c0"
 />
@@ -215,7 +230,7 @@ exports[`nest grid layout container nest columns 1`] = `
   display: grid;
   grid-column-gap: NaNpx;
   grid-row-gap: NaNpx;
-  grid-template-columns: repeat(3,minmax(100px,1fr));
+  grid-template-columns: repeat(3,1fr);
 }
 
 .c0.mega-layout-nest-container {
@@ -255,21 +270,21 @@ exports[`nest grid layout container nest mega layout container 1`] = `
 @media (max-width:720px) {
   .c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content.grid,
   .c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-item-content > .mega-layout-container-content.grid {
-    grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
+    grid-template-columns: repeat(auto-fit,1fr);
   }
 }
 
 @media (min-width:720px) and (max-width:1200px) {
   .c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content.grid,
   .c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-item-content > .mega-layout-container-content.grid {
-    grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
+    grid-template-columns: repeat(auto-fit,1fr);
   }
 }
 
 @media (min-width:1200px) {
   .c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content.grid,
   .c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-item-content > .mega-layout-container-content.grid {
-    grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
+    grid-template-columns: repeat(auto-fit,1fr);
   }
 }
 
@@ -279,6 +294,11 @@ exports[`nest grid layout container nest mega layout container 1`] = `
 `;
 
 exports[`nest layout item style grid item style in large span 1`] = `
+.c0 .ant-form-item-explain.show-help-leave {
+  -webkit-animation-duration: 0s;
+  animation-duration: 0s;
+}
+
 @media (max-width:720px) {
   .c0.mega-layout-item-col {
     grid-column-start: span 1;
@@ -303,6 +323,11 @@ exports[`nest layout item style grid item style in large span 1`] = `
 `;
 
 exports[`nest layout item style grid item style in small span 1`] = `
+.c0 .ant-form-item-explain.show-help-leave {
+  -webkit-animation-duration: 0s;
+  animation-duration: 0s;
+}
+
 @media (max-width:720px) {
   .c0.mega-layout-item-col {
     grid-column-start: span 1;

diff --git a/packages/antd/src/__tests__/layout.spec.tsx b/packages/antd/src/__tests__/layout.spec.tsx
@@ -366,15 +366,15 @@ describe('nest grid layout container', () => {
     expect(tree).toHaveStyleRule('grid-row-gap', `20px`, {
       modifier: `${cls}`,
     })
-    expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,minmax(100px,1fr))`, {
+    expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,1fr)`, {
       modifier: `${cls}`,
       media: '(max-width: 720px)'
     })
-    expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,minmax(100px,1fr))`, {
+    expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,1fr)`, {
       modifier: `${cls}`,
       media: '(min-width: 720px) and (max-width: 1200px)'
     })
-    expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,minmax(100px,1fr))`, {
+    expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,1fr)`, {
       modifier: `${cls}`,
       media: '(min-width: 1200px)'
     })
@@ -398,7 +398,7 @@ describe('nest grid layout container', () => {
     const tree = renderer.create(<Mega className="mega-layout-nest-container" />).toJSON();
     const cls = `& > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content.grid`
     expect(tree).toMatchSnapshot()
-    expect(tree).toHaveStyleRule('grid-template-columns', `repeat(3,minmax(100px,1fr))`, {
+    expect(tree).toHaveStyleRule('grid-template-columns', `repeat(3,1fr)`, {
       modifier: `${cls}`,
     })