@teamix/pro 1.2.34 → 1.3.2

package/es/form/Filter/index.js

@@ -40,7 +40,7 @@ import debounce from 'lodash.debounce';
 import { Tag } from '@alicloudfe/components';
 import { createForm, onFormReact, onFormInputChange } from '@formily/core';
 import { toJS } from '@formily/reactive';
-import { usePrefixCls, isSignificative, isNum, getValidValues } from '@teamix/utils';
+import { usePrefixCls, isUsable, isNum, getValidValues } from '@teamix/utils';
 import ProField from '../../field/index';
 import fieldTypeMap from '../fieldTypeMap';
 import { getFormDisplayValues } from '../ProForm/useFormDisplayValues';
@@ -67,16 +67,41 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
       onInit = props.onInit,
       onReset = props.onReset,
       onExpand = props.onExpand,
-      otherProps = _objectWithoutProperties(props, _excluded); // 表单默认值初始化回调
+      otherProps = _objectWithoutProperties(props, _excluded);
 
+  var _useSpecialProps = useSpecialProps(props),
+      hasChangeDefault = _useSpecialProps.hasChangeDefault,
+      hasRequired = _useSpecialProps.hasRequired;
+
+  var _useState = useState(!!expand),
+      _useState2 = _slicedToArray(_useState, 2),
+      panelVisible = _useState2[0],
+      setPanelVisible = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      tagDataSource = _useState4[0],
+      setTagDataSource = _useState4[1];
+
+  var filterItem = useRef([]);
+  var defaultForm = mode === 'panel' ? 'advanced' : 'simple';
+  var currentForm = useRef(defaultForm);
+  var activeFilterValueRef = useRef();
+  var prefixCls = usePrefixCls('', {
+    prefix: 'teamix-pro-form-query-filter'
+  });
+  /**
+   * 处理onInit与onFilter事件的触发问题
+   */
 
-  var _onFormInit = function onFormInit(form, _ref, configFilterItem) {
+  var filterEnable = useRef('waiting');
+
+  var _onFormInit = function onFormInit(form, _ref) {
     var initialRequest = _ref.initialRequest,
-        initialValues = _ref.initialValues,
-        onInit = _ref.onInit;
+        initialValues = _ref.initialValues;
 
     if (!form.mounted) {
-      // form的loading为自定义属性
+      // 借用form的loading属性来判断initialValues和initialRequest是否完成
       form.setState({
         loading: !!initialRequest || !!initialValues
       });
@@ -84,32 +109,37 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
 
     var loadingField = Object.values(form.fields).filter(function (field) {
       return !!field.loading;
-    });
+    }); // 等待表单mounted + 字段loading结束 + form默认值初始化 => 表单初始化完成
 
-    if (form.mounted) {
-      if (loadingField.length === 0 && !form.loading) {
-        // 仅执行一次onInit
-        _onFormInit = function onFormInit() {};
+    if (form.mounted && !loadingField.length && !form.loading) {
+      _onFormInit = function onFormInit() {}; // init后销毁 isFormInit 方法
 
-        var onInitResult = onInit === null || onInit === void 0 ? void 0 : onInit(toJS(form.values));
 
-        if (onInitResult) {
-          // 根据onInit返回值，判断是否使用该事件执行筛选，使用过则添加筛选标签
-          configFilterItem === null || configFilterItem === void 0 ? void 0 : configFilterItem(form);
-          configTag();
-        } // 防止onInit前后的无效onFilter
+      var values = getValidValues(form.values);
 
+      if (!isUsable(values) || !hasChangeDefault) {
+        // 表单无默认值 或 无触发onChange的默认值配置，不会触发onFilter内的onInit，所以主动触发onInit
+        filterEnable.current = 'filter';
+        setTimeout(function () {
+          onInit === null || onInit === void 0 ? void 0 : onInit(toJS(form.values));
+        }, 0);
 
-        if (!Object.keys(form.initialValues).length) {
-          // 如果没有默认值，直接开启onFilter
-          filterEnable.current = true;
-        } else {
-          // 否则，拿onFilter的值与默认值进行比较
-          filterEnable.current = form.initialValues;
+        if (mode === 'panel') {
+          // 移除lightForm的默认值
+          // 设置Tag
+          configFilterItem(advancedForm);
+
+          if (!panelVisible) {
+            setTimeout(function () {
+              configTag();
+            }, 0);
+          }
         }
+      } else {
+        filterEnable.current = 'initialized';
       }
     }
-  }; // 设置当前form
+  }; // 配置当前激活的form实例
 
 
   var setCurrentForm = function setCurrentForm(formName) {
@@ -119,9 +149,11 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
       var form = formMap[formName];
       formRef.current = form;
 
-      formRef.current.updateTags = function () {
-        configFilterItem(form);
-      };
+      if (!formRef.current.updateTags) {
+        formRef.current.updateTags = function () {
+          configFilterItem(form);
+        };
+      }
     }
   }; // 创建简单筛选表单实例
 
@@ -131,7 +163,9 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
       validateFirst: true,
       effects: function effects() {
         onFormReact(function (form) {
-          _onFormInit(form, props);
+          if (mode === 'inline') {
+            _onFormInit(form, props);
+          }
         });
       }
     });
@@ -142,7 +176,7 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
       validateFirst: true,
       effects: function effects() {
         onFormInputChange(function () {
-          setCurrentForm('light');
+          setCurrentForm('light'); // 主动修改轻量筛选值
         });
       }
     });
@@ -153,11 +187,12 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
       validateFirst: true,
       effects: function effects() {
         onFormReact(function (form) {
-          _onFormInit(form, props, configFilterItem);
+          if (mode === 'panel') {
+            _onFormInit(form, props);
+          }
         });
         onFormInputChange(function (form) {
-          // 主动修改高级筛选值
-          setCurrentForm('advanced');
+          setCurrentForm('advanced'); // 主动修改高级筛选值
         });
       }
     });
@@ -166,35 +201,7 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
     simple: simpleForm,
     light: lightForm,
     advanced: advancedForm
-  };
-
-  var _useSpecialProps = useSpecialProps(props),
-      hasDefault = _useSpecialProps.hasDefault,
-      hasAsyncDefault = _useSpecialProps.hasAsyncDefault,
-      hasRequired = _useSpecialProps.hasRequired;
-
-  var hasDefaultOrRequired = hasDefault || hasAsyncDefault || hasRequired;
-
-  var _useState = useState(!!expand),
-      _useState2 = _slicedToArray(_useState, 2),
-      advancedFilterVisible = _useState2[0],
-      setAdvancedFilterVisible = _useState2[1];
-
-  var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      tagDataSource = _useState4[0],
-      setTagDataSource = _useState4[1];
-
-  var filterItem = useRef([]);
-  var currentForm = useRef(mode === 'panel' ? advancedFilterVisible ? 'advanced' : 'light' : 'simple');
-  var filterEnable = useRef(false);
-  var prefixCls = usePrefixCls('', {
-    prefix: 'teamix-pro-form-query-filter'
-  }); // 设置筛选数据
-
-  var configFilterItem = useCallback(function (form) {
-    filterItem.current = getFilterDisplayValues(form);
-  }, []); // 获取筛选数据Label
+  }; // 获取筛选数据Label
 
   var getFilterDisplayValues = useCallback(function (form) {
     var displayValues = getFormDisplayValues(form);
@@ -222,7 +229,7 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
             index: index
           });
         });
-      } else if (isSignificative(value)) {
+      } else if (isUsable(value)) {
         filterData.push({
           key: key,
           type: fieldTypeMap[component] || 'text',
@@ -232,43 +239,34 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
       }
     });
     return filterData;
+  }, []); // 设置筛选数据
+
+  var configFilterItem = useCallback(function (form) {
+    filterItem.current = getFilterDisplayValues(form);
   }, []); // 设置标签数据
 
   var configTag = useCallback(function () {
     setTagDataSource(filterItem.current);
-  }, [filterItem.current]); // 展开收起高级筛选
+  }, []); // 展开收起高级筛选
 
   var toggleAdvancedFilter = useCallback(function () {
-    var result = !advancedFilterVisible;
+    var result = !panelVisible;
 
     if (result) {
       // 展开高级筛选，Light回填Advanced
       if (currentForm.current === 'light') {
-        advancedForm.setValues(lightForm.values);
+        var key = activeFilterValueRef.current;
+        var value = lightForm.values[key];
+        advancedForm.setValuesIn(key, value);
       }
     } else {
       // 收起高级筛选，配置标签数据
       configTag();
     }
 
-    setAdvancedFilterVisible(result);
+    setPanelVisible(result);
     onExpand === null || onExpand === void 0 ? void 0 : onExpand(result);
-  }, [advancedFilterVisible, configTag, currentForm.current]); // 是否开启onFilter
-
-  var enableFilter = function enableFilter(values) {
-    var initialValues = JSON.stringify(getValidValues(filterEnable.current));
-    var changeValues = JSON.stringify(getValidValues(values));
-
-    if (filterEnable.current === true) {
-      return true;
-    } else if (initialValues === changeValues) {
-      filterEnable.current = true;
-      return false;
-    }
-
-    return false;
-  }; // 简单搜索Filter
-
+  }, [panelVisible, configTag]); // 简单搜索Filter
 
   var onSimpleFilter = useCallback( /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(values) {
@@ -276,19 +274,18 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              if (enableFilter(values)) {
-                _context.next = 2;
+              if (!(currentForm.current === 'simple')) {
+                _context.next = 14;
                 break;
               }
 
-              return _context.abrupt("return");
-
-            case 2:
-              if (!(currentForm.current === 'simple')) {
-                _context.next = 7;
+              if (!(filterEnable.current === 'initialized')) {
+                _context.next = 9;
                 break;
               }
 
+              filterEnable.current = 'filter';
+
               if (!hasRequired) {
                 _context.next = 6;
                 break;
@@ -298,9 +295,28 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
               return simpleForm.validate();
 
             case 6:
+              onInit === null || onInit === void 0 ? void 0 : onInit(values);
+              _context.next = 14;
+              break;
+
+            case 9:
+              if (!(filterEnable.current === 'filter')) {
+                _context.next = 14;
+                break;
+              }
+
+              if (!hasRequired) {
+                _context.next = 13;
+                break;
+              }
+
+              _context.next = 13;
+              return simpleForm.validate();
+
+            case 13:
               onFilter === null || onFilter === void 0 ? void 0 : onFilter(values);
 
-            case 7:
+            case 14:
             case "end":
               return _context.stop();
           }
@@ -311,37 +327,81 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
     return function (_x) {
       return _ref4.apply(this, arguments);
     };
-  }(), [onFilter, currentForm.current, hasRequired, enableFilter]); // 轻量搜索Filter
+  }(), [onFilter, hasRequired, onInit]); // 轻量搜索Filter
+
+  var onLightFilter = useCallback(function (values) {
+    if (currentForm.current === 'light') {
+      if (filterEnable.current === 'filter') {
+        var _Object$keys;
+
+        onFilter === null || onFilter === void 0 ? void 0 : onFilter(values); // 清空advancedForm的值，配置Tag
+
+        var clearKeys = {};
+        (_Object$keys = Object.keys(advancedForm.values)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.forEach(function (key) {
+          clearKeys[key] = undefined;
+        });
+        advancedForm.setValues(clearKeys);
+        configFilterItem(advancedForm);
+        configTag();
+      }
+    }
+  }, [onFilter]); // 高级搜索Filter by Submit
+
+  var onAdvancedFilter = useCallback(function (values) {
+    setCurrentForm('advanced');
+    onFilter === null || onFilter === void 0 ? void 0 : onFilter(values);
+    configFilterItem(advancedForm); // 清空lightForm的值
+
+    lightForm.reset('*', {
+      forceClear: true
+    });
+  }, [onFilter]); // 高级搜索Reset
+
+  var onAdvancedReset = useCallback(function () {
+    setCurrentForm('advanced');
+    onReset === null || onReset === void 0 ? void 0 : onReset(toJS(advancedForm.values));
+    configFilterItem(advancedForm); // 清空lightForm的值
 
-  var onLightFilter = useCallback( /*#__PURE__*/function () {
+    lightForm.reset('*', {
+      forceClear: true
+    });
+  }, [onReset]); // 高级搜索Filter by Change
+
+  var onAdvancedChange = useCallback( /*#__PURE__*/function () {
     var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(values) {
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              if (enableFilter(values)) {
-                _context2.next = 2;
+              if (!(currentForm.current === 'advanced')) {
+                _context2.next = 9;
                 break;
               }
 
-              return _context2.abrupt("return");
+              if (!(filterEnable.current === 'initialized')) {
+                _context2.next = 9;
+                break;
+              }
 
-            case 2:
-              if (!(currentForm.current === 'light')) {
-                _context2.next = 8;
+              filterEnable.current = 'filter';
+
+              if (!hasRequired) {
+                _context2.next = 6;
                 break;
               }
 
-              onFilter === null || onFilter === void 0 ? void 0 : onFilter(values);
               _context2.next = 6;
-              return advancedForm.reset();
+              return advancedForm.validate();
 
             case 6:
-              // 不会触发高级筛选的onReset回调函数
+              onInit === null || onInit === void 0 ? void 0 : onInit(values);
               configFilterItem(advancedForm);
-              configTag();
 
-            case 8:
+              if (!panelVisible) {
+                configTag();
+              }
+
+            case 9:
             case "end":
               return _context2.stop();
           }
@@ -352,31 +412,7 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
     return function (_x2) {
       return _ref5.apply(this, arguments);
     };
-  }(), [onFilter, currentForm.current, enableFilter]); // 高级搜索Filter
-
-  var onAdvancedFilter = useCallback(function (values) {
-    if (!enableFilter(values)) {
-      return;
-    }
-
-    setCurrentForm('advanced');
-    onFilter === null || onFilter === void 0 ? void 0 : onFilter(values);
-    configFilterItem(advancedForm);
-    lightForm.reset();
-  }, [onFilter, currentForm.current, enableFilter]); // 高级搜索Change
-
-  var onAdvancedChange = useCallback(function (values) {
-    if (!enableFilter(values)) {
-      return;
-    }
-  }, [enableFilter]); // 高级搜索Reset
-
-  var onAdvancedReset = useCallback(function () {
-    setCurrentForm('advanced');
-    onReset === null || onReset === void 0 ? void 0 : onReset(toJS(advancedForm.values));
-    configFilterItem(advancedForm);
-    lightForm.reset();
-  }, [onReset]); // 关闭标签清空表单字段值
+  }(), [hasRequired, onInit]); // 关闭标签清空表单字段值
 
   var onTagClose = useCallback(function (key, index) {
     var newValue = undefined;
@@ -390,13 +426,14 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
     configFilterItem(advancedForm);
     configTag();
     onFilter === null || onFilter === void 0 ? void 0 : onFilter(toJS(advancedForm.values));
-  }, []); // initialValues和initialRequest的回调
+  }, [onFilter]); // initialValues和initialRequest的回调
 
   var onInitialComplete = useCallback(function (form) {
     form.setState({
       loading: false
     });
-  }, []);
+  }, []); // 组件挂载
+
   useEffect(function () {
     setCurrentForm(currentForm.current);
   }, []);
@@ -404,13 +441,14 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
     className: cls(prefixCls, props.className),
     addonBefore: addonBefore,
     addonAfter: addonAfter,
-    expand: advancedFilterVisible,
+    expand: panelVisible,
     onExpand: toggleAdvancedFilter,
     count: tagDataSource.length,
     inlineContent: mode === 'panel' ? /*#__PURE__*/React.createElement("div", {
-      className: cls("".concat(prefixCls, "-inline"), purePanel || hasDefaultOrRequired ? "".concat(prefixCls, "-inline-hidden") : '')
+      className: cls("".concat(prefixCls, "-inline"), purePanel || hasRequired ? "".concat(prefixCls, "-inline-hidden") : '')
     }, /*#__PURE__*/React.createElement(LightFilter, _objectSpread(_objectSpread({}, otherProps), {}, {
       defaultFilterValue: defaultFilterValue,
+      activeFilterValueRef: activeFilterValueRef,
       form: lightForm,
       onChange: debounce(onLightFilter, filterDebounce)
     }))) : /*#__PURE__*/React.createElement("div", {
@@ -428,7 +466,7 @@ var QueryFilter = /*#__PURE__*/memo(function (props) {
       onReset: onAdvancedReset,
       onInitialComplete: onInitialComplete
     })) : null
-  }, mode === 'panel' && !advancedFilterVisible ? /*#__PURE__*/React.createElement(Tag.Group, null, tagDataSource.map(function (_ref6) {
+  }, mode === 'panel' && !panelVisible ? /*#__PURE__*/React.createElement(Tag.Group, null, tagDataSource.map(function (_ref6) {
     var key = _ref6.key,
         label = _ref6.label,
         value = _ref6.value,

package/es/form/Filter/useSpecialProps.d.ts

@@ -1,6 +1,6 @@
 declare const useSpecialProps: (props: any) => {
     hasDefault: boolean;
-    hasAsyncDefault: boolean;
+    hasChangeDefault: boolean;
     hasRequired: boolean;
 };
 export default useSpecialProps;

package/es/form/Filter/useSpecialProps.js

@@ -1,10 +1,11 @@
-import { isSignificative, isStr, isPlainObj } from '@teamix/utils'; // 获取Schema是否包含默认值、异步默认值、必选校验等
+import { isUsable, isStr, isPureObj } from '@teamix/utils'; // 获取Schema是否包含默认值、异步默认值、必选校验等
 
 var useSpecialProps = function useSpecialProps(props) {
   var initialValues = props.initialValues,
       initialRequest = props.initialRequest;
-  var hasDefault = !!initialValues;
-  var hasAsyncDefault = !!initialRequest;
+  var hasChangeDefault = !!initialValues || !!initialRequest; // 会触发onChange的默认值
+
+  var hasDefault = hasChangeDefault;
   var hasRequired = false;
 
   var hasDefaultOrRule = function hasDefaultOrRule(schema) {
@@ -12,13 +13,12 @@ var useSpecialProps = function useSpecialProps(props) {
       var value = item.default,
           required = item.required,
           rules = item.rules,
-          request = item.request,
           dataSource = item.dataSource,
-          children = item.children;
-      hasDefault = hasDefault || isSignificative(value);
+          children = item.children; // 字符串变量配置default值会触发onChange
+
+      hasChangeDefault = hasChangeDefault || !!(isPureObj(dataSource) && isStr(value) && value.indexOf('.dataSource'));
+      hasDefault = hasDefault || isUsable(value);
       hasRequired = hasRequired || required || !!rules;
-      hasAsyncDefault = hasAsyncDefault || !!request || // 如果dataSource是异步且default取自dataSource
-      !!(isPlainObj(dataSource) && isStr(value) && value.indexOf('.dataSource'));
 
       if (children === null || children === void 0 ? void 0 : children.length) {
         hasDefaultOrRule(children);
@@ -29,7 +29,7 @@ var useSpecialProps = function useSpecialProps(props) {
   hasDefaultOrRule(props.schema);
   return {
     hasDefault: hasDefault,
-    hasAsyncDefault: hasAsyncDefault,
+    hasChangeDefault: hasChangeDefault,
     hasRequired: hasRequired
   };
 };

package/es/form/ProForm/customComponent.js

@@ -6,6 +6,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import { connect, mapProps } from '@formily/react';
 import { toJS } from '@formily/reactive';
+import { mapSize, mapStatus, mapDataSource } from '../utils';
 
 var customComponent = function customComponent(component) {
   return connect(component, mapProps(function (props, field) {
@@ -14,7 +15,7 @@ var customComponent = function customComponent(component) {
       form: field.form,
       values: toJS(field.form.values)
     });
-  }));
+  }, mapSize, mapStatus, mapDataSource));
 };
 
 export { customComponent };

package/es/form/ProForm/index.scss

@@ -197,14 +197,14 @@
     margin-right: 4px;
   }
 }
-// 数组类ArrayItem Icon 居中
-.#{$form-array}-items-item-inner {
-  .#{$css-prefix}space-item {
-    > .#{$css-prefix}formily-icon {
-      margin-top: 9px;
-    }
-  }
-}
+// 数组类ArrayItem Icon 居中（移除，通过align:center配置）
+// .#{$form-array}-items-item-inner {
+//   .#{$css-prefix}space-item {
+//     > .#{$css-prefix}formily-icon {
+//       margin-top: 9px;
+//     }
+//   }
+// }
 
 // Editable预览态行高
 .#{$css-prefix}formily-editable-content {

package/es/form/SchemaForm/index.js

@@ -106,10 +106,10 @@ export default /*#__PURE__*/memo(function (_ref) {
   }, [scope]); // 格式化 schema
 
   var formatSchema = useCallback(function (schema) {
-    var suffix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var parentSuffix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     var schemaProperties = {};
     schema === null || schema === void 0 ? void 0 : schema.forEach(function (item, index) {
-      suffix = "".concat(suffix).concat(index);
+      var suffix = "".concat(parentSuffix).concat(index);
       var newItem = warning(item);
       var _newItem = newItem,
           originalComponent = _newItem.component; // 根据component的不同，初始化为内置的item

package/es/form/SchemaForm/initializeRequest.js

@@ -37,9 +37,8 @@ var initializeRequest = function initializeRequest(requestConfig, suffix) {
       };
     } else {
       var requestConfigName = "$requestConfig_".concat(suffix);
-      var requestIndex = (/\d{1,}\w(\d{0,})/g.exec(suffix) || [])[1];
       return {
-        reactions: ["{{$common($request,".concat(requestConfigName, ",context,").concat(requestIndex, ")}}")],
+        reactions: ["{{$common($request,".concat(requestConfigName, ",context)}}")],
         scope: _defineProperty({}, requestConfigName, requestConfig)
       };
     }

package/es/form/SchemaForm/reactions.d.ts

@@ -1,6 +1,6 @@
 import type { ProFormRequestConfig } from '../typing';
-declare const $request: (field: any, requestConfig: ProFormRequestConfig, context: any, type: string | number) => Promise<unknown>;
-declare const $common: (services: any, requestConfig: ProFormRequestConfig, context: any, index: string) => (field: any) => any;
+declare const $request: (field: any, requestConfig: ProFormRequestConfig, context: any, type: 'request' | 'validator' | 'dataSource') => Promise<unknown>;
+declare const $common: (services: any, requestConfig: ProFormRequestConfig, context: any) => (field: any) => any;
 declare const $validator: (services: any, requestConfig: ProFormRequestConfig, context: any) => (value: any, rules: any, { field }: any) => any;
 declare const $dataSource: (services: any, requestConfig: ProFormRequestConfig, context: any) => (field: any) => any;
 export { $request, $common, $dataSource, $validator };