@signalplus/params-about 0.1.4 → 0.1.5

package/index.d.ts

@@ -49,9 +49,12 @@ declare class ParamRenderer extends PureComponent<ParamRendererProps> {
 }
 
 interface ParentSelectorOption {
-    label: string;
-    value: string;
+    $paramId: string | number;
+    name: string;
+    disabled?: boolean;
+    valueType?: ParamType;
     children?: ParentSelectorOption[];
+    [key: string]: any;
 }
 interface ParentSelectorProps extends BaseInputProps {
     parentOptions?: ParentSelectorOption[];
@@ -212,6 +215,59 @@ declare class ParamGroupEditorModal {
     static hide(): Promise<void>;
 }
 
+interface ParamMoverData {
+    parentId: string;
+}
+interface ParamMoverProps {
+    targetParams: string[];
+    allParams: NonNullable<ParentSelectorProps['parentOptions']>;
+    onSubmit?(params: NonNullable<ParentSelectorProps['parentOptions']>): Promise<any>;
+}
+declare function initState(props: ParamMoverProps): {
+    preProps: ParamMoverProps;
+    options: any[];
+    paramsMap: Record<string, ParentSelectorOption>;
+};
+declare type ParamMoverState = ReturnType<typeof initState>;
+declare class ParamMover extends PureComponent<ParamMoverProps, ParamMoverState> {
+    static getDerivedStateFromProps(props: ParamMoverProps, state: ParamMoverState): {
+        preProps: ParamMoverProps;
+        options: any[];
+        paramsMap: Record<string, ParentSelectorOption>;
+    };
+    get newParams(): ParentSelectorOption[];
+    state: {
+        preProps: ParamMoverProps;
+        options: any[];
+        paramsMap: Record<string, ParentSelectorOption>;
+    };
+    ref: React.RefObject<any>;
+    get formItems(): {
+        label: string;
+        name: string;
+        Comp: React.ComponentType<BaseInputProps>;
+        required?: boolean | undefined;
+        validator?(_: any, val: any): Promise<any>;
+    }[];
+    render(): JSX.Element;
+}
+declare class ParamMoverModalEl extends PureComponent<ParamMoverProps & Required<Pick<ParamMoverProps, 'onSubmit'>>> {
+    ref: React.RefObject<ParamMover>;
+    state: {
+        visible: boolean;
+        pending: boolean;
+    };
+    onShow: () => void;
+    onHide: () => void;
+    onSubmit: () => any;
+    render(): JSX.Element;
+}
+declare class ParamMoverModal {
+    static el: ReactGlobalComp<ParamMoverProps & Required<Pick<ParamMoverProps, "onSubmit">>>;
+    static show(props: Omit<ComponentProps<typeof ParamMoverModalEl>, 'visible'>): Promise<void>;
+    static hide(): Promise<void>;
+}
+
 declare const ParamTypeConfig: Record<ParamType, {
     name: string;
     key?: string;
@@ -245,4 +301,4 @@ declare function keyValidator(val: string): "Should not be empty" | "" | "Out of
 declare function isExpired(val?: string): boolean;
 declare function validatorCvt(validator: (val: any, values: any) => ValidateInfo['string'], form?: () => any): (_: any, val: any) => Promise<any>;
 
-export { BaseInputProps, ParamForm, ParamFormData, ParamFormModal, ParamFormProps, ParamGroupEditor, ParamGroupEditorData, ParamGroupEditorModal, ParamGroupEditorModalEl, ParamGroupEditorProps, ParamRenderer, ParamRendererProps, ParamType, ParamTypeConfig, ParamTypeOptions, ParamValueEditor, ParamValueEditorData, ParamValueEditorModal, ParamValueEditorModalEl, ParamValueEditorProps, ParamValueStruct, ValidateInfo, emptyValidator, expiriesValidator, expiryValidator, formatNum, isExpired, isNullLike, keyValidator, numRangeValidator, paramValidator, validatorCvt };
+export { BaseInputProps, ParamForm, ParamFormData, ParamFormModal, ParamFormProps, ParamGroupEditor, ParamGroupEditorData, ParamGroupEditorModal, ParamGroupEditorModalEl, ParamGroupEditorProps, ParamMover, ParamMoverData, ParamMoverModal, ParamMoverModalEl, ParamMoverProps, ParamMoverState, ParamRenderer, ParamRendererProps, ParamType, ParamTypeConfig, ParamTypeOptions, ParamValueEditor, ParamValueEditorData, ParamValueEditorModal, ParamValueEditorModalEl, ParamValueEditorProps, ParamValueStruct, ValidateInfo, emptyValidator, expiriesValidator, expiryValidator, formatNum, isExpired, isNullLike, keyValidator, numRangeValidator, paramValidator, validatorCvt };

package/lib/es/index.js

@@ -1,7 +1,7 @@
 /**
  * Bundle of @signalplus/params-about
  * Generated: 2022-04-08
- * Version: 0.1.4
+ * Version: 0.1.5
  * License: MIT
  * Author: 2631541504@qq.com
  */
@@ -566,7 +566,7 @@ var NumCvt = /*#__PURE__*/function () {
   return NumCvt;
 }();
 
-function initState(props) {
+function initState$1(props) {
   return {
     preProps: props,
     tempValue: NumCvt.show(props.value, props.isPercentage)
@@ -589,7 +589,7 @@ var Num = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "state", initState(_this.props));
+    _defineProperty(_assertThisInitialized(_this), "state", initState$1(_this.props));
 
     _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
       var $value = e.target.value;
@@ -1264,11 +1264,23 @@ var ParamRenderer = /*#__PURE__*/function (_PureComponent) {
 }(PureComponent);
 
 function ParentSelector(props) {
-  var value = useMemo(function () {
+  var _useMemo = useMemo(function () {
     var _props$parentOptions;
 
     var $value = [];
 
+    var cvt = function cvt(it) {
+      var _it$children;
+
+      return _objectSpread2(_objectSpread2({}, it), {}, {
+        label: it.name,
+        value: String(it.$paramId),
+        children: (_it$children = it.children) === null || _it$children === void 0 ? void 0 : _it$children.map(cvt)
+      });
+    };
+
+    var $options = ((_props$parentOptions = props.parentOptions) === null || _props$parentOptions === void 0 ? void 0 : _props$parentOptions.map(cvt)) || [];
+
     var find = function find(item) {
       var _item$children;
 
@@ -1281,17 +1293,26 @@ function ParentSelector(props) {
       }));
     };
 
-    var matched = props.value && ((_props$parentOptions = props.parentOptions) === null || _props$parentOptions === void 0 ? void 0 : _props$parentOptions.some(function (it) {
+    var matched = props.value && $options.some(function (it) {
       return find(it);
-    }));
-    if (!matched) return [];
-    return $value;
-  }, [props.parentOptions, props.value]);
+    });
+    if (!matched) return {
+      value: [],
+      options: $options
+    };
+    return {
+      value: $value,
+      options: $options
+    };
+  }, [props.parentOptions, props.value]),
+      value = _useMemo.value,
+      options = _useMemo.options;
+
   return /*#__PURE__*/React$1.createElement(Cascader, {
     style: props.style,
     disabled: props.readonly,
     placeholder: '请选择',
-    options: props.parentOptions,
+    options: options,
     className: classNames('param-parent-selector', {
       readonly: props.readonly
     }, props.className),
@@ -2018,11 +2039,11 @@ var ParamGroupEditorModalEl = /*#__PURE__*/function (_PureComponent2) {
         visible: this.state.visible,
         footer: /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Button, {
           onClick: this.onHide
-        }, "Cancel"), /*#__PURE__*/React$1.createElement(Button, {
+        }, "\u53D6\u6D88"), /*#__PURE__*/React$1.createElement(Button, {
           type: "primary",
           onClick: this.onSubmit,
           loading: this.state.pending
-        }, "Submit"))
+        }, "\u786E\u5B9A"))
       }, /*#__PURE__*/React$1.createElement(ParamGroupEditor, Object.assign({}, this.props, {
         ref: this.ref,
         onSubmit: undefined
@@ -2058,4 +2079,263 @@ var ParamGroupEditorModal = /*#__PURE__*/function () {
 
 _defineProperty(ParamGroupEditorModal, "el", new ReactGlobalComp('param-group-editor-modal', ParamGroupEditorModalEl));
 
-export { ParamForm, ParamFormModal, ParamGroupEditor, ParamGroupEditorModal, ParamGroupEditorModalEl, ParamRenderer, ParamType, ParamTypeConfig, ParamTypeOptions, ParamValueEditor, ParamValueEditorModal, ParamValueEditorModalEl, emptyValidator, expiriesValidator, expiryValidator, formatNum, isExpired, isNullLike, keyValidator, numRangeValidator, paramValidator, validatorCvt };
+function genOptions(props) {
+  var filter = function filter(it) {
+    return it.valueType !== ParamType.ParamGroup;
+  };
+
+  var cvt = function cvt(it) {
+    var _it$children;
+
+    return _objectSpread2(_objectSpread2({}, it), {}, {
+      disabled: props.targetParams.includes(String(it.$paramId)),
+      children: (_it$children = it.children) === null || _it$children === void 0 ? void 0 : _it$children.filter(filter).map(cvt)
+    });
+  };
+
+  return props.allParams.map(cvt) || [];
+}
+
+function genParamsMap(props) {
+  var map = {};
+
+  var append = function append(it) {
+    var _it$children2;
+
+    map[it.$paramId] = _objectSpread2(_objectSpread2({}, it), {}, {
+      disabled: props.targetParams.includes(String(it.$paramId))
+    });
+    (_it$children2 = it.children) === null || _it$children2 === void 0 ? void 0 : _it$children2.forEach(append);
+  };
+
+  props.allParams.forEach(append);
+  return map;
+}
+
+function initState(props) {
+  return {
+    preProps: props,
+    options: genOptions(props),
+    paramsMap: genParamsMap(props)
+  };
+}
+
+var ParamMover = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ParamMover, _PureComponent);
+
+  var _super = _createSuper(ParamMover);
+
+  function ParamMover() {
+    var _this;
+
+    _classCallCheck(this, ParamMover);
+
+    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), "state", initState(_this.props));
+
+    _defineProperty(_assertThisInitialized(_this), "ref", React$1.createRef());
+
+    return _this;
+  }
+
+  _createClass(ParamMover, [{
+    key: "newParams",
+    get: function get() {
+      var _this2 = this;
+
+      var _getFieldsValue = this.ref.current.getFieldsValue(),
+          parentId = _getFieldsValue.parentId;
+
+      var filter = function filter(it) {
+        return !_this2.props.targetParams.includes(String(it.$paramId));
+      };
+
+      var map = function map(it) {
+        var _it$children3;
+
+        if (it.$paramId === parentId) {
+          return _objectSpread2(_objectSpread2({}, it), {}, {
+            children: (it.children || []).concat(_this2.props.targetParams.map(function ($paramId) {
+              return _this2.state.paramsMap[$paramId];
+            }))
+          });
+        }
+
+        return _objectSpread2(_objectSpread2({}, it), {}, {
+          children: (_it$children3 = it.children) === null || _it$children3 === void 0 ? void 0 : _it$children3.filter(filter).map(map)
+        });
+      };
+
+      return this.props.allParams.filter(filter).map(map);
+    }
+  }, {
+    key: "formItems",
+    get: function get() {
+      var _this3 = this;
+
+      var items = [{
+        label: '选择分组',
+        name: 'parentId',
+        Comp: function Comp(props) {
+          return /*#__PURE__*/React$1.createElement(ParentSelector, Object.assign({}, props, {
+            parentOptions: _this3.state.options
+          }));
+        }
+      }];
+      return items;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React$1.createElement(Form, {
+        className: "param-value-editor",
+        ref: this.ref,
+        onFinish: this.props.onSubmit
+      }, this.formItems.map(function (it) {
+        return /*#__PURE__*/React$1.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$1.createElement(it.Comp, null));
+      }), this.props.onSubmit && /*#__PURE__*/React$1.createElement(Button, {
+        type: "primary",
+        htmlType: "submit"
+      }, "\u63D0\u4EA4"));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.allParams !== state.preProps.allParams) {
+        state.paramsMap = genParamsMap(props);
+
+        if (props.targetParams !== state.preProps.targetParams) {
+          state.options = genOptions(props);
+        }
+      }
+
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        preProps: props
+      });
+    }
+  }]);
+
+  return ParamMover;
+}(PureComponent);
+var ParamMoverModalEl = /*#__PURE__*/function (_PureComponent2) {
+  _inherits(ParamMoverModalEl, _PureComponent2);
+
+  var _super2 = _createSuper(ParamMoverModalEl);
+
+  function ParamMoverModalEl() {
+    var _this4;
+
+    _classCallCheck(this, ParamMoverModalEl);
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    _this4 = _super2.call.apply(_super2, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this4), "ref", React$1.createRef());
+
+    _defineProperty(_assertThisInitialized(_this4), "state", {
+      visible: false,
+      pending: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this4), "onShow", function () {
+      return _this4.setState({
+        visible: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this4), "onHide", function () {
+      return _this4.setState({
+        visible: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this4), "onSubmit", function () {
+      var form = _this4.ref.current.ref.current;
+      return form.validateFields().then(function () {
+        return _this4.setState({
+          pending: true
+        });
+      }).then(function () {
+        return _this4.props.onSubmit(_this4.ref.current.newParams);
+      }).then(_this4.onHide).finally(function () {
+        return _this4.setState({
+          pending: false
+        });
+      });
+    });
+
+    return _this4;
+  }
+
+  _createClass(ParamMoverModalEl, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React$1.createElement(Modal, {
+        key: String(this.state.visible),
+        width: 640,
+        title: '移动参数',
+        closable: false,
+        visible: this.state.visible,
+        footer: /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Button, {
+          onClick: this.onHide
+        }, "\u53D6\u6D88"), /*#__PURE__*/React$1.createElement(Button, {
+          type: "primary",
+          onClick: this.onSubmit,
+          loading: this.state.pending
+        }, "\u786E\u5B9A"))
+      }, /*#__PURE__*/React$1.createElement(ParamMover, Object.assign({}, this.props, {
+        ref: this.ref,
+        onSubmit: undefined
+      })));
+    }
+  }]);
+
+  return ParamMoverModalEl;
+}(PureComponent);
+var ParamMoverModal = /*#__PURE__*/function () {
+  function ParamMoverModal() {
+    _classCallCheck(this, ParamMoverModal);
+  }
+
+  _createClass(ParamMoverModal, null, [{
+    key: "show",
+    value: function show(props) {
+      return ParamMoverModal.el.render(props).then(function () {
+        ParamMoverModal.el.ref.onShow();
+      });
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      return ParamMoverModal.el.render().then(function () {
+        ParamMoverModal.el.ref.onHide();
+      });
+    }
+  }]);
+
+  return ParamMoverModal;
+}();
+
+_defineProperty(ParamMoverModal, "el", new ReactGlobalComp('param-mover-modal', ParamMoverModalEl));
+
+export { ParamForm, ParamFormModal, ParamGroupEditor, ParamGroupEditorModal, ParamGroupEditorModalEl, ParamMover, ParamMoverModal, ParamMoverModalEl, ParamRenderer, ParamType, ParamTypeConfig, ParamTypeOptions, ParamValueEditor, ParamValueEditorModal, ParamValueEditorModalEl, emptyValidator, expiriesValidator, expiryValidator, formatNum, isExpired, isNullLike, keyValidator, numRangeValidator, paramValidator, validatorCvt };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalplus/params-about",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A description for the module",
   "main": "./lib/umd/index.js",
   "module": "./lib/es/index.js",