@signalplus/params-about 0.1.0 → 0.1.1

package/lib/es/index.js

@@ -1,17 +1,18 @@
 /**
  * Bundle of @signalplus/params-about
- * Generated: 2022-04-06
- * Version: 0.1.0
+ * Generated: 2022-04-07
+ * Version: 0.1.1
  * License: MIT
  * Author: 2631541504@qq.com
  */
 
-import React, { PureComponent } from 'react';
+import React, { PureComponent, useMemo } from 'react';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import Big from 'big.js';
-import { PlusOutlined, DeleteOutlined, CheckOutlined, DownOutlined } from '@ant-design/icons';
-import { Popover } from 'antd';
+import { PlusOutlined, DeleteOutlined, CloseOutlined, CheckOutlined, DownOutlined } from '@ant-design/icons';
+import { Popover, Cascader, Input, Select, Form, Button, Modal } from 'antd';
+import ReactGlobalComp from 'react-global-comp';
 
 function _defineProperty(obj, key, value) {
   if (key in obj) {
@@ -190,6 +191,64 @@ var ParamType;
   ParamType[ParamType["Phone"] = 8] = "Phone";
 })(ParamType || (ParamType = {}));
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+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 _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function createCommonjsModule(fn, module) {
@@ -307,42 +366,75 @@ function isNullLike(val) {
   return val === undefined || val === null;
 }
 function emptyValidator(val, enableEmpty) {
-  return !enableEmpty && (isNullLike(val) || val instanceof Array && !val.length || typeof val === 'string' && !val) ? 'should not be empty' : '';
+  return !enableEmpty && (isNullLike(val) || val instanceof Array && !val.length || typeof val === 'string' && !val) ? 'Should not be empty' : '';
 }
 function numRangeValidator(val, enableEmpty) {
   var error = emptyValidator(val === null || val === void 0 ? void 0 : val.min, enableEmpty);
-  if (error) return {
-    min: error
-  };
+
+  if (error) {
+    // return { min: error }
+    return "Min: ".concat(error);
+  }
+
   error = emptyValidator(val === null || val === void 0 ? void 0 : val.max, enableEmpty);
-  if (error) return {
-    max: error
-  };
+
+  if (error) {
+    // return { max: error }
+    return "Max: ".concat(error);
+  }
+
   return val.min > val.max ? 'Max should bigger than Min' : '';
 }
 function expiryValidator(val, enableEmpty) {
   var error = emptyValidator(val, enableEmpty);
   if (error) return error;
   var $val = dayjs(val, 'DDMMMYY').format('DDMMMYY').toUpperCase();
-  if ($val !== val) return 'out of format';
+  if ($val !== val) return 'Out of format';
   return '';
 }
-function expiriesValidator(val, enableEmpty) {
-  var error = emptyValidator(val, enableEmpty);
-  if (error) return error;
-
+function expiriesValidator(val) {
   for (var i = 0; i < val.length; i++) {
-    error = expiryValidator(val[i]);
-    if (error) return _defineProperty({}, i, error);
+    var error = expiryValidator(val[i]);
+
+    if (error) {
+      // return { [i]: error }
+      return "The ".concat(i + 1, "th item: ").concat(error);
+    }
   }
 
   return '';
 }
+function keyValidator(val) {
+  var error = emptyValidator(val);
+  if (error) return error;
+  return /^[_.a-zA-Z0-9]+$/.test(val) ? '' : 'Out of format: should be a combination of the following chars `_.0-9a-zA-Z`';
+}
 function isExpired(val) {
+  if (!val) return false;
   var now = dayjs();
   var expireTime = dayjs.utc("".concat(val, " 8:00"), 'DDMMMYY 8:00');
   return now >= expireTime;
 }
+function validatorCvt(validator, form) {
+  return function (_, val) {
+    var $form = form === null || form === void 0 ? void 0 : form();
+    var error = validator(val, $form === null || $form === void 0 ? void 0 : $form.getFieldsValue());
+    if (!error) return Promise.resolve();
+
+    var traverse = function traverse(obj) {
+      if (typeof obj === 'string' && obj) return Promise.reject(new Error(obj));
+
+      if (obj && _typeof(obj) === 'object') {
+        for (var key in obj) {
+          var res = traverse(obj[key]);
+          if (res) return res;
+        }
+      }
+    };
+
+    return traverse(error) || Promise.resolve();
+  };
+}
 
 var Bool = /*#__PURE__*/function (_PureComponent) {
   _inherits(Bool, _PureComponent);
@@ -410,6 +502,13 @@ var Bool = /*#__PURE__*/function (_PureComponent) {
       stroke: "currentColor"
     })));
 
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (val) {
+      var _this$props$onChange, _this$props, _this$props$onBlur, _this$props2;
+
+      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, val);
+      (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2);
+    });
+
     return _this;
   }
 
@@ -426,15 +525,13 @@ var Bool = /*#__PURE__*/function (_PureComponent) {
       }, this.props.readonly ? /*#__PURE__*/React.createElement("span", {
         className: "param-bool-val"
       }, !isNullLike(this.props.value) ? String(this.props.value).toUpperCase() : '-') : this.options.map(function (it) {
-        var _this2$props$onChange;
-
         var active = it.value === _this2.props.value;
         return /*#__PURE__*/React.createElement("div", {
           key: String(it.value),
           className: classNames('param-bool-option', {
             active: active
           }),
-          onClick: (_this2$props$onChange = _this2.props.onChange) === null || _this2$props$onChange === void 0 ? void 0 : _this2$props$onChange.bind(null, it.value)
+          onClick: _this2.onChange.bind(null, it.value)
         }, active ? _this2.RadioChecked : _this2.RadioUnchecked, it.label);
       }));
     }
@@ -524,7 +621,8 @@ var Num = /*#__PURE__*/function (_PureComponent) {
         type: "text",
         placeholder: this.props.placeholder || 'Value',
         value: this.state.tempValue || '',
-        onChange: this.onChange
+        onChange: this.onChange,
+        onBlur: this.props.onBlur
       }), this.props.isPercentage && /*#__PURE__*/React.createElement("span", {
         className: "param-number-suffix"
       }, "%"));
@@ -590,7 +688,8 @@ var NumRange = /*#__PURE__*/function (_PureComponent) {
         value: (_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.min,
         onChange: this.onChange.bind(null, 'min'),
         isPercentage: this.props.isPercentage,
-        readonly: this.props.readonly
+        readonly: this.props.readonly,
+        onBlur: this.props.onBlur
       }), /*#__PURE__*/React.createElement("span", {
         className: "param-number-range-sep"
       }, this.props.readonly ? ',' : '-'), /*#__PURE__*/React.createElement("span", {
@@ -600,7 +699,8 @@ var NumRange = /*#__PURE__*/function (_PureComponent) {
         value: (_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.max,
         onChange: this.onChange.bind(null, 'max'),
         isPercentage: this.props.isPercentage,
-        readonly: this.props.readonly
+        readonly: this.props.readonly,
+        onBlur: this.props.onBlur
       }));
     }
   }]);
@@ -608,16 +708,6 @@ var NumRange = /*#__PURE__*/function (_PureComponent) {
   return NumRange;
 }(PureComponent);
 
-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 _arrayWithoutHoles(arr) {
   if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
@@ -626,15 +716,6 @@ function _iterableToArray(iter) {
   if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
 }
 
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
@@ -715,7 +796,8 @@ var TextArray = /*#__PURE__*/function (_PureComponent) {
           type: "text",
           placeholder: "Phone",
           value: it,
-          onChange: _this2.onChange.bind(null, i)
+          onChange: _this2.onChange.bind(null, i),
+          onBlur: _this2.props.onBlur
         }), /*#__PURE__*/React.createElement("div", {
           className: "param-arr-ops"
         }, /*#__PURE__*/React.createElement(PlusOutlined, {
@@ -759,15 +841,21 @@ var Expiries = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onChange", function (val) {
-      var _this$props$onChange, _this$props;
+      var _this$props$onChange, _this$props, _this$props$onBlur, _this$props2;
 
       var value = _toConsumableArray(_this.props.value || []);
 
-      var index = value.findIndex(function (it) {
-        return it === val;
-      });
-      if (index > -1) value.splice(index, 1);else value.push(val);
+      if (_this.props.multiple !== false) {
+        var index = value.findIndex(function (it) {
+          return it === val;
+        });
+        if (index > -1) value.splice(index, 1);else value.push(val);
+      } else {
+        value = [val];
+      }
+
       (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, value);
+      (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2);
       if (_this.props.multiple === false) _this.handleVisibleChange(false);
     });
 
@@ -777,7 +865,8 @@ var Expiries = /*#__PURE__*/function (_PureComponent) {
   _createClass(Expiries, [{
     key: "renderValue",
     value: function renderValue() {
-      var _this$props$value;
+      var _this$props$value,
+          _this2 = this;
 
       var value = (_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.filter(function (it) {
         return it && !isExpired(it);
@@ -807,15 +896,20 @@ var Expiries = /*#__PURE__*/function (_PureComponent) {
       return value.map(function (it) {
         return /*#__PURE__*/React.createElement("span", {
           className: "param-expiries-multi-val",
-          key: it
-        }, it);
+          key: it,
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        }, it, /*#__PURE__*/React.createElement(CloseOutlined, {
+          onClick: _this2.onChange.bind(null, it)
+        }));
       });
     }
   }, {
     key: "render",
     value: function render() {
       var _this$props$options,
-          _this2 = this;
+          _this3 = this;
 
       return /*#__PURE__*/React.createElement(Popover, {
         overlayClassName: "param-expiries-popover",
@@ -824,20 +918,23 @@ var Expiries = /*#__PURE__*/function (_PureComponent) {
         visible: !this.props.readonly && this.state.visible,
         onVisibleChange: this.handleVisibleChange,
         content: (_this$props$options = this.props.options) === null || _this$props$options === void 0 ? void 0 : _this$props$options.map(function (it) {
-          var _this2$props$value, _this2$onChange;
+          var _this3$props$value, _this3$props$calcDisa, _this3$props, _this3$onChange;
 
-          var checked = (_this2$props$value = _this2.props.value) === null || _this2$props$value === void 0 ? void 0 : _this2$props$value.includes(it);
+          var checked = (_this3$props$value = _this3.props.value) === null || _this3$props$value === void 0 ? void 0 : _this3$props$value.includes(it);
+          var disabled = (_this3$props$calcDisa = (_this3$props = _this3.props).calcDisabled) === null || _this3$props$calcDisa === void 0 ? void 0 : _this3$props$calcDisa.call(_this3$props, it);
           return /*#__PURE__*/React.createElement("div", {
             className: classNames('param-expiries-option', {
-              'param-expiries-option-checked': checked
+              'param-expiries-option-checked': checked,
+              'param-expiries-option-disabled': disabled
             }),
             key: it,
-            onClick: (_this2$onChange = _this2.onChange) === null || _this2$onChange === void 0 ? void 0 : _this2$onChange.bind(null, it)
+            onClick: disabled ? undefined : (_this3$onChange = _this3.onChange) === null || _this3$onChange === void 0 ? void 0 : _this3$onChange.bind(null, it)
           }, it, checked && /*#__PURE__*/React.createElement(CheckOutlined, null));
         })
       }, /*#__PURE__*/React.createElement("div", {
         className: classNames('param-expiries', {
-          readonly: this.props.readonly
+          readonly: this.props.readonly,
+          multiple: this.props.multiple !== false
         }, this.props.className),
         style: this.props.style
       }, this.renderValue(), !this.props.readonly && this.props.options && /*#__PURE__*/React.createElement(DownOutlined, {
@@ -880,7 +977,7 @@ var ExpiriesLimit = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onAdd", function (i) {
-      var _this$props$onChange2, _this$props2;
+      var _this$props$onChange2, _this$props2, _this$props$onBlur, _this$props3;
 
       var value = _toConsumableArray(_this.value);
 
@@ -888,15 +985,17 @@ var ExpiriesLimit = /*#__PURE__*/function (_PureComponent) {
         expiry: ''
       });
       (_this$props$onChange2 = (_this$props2 = _this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props2, value);
+      (_this$props$onBlur = (_this$props3 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props3);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onDel", function (i) {
-      var _this$props$onChange3, _this$props3;
+      var _this$props$onChange3, _this$props4, _this$props$onBlur2, _this$props5;
 
       var value = _toConsumableArray(_this.value);
 
       value.splice(i, 1);
-      (_this$props$onChange3 = (_this$props3 = _this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props3, value);
+      (_this$props$onChange3 = (_this$props4 = _this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props4, value);
+      (_this$props$onBlur2 = (_this$props5 = _this.props).onBlur) === null || _this$props$onBlur2 === void 0 ? void 0 : _this$props$onBlur2.call(_this$props5);
     });
 
     return _this;
@@ -906,10 +1005,11 @@ var ExpiriesLimit = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props$value,
+          _this$props$value2,
           _this2 = this;
 
       this.value = ((_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.filter(function (it) {
-        return (it === null || it === void 0 ? void 0 : it.expiry) && !isExpired(it.expiry);
+        return !isExpired(it.expiry);
       })) || [];
       if (!this.value.length) this.value.push({
         expiry: ''
@@ -919,14 +1019,18 @@ var ExpiriesLimit = /*#__PURE__*/function (_PureComponent) {
           readonly: this.props.readonly
         }, this.props.className),
         style: this.props.style
-      }, this.props.readonly ? this.value.filter(function (it) {
+      }, this.props.readonly ? ((_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.length) ? this.value.filter(function (it) {
         return it.expiry;
       }).map(function (it, i) {
         return /*#__PURE__*/React.createElement("span", {
           className: "param-expiries-limit-val",
           key: i
-        }, it.expiry, " /", ' ', it.minAumPercentage && it.maxAumPercentage ? "(".concat(NumCvt.show(it.minAumPercentage, true), "%, ").concat(NumCvt.show(it.maxAumPercentage, true), "%)") : '-', ' ', "/", ' ', it.minAbs && it.maxAbs ? "(".concat(it.minAbs, ", ").concat(it.maxAbs, ")") : '-', ";");
-      }) : /*#__PURE__*/React.createElement("div", {
+        }, it.expiry, /*#__PURE__*/React.createElement("span", {
+          className: "param-expiries-limit-val-sep"
+        }, "/"), it.minAumPercentage && it.maxAumPercentage ? "(".concat(NumCvt.show(it.minAumPercentage, true), "%, ").concat(NumCvt.show(it.maxAumPercentage, true), "%)") : '-', /*#__PURE__*/React.createElement("span", {
+          className: "param-expiries-limit-val-sep"
+        }, "/"), it.minAbs && it.maxAbs ? "(".concat(it.minAbs, ", ").concat(it.maxAbs, ")") : '-');
+      }) : '-' : /*#__PURE__*/React.createElement("div", {
         className: "param-expiries-limit-inputs"
       }, /*#__PURE__*/React.createElement("div", {
         className: "param-expiries readonly"
@@ -947,7 +1051,13 @@ var ExpiriesLimit = /*#__PURE__*/function (_PureComponent) {
           value: [it.expiry],
           onChange: function onChange(val) {
             return _this2.onChange(i, val[0], 'expiry');
-          }
+          },
+          calcDisabled: function calcDisabled(expiry) {
+            return _this2.value.some(function (item) {
+              return item !== it && item.expiry === expiry;
+            });
+          },
+          onBlur: _this2.props.onBlur
         }), /*#__PURE__*/React.createElement(NumRange, {
           value: {
             min: it.minAumPercentage,
@@ -959,7 +1069,8 @@ var ExpiriesLimit = /*#__PURE__*/function (_PureComponent) {
               maxAumPercentage: val === null || val === void 0 ? void 0 : val.max
             });
           },
-          isPercentage: true
+          isPercentage: true,
+          onBlur: _this2.props.onBlur
         }), /*#__PURE__*/React.createElement(NumRange, {
           value: {
             min: it.minAbs,
@@ -970,7 +1081,8 @@ var ExpiriesLimit = /*#__PURE__*/function (_PureComponent) {
               minAbs: val === null || val === void 0 ? void 0 : val.min,
               maxAbs: val === null || val === void 0 ? void 0 : val.max
             });
-          }
+          },
+          onBlur: _this2.props.onBlur
         }), /*#__PURE__*/React.createElement("div", {
           className: "param-arr-ops"
         }, /*#__PURE__*/React.createElement(PlusOutlined, {
@@ -1030,28 +1142,31 @@ var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig,
   name: '到期日 Limit',
   key: 'expiryLimitList',
   Comp: ExpiriesLimit,
-  validator: function validator(val, enableEmpty) {
-    var error = emptyValidator(val, enableEmpty);
-    if (error) return error;
-
-    for (var i = 0; i < val.length; i++) {
-      error = expiryValidator(val === null || val === void 0 ? void 0 : val.expiry);
-      if (error) return _defineProperty({}, i, {
-        expire: error
-      });
+  validator: function validator($val) {
+    for (var i = 0; i < $val.length; i++) {
+      var val = $val[i];
+      var error = expiryValidator(val === null || val === void 0 ? void 0 : val.expiry);
+
+      if (error) {
+        // return { [i]: { expire: error } }
+        return "Expiry field of the ".concat(i + 1, "th item: ").concat(error);
+      }
 
       if (isNullLike(val === null || val === void 0 ? void 0 : val.minAumPercentage) && isNullLike(val === null || val === void 0 ? void 0 : val.maxAumPercentage) && isNullLike(val === null || val === void 0 ? void 0 : val.minAbs) && isNullLike(val === null || val === void 0 ? void 0 : val.maxAbs)) {
-        return _defineProperty({}, i, 'at least one parameter must be specified between AUM and ABS');
+        // return {
+        //   [i]: 'at least one parameter must be specified between AUM and ABS',
+        // }
+        return "The ".concat(i + 1, "th item: at least one parameter must be specified between AUM and ABS");
       }
 
-      if (val.minAbs > val.maxAbs) return _defineProperty({}, i, {
-        minAbs: 'Min ABS should smaller than Max ABS'
-      });
+      if (val.minAbs > val.maxAbs) // return { [i]: { minAbs: 'Min ABS should smaller than Max ABS' } }
+        return "The ".concat(i + 1, "th item: Min ABS should smaller than Max ABS");
 
       if (val.minAumPercentage > val.maxAumPercentage) {
-        return _defineProperty({}, i, {
-          minAumPercentage: 'Min AUM should smaller than Max AUM'
-        });
+        // return {
+        //   [i]: { minAumPercentage: 'Min AUM should smaller than Max AUM' },
+        // }
+        return "The ".concat(i + 1, "th item: Min AUM should smaller than Max AUM");
       }
     }
 
@@ -1065,9 +1180,27 @@ var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig,
 }), _defineProperty(_ParamTypeConfig, ParamType.Phone, {
   name: '联系人电话',
   key: 'list',
-  Comp: TextArray,
-  validator: emptyValidator
+  Comp: TextArray
 }), _ParamTypeConfig);
+function paramValidator(val, values) {
+  var _config$validator;
+
+  var config = ParamTypeConfig[values.valueType];
+  console.log();
+  if (!config) return '';
+  var value = config.key ? val === null || val === void 0 ? void 0 : val[config.key] : val;
+  return ((_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, value)) || '';
+}
+var ParamTypeOptions = Object.entries(ParamTypeConfig).map(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+      value = _ref2[0],
+      config = _ref2[1];
+
+  return _objectSpread2(_objectSpread2({}, config), {}, {
+    value: value,
+    label: config.name
+  });
+});
 
 var ParamRenderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(ParamRenderer, _PureComponent);
@@ -1122,4 +1255,470 @@ var ParamRenderer = /*#__PURE__*/function (_PureComponent) {
   return ParamRenderer;
 }(PureComponent);
 
-export { ParamRenderer, ParamType, ParamTypeConfig, emptyValidator, expiriesValidator, expiryValidator, formatNum, isExpired, isNullLike, numRangeValidator };
+function ParentSelector(props) {
+  var value = useMemo(function () {
+    var _props$parentOptions;
+
+    var $value = [];
+
+    var find = function find(item) {
+      var _item$children;
+
+      var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      $value[index] = item.value;
+      if (String(item.value) === String(props.value)) return true;
+      $value.length = index + 1;
+      return Boolean((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.some(function (it) {
+        return find(it, index + 1);
+      }));
+    };
+
+    var matched = props.value && ((_props$parentOptions = props.parentOptions) === null || _props$parentOptions === void 0 ? void 0 : _props$parentOptions.some(function (it) {
+      return find(it);
+    }));
+    if (!matched) return [];
+    return $value;
+  }, [props.parentOptions, props.value]);
+  return /*#__PURE__*/React.createElement(Cascader, Object.assign({}, props, {
+    disabled: props.readonly,
+    placeholder: '请选择',
+    options: props.parentOptions,
+    className: classNames('param-parent-selector', {
+      readonly: props.readonly
+    }, props.className),
+    value: value,
+    onChange: function onChange(val) {
+      var _props$onChange;
+
+      return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, val.pop());
+    }
+  }));
+}
+
+var ParamForm = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ParamForm, _PureComponent);
+
+  var _super = _createSuper(ParamForm);
+
+  function ParamForm() {
+    var _this;
+
+    _classCallCheck(this, ParamForm);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "ref", React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "formItems", [{
+      label: '所属分组',
+      name: 'parentId',
+      Comp: ParentSelector,
+      required: true,
+      validator: validatorCvt(function (val) {
+        return emptyValidator(val);
+      })
+    }, {
+      label: '参数 Key',
+      name: 'key',
+      Comp: function Comp(props) {
+        return /*#__PURE__*/React.createElement(Input, Object.assign({
+          placeholder: '请输入'
+        }, props));
+      },
+      required: true,
+      validator: validatorCvt(keyValidator)
+    }, {
+      label: '参数名称',
+      name: 'name',
+      Comp: function Comp(props) {
+        return /*#__PURE__*/React.createElement(Input, Object.assign({
+          placeholder: '请输入'
+        }, props));
+      }
+    }, {
+      label: '参数类型',
+      name: 'valueType',
+      Comp: function Comp(props) {
+        return /*#__PURE__*/React.createElement(Select, Object.assign({
+          placeholder: '请选择'
+        }, props, {
+          options: undefined
+        }), ParamTypeOptions.map(function (it) {
+          return /*#__PURE__*/React.createElement(Select.Option, {
+            key: it.value,
+            value: it.value
+          }, it.label);
+        }));
+      },
+      required: true,
+      validator: validatorCvt(function (val) {
+        return emptyValidator(val);
+      })
+    }, {
+      label: '默认值',
+      name: 'defaultValue',
+      Comp: ParamRenderer,
+      validator: validatorCvt(paramValidator, function () {
+        return _this.ref.current;
+      })
+    }, {
+      label: '参数说明',
+      name: 'description',
+      Comp: function Comp(props) {
+        return /*#__PURE__*/React.createElement(Input.TextArea, Object.assign({
+          placeholder: '请输入'
+        }, props));
+      }
+    }]);
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (changed, data) {
+      var _this$props$onChange, _this$props;
+
+      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, data);
+      if ('valueType' in changed) _this.forceUpdate();
+    });
+
+    return _this;
+  }
+
+  _createClass(ParamForm, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/React.createElement(Form, {
+        className: "param-form",
+        ref: this.ref,
+        key: JSON.stringify(this.props.initialValues),
+        initialValues: this.props.initialValues,
+        onFinish: this.props.onSubmit,
+        onValuesChange: this.onChange
+      }, this.formItems.map(function (it) {
+        var _this2$ref$current;
+
+        return /*#__PURE__*/React.createElement(Form.Item, {
+          key: it.name,
+          label: it.label,
+          name: it.name,
+          required: it.required,
+          requiredMark: true,
+          rules: [{
+            validator: it.validator || function () {
+              return Promise.resolve();
+            }
+          }],
+          validateTrigger: 'onBlur'
+        }, /*#__PURE__*/React.createElement(it.Comp, {
+          parentOptions: _this2.props.parentOptions,
+          options: _this2.props.expiriesOptions,
+          valueType: (_this2$ref$current = _this2.ref.current) === null || _this2$ref$current === void 0 ? void 0 : _this2$ref$current.getFieldValue('valueType')
+        }));
+      }), this.props.onSubmit && /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        htmlType: "submit"
+      }, "\u63D0\u4EA4"));
+    }
+  }]);
+
+  return ParamForm;
+}(PureComponent);
+
+var ParamFormModalEl = /*#__PURE__*/function (_PureComponent2) {
+  _inherits(ParamFormModalEl, _PureComponent2);
+
+  var _super2 = _createSuper(ParamFormModalEl);
+
+  function ParamFormModalEl() {
+    var _this3;
+
+    _classCallCheck(this, ParamFormModalEl);
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    _this3 = _super2.call.apply(_super2, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this3), "ref", React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this3), "state", {
+      visible: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this3), "onShow", function () {
+      return _this3.setState({
+        visible: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this3), "onHide", function () {
+      return _this3.setState({
+        visible: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this3), "onSubmit", function () {
+      var form = _this3.ref.current.ref.current;
+      return form.validateFields().then(function () {
+        return _this3.props.onSubmit(form.getFieldsValue());
+      }).then(_this3.onHide);
+    });
+
+    return _this3;
+  }
+
+  _createClass(ParamFormModalEl, [{
+    key: "render",
+    value: function render() {
+      var _this$props$initialVa;
+
+      return /*#__PURE__*/React.createElement(Modal, {
+        width: 640,
+        closable: false,
+        title: !((_this$props$initialVa = this.props.initialValues) === null || _this$props$initialVa === void 0 ? void 0 : _this$props$initialVa.paramId) ? '新增参数' : '修改参数',
+        visible: this.state.visible,
+        footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+          onClick: this.onHide
+        }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+          type: "primary",
+          onClick: this.onSubmit
+        }, "\u786E\u8BA4"))
+      }, /*#__PURE__*/React.createElement(ParamForm, Object.assign({}, this.props, {
+        ref: this.ref,
+        onSubmit: undefined
+      })));
+    }
+  }]);
+
+  return ParamFormModalEl;
+}(PureComponent);
+
+var ParamFormModal = /*#__PURE__*/function () {
+  function ParamFormModal() {
+    _classCallCheck(this, ParamFormModal);
+  }
+
+  _createClass(ParamFormModal, null, [{
+    key: "show",
+    value: function show(props) {
+      return ParamFormModal.el.render(props).then(function () {
+        ParamFormModal.el.ref.onShow();
+      });
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      return ParamFormModal.el.render().then(function () {
+        ParamFormModal.el.ref.onHide();
+      });
+    }
+  }]);
+
+  return ParamFormModal;
+}();
+
+_defineProperty(ParamFormModal, "el", new ReactGlobalComp('param-form-modal', ParamFormModalEl));
+
+var ParamValueEditor = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ParamValueEditor, _PureComponent);
+
+  var _super = _createSuper(ParamValueEditor);
+
+  function ParamValueEditor() {
+    var _this;
+
+    _classCallCheck(this, ParamValueEditor);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "ref", React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "formItems", [{
+      label: 'Parameter',
+      name: 'paramId',
+      Comp: function Comp(props) {
+        return /*#__PURE__*/React.createElement(ParentSelector, Object.assign({}, props, {
+          readonly: true
+        }));
+      }
+    }, {
+      label: 'Description',
+      name: 'description',
+      Comp: function Comp(props) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "param-value-editor-desc",
+          style: {
+            lineHeight: '20px',
+            padding: '10px 0'
+          }
+        }, props.value || '-');
+      }
+    }, {
+      label: 'Value before',
+      name: 'valueBefore',
+      Comp: function Comp(props) {
+        return /*#__PURE__*/React.createElement(ParamRenderer, Object.assign({}, props, {
+          readonly: true
+        }));
+      }
+    }, {
+      label: 'Value after',
+      name: 'value',
+      Comp: ParamRenderer,
+      required: true,
+      validator: validatorCvt(function (val) {
+        return paramValidator(val, {
+          valueType: _this.props.valueType
+        });
+      })
+    }]);
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (changed, data) {
+      var _this$props$onChange, _this$props;
+
+      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, data);
+    });
+
+    return _this;
+  }
+
+  _createClass(ParamValueEditor, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/React.createElement(Form, {
+        className: "param-value-editor",
+        ref: this.ref,
+        key: this.props.valueType,
+        initialValues: this.props.initialValues,
+        onFinish: this.props.onSubmit,
+        onValuesChange: this.onChange
+      }, this.formItems.map(function (it) {
+        return /*#__PURE__*/React.createElement(Form.Item, {
+          key: it.name,
+          label: it.label,
+          name: it.name,
+          required: it.required,
+          requiredMark: true,
+          rules: [{
+            validator: it.validator || function () {
+              return Promise.resolve();
+            }
+          }],
+          validateTrigger: 'onBlur'
+        }, /*#__PURE__*/React.createElement(it.Comp, {
+          parentOptions: _this2.props.allParams,
+          valueType: _this2.props.valueType
+        }));
+      }), this.props.onSubmit && /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        htmlType: "submit"
+      }, "\u63D0\u4EA4"));
+    }
+  }]);
+
+  return ParamValueEditor;
+}(PureComponent);
+var ParamValueEditorModalEl = /*#__PURE__*/function (_PureComponent2) {
+  _inherits(ParamValueEditorModalEl, _PureComponent2);
+
+  var _super2 = _createSuper(ParamValueEditorModalEl);
+
+  function ParamValueEditorModalEl() {
+    var _this3;
+
+    _classCallCheck(this, ParamValueEditorModalEl);
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    _this3 = _super2.call.apply(_super2, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this3), "ref", React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this3), "state", {
+      visible: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this3), "onShow", function () {
+      return _this3.setState({
+        visible: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this3), "onHide", function () {
+      return _this3.setState({
+        visible: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this3), "onSubmit", function () {
+      var form = _this3.ref.current.ref.current;
+      return form.validateFields().then(function () {
+        return _this3.props.onSubmit(form.getFieldsValue());
+      }).then(_this3.onHide);
+    });
+
+    return _this3;
+  }
+
+  _createClass(ParamValueEditorModalEl, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(Modal, {
+        width: 640,
+        title: 'Edit Value',
+        closable: false,
+        visible: this.state.visible,
+        footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+          onClick: this.onHide
+        }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+          type: "primary",
+          onClick: this.onSubmit
+        }, "Submit"))
+      }, /*#__PURE__*/React.createElement(ParamValueEditor, Object.assign({}, this.props, {
+        ref: this.ref,
+        onSubmit: undefined
+      })));
+    }
+  }]);
+
+  return ParamValueEditorModalEl;
+}(PureComponent);
+var ParamValueEditorModal = /*#__PURE__*/function () {
+  function ParamValueEditorModal() {
+    _classCallCheck(this, ParamValueEditorModal);
+  }
+
+  _createClass(ParamValueEditorModal, null, [{
+    key: "show",
+    value: function show(props) {
+      return ParamValueEditorModal.el.render(props).then(function () {
+        ParamValueEditorModal.el.ref.onShow();
+      });
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      return ParamValueEditorModal.el.render().then(function () {
+        ParamValueEditorModal.el.ref.onHide();
+      });
+    }
+  }]);
+
+  return ParamValueEditorModal;
+}();
+
+_defineProperty(ParamValueEditorModal, "el", new ReactGlobalComp('param-value-editor-modal', ParamValueEditorModalEl));
+
+export { ParamForm, ParamFormModal, ParamRenderer, ParamType, ParamTypeConfig, ParamTypeOptions, ParamValueEditor, ParamValueEditorModal, ParamValueEditorModalEl, emptyValidator, expiriesValidator, expiryValidator, formatNum, isExpired, isNullLike, keyValidator, numRangeValidator, paramValidator, validatorCvt };