feat(queryTable): visibleFieldsCount为true时，显示所有过滤条件

- [email protected]

docs/form-advanced/field-children.jsx

@@ -27,6 +27,12 @@ export default class ValueCollectDemo extends React.Component {
                 {
                   name: 'country',
                   noStyle: true,
+                  rules: [
+                    {
+                      required: true,
+                      message: 'country必填',
+                    },
+                  ],
                   field: {
                     type: 'input',
                     props: {
@@ -48,6 +54,34 @@ export default class ValueCollectDemo extends React.Component {
                 },
               ],
             },
+            {
+              label: 'Nation2',
+              style: { marginBottom: 0 },
+              children: [
+                {
+                  name: 'country2',
+                  rules: [{ required: true }],
+                  style: { display: 'inline-block', width: 'calc(50% - 8px)' },
+                  field: {
+                    type: 'input',
+                    props: {
+                      placeholder: 'type country2',
+                    },
+                  },
+                },
+                {
+                  name: 'province2',
+                  rules: [{ required: true }],
+                  style: { display: 'inline-block', width: 'calc(50% - 8px)', margin: '0 8px' },
+                  field: {
+                    type: 'input',
+                    props: {
+                      placeholder: 'type province2',
+                    },
+                  },
+                },
+              ],
+            },
             {
               label: ' ',
               colon: false,
@@ -57,11 +91,11 @@ export default class ValueCollectDemo extends React.Component {
                   type: 'primary',
                   children: 'submit',
                 },
-                action({form}) {
-                  form.validateFields().then(values => {
+                action({ form }) {
+                  form.validateFields().then((values) => {
                     console.log('values', values);
-                  })
-                }
+                  });
+                },
               },
             },
           ]}

docs/modalform/ctxGetter.tsx

@@ -0,0 +1,97 @@
+/**
+ * title: ctxGetter
+ * desc: |
+ *   通过 ctxGetter 扩展 ctx
+ */
+
+import React from 'react';
+import { Button } from 'antd';
+import { ModalForm } from 'sula';
+
+export default () => {
+  const ref = React.useRef(null);
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          ref.current
+            .show({
+              title: '弹窗表单',
+              fields: [
+                {
+                  name: 'input1',
+                  label: 'Input1',
+                  field: 'input',
+                },
+              ],
+              submitButtonProps: {
+                icon: 'appstore',
+              },
+              submit: {
+                url: 'https://www.mocky.io/v2/5185415ba171ea3a00704eed',
+                method: 'POST',
+              },
+            })
+            .then((result) => {
+              console.log('result', result);
+            });
+        }}
+      >
+        抽屉表单
+      </Button>
+      <Button
+        onClick={() => {
+          ref.current
+            .show({
+              ctxGetter: () => {
+                return {
+                  extraName: 'sula',
+                };
+              },
+              title: '弹窗表单',
+              fields: [
+                {
+                  name: 'input1',
+                  label: 'Input1',
+                  field: 'input',
+                },
+              ],
+              actionsRender: [
+                {
+                  type: 'button',
+                  props: {
+                    children: '自定义提交',
+                    type: 'primary',
+                  },
+                  action: (ctx) => {
+                    console.log('ctx: ', ctx);
+                    ctx.form.validateFields().then((values) => {
+                      ctx.modal.modalOk(values);
+                    });
+                  },
+                },
+                {
+                  type: 'button',
+                  props: {
+                    children: '自定义返回',
+                  },
+                  action: (ctx) => {
+                    ctx.modal.modalCancel();
+                  },
+                },
+              ],
+            })
+            .then((result) => {
+              console.log('result', result);
+            });
+        }}
+      >
+        自定义操作按钮
+      </Button>
+      <ModalForm
+        type="drawer"
+        ref={ref}
+      />
+    </div>
+  );
+};

docs/query-table/basic.jsx

@@ -130,20 +130,35 @@ const actions = [
 ];
 
 export default class BasicDemo extends React.Component {
+  state = {
+  }
+
   componentDidMount() {}
 
+  changevisibleFieldsCount = (v) => {
+    this.setState({visibleFieldsCount: v});
+  }
+
   render() {
+    const {visibleFieldsCount } = this.state;
     return (
-      <div style={{ background: 'rgb(241, 242, 246)', padding: 16, marginTop: 16 }}>
-        <QueryTable
-          layout="vertical"
-          columns={columns}
-          remoteDataSource={remoteDataSource}
-          fields={queryFields}
-          rowKey="id"
-          actionsRender={actions}
-          rowSelection={{}}
-        />
+      <div>
+        <button onClick={() => this.changevisibleFieldsCount(4)}>4</button>
+        <button onClick={() => this.changevisibleFieldsCount(3)}>3</button>
+        <button onClick={() => this.changevisibleFieldsCount(true)}>无</button>
+        <div style={{ background: 'rgb(241, 242, 246)', padding: 16, marginTop: 16 }}>
+          <QueryTable
+            key={visibleFieldsCount || 'all'}
+            visibleFieldsCount={visibleFieldsCount}
+            layout="vertical"
+            columns={columns}
+            remoteDataSource={remoteDataSource}
+            fields={queryFields}
+            rowKey="id"
+            actionsRender={actions}
+            rowSelection={{}}
+          />
+        </div>
       </div>
     );
   }

docs/sula-components/modalform.md

@@ -6,3 +6,5 @@ order: 2
 <code src="../modalform/basic.jsx" />
 
 <code src="../modalform/plugin.jsx" />
+
+<code src="../modalform/ctxGetter.tsx" />

packages/sula/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sula",
-  "version": "1.2.0-beta.37",
+  "version": "1.2.0-beta.38",
   "module": "./es/index.js",
   "main": "./es/index.js",
   "types": "./es/index.d.ts",

packages/sula/src/form/Field.tsx

@@ -246,7 +246,7 @@ export default class Field extends React.Component<FieldProps> {
   private renderField(ctx, fieldConfig: FieldPlugin, extraConf) {
     const { itemLayout, visible, childrenContainer, formItemProps, isList } = extraConf;
 
-    const { children, valuePropName = 'value' } = formItemProps;
+    const { children, valuePropName = 'value', noStyle, } = formItemProps;
 
     /** 如果是 isList 可能没有 itemLayout */
     const { wrapperCol, labelCol } = itemLayout;
@@ -280,7 +280,7 @@ export default class Field extends React.Component<FieldProps> {
       </FormItem>
     );
 
-    if (!isList && (needWrapCols(itemLayout.span) || itemLayout.offset)) {
+    if (noStyle !== true && !isList && (needWrapCols(itemLayout.span) || itemLayout.offset)) {
       return (
         <Col
           style={{ display: visible === false ? 'none' : '' }}
@@ -291,9 +291,10 @@ export default class Field extends React.Component<FieldProps> {
         </Col>
       );
     } else {
+      const display = formItemProps.style ? formItemProps.style.display : '';
       return React.cloneElement(fieldItemElem, {
         style: assign({}, fieldItemElem.props.style, {
-          display: visible === false ? 'none' : '',
+          display: visible === false ? 'none' : display,
         }),
       });
     }
@@ -358,7 +359,14 @@ export default class Field extends React.Component<FieldProps> {
 
     const fieldNode = this.renderField(ctx, fieldProps, extraConfig);
 
-    return fieldNode;
+    const subFormContext = {
+      formContext,
+      parentGroupName,
+    };
+
+    return (
+      <FieldGroupContext.Provider value={subFormContext}>{fieldNode}</FieldGroupContext.Provider>
+    );
   }
 }
 

packages/sula/src/form/utils/layoutUtil.ts

@@ -64,5 +64,5 @@ export function getItemSpan(
 }
 
 export function needWrapCols(span: number) {
-  return span !== 24;
+  return isNumber(span) && span !== 24;
 }

packages/sula/src/template-query-table/QueryFields.tsx

@@ -10,7 +10,7 @@ import { ItemLayout, Layout } from '../form/FieldGroup';
 
 interface QueryFieldsProps {
   fields: FieldProps[];
-  visibleFieldsCount: number;
+  visibleFieldsCount: number | true;
   itemLayout: ItemLayout;
   layout: Layout;
   getFormInstance: () => FormInstance;
@@ -20,12 +20,25 @@ interface QueryFieldsProps {
 export default class QueryFields extends React.Component<QueryFieldsProps> {
   static contextType = FieldGroupContext;
 
+  static defaultProps = {
+    visibleFieldsCount: 5,
+    fields: [],
+  };
+
   state = {
     collapsed: true,
   };
 
+  getVisibleFieldsCount = () => {
+    if (this.props.visibleFieldsCount === true) {
+      return this.props.fields.length;
+    }
+
+    return this.props.visibleFieldsCount;
+  };
+
   renderFields = () => {
-    const { fields, visibleFieldsCount, itemLayout } = this.props;
+    const { fields, itemLayout } = this.props;
 
     const { matchedPoint } = this.context;
 
@@ -34,6 +47,8 @@ export default class QueryFields extends React.Component<QueryFieldsProps> {
     let allSpan = 0;
     let visibleAllSpan = 0;
 
+    const visibleFieldsCount = this.getVisibleFieldsCount();
+
     const finalFields = fields.map((field, index) => {
       fieldsNameList.push(field.name);
       const isVisible = index < visibleFieldsCount;
@@ -51,13 +66,16 @@ export default class QueryFields extends React.Component<QueryFieldsProps> {
   };
 
   hasMoreQueryFields() {
-    return this.props.visibleFieldsCount < this.props.fields.length;
+    const visibleFieldsCount = this.getVisibleFieldsCount();
+    return visibleFieldsCount < this.props.fields.length;
   }
 
   updateVisibleFields() {
-    const { getFormInstance, fields, visibleFieldsCount } = this.props;
+    const { getFormInstance, fields } = this.props;
     const formInstance = getFormInstance();
 
+    const visibleFieldsCount = this.getVisibleFieldsCount();
+
     fields.forEach((field, index) => {
       if (index >= visibleFieldsCount) {
         formInstance.setFieldVisible(field.name, !this.state.collapsed);
@@ -132,17 +150,17 @@ export default class QueryFields extends React.Component<QueryFieldsProps> {
     const finalSpan = this.state.collapsed ? this.collapseSpan : this.expandSpan;
     const layoutProps = {} as any;
 
-    if(finalSpan === 24) {
+    if (finalSpan === 24) {
       layoutProps.actionsPosition = 'right';
       layoutProps.style = {
         marginBottom: 24,
-      }
+      };
     } else {
       layoutProps.style = {
         display: 'flex',
         justifyContent: 'flex-end',
         ...(layout === 'vertical' ? { marginTop: 30 } : {}),
-      }
+      };
     }
 
     return (

packages/sula/src/template-query-table/QueryTable.tsx

@@ -22,7 +22,7 @@ type TablePropsPicks =
 export interface QueryTableProps
   extends Pick<FormProps, FormPropsPicks>,
     Pick<TableProps, TablePropsPicks> {
-  visibleFieldsCount?: number;
+  visibleFieldsCount?: number | true;
 
   formProps?: Omit<FormProps, FormPropsPicks>;
   tableProps?: Omit<TableProps, TablePropsPicks>;
@@ -34,7 +34,6 @@ const defaultProps = {
   tableProps: {},
   fields: [],
   columns: [],
-  visibleFieldsCount: 5,
   itemLayout: {
     cols: 3,
   },