feat:form-render-mobile 列表控件cardList支持min,max

Author: 昔梦

docs/form-render-mobile/demo/list.tsx

@@ -10,6 +10,8 @@ const schema = {
       title: '对象数组',
       type: 'array',
       widget: 'cardList',
+      min: 2,
+      max:3,
       items: {
         type: 'object',
         widget: 'card',

packages/form-render-mobile/src/render-core/FieldList/index.tsx

@@ -1,16 +1,17 @@
-import React, { createContext, useContext } from 'react';
 import { Form, Grid } from 'antd-mobile';
 import { AddCircleOutline } from 'antd-mobile-icons';
-import { useStore } from 'zustand';
-import { FRContext, ConfigContext } from '../../models/context';
 import { parseAllExpression } from 'form-render/es/models/expression';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { useStore } from 'zustand';
+import { ConfigContext, FRContext } from '../../models/context';
 import { isFunction } from '../../utils';
 import './index.less';
 
 const UpperContext = createContext(() => {});
-const getParamValue = (formCtx: any, upperCtx: any, schema: any) => (valueKey: string) => {
-  return schema[valueKey] ?? upperCtx[valueKey] ?? formCtx[valueKey];
-};
+const getParamValue =
+  (formCtx: any, upperCtx: any, schema: any) => (valueKey: string) => {
+    return schema[valueKey] ?? upperCtx[valueKey] ?? formCtx[valueKey];
+  };
 
 export default (props: any) => {
   const { schema: _schema, path, renderCore, rootPath: _rootPath } = props;
@@ -26,12 +27,23 @@ export default (props: any) => {
   const { items, ...otherSchema } = _schema;
   const schema = {
     items,
-    ...parseAllExpression(otherSchema, formData, _rootPath, formSchema)
+    ...parseAllExpression(otherSchema, formData, _rootPath, formSchema),
   };
 
   const defaultValue = schema.default ?? (schema.defaultValue || [{}]);
   const { onAdd, onRemove } = schema.props || {};
-  
+  const [fieldLength, setFieldLength] = useState<number>();
+
+  useEffect(() => {
+    const fieldsLength = getFieldsLength();
+    setFieldLength(fieldsLength);
+  }, []);
+
+  const getFieldsLength = () => {
+    const fieldValue = form.getFieldValue(path);
+    return Array.isArray(fieldValue) ? fieldValue.length : 0;
+  };
+
   const handleAdd = (add: any, data?: any) => {
     let addFunc = onAdd;
     if (typeof onAdd === 'string') {
@@ -43,6 +55,8 @@ export default (props: any) => {
       return;
     }
     add(data);
+    const fieldsLength = getFieldsLength();
+    setFieldLength(fieldsLength);
   };
 
   const handleRemove = (remove: any, index: number) => {
@@ -57,47 +71,65 @@ export default (props: any) => {
     }
 
     remove(index);
+
+    const fieldsLength = getFieldsLength();
+    setFieldLength(fieldsLength);
   };
 
   const getValueFromKey = getParamValue(formCtx, upperCtx, schema);
 
   const readOnly = getValueFromKey('readOnly');
-  
+
   if (schema.hidden) {
     return null;
   }
 
-  const preRootPath = [...(_rootPath  || [])].splice(0, _rootPath.length - 1);
+  const preRootPath = [...(_rootPath || [])].splice(0, _rootPath.length - 1);
   const rootPath = [...preRootPath, ...path];
-  
+
   return (
     <Grid.Item className="frm-list">
       <Form.Array
         name={path}
         initialValue={defaultValue}
-        renderAdd={!readOnly ? () => (
-          <span>
-            <AddCircleOutline /> 添加
-          </span>
-        ) : undefined}
+        renderAdd={
+          !readOnly && (!schema.max || fieldLength < schema.max)
+            ? () => (
+                <span>
+                  <AddCircleOutline /> 添加
+                </span>
+              )
+            : undefined
+        }
         onAdd={({ add }) => handleAdd(add)}
         renderHeader={({ index }, { remove }) => (
           <>
             {schema.title && (
-               <span>{schema.title} {index + 1}</span>
+              <span>
+                {schema.title} {index + 1}
+              </span>
             )}
-            {!readOnly && (
-              <a onClick={() => handleRemove(remove, index)} style={{ float: 'right' }}>
+            {!readOnly && (!schema.min || fieldLength > schema.min) && (
+              <a
+                onClick={() => handleRemove(remove, index)}
+                style={{ float: 'right' }}
+              >
                 删除
               </a>
             )}
           </>
         )}
       >
-        {fields => fields.map(({ index }) => {
-          return renderCore({ schema, parentPath: [index], rootPath: [...rootPath, index] })
-        })}
+        {fields =>
+          fields.map(({ index }) => {
+            return renderCore({
+              schema,
+              parentPath: [index],
+              rootPath: [...rootPath, index],
+            });
+          })
+        }
       </Form.Array>
     </Grid.Item>
   );
-}
+};