@power-xa/m-ui 0.0.7 → 0.0.8

package/dist/ProForm/Form/index.js

@@ -10,153 +10,180 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { cloneElement, forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useState } from "react";
+import React, { cloneElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { getWindowInfo, showToast } from "@tarojs/taro";
 import { ScrollView, Text, View } from "@tarojs/components";
-import { Button, ActionSheet, getObjectPathValue, setObjectPathValue } from "../..";
+import { ActionSheet, Button } from "../..";
+import { useDebounceFn } from "ahooks";
+import { isEqual, set, get, cloneDeep } from "lodash";
 import "./index.less";
-var ProForm = function ProForm(_ref, ref) {
-  var className = _ref.className,
+var ProForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var disabled = _ref.disabled,
+    initialValues = _ref.initialValues,
+    className = _ref.className,
+    onChange = _ref.onChange,
+    onValueChange = _ref.onValueChange,
     children = _ref.children,
-    _ref$initialValues = _ref.initialValues,
-    initialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
-    onOk = _ref.onOk,
-    onDelete = _ref.onDelete,
-    onSave = _ref.onSave,
     footer = _ref.footer,
-    disabled = _ref.disabled;
+    _ref$scroll = _ref.scroll,
+    scroll = _ref$scroll === void 0 ? true : _ref$scroll;
   var _getWindowInfo = getWindowInfo(),
     safeArea = _getWindowInfo.safeArea;
   var _ref2 = safeArea,
     height = _ref2.height,
     bottom = _ref2.bottom;
-  var _useState = useState({}),
+  /* Form内部值存储 */
+  var _useState = useState(initialValues || {}),
     _useState2 = _slicedToArray(_useState, 2),
     form = _useState2[0],
     setForm = _useState2[1];
-  useEffect(function () {
-    if (initialValues && JSON.stringify(initialValues) !== "{}") {
-      setForm(initialValues || {});
-    }
-  }, [initialValues]);
+
+  /* ProFormInstance暴露方法 */
   useImperativeHandle(ref, function () {
     return {
-      form: form,
-      setForm: setForm
+      resetFields: resetFields,
+      setFields: setFields,
+      setFieldValue: setFieldValue,
+      getFieldValue: getFieldValue,
+      getFieldsValue: getFieldsValue,
+      submit: submit,
+      validRequiredValue: validRequiredValue
     };
   });
-  var getProFormListControlsList = useCallback(function (el, name, i, list) {
-    if (el !== null && el !== void 0 && el.props) {
-      var _el$props;
-      if ((_el$props = el.props) !== null && _el$props !== void 0 && _el$props.name) {
-        var _el$props2;
-        list.push( /*#__PURE__*/cloneElement(el, _objectSpread(_objectSpread({}, el.props), {}, {
-          value: getObjectPathValue((_el$props2 = el.props) === null || _el$props2 === void 0 ? void 0 : _el$props2.name, form[name][i])
-        })));
-      } else {
-        var _el$props3;
-        if (((_el$props3 = el.props) === null || _el$props3 === void 0 ? void 0 : _el$props3.children) instanceof Array) {
-          var _el$props4;
-          (_el$props4 = el.props) === null || _el$props4 === void 0 || _el$props4.children.map(function (item) {
-            return getProFormListControlsList(item, name, i, list);
-          });
-        } else {
-          var _el$props5;
-          getProFormListControlsList((_el$props5 = el.props) === null || _el$props5 === void 0 ? void 0 : _el$props5.children, name, i, list);
-        }
-      }
+  useEffect(function () {
+    !isEqual(initialValues, form) && (onChange === null || onChange === void 0 ? void 0 : onChange(form));
+  }, [form]);
+
+  /* 通过 set 方法设置指定字段值，更新Form 多个 */
+  var setFields = useCallback(function (fields) {
+    return setForm(function (form) {
+      fields.forEach(function (f) {
+        return set(form, f.name, f.value);
+      });
+      return _objectSpread({}, form);
+    });
+  }, [form]);
+
+  /* 通过 set 方法设置指定字段值，更新Form 单个 */
+  var setFieldValue = useCallback(function (name, value) {
+    set(form, name, value);
+    setForm(_objectSpread({}, form));
+  }, [form]);
+
+  /* 通过 get 方法获取指定字段值 单个 */
+  var getFieldValue = useCallback(function (name) {
+    return get(form, name);
+  }, [form]);
+
+  /* 通过 get 方法获取指定字段值 多个 */
+  var getFieldsValue = useCallback(function (name) {
+    if (name === true) return form;
+    if (name instanceof Array) {
+      var result = {};
+      name.forEach(function (n) {
+        return set(result, n, get(form, n));
+      });
+      return result;
     }
+    return form;
   }, [form]);
-  var getControlsList = useCallback(function (list) {
-    return list.map(function (item) {
-      var _item$props, _item$props12, _item$props13, _item$props14;
-      if ((_item$props = item.props) !== null && _item$props !== void 0 && _item$props.children) {
-        var _item$props2, _item$props3, _item$props4, _item$props9, _item$props10, _item$props11;
-        if (((_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.children) instanceof Array) return getControlsList((_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.children.map(function (e) {
-          var _e$props;
-          return /*#__PURE__*/cloneElement(e, _objectSpread(_objectSpread({}, e.props), {}, {
-            value: getObjectPathValue((_e$props = e.props) === null || _e$props === void 0 ? void 0 : _e$props.name, form)
-          }));
-        }));
-        if (((_item$props4 = item.props) === null || _item$props4 === void 0 ? void 0 : _item$props4.children) instanceof Function) {
-          var _form$item$props$name, _item$props5, _item$props8;
-          var _list = [];
-          (_form$item$props$name = form[(_item$props5 = item.props) === null || _item$props5 === void 0 ? void 0 : _item$props5.name]) === null || _form$item$props$name === void 0 || _form$item$props$name.map(function (e, i) {
-            var _item$props6, _item$props7;
-            return getProFormListControlsList((_item$props6 = item.props) === null || _item$props6 === void 0 ? void 0 : _item$props6.children({}, {}, i), (_item$props7 = item.props) === null || _item$props7 === void 0 ? void 0 : _item$props7.name, i, _list);
-          });
-          return getControlsList([/*#__PURE__*/cloneElement(item, _objectSpread(_objectSpread({}, item.props), {}, {
-            children: null,
-            value: getObjectPathValue((_item$props8 = item.props) === null || _item$props8 === void 0 ? void 0 : _item$props8.name, form)
-          }))].concat(_list));
-        }
-        return getControlsList([/*#__PURE__*/cloneElement((_item$props9 = item.props) === null || _item$props9 === void 0 ? void 0 : _item$props9.children, _objectSpread(_objectSpread({}, (_item$props10 = item.props) === null || _item$props10 === void 0 ? void 0 : _item$props10.children.props), {}, {
-          value: getObjectPathValue((_item$props11 = item.props) === null || _item$props11 === void 0 ? void 0 : _item$props11.name, form)
-        }))]);
+  /* 必填信息校验完成 */
+  var validRequiredValue = useCallback(function () {
+    var el = findControlsList().map(function (e) {
+      return e.props;
+    });
+    return validRequired(el, false);
+  }, [form]);
+
+  /* 获取所有带有rules/required的组件 */
+  var findControlsList = useCallback(function (c) {
+    var e = c || children;
+    var el = (e instanceof Array ? e : [e]).filter(function (e) {
+      return !!e && typeof e !== "boolean";
+    }).filter(function (c) {
+      if (c.props) return !c.props.hidden || c.props.hidden instanceof Function && !c.props.hidden(getFieldsValue(true));
+    });
+    if (!el.length) return [];
+    return el.map(function (e) {
+      var _e$props, _e$props2, _e$props3;
+      var list = e !== null && e !== void 0 && (_e$props = e.props) !== null && _e$props !== void 0 && _e$props.name ? [_objectSpread(_objectSpread({}, e), {}, {
+        props: _objectSpread(_objectSpread({}, e.props), {}, {
+          value: getFieldValue(e.props.name)
+        })
+      })] : [];
+      if (e !== null && e !== void 0 && (_e$props2 = e.props) !== null && _e$props2 !== void 0 && _e$props2.children && !(e.props.children instanceof Function)) list = list.concat(findControlsList(e.props.children));
+      if (e !== null && e !== void 0 && (_e$props3 = e.props) !== null && _e$props3 !== void 0 && _e$props3.children && e.props.children instanceof Function) {
+        var _getFieldValue;
+        list = list.concat(findControlsList((_getFieldValue = getFieldValue(e.props.name)) === null || _getFieldValue === void 0 ? void 0 : _getFieldValue.map(function (_, i) {
+          return recursionSetFieldName(e.props.children({}, {}), e.props.name, i).flat();
+        }).flat()));
       }
-      return /*#__PURE__*/cloneElement(item, _objectSpread(_objectSpread({}, item.props), {}, {
-        value: [undefined, null].includes((_item$props12 = item.props) === null || _item$props12 === void 0 ? void 0 : _item$props12.value) ? getObjectPathValue((_item$props13 = item.props) === null || _item$props13 === void 0 ? void 0 : _item$props13.name, form) : (_item$props14 = item.props) === null || _item$props14 === void 0 ? void 0 : _item$props14.value
-      }));
+      return list.flat();
     }).flat();
-  }, [form]);
-  var validFormRequired = useCallback(function (formList) {
+  }, [children, form]);
+
+  /* 校验必填 */
+  var validRequired = useCallback(function (ls) {
+    var show = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     /* 必填校验 */
     return new Promise(function (resolve, reject) {
-      var requiredList = formList.filter(function (item) {
-        var _item$rules;
-        return (((_item$rules = item.rules) === null || _item$rules === void 0 ? void 0 : _item$rules.some(function (r) {
+      var rl = ls.filter(function (e) {
+        var _e$rules;
+        return (((_e$rules = e.rules) === null || _e$rules === void 0 ? void 0 : _e$rules.some(function (r) {
           return r.required;
-        })) || item.required) && !item.hidden && item.name;
+        })) || e.required) && !e.hidden;
       });
-      var condition = function condition(item) {
-        return [undefined, null, ""].includes(item.value) || item.value instanceof Array && !item.value.length;
+      var condition = function condition(e) {
+        return [undefined, null, ""].includes(e.value) || e.value instanceof Array && !e.value.length;
       };
-      if (requiredList.some(condition)) {
-        var _form = requiredList.find(condition);
-        if (_form) {
-          var _form$rules;
-          var message = ((_form$rules = _form.rules) === null || _form$rules === void 0 || (_form$rules = _form$rules.find(function (r) {
+      if (rl.some(condition)) {
+        var e = rl.find(condition);
+        if (e) {
+          var _e$rules2;
+          var message = ((_e$rules2 = e.rules) === null || _e$rules2 === void 0 || (_e$rules2 = _e$rules2.find(function (r) {
             return r.required;
-          })) === null || _form$rules === void 0 ? void 0 : _form$rules.message) || _form.label + "必填";
-          showToast({
+          })) === null || _e$rules2 === void 0 ? void 0 : _e$rules2.message) || e.label + "必填";
+          if (show) showToast({
             title: message,
             icon: "none"
           });
           reject(message);
         }
       } else {
-        resolve();
+        resolve(true);
       }
     });
-  }, []);
-  var validFormRegExp = useCallback(function (formList) {
+  }, [form]);
+
+  /* 正则校验 */
+  var validPattern = useCallback(function (ls) {
     /* 正则校验 */
     return new Promise(function (resolve, reject) {
-      var patternList = formList.filter(function (item) {
-        var _item$rules2;
-        return ((_item$rules2 = item.rules) === null || _item$rules2 === void 0 ? void 0 : _item$rules2.some(function (r) {
+      var pl = ls.filter(function (e) {
+        var _e$rules3;
+        return ((_e$rules3 = e.rules) === null || _e$rules3 === void 0 ? void 0 : _e$rules3.some(function (r) {
           return r.pattern;
-        })) && item.name && !item.hidden && item.value;
+        })) && e.name && !e.hidden && e.value;
       });
-      var condition = function condition(item) {
-        var _item$rules3;
-        var list = (_item$rules3 = item.rules) === null || _item$rules3 === void 0 ? void 0 : _item$rules3.filter(function (r) {
+      var condition = function condition(e) {
+        var _e$rules4;
+        var list = (_e$rules4 = e.rules) === null || _e$rules4 === void 0 ? void 0 : _e$rules4.filter(function (r) {
           return r.pattern;
         }).map(function (r) {
           r.pattern.lastIndex = 0;
           return r.pattern;
         });
         return list === null || list === void 0 ? void 0 : list.some(function (p) {
-          return !(p !== null && p !== void 0 && p.test(item.value));
+          return !(p !== null && p !== void 0 && p.test(e.value));
         });
       };
-      if (patternList.some(condition)) {
-        var _form2 = patternList.find(condition);
-        if (_form2) {
-          var _form2$rules;
-          var message = (_form2 === null || _form2 === void 0 || (_form2$rules = _form2.rules) === null || _form2$rules === void 0 || (_form2$rules = _form2$rules.find(function (r) {
+      if (pl.some(condition)) {
+        var e = pl.find(condition);
+        if (e) {
+          var _e$rules5;
+          var message = ((_e$rules5 = e.rules) === null || _e$rules5 === void 0 || (_e$rules5 = _e$rules5.find(function (r) {
             return r.pattern;
-          })) === null || _form2$rules === void 0 ? void 0 : _form2$rules.message) || _form2.label + "格式有误";
+          })) === null || _e$rules5 === void 0 ? void 0 : _e$rules5.message) || form.label + "格式有误";
           showToast({
             title: message,
             icon: "none"
@@ -167,86 +194,181 @@ var ProForm = function ProForm(_ref, ref) {
         resolve();
       }
     });
-  }, []);
-  var saveForm = useCallback(function () {
-    var formList = getControlsList(children instanceof Array ? children : [children]).map(function (item) {
-      return item.props;
+  }, [form]);
+
+  /* 提交Form */
+  var submit = useCallback(function () {
+    var ls = findControlsList().map(function (e) {
+      return e.props;
     });
-    validFormRequired(formList);
-    validFormRegExp(formList);
-    Promise.all([validFormRequired(formList), validFormRegExp(formList)]).then(function () {
-      return onOk === null || onOk === void 0 ? void 0 : onOk(form);
+    return Promise.all([validRequired(ls), validPattern(ls)]).then(function () {
+      var _onOk, _ref3;
+      if (footer) (_onOk = (_ref3 = footer).onOk) === null || _onOk === void 0 || _onOk.call(_ref3, form);
+      return form;
     });
-  }, [form, children]);
-  var renderContent = useCallback(function () {
-    var elementList = children instanceof Array ? children : [children];
-    return elementList.map(function (e, i) {
-      var _e$props2;
-      return /*#__PURE__*/cloneElement(e, _objectSpread(_objectSpread({}, e.props), {}, {
-        key: 'p-pro-form-group-' + i,
-        disabled: disabled || ((_e$props2 = e.props) === null || _e$props2 === void 0 ? void 0 : _e$props2.disabled),
-        form: form,
-        onChange: function onChange(key, value) {
-          return setForm(function (form) {
-            setObjectPathValue(key, value, form);
-            return _objectSpread({}, form);
-          });
-        }
-      }));
+  }, [form, footer]);
+
+  /* 监听默认值变化，延迟处理Form，通过 isEqual 深度比较默认值和当前Form，如果不同则更新Form */
+  var _useDebounceFn = useDebounceFn(function () {
+      return !isEqual(initialValues, form) && setForm(_objectSpread({}, initialValues));
+    }, {
+      wait: 200
+    }),
+    resetFields = _useDebounceFn.run;
+
+  /* 渲染表单项 */
+  var renderFormField = useCallback(function (e, el, index) {
+    var _p$name, _p$name$join;
+    var p = e.props;
+    var cl = el.filter(function (c) {
+      if (c.props) return !c.props.hidden || c.props.hidden instanceof Function && !c.props.hidden(getFieldsValue(true));
+    });
+    var i = cl.findIndex(function (c) {
+      return isEqual(c, el[index]);
+    });
+    var props = _objectSpread(_objectSpread({}, p), {}, {
+      disabled: p.disabled || disabled,
+      setFields: setFields,
+      setFieldValue: setFieldValue,
+      getFieldValue: getFieldValue,
+      getFieldsValue: getFieldsValue,
+      submit: submit,
+      hidden: p.hidden instanceof Function ? p.hidden(getFieldsValue(true)) : p.hidden,
+      className: "".concat(p.className || "", " ").concat(i === cl.length - 1 ? 'p-pro-form-item-last' : ''),
+      key: ((_p$name = p.name) === null || _p$name === void 0 || (_p$name$join = _p$name.join) === null || _p$name$join === void 0 ? void 0 : _p$name$join.call(_p$name, "-")) || p.name,
+      value: getFieldValue(p.name),
+      onChange: function onChange(result) {
+        var _p$onChange;
+        setForm(function (form) {
+          set(form, p.name, cloneDeep(result));
+          return _objectSpread({}, form);
+        });
+        (_p$onChange = p.onChange) === null || _p$onChange === void 0 || _p$onChange.call(p, result);
+      }
+    });
+    return /*#__PURE__*/cloneElement(e, props);
+  }, [form, disabled]);
+
+  /* 递归设置FormListField Name */
+  var recursionSetFieldName = useCallback(function (c, n, i) {
+    var el = (c instanceof Array ? c : [c]).filter(function (e) {
+      return !!e && typeof e !== "boolean";
+    });
+    var name = ["string", "number"].includes(_typeof(n)) ? [n] : n;
+    return el.map(function (e, ei) {
+      if (!e.props || typeof e === "string") return e;
+      var p = e !== null && e !== void 0 && e.props ? _objectSpread(_objectSpread({}, e.props), {}, {
+        key: 'p-pro-form-list-children-' + i + "-" + ei
+      }) : {};
+      if (p.name) {
+        var en = ["string", "number"].includes(_typeof(p.name)) ? [p.name] : p.name;
+        p.name = name.concat([i]).concat(en);
+      }
+      if (typeof p.children === "string") return e;
+      if (p.children) p.children = recursionSetFieldName(p.children, n, i);
+      return _objectSpread(_objectSpread({}, e), {}, {
+        props: p
+      });
+    }).flat();
+  }, []);
+
+  /* 渲染内容 */
+  var renderFormContent = useCallback(function (c) {
+    var e = c || children;
+    var el = (e instanceof Array ? e : [e]).filter(function (e) {
+      return !!e && !["boolean", "string"].includes(_typeof(e));
     });
-  }, [form, children, disabled]);
+    if (!el.length) return [];
+    var result = el.map(function (e, ei) {
+      var _getFieldValue2, _getFieldValue2$toStr, _getFieldValue3, _getFieldValue3$toStr;
+      var p = e.props ? _objectSpread(_objectSpread({}, e.props), {}, {
+        setFields: setFields,
+        setFieldValue: setFieldValue,
+        getFieldValue: getFieldValue,
+        getFieldsValue: getFieldsValue,
+        submit: submit,
+        key: 'p-pro-form-children-' + ei
+      }) : {};
+      if (p.suffix) p.suffix = renderFormContent(p.suffix);
+      if (p.name) return useMemo(function () {
+        return renderFormField( /*#__PURE__*/cloneElement(e, p), el, ei);
+      }, [(_getFieldValue2 = getFieldValue(p.name)) === null || _getFieldValue2 === void 0 || (_getFieldValue2$toStr = _getFieldValue2.toString) === null || _getFieldValue2$toStr === void 0 ? void 0 : _getFieldValue2$toStr.call(_getFieldValue2), disabled].concat(p.dependencies ? [(_getFieldValue3 = getFieldValue(p.dependencies)) === null || _getFieldValue3 === void 0 || (_getFieldValue3$toStr = _getFieldValue3.toString) === null || _getFieldValue3$toStr === void 0 ? void 0 : _getFieldValue3$toStr.call(_getFieldValue3)] : []).concat(p.shouldUpdate ? [p] : []));
+      if (typeof p.children === "string") return e;
+      if (!(p.children instanceof Function) && p.children) p.children = renderFormContent(p.children);
+      if (p.children instanceof Function && p.children) {
+        var _getFieldValue4;
+        var _children = ((_getFieldValue4 = getFieldValue(p.name)) === null || _getFieldValue4 === void 0 ? void 0 : _getFieldValue4.map(function (v, i) {
+          return recursionSetFieldName(p.children({}, {}), p.name, i).flat();
+        }).flat()) || [];
+        if (_children.length) p.children = renderFormContent(_children);
+      }
+      ;
+      return p.children || p.suffix ? /*#__PURE__*/cloneElement(e, p) : e;
+    }).flat();
+    return result;
+  }, [children, form, disabled]);
+
+  /* 渲染Form底部 */
+  var renderFormFooter = useCallback(function () {
+    if (!footer) return null;
+    var onOk = footer.onOk,
+      onDelete = footer.onDelete,
+      onSave = footer.onSave,
+      children = footer.children,
+      _footer$deleteDescrip = footer.deleteDescription,
+      deleteDescription = _footer$deleteDescrip === void 0 ? "您将删除当前数据，是否确认？" : _footer$deleteDescrip;
+    return /*#__PURE__*/React.createElement(View, {
+      className: "p-pro-form-footer",
+      style: {
+        paddingBottom: "".concat(bottom - height > 24 ? bottom - height : 24, "rpx")
+      }
+    }, (onDelete || onSave) && /*#__PURE__*/React.createElement(View, {
+      className: "button-group"
+    }, onDelete && /*#__PURE__*/React.createElement(ActionSheet, {
+      options: [{
+        key: "Tips",
+        subTitle: deleteDescription
+      }, {
+        key: "Confirm",
+        title: "确认删除",
+        danger: true,
+        onTap: function onTap() {
+          return onDelete === null || onDelete === void 0 ? void 0 : onDelete(form);
+        }
+      }]
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "button danger"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "iconfont icon-icon-psp-tuichu"
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: "text"
+    }, "\u5220\u9664"))), onSave && /*#__PURE__*/React.createElement(View, {
+      className: "button",
+      onTap: onSave
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "iconfont icon-icon-caogaoxiang"
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: "text"
+    }, "\u5B58\u8349\u7A3F"))), children, onOk && /*#__PURE__*/React.createElement(Button, {
+      color: "primary",
+      block: !onDelete && !onSave && !children,
+      round: true,
+      onTap: submit
+    }, "\u4FDD\u5B58"));
+  }, [footer, form]);
   return /*#__PURE__*/React.createElement(View, {
     className: "p-pro-form-container ".concat(className)
-  }, /*#__PURE__*/React.createElement(ScrollView, {
+  }, scroll ? /*#__PURE__*/React.createElement(ScrollView, {
     className: "p-pro-form-scroll-view",
-    scrollY: true,
-    enableFlex: true,
+    showScrollbar: false,
     enhanced: true,
-    showScrollbar: false
+    scrollY: true
   }, /*#__PURE__*/React.createElement(View, {
     className: "p-pro-form-scroll-view-content"
-  }, renderContent())), (onOk || onSave || onDelete || footer) && /*#__PURE__*/React.createElement(View, {
-    className: "p-pro-form-footer",
-    style: {
-      paddingBottom: "".concat(bottom - height > 24 ? bottom - height : 24, "rpx")
-    }
-  }, footer ? footer : onSave || onDelete ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(View, {
-    className: "button-group"
-  }, onDelete && /*#__PURE__*/React.createElement(ActionSheet, {
-    options: [{
-      key: "Tips",
-      subTitle: "\u60A8\u5C06\u5220\u9664\u5F53\u524D\u6570\u636E\uFF0C\u662F\u5426\u786E\u8BA4\uFF1F"
-    }, {
-      key: "Confirm",
-      title: "确认删除",
-      danger: true,
-      onTap: function onTap() {
-        return onDelete === null || onDelete === void 0 ? void 0 : onDelete(form);
-      }
-    }]
+  }, renderFormContent())) : /*#__PURE__*/React.createElement(View, {
+    className: "p-pro-form-scroll-view"
   }, /*#__PURE__*/React.createElement(View, {
-    className: "button danger"
-  }, /*#__PURE__*/React.createElement(View, {
-    className: "iconfont icon-icon-psp-tuichu"
-  }), /*#__PURE__*/React.createElement(Text, {
-    className: "text"
-  }, "\u5220\u9664"))), onSave && /*#__PURE__*/React.createElement(View, {
-    className: "button",
-    onTap: onSave
-  }, /*#__PURE__*/React.createElement(View, {
-    className: "iconfont icon-icon-caogaoxiang"
-  }), /*#__PURE__*/React.createElement(Text, {
-    className: "text"
-  }, "\u5B58\u8349\u7A3F"))), /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    className: "save-button",
-    round: true,
-    onTap: saveForm
-  }, "\u4FDD\u5B58")) : /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    block: true,
-    round: true,
-    onTap: saveForm
-  }, "\u4FDD\u5B58")));
-};
-export default /*#__PURE__*/forwardRef(ProForm);
+    className: "p-pro-form-scroll-view-content"
+  }, renderFormContent())), renderFormFooter());
+});
+export default ProForm;

package/dist/ProForm/Group/index.d.ts

@@ -1,7 +1,26 @@
-import { FC, ReactElement } from "react";
+import { FC, ReactNode } from "react";
+import type { Children, ProFormInstance } from "../Form";
 import "./index.less";
-type ProFormGroupProps = ProFormAPI.ProFormGroupProps & {
-    children: ReactElement | ReactElement[];
+export type ProFormGroupProps = ProFormInstance & {
+    className?: string;
+    hidden?: boolean;
+    tag?: {
+        dataIndex?: string | string[];
+        map?: {
+            value: string | boolean | number | null;
+            label: string;
+            [key: string]: any;
+        }[];
+        render?: () => ReactNode;
+        className?: string;
+        position?: {
+            top?: number;
+            bottom?: number;
+            right?: number;
+            left?: number;
+        };
+    };
+    children: Children;
 };
 declare const ProFormGroup: FC<ProFormGroupProps>;
 export default ProFormGroup;

package/dist/ProForm/Group/index.js

@@ -4,44 +4,22 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { cloneElement, useCallback } from "react";
+import React from "react";
 import { Text, View } from "@tarojs/components";
-import { getListAssignField, getObjectPathValue, getUUID } from "../..";
+import { getListAssignField } from "../..";
 import "./index.less";
 var ProFormGroup = function ProFormGroup(_ref) {
   var className = _ref.className,
     hidden = _ref.hidden,
-    tag = _ref.tag,
-    form = _ref.form,
     children = _ref.children,
-    disabled = _ref.disabled,
-    _onChange = _ref.onChange;
-  var renderContent = useCallback(function () {
-    var elementList = children instanceof Array ? children : [children];
-    return elementList.map(function (e, i) {
-      return /*#__PURE__*/cloneElement(e, _objectSpread(_objectSpread({}, e.props), {}, {
-        key: e.props.name || getUUID(),
-        className: "".concat(e.props["className"], " ").concat(i === elementList.length - 1 ? 'p-pro-form-item-last' : ""),
-        disabled: disabled || e.props.disabled,
-        hidden: hidden || e.props.hidden,
-        value: e.props.value || form && getObjectPathValue(e.props.name, form),
-        onChange: function onChange(value) {
-          var _e$props$onChange, _e$props;
-          (_e$props$onChange = (_e$props = e.props).onChange) === null || _e$props$onChange === void 0 || _e$props$onChange.call(_e$props, value);
-          _onChange === null || _onChange === void 0 || _onChange(e.props.name, value);
-        },
-        getFormValue: function getFormValue(key) {
-          return form === null || form === void 0 ? void 0 : form[key];
-        }
-      }));
-    });
-  }, [form, children, disabled, hidden]);
+    tag = _ref.tag,
+    getFieldValue = _ref.getFieldValue;
   return /*#__PURE__*/React.createElement(View, {
     className: "p-pro-form-group-container ".concat(className, " ").concat(hidden ? 'hidden' : '')
-  }, renderContent(), tag && ![undefined, null].includes(form === null || form === void 0 ? void 0 : form[tag.dataIndex]) && /*#__PURE__*/React.createElement(View, {
+  }, children, tag && (tag.render ? tag.render() : tag.dataIndex && ![undefined, null].includes(getFieldValue === null || getFieldValue === void 0 ? void 0 : getFieldValue(tag.dataIndex)) && /*#__PURE__*/React.createElement(View, {
     className: "p-pro-form-group-tag ".concat(tag.className || ""),
     style: _objectSpread(_objectSpread({}, tag.position), {}, {
-      backgroundColor: getListAssignField(form === null || form === void 0 ? void 0 : form[tag.dataIndex], tag.map, {
+      backgroundColor: getListAssignField(getFieldValue === null || getFieldValue === void 0 ? void 0 : getFieldValue(tag.dataIndex), (tag === null || tag === void 0 ? void 0 : tag.map) || [], {
         value: "value",
         label: "background"
       })
@@ -49,11 +27,11 @@ var ProFormGroup = function ProFormGroup(_ref) {
   }, /*#__PURE__*/React.createElement(Text, {
     className: "p-pro-form-group-tag-text",
     style: {
-      color: getListAssignField(form === null || form === void 0 ? void 0 : form[tag.dataIndex], tag.map, {
+      color: getListAssignField(getFieldValue === null || getFieldValue === void 0 ? void 0 : getFieldValue(tag.dataIndex), (tag === null || tag === void 0 ? void 0 : tag.map) || [], {
         value: "value",
         label: "color"
       })
     }
-  }, getListAssignField(form === null || form === void 0 ? void 0 : form[tag.dataIndex], tag.map))));
+  }, getListAssignField(getFieldValue === null || getFieldValue === void 0 ? void 0 : getFieldValue(tag.dataIndex), (tag === null || tag === void 0 ? void 0 : tag.map) || [])))));
 };
 export default ProFormGroup;