@signalplus/params-about 1.0.25-alpha → 1.0.26-alpha10

package/index.d.ts

@@ -19,7 +19,8 @@ declare enum ParamType {
     HardLimitHandler = 15,
     InstrumentArray = 14,
     OneWayHandler = 16,
-    TenorBucketHandlerList = 17
+    TenorBucketHandlerList = 17,
+    ExpiryVegaAlphaByEdgeList = 18
 }
 interface BaseInputProps {
     value?: any;
@@ -51,6 +52,7 @@ declare class ParamRenderer extends PureComponent<ParamRendererProps> {
         validator?(value: any, enableEmpty?: boolean | undefined): string;
         required?: boolean | undefined;
         sort: number;
+        modalWidth?: number | undefined;
     };
     get value(): any;
     onChange: (val: any) => void;
@@ -90,6 +92,7 @@ interface ParamFormProps {
     groupEditable?: boolean;
     onChange?(data: ParamFormData): void;
     onSubmit?(data: ParamFormData): any;
+    onModalWidthChange?(width: number): any;
 }
 declare class ParamForm extends PureComponent<ParamFormProps> {
     ref: React.RefObject<any>;
@@ -108,11 +111,13 @@ declare class ParamFormModalEl extends PureComponent<ParamFormProps & Required<P
     state: {
         visible: boolean;
         pending: boolean;
+        width: number | undefined;
     };
     get isEdit(): boolean;
     onShow: () => void;
     onHide: () => void;
     onSubmit: () => any;
+    handleModalWidthChange: (width: number) => void;
     render(): JSX.Element;
 }
 declare class ParamFormModal {
@@ -136,6 +141,7 @@ interface ParamValueEditorProps {
     initialValues: ParamValueEditorData;
     onChange?(data: ParamValueEditorData): void;
     onSubmit?(data: ParamValueEditorData): any;
+    onModalWidthChange(width: number): void;
 }
 declare class ParamValueEditor extends PureComponent<ParamValueEditorProps> {
     ref: React.RefObject<any>;
@@ -155,10 +161,12 @@ declare class ParamValueEditorModalEl extends PureComponent<ParamValueEditorProp
     state: {
         visible: boolean;
         pending: boolean;
+        width: number;
     };
     onShow: () => void;
     onHide: () => void;
     onSubmit: () => any;
+    handleModalWidthChange: (width: number) => void;
     render(): JSX.Element;
 }
 declare class ParamValueEditorModal {
@@ -318,6 +326,7 @@ declare const ParamTypeConfig: Record<ParamType, {
     validator?(value: any, enableEmpty?: boolean): string;
     required?: boolean;
     sort: number;
+    modalWidth?: number;
 }>;
 declare function paramValidator(val: any, values: {
     valueType: ParamType;
@@ -332,6 +341,7 @@ declare const ParamTypeOptions: {
     validator?(value: any, enableEmpty?: boolean | undefined): string;
     required?: boolean | undefined;
     sort: number;
+    modalWidth?: number | undefined;
 }[];
 
 declare function formatNum(val: string): number | undefined;

package/lib/es/index.js

@@ -1,7 +1,7 @@
 /**
  * Bundle of @signalplus/params-about
- * Generated: 2025-05-07
- * Version: 1.0.25-alpha
+ * Generated: 2025-11-06
+ * Version: 1.0.26-alpha10
  * License: MIT
  * Author: 2631541504@qq.com
  */
@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import dayjs from 'dayjs';
 import Big from 'big.js';
 import { PlusOutlined, DeleteOutlined, CloseOutlined, CheckOutlined, DownOutlined } from '@ant-design/icons';
-import { Select, Popover, Cascader, Input, Form, Button, message, Modal } from 'antd';
+import { Popover, Cascader, Checkbox, Input, Select, Form, Button, message, Modal } from 'antd';
 import { isArray, capitalize, isEqual } from 'lodash-es';
 import ReactGlobalComp from 'react-global-comp';
 import ReactFileInput from '@livelybone/react-file-input';
@@ -201,6 +201,7 @@ var ParamType;
   ParamType[ParamType["InstrumentArray"] = 14] = "InstrumentArray";
   ParamType[ParamType["OneWayHandler"] = 16] = "OneWayHandler";
   ParamType[ParamType["TenorBucketHandlerList"] = 17] = "TenorBucketHandlerList";
+  ParamType[ParamType["ExpiryVegaAlphaByEdgeList"] = 18] = "ExpiryVegaAlphaByEdgeList";
 })(ParamType || (ParamType = {}));
 
 function _arrayWithHoles(arr) {
@@ -628,7 +629,7 @@ var NumRange = /*#__PURE__*/function (_PureComponent) {
         }, this.props.className),
         style: this.props.style
       }, this.props.readonly ? '(' : '', /*#__PURE__*/React.createElement(Num, {
-        placeholder: 'Min',
+        placeholder: this.props.minName || 'Min',
         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,
@@ -641,7 +642,7 @@ var NumRange = /*#__PURE__*/function (_PureComponent) {
           marginRight: 4
         } : undefined
       }, this.props.readonly ? ',' : '~'), /*#__PURE__*/React.createElement(Num, {
-        placeholder: 'Max',
+        placeholder: this.props.maxName || 'Max',
         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,
@@ -801,8 +802,11 @@ var Expiries = /*#__PURE__*/function (_PureComponent) {
         return (_this$props$options = _this.props.options) === null || _this$props$options === void 0 ? void 0 : _this$props$options.includes(item);
       })) || []);
 
-      if (_this.props.multiple !== false || Array.isArray(val)) {
-        value = 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];
       }
@@ -861,94 +865,37 @@ var Expiries = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this,
-          _this$props$options2;
+      var _this$props$options2,
+          _this3 = this;
 
-      for (var i = 0; i < 100000; i++) {
-        "".concat(i.toString(36)).concat(i);
-      }
+      return /*#__PURE__*/React.createElement(Popover, {
+        overlayClassName: "param-expiries-popover",
+        trigger: 'click',
+        placement: 'bottomLeft',
+        visible: !this.props.readonly && this.state.visible,
+        onVisibleChange: this.handleVisibleChange,
+        content: (_this$props$options2 = this.props.options) === null || _this$props$options2 === void 0 ? void 0 : _this$props$options2.map(function (it) {
+          var _this3$props$value, _this3$props$calcDisa, _this3$props, _this3$onChange;
 
-      return this.props.readonly ? /*#__PURE__*/React.createElement("div", {
+          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-disabled': disabled
+            }),
+            key: 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,
           multiple: this.props.multiple !== false
-        }, this.props.className)
-      }, this.renderValue()) :
-      /*#__PURE__*/
-      // <Popover
-      //   overlayClassName="param-expiries-popover"
-      //   trigger={'click'}
-      //   placement={'bottomLeft'}
-      //   visible={!this.props.readonly && this.state.visible}
-      //   onVisibleChange={this.handleVisibleChange}
-      //   content={this.props.options?.map((it) => {
-      //     const checked = this.props.value?.includes(it);
-      //     const disabled = this.props.calcDisabled?.(it);
-      //     return (
-      //       <div
-      //         className={classNames('param-expiries-option', {
-      //           'param-expiries-option-checked': checked,
-      //           'param-expiries-option-disabled': disabled,
-      //         })}
-      //         key={it}
-      //         onClick={disabled ? undefined : this.onChange?.bind(null, it)}
-      //       >
-      //         {it}
-      //         {checked && <CheckOutlined />}
-      //       </div>
-      //     );
-      //   })}
-      // >
-      //   <div
-      //     className={classNames(
-      //       'param-expiries',
-      //       { readonly: this.props.readonly, multiple: this.props.multiple !== false },
-      //       this.props.className,
-      //     )}
-      //     style={this.props.style}
-      //   >
-      //     {this.renderValue()}
-      //     {!this.props.readonly && this.props.options && (
-      //       <DownOutlined className="param-expiries-arrow" />
-      //     )}
-      //   </div>
-      // </Popover>
-      // <Select
-      //   mode={this.props.multiple ? 'multiple' : undefined}
-      //   style={{ width: '100%' }}
-      //   placeholder="Choose"
-      //   onSelect={(v: string) => this.onChange?.bind(null, v)}
-      //   value={this.props.value}
-      //   options={
-      //     this.props.options?.map((expiry) => ({
-      //       value: expiry,
-      //       label: expiry,
-      //       disabled: this.props.calcDisabled?.(expiry),
-      //     })) || []
-      //   }
-      // />
-      React.createElement("div", {
-        className: "param-expiries-select"
-      }, /*#__PURE__*/React.createElement(Select, {
-        mode: this.props.multiple === false ? undefined : 'multiple',
-        style: {
-          width: '100%'
-        },
-        placeholder: "Choose",
-        value: this.props.value,
-        onChange: function onChange(values) {
-          var _this3$onChange;
-
-          return (_this3$onChange = _this3.onChange) === null || _this3$onChange === void 0 ? void 0 : _this3$onChange.call(_this3, values);
-        }
-      }, (_this$props$options2 = this.props.options) === null || _this$props$options2 === void 0 ? void 0 : _this$props$options2.map(function (option) {
-        var _this3$props$calcDisa, _this3$props;
-
-        return /*#__PURE__*/React.createElement(Select.Option, {
-          key: option,
-          value: option,
-          disabled: (_this3$props$calcDisa = (_this3$props = _this3.props).calcDisabled) === null || _this3$props$calcDisa === void 0 ? void 0 : _this3$props$calcDisa.call(_this3$props, option)
-        }, option);
+        }, this.props.className),
+        style: this.props.style
+      }, this.renderValue(), !this.props.readonly && this.props.options && /*#__PURE__*/React.createElement(DownOutlined, {
+        className: "param-expiries-arrow"
       })));
     }
   }]);
@@ -2557,12 +2504,542 @@ var TenorBucketHandlerList = /*#__PURE__*/function (_PureComponent) {
   return TenorBucketHandlerList;
 }(PureComponent);
 
+var NumRangeFromTo = /*#__PURE__*/function (_PureComponent) {
+  _inherits(NumRangeFromTo, _PureComponent);
+
+  var _super = _createSuper(NumRangeFromTo);
+
+  function NumRangeFromTo() {
+    var _this;
+
+    _classCallCheck(this, NumRangeFromTo);
+
+    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), "onChange", function (key, val) {
+      var _this$props$onChange, _this$props;
+
+      var value = _objectSpread2({}, _this.props.value);
+
+      value[key] = val;
+      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, value);
+    });
+
+    return _this;
+  }
+
+  _createClass(NumRangeFromTo, [{
+    key: "render",
+    value: function render() {
+      var _this$props$value, _this$props$value2;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('param-number-range', {
+          readonly: this.props.readonly
+        }, this.props.className),
+        style: this.props.style
+      }, this.props.readonly ? '(' : '', /*#__PURE__*/React.createElement(Num, {
+        placeholder: 'From',
+        value: (_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.from,
+        onChange: this.onChange.bind(null, 'from'),
+        isPercentage: this.props.isPercentage,
+        readonly: this.props.readonly,
+        onBlur: this.props.onBlur
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "param-number-range-sep",
+        style: this.props.readonly ? {
+          marginLeft: 0,
+          marginRight: 4
+        } : undefined
+      }, this.props.readonly ? ',' : '~'), /*#__PURE__*/React.createElement(Num, {
+        placeholder: 'To',
+        value: (_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.to,
+        onChange: this.onChange.bind(null, 'to'),
+        isPercentage: this.props.isPercentage,
+        readonly: this.props.readonly,
+        onBlur: this.props.onBlur
+      }), this.props.readonly ? ')' : '');
+    }
+  }]);
+
+  return NumRangeFromTo;
+}(PureComponent);
+
+function hasRangeOverlap(range1, range2) {
+  var _range1$min, _range1$max, _range2$min, _range2$max;
+
+  var min1 = (_range1$min = range1.min) !== null && _range1$min !== void 0 ? _range1$min : -Infinity;
+  var max1 = (_range1$max = range1.max) !== null && _range1$max !== void 0 ? _range1$max : Infinity;
+  var min2 = (_range2$min = range2.min) !== null && _range2$min !== void 0 ? _range2$min : -Infinity;
+  var max2 = (_range2$max = range2.max) !== null && _range2$max !== void 0 ? _range2$max : Infinity; // 边界相等不算重叠，所以用严格比较
+
+  return min1 < max2 && min2 < max1;
+}
+/**
+ * 检查VegaRules数组是否合法
+ */
+
+
+function validateVegaRules(rules) {
+  for (var i = 0; i < rules.length; i++) {
+    var _currentRule$optionTy;
+
+    var currentRule = rules[i];
+    var currentType = (_currentRule$optionTy = currentRule.optionType) !== null && _currentRule$optionTy !== void 0 ? _currentRule$optionTy : 'Both'; // 默认按Both处理
+
+    for (var j = i + 1; j < rules.length; j++) {
+      var _compareRule$optionTy;
+
+      var compareRule = rules[j];
+      var compareType = (_compareRule$optionTy = compareRule.optionType) !== null && _compareRule$optionTy !== void 0 ? _compareRule$optionTy : 'Both'; // 检查是否需要比较这两个规则
+
+      var shouldCompare = false;
+
+      if (currentType === 'Both' || compareType === 'Both') {
+        // 任意一个是Both，就需要比较
+        shouldCompare = true;
+      } else if (currentType === compareType) {
+        // 类型相同（都是Call或都是Put），需要比较
+        shouldCompare = true;
+      } // 类型不同（一个Call一个Put），不需要比较
+
+
+      if (shouldCompare && hasRangeOverlap(currentRule.deltaRange, compareRule.deltaRange)) {
+        return false; // 发现重叠，不合法
+      }
+    }
+  }
+
+  return true; // 没有发现重叠，合法
+}
+var ExpiryVegaAlphaByEdgeList = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ExpiryVegaAlphaByEdgeList, _PureComponent);
+
+  var _super = _createSuper(ExpiryVegaAlphaByEdgeList);
+
+  function ExpiryVegaAlphaByEdgeList() {
+    var _this;
+
+    _classCallCheck(this, ExpiryVegaAlphaByEdgeList);
+
+    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), "value", []);
+
+    _defineProperty(_assertThisInitialized(_this), "isEmptyItem", function (item) {
+      var _item$vegaRules, _item$expiry;
+
+      var vegaRulesValid = item.vegaRules ? (_item$vegaRules = item.vegaRules) === null || _item$vegaRules === void 0 ? void 0 : _item$vegaRules.find(function (it) {
+        return it.deltaRange.min || it.deltaRange.max || it.bidEdgeSpan.from || it.bidEdgeSpan.to || it.askEdgeSpan.from || it.askEdgeSpan.to;
+      }) : true;
+      return !((_item$expiry = item.expiry) === null || _item$expiry === void 0 ? void 0 : _item$expiry.trim()) && !item.vegaTarget && !!vegaRulesValid;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (i, val, key, k, subKey) {
+      var _this$props$onChange, _this$props;
+
+      var value = _toConsumableArray(_this.value);
+
+      if (!value[i]) value[i] = {
+        expiry: undefined,
+        vegaTarget: undefined,
+        vegaRules: [{
+          optionType: undefined,
+          deltaRange: {
+            min: undefined,
+            max: undefined
+          },
+          bidEdgeSpan: {
+            from: undefined,
+            to: undefined
+          },
+          askEdgeSpan: {
+            from: undefined,
+            to: undefined
+          },
+          allowTaker: false,
+          disable: false
+        }]
+      };
+
+      if (key) {
+        if (subKey && typeof k === 'number') {
+          // if (subKey === 'optionType') {
+          //   // console.log('changeValue==========================', value, i, val, key, k, subKey);
+          //   if (val === 'Both') {
+          //     value[i].vegaRules = [{ ...value[i].vegaRules[k], optionType: 'Both' }];
+          //   } else {
+          //     if (value[i].vegaRules?.length <= 1)
+          //       value[i].vegaRules = [
+          //         { ...value[i].vegaRules[k], optionType: val },
+          //         {
+          //           optionType: val === 'Call' ? 'Put' : 'Call',
+          //           deltaRange: {
+          //             min: undefined,
+          //             max: undefined,
+          //           },
+          //           bidEdgeSpan: {
+          //             from: undefined,
+          //             to: undefined,
+          //           },
+          //           askEdgeSpan: {
+          //             from: undefined,
+          //             to: undefined,
+          //           },
+          //           allowTaker: false,
+          //           disable: false,
+          //         },
+          //       ];
+          //     else value[i].vegaRules[k][subKey] = val as never;
+          //   }
+          // } else {
+          //   value[i].vegaRules[k][subKey] = val as never;
+          // }
+          value[i].vegaRules[k][subKey] = val;
+        } else {
+          value[i][key] = val;
+        }
+      } else {
+        value[i] = _objectSpread2(_objectSpread2({}, value[i]), val);
+      }
+
+      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, value.length === 1 && _this.isEmptyItem(value[0]) ? [] : value);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onAdd", function (i) {
+      var _this$props$onChange2, _this$props2, _this$props$onBlur, _this$props3;
+
+      var value = _toConsumableArray(_this.value);
+
+      value.splice(i + 1, 0, {
+        expiry: undefined,
+        vegaTarget: undefined,
+        vegaRules: [{
+          optionType: undefined,
+          deltaRange: {
+            min: undefined,
+            max: undefined
+          },
+          bidEdgeSpan: {
+            from: undefined,
+            to: undefined
+          },
+          askEdgeSpan: {
+            from: undefined,
+            to: undefined
+          },
+          allowTaker: false,
+          disable: false
+        }]
+      });
+      (_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), "onAddRule", function (i, k) {
+      var _this$props$onChange3, _this$props4, _this$props$onBlur2, _this$props5;
+
+      var value = _toConsumableArray(_this.value);
+
+      value[i].vegaRules.splice(k + 1, 0, {
+        optionType: undefined,
+        deltaRange: {
+          min: undefined,
+          max: undefined
+        },
+        bidEdgeSpan: {
+          from: undefined,
+          to: undefined
+        },
+        askEdgeSpan: {
+          from: undefined,
+          to: undefined
+        },
+        allowTaker: false,
+        disable: false
+      });
+      (_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);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDel", function (i) {
+      var _this$props$onChange4, _this$props6, _this$props$onBlur3, _this$props7;
+
+      var value = _toConsumableArray(_this.value);
+
+      value.splice(i, 1);
+      (_this$props$onChange4 = (_this$props6 = _this.props).onChange) === null || _this$props$onChange4 === void 0 ? void 0 : _this$props$onChange4.call(_this$props6, value.length === 1 && _this.isEmptyItem(value[0]) ? [] : value);
+      (_this$props$onBlur3 = (_this$props7 = _this.props).onBlur) === null || _this$props$onBlur3 === void 0 ? void 0 : _this$props$onBlur3.call(_this$props7);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDelRule", function (i, k) {
+      var _this$props$onChange5, _this$props8, _this$props$onBlur4, _this$props9;
+
+      var value = _toConsumableArray(_this.value);
+
+      value[i].vegaRules.splice(k, 1);
+      (_this$props$onChange5 = (_this$props8 = _this.props).onChange) === null || _this$props$onChange5 === void 0 ? void 0 : _this$props$onChange5.call(_this$props8, value.length === 1 && _this.isEmptyItem(value[0]) ? [] : value);
+      (_this$props$onBlur4 = (_this$props9 = _this.props).onBlur) === null || _this$props$onBlur4 === void 0 ? void 0 : _this$props$onBlur4.call(_this$props9);
+    });
+
+    return _this;
+  }
+
+  _createClass(ExpiryVegaAlphaByEdgeList, [{
+    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 !isExpired(it.expiry);
+      })) || [];
+      if (!this.value.length) this.value.push({
+        expiry: undefined,
+        vegaTarget: undefined,
+        vegaRules: [{
+          optionType: undefined,
+          deltaRange: {
+            min: undefined,
+            max: undefined
+          },
+          bidEdgeSpan: {
+            from: undefined,
+            to: undefined
+          },
+          askEdgeSpan: {
+            from: undefined,
+            to: undefined
+          },
+          allowTaker: false,
+          disable: false
+        }]
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('param-expiries-limit', {
+          readonly: this.props.readonly
+        }, this.props.className),
+        style: this.props.style
+      }, 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(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+          key: i
+        }, it.expiry, /*#__PURE__*/React.createElement("span", null, "/"), !isNullLike(it.vegaTarget) ? it.vegaTarget : '-', /*#__PURE__*/React.createElement("span", null, "/"), it.vegaRules.map(function ($it, $i) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+            key: $i
+          }, !isNullLike($it.optionType) ? $it.optionType : '-', /*#__PURE__*/React.createElement("span", null, "/"), !isNullLike($it.deltaRange.min) && !isNullLike($it.deltaRange.max) ? "(".concat($it.deltaRange.min, ", ").concat($it.deltaRange.max, ")") : '-', /*#__PURE__*/React.createElement("span", null, "/"), !isNullLike($it.bidEdgeSpan.from) && !isNullLike($it.bidEdgeSpan.to) ? "(".concat(NumCvt.show($it.bidEdgeSpan.from, true), "%, ").concat(NumCvt.show($it.bidEdgeSpan.to, true), "%)") : '-', /*#__PURE__*/React.createElement("span", null, "/"), !isNullLike($it.askEdgeSpan.from) && !isNullLike($it.askEdgeSpan.to) ? "(".concat(NumCvt.show($it.askEdgeSpan.from, true), "%, ").concat(NumCvt.show($it.askEdgeSpan.to, true), "%)") : '-', /*#__PURE__*/React.createElement("span", null, "/"), typeof $it.allowTaker === 'boolean' ? $it.allowTaker.toString().toUpperCase() : '-', /*#__PURE__*/React.createElement("span", null, "/"), typeof $it.disable === 'boolean' ? $it.disable.toString().toUpperCase() : '-'), /*#__PURE__*/React.createElement("br", null));
+        })), /*#__PURE__*/React.createElement("br", null));
+      }) : '-' : /*#__PURE__*/React.createElement("div", {
+        className: "param-expiries-limit-inputs",
+        style: {
+          gridTemplateColumns: '110px 100px auto auto'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "param-number-range readonly"
+      }, "Expiry"), /*#__PURE__*/React.createElement("div", {
+        className: "param-number-range readonly"
+      }, "Vega Target"), /*#__PURE__*/React.createElement("div", {
+        className: "param-number-range readonly"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "param-number-range readonly"
+      }), this.value.map(function (it, i) {
+        var _this2$props$value, _this2$props$value$i;
+
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: i
+        }, /*#__PURE__*/React.createElement(Expiries, {
+          style: {
+            width: 110,
+            minWidth: 0,
+            position: 'relative',
+            top: i > 0 ? -30 : 0
+          },
+          multiple: false,
+          options: _this2.props.options,
+          value: [it.expiry || ''],
+          onChange: function onChange(val) {
+            return _this2.onChange(i, val[0], 'expiry');
+          } // calcDisabled={(expiry) =>
+          //   this.value.some((item) => item !== it && item.expiry === expiry)
+          // }
+          ,
+          onBlur: _this2.props.onBlur
+        }), /*#__PURE__*/React.createElement(Num, {
+          value: (_this2$props$value = _this2.props.value) === null || _this2$props$value === void 0 ? void 0 : (_this2$props$value$i = _this2$props$value[i]) === null || _this2$props$value$i === void 0 ? void 0 : _this2$props$value$i.vegaTarget,
+          onChange: function onChange(val) {
+            return _this2.onChange(i, val, 'vegaTarget');
+          },
+          isPercentage: false,
+          readonly: _this2.props.readonly,
+          onBlur: _this2.props.onBlur,
+          style: {
+            height: 30,
+            position: 'relative',
+            top: i > 0 ? -30 : 0
+          }
+        }), /*#__PURE__*/React.createElement("div", {
+          className: "param-expiries-limit-inputs",
+          style: {
+            position: 'relative',
+            top: -30,
+            width: 734,
+            gridTemplateColumns: 'auto auto auto auto auto auto'
+          }
+        }, it.vegaRules.map(function (rule, k) {
+          var _it$vegaRules;
+
+          return /*#__PURE__*/React.createElement(React.Fragment, null, i === 0 && k === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+            className: "param-number-range readonly",
+            style: {
+              paddingLeft: 36
+            }
+          }, "Call/Put/Call"), /*#__PURE__*/React.createElement("div", {
+            className: "param-number-range readonly"
+          }, "Delta Range"), /*#__PURE__*/React.createElement("div", {
+            className: "param-number-range readonly"
+          }, "Bid Edge Range"), /*#__PURE__*/React.createElement("div", {
+            className: "param-number-range readonly"
+          }, "Ask Edge Range"), /*#__PURE__*/React.createElement("div", {
+            className: "param-number-range readonly"
+          }, "Allow Taker"), /*#__PURE__*/React.createElement("div", {
+            className: "param-number-range readonly"
+          }, "Disabled")) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("div", {
+            style: {
+              display: 'flex',
+              width: 116
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "param-arr-ops",
+            style: {
+              visibility: k === ((_it$vegaRules = it.vegaRules) === null || _it$vegaRules === void 0 ? void 0 : _it$vegaRules.length) - 1 ? 'visible' : 'hidden'
+            }
+          }, /*#__PURE__*/React.createElement(PlusOutlined, {
+            className: "param-arr-ops-add",
+            onClick: _this2.onAddRule.bind(null, i, k),
+            style: {
+              width: 18
+            }
+          })), /*#__PURE__*/React.createElement(TextSelector, {
+            style: {
+              width: 88,
+              minWidth: 0,
+              padding: '0 10px',
+              height: 30
+            },
+            multiple: false,
+            value: [rule.optionType || ''],
+            onChange: function onChange(val) {
+              return _this2.onChange(i, val[0], 'vegaRules', k, 'optionType');
+            } // onBlur={this.props.onBlur}
+            ,
+            options: ['Both', 'Call', 'Put']
+          })), /*#__PURE__*/React.createElement(NumRange, {
+            value: {
+              min: rule.deltaRange.min,
+              max: rule.deltaRange.max
+            },
+            onChange: function onChange(val) {
+              return _this2.onChange(i, val, 'vegaRules', k, 'deltaRange');
+            },
+            onBlur: _this2.props.onBlur
+          }), /*#__PURE__*/React.createElement(NumRangeFromTo, {
+            value: {
+              from: rule.bidEdgeSpan.from,
+              to: rule.bidEdgeSpan.to
+            },
+            onChange: function onChange(val) {
+              return _this2.onChange(i, val, 'vegaRules', k, 'bidEdgeSpan');
+            },
+            isPercentage: true,
+            onBlur: _this2.props.onBlur
+          }), /*#__PURE__*/React.createElement(NumRangeFromTo, {
+            value: {
+              from: rule.askEdgeSpan.from,
+              to: rule.askEdgeSpan.to
+            },
+            onChange: function onChange(val) {
+              return _this2.onChange(i, val, 'vegaRules', k, 'askEdgeSpan');
+            },
+            isPercentage: true,
+            onBlur: _this2.props.onBlur
+          }), /*#__PURE__*/React.createElement("div", {
+            style: {
+              width: 74,
+              position: 'relative',
+              top: 4
+            }
+          }, /*#__PURE__*/React.createElement(Checkbox, {
+            checked: rule.allowTaker,
+            onChange: function onChange(e) {
+              return _this2.onChange(i, e.target.checked, 'vegaRules', k, 'allowTaker');
+            }
+          })), /*#__PURE__*/React.createElement("div", {
+            style: {
+              width: 74,
+              position: 'relative',
+              top: 4
+            }
+          }, /*#__PURE__*/React.createElement(Checkbox, {
+            checked: rule.disable,
+            onChange: function onChange(e) {
+              return _this2.onChange(i, e.target.checked, 'vegaRules', k, 'disable');
+            }
+          }), /*#__PURE__*/React.createElement("div", {
+            className: "param-arr-ops",
+            style: {
+              position: 'absolute',
+              top: -4,
+              right: -36,
+              visibility: k === 0 ? 'hidden' : 'visible'
+            }
+          }, /*#__PURE__*/React.createElement(DeleteOutlined, {
+            className: "param-arr-ops-del",
+            onClick: _this2.onDelRule.bind(null, i, k)
+          }))));
+        })), /*#__PURE__*/React.createElement("div", {
+          className: "param-arr-ops"
+        }, /*#__PURE__*/React.createElement(PlusOutlined, {
+          className: "param-arr-ops-add",
+          onClick: _this2.onAdd.bind(null, i),
+          style: {
+            position: 'relative',
+            top: i > 0 ? -30 : 0
+          }
+        }), /*#__PURE__*/React.createElement(DeleteOutlined, {
+          className: "param-arr-ops-del",
+          onClick: _this2.onDel.bind(null, i),
+          style: {
+            position: 'relative',
+            top: i > 0 ? -30 : 0
+          }
+        })));
+      })));
+    }
+  }]);
+
+  return ExpiryVegaAlphaByEdgeList;
+}(PureComponent);
+
 var _ParamTypeConfig;
 
 function emptyErrText(index, key) {
   return "The ".concat(index + 1).concat(index === 0 ? 'st' : index === 1 ? 'nd' : index === 2 ? 'rd' : 'th', " item: ").concat(key ? key + ' ' : '', "should not be empty");
 }
 
+function zeroErrText(index, key, type) {
+  return "The ".concat(index + 1).concat(index === 0 ? 'st' : index === 1 ? 'nd' : index === 2 ? 'rd' : 'th', " item: ").concat(key ? key + ' ' : '', "should be ").concat(type === 'min' ? '<' : '>', " 0");
+}
+
 var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig, ParamType.ParamGroup, {
   name: '参数组',
   Comp: function Comp() {
@@ -2873,6 +3350,115 @@ var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig,
     return '';
   },
   sort: 17
+}), _defineProperty(_ParamTypeConfig, ParamType.ExpiryVegaAlphaByEdgeList, {
+  name: 'ExpiryVegaAlphaByEdgeList',
+  key: 'expiryVegaAlphaByEdgeList',
+  Comp: ExpiryVegaAlphaByEdgeList,
+  validator: function validator($val) {
+    if (!($val === null || $val === void 0 ? void 0 : $val.length)) return '';
+    var expiries = [];
+
+    for (var i = 0; i < $val.length; i++) {
+      var val = $val[i];
+
+      if (isEmpty(val.expiry)) {
+        return emptyErrText(i, 'expiry');
+      }
+
+      if (isEmpty(val.vegaTarget)) {
+        return emptyErrText(i, 'vegaTarget');
+      }
+
+      if (Number(val.vegaTarget) === 0) {
+        return "The ".concat(i + 1).concat(i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th', " item: vega target can not be 0");
+      }
+
+      var $$val = val.vegaRules || [];
+
+      for (var k = 0; k < $$val.length; k++) {
+        var vegaRule = $$val[k];
+
+        if (isEmpty(vegaRule.optionType)) {
+          return emptyErrText(i, 'optionType');
+        }
+
+        if (isEmpty(vegaRule.deltaRange.min)) {
+          return emptyErrText(i, "delta range's min");
+        }
+
+        if (isEmpty(vegaRule.deltaRange.max)) {
+          return emptyErrText(i, "delta range's max");
+        }
+
+        if (isEmpty(vegaRule.bidEdgeSpan.from)) {
+          return emptyErrText(i, "bid edge range's from");
+        }
+
+        if (isEmpty(vegaRule.bidEdgeSpan.to)) {
+          return emptyErrText(i, "bid edge range's to");
+        }
+
+        if (isEmpty(vegaRule.askEdgeSpan.from)) {
+          return emptyErrText(i, "ask edge range's from");
+        }
+
+        if (isEmpty(vegaRule.askEdgeSpan.to)) {
+          return emptyErrText(i, "ask edge range's to");
+        }
+
+        if (Number(val.vegaTarget) > 0) {
+          if (Number(vegaRule.bidEdgeSpan.from) <= 0) {
+            return zeroErrText(i, "bid edge range's from", 'max');
+          }
+
+          if (Number(vegaRule.bidEdgeSpan.to) <= 0) {
+            return zeroErrText(i, "bid edge range's to", 'max');
+          }
+
+          if (Number(vegaRule.askEdgeSpan.from) <= 0) {
+            return zeroErrText(i, "ask edge range's from", 'max');
+          }
+
+          if (Number(vegaRule.askEdgeSpan.to) <= 0) {
+            return zeroErrText(i, "ask edge range's to", 'max');
+          }
+        }
+
+        if (Number(val.vegaTarget) < 0) {
+          if (Number(vegaRule.bidEdgeSpan.from) >= 0) {
+            return zeroErrText(i, "bid edge range's from", 'min');
+          }
+
+          if (Number(vegaRule.bidEdgeSpan.to) >= 0) {
+            return zeroErrText(i, "bid edge range's to", 'min');
+          }
+
+          if (Number(vegaRule.askEdgeSpan.from) >= 0) {
+            return zeroErrText(i, "ask edge range's from", 'min');
+          }
+
+          if (Number(vegaRule.askEdgeSpan.to) >= 0) {
+            return zeroErrText(i, "ask edge range's to", 'min');
+          }
+        }
+      } // if (expiries.includes(val.expiry)) {
+      //   return `The ${i + 1} ${
+      //     i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th'
+      //   } expiry is same as the ${expiries.indexOf(val.expiry) + 1} ${
+      //     i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th'
+      //   }`;
+      // }
+
+
+      var hasOverRange = validateVegaRules($$val);
+      if (!hasOverRange) return "The ".concat(i + 1).concat(i === 0 ? 'st' : i === 1 ? 'nd' : i === 2 ? 'rd' : 'th', " item: delta range overlap");
+      expiries.push(val.expiry);
+    }
+
+    return '';
+  },
+  sort: 18,
+  modalWidth: 1280
 }), _ParamTypeConfig);
 function paramValidator(val, values, enableEmpty) {
   var _config$validator;
@@ -3040,7 +3626,16 @@ var ParamForm = /*#__PURE__*/function (_PureComponent) {
         return !!it.key;
       }) : data;
       (_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();
+
+      if ('valueType' in changed) {
+        var _this$ref$current$get, _this$ref$current, _this$props$initialVa, _this$props$onModalWi, _this$props2, _config$modalWidth;
+
+        var config = ParamTypeConfig[(_this$ref$current$get = (_this$ref$current = _this.ref.current) === null || _this$ref$current === void 0 ? void 0 : _this$ref$current.getFieldValue('valueType')) !== null && _this$ref$current$get !== void 0 ? _this$ref$current$get : (_this$props$initialVa = _this.props.initialValues) === null || _this$props$initialVa === void 0 ? void 0 : _this$props$initialVa.valueType];
+        localStorage.setItem('__editParamModalWidth', config.modalWidth ? String(config.modalWidth) : '740');
+        (_this$props$onModalWi = (_this$props2 = _this.props).onModalWidthChange) === null || _this$props$onModalWi === void 0 ? void 0 : _this$props$onModalWi.call(_this$props2, (_config$modalWidth = config.modalWidth) !== null && _config$modalWidth !== void 0 ? _config$modalWidth : 740);
+
+        _this.forceUpdate();
+      }
     });
 
     return _this;
@@ -3049,12 +3644,12 @@ var ParamForm = /*#__PURE__*/function (_PureComponent) {
   _createClass(ParamForm, [{
     key: "formItems",
     get: function get() {
-      var _this$ref$current$get,
-          _this$ref$current,
-          _this$props$initialVa,
+      var _this$ref$current$get2,
+          _this$ref$current2,
+          _this$props$initialVa2,
           _this2 = this;
 
-      var valueType = (_this$ref$current$get = (_this$ref$current = this.ref.current) === null || _this$ref$current === void 0 ? void 0 : _this$ref$current.getFieldValue('valueType')) !== null && _this$ref$current$get !== void 0 ? _this$ref$current$get : (_this$props$initialVa = this.props.initialValues) === null || _this$props$initialVa === void 0 ? void 0 : _this$props$initialVa.valueType;
+      var valueType = (_this$ref$current$get2 = (_this$ref$current2 = this.ref.current) === null || _this$ref$current2 === void 0 ? void 0 : _this$ref$current2.getFieldValue('valueType')) !== null && _this$ref$current$get2 !== void 0 ? _this$ref$current$get2 : (_this$props$initialVa2 = this.props.initialValues) === null || _this$props$initialVa2 === void 0 ? void 0 : _this$props$initialVa2.valueType;
       var config = ParamTypeConfig[valueType];
       return [{
         label: '所属分组',
@@ -3166,7 +3761,7 @@ var ParamForm = /*#__PURE__*/function (_PureComponent) {
               return Promise.resolve();
             }
           }],
-          validateTrigger: it.name === 'defaultValue' && [4, 5, 6, 10, 11].includes((_this3$ref$current = _this3.ref.current) === null || _this3$ref$current === void 0 ? void 0 : _this3$ref$current.getFieldValue('valueType')) ? 'onSubmit' : 'onBlur'
+          validateTrigger: it.name === 'defaultValue' && [4, 5, 6, 10, 11, 18].includes((_this3$ref$current = _this3.ref.current) === null || _this3$ref$current === void 0 ? void 0 : _this3$ref$current.getFieldValue('valueType')) ? 'onSubmit' : 'onBlur'
         }, /*#__PURE__*/React.createElement(it.Comp, null));
       }), this.props.onSubmit && /*#__PURE__*/React.createElement(Button, {
         type: "primary",
@@ -3184,6 +3779,8 @@ var ParamFormModalEl = /*#__PURE__*/function (_PureComponent2) {
   var _super2 = _createSuper(ParamFormModalEl);
 
   function ParamFormModalEl() {
+    var _this4$props$initialV, _ParamTypeConfig$_thi, _this4$props$initialV2;
+
     var _this4;
 
     _classCallCheck(this, ParamFormModalEl);
@@ -3198,7 +3795,8 @@ var ParamFormModalEl = /*#__PURE__*/function (_PureComponent2) {
 
     _defineProperty(_assertThisInitialized(_this4), "state", {
       visible: false,
-      pending: false
+      pending: false,
+      width: ((_this4$props$initialV = _this4.props.initialValues) === null || _this4$props$initialV === void 0 ? void 0 : _this4$props$initialV.valueType) ? (_ParamTypeConfig$_thi = ParamTypeConfig[(_this4$props$initialV2 = _this4.props.initialValues) === null || _this4$props$initialV2 === void 0 ? void 0 : _this4$props$initialV2.valueType]) === null || _ParamTypeConfig$_thi === void 0 ? void 0 : _ParamTypeConfig$_thi.modalWidth : 740
     });
 
     _defineProperty(_assertThisInitialized(_this4), "onShow", function () {
@@ -3235,22 +3833,28 @@ var ParamFormModalEl = /*#__PURE__*/function (_PureComponent2) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this4), "handleModalWidthChange", function (width) {
+      _this4.setState({
+        width: width
+      });
+    });
+
     return _this4;
   }
 
   _createClass(ParamFormModalEl, [{
     key: "isEdit",
     get: function get() {
-      var _this$props$initialVa2;
+      var _this$props$initialVa3;
 
-      return Boolean((_this$props$initialVa2 = this.props.initialValues) === null || _this$props$initialVa2 === void 0 ? void 0 : _this$props$initialVa2.$paramId);
+      return Boolean((_this$props$initialVa3 = this.props.initialValues) === null || _this$props$initialVa3 === void 0 ? void 0 : _this$props$initialVa3.$paramId);
     }
   }, {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(Modal, {
         key: String(this.state.visible),
-        width: 740,
+        width: this.state.width || 740,
         closable: false,
         title: !this.isEdit ? '新增参数' : '修改参数',
         visible: this.state.visible,
@@ -3263,7 +3867,8 @@ var ParamFormModalEl = /*#__PURE__*/function (_PureComponent2) {
         }, "\u786E\u8BA4"))
       }, /*#__PURE__*/React.createElement(ParamForm, Object.assign({}, this.props, {
         ref: this.ref,
-        onSubmit: undefined
+        onSubmit: undefined,
+        onModalWidthChange: this.handleModalWidthChange
       })));
     }
   }]);
@@ -3318,9 +3923,18 @@ var ParamValueEditor = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "ref", React.createRef());
 
     _defineProperty(_assertThisInitialized(_this), "onChange", function (changed, data) {
-      var _this$props$onChange, _this$props;
+      var _this$props$onChange, _this$props2;
 
-      (_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) {
+        var _this$ref$current$get, _this$ref$current, _this$props$onModalWi, _this$props, _config$modalWidth;
+
+        var config = ParamTypeConfig[(_this$ref$current$get = (_this$ref$current = _this.ref.current) === null || _this$ref$current === void 0 ? void 0 : _this$ref$current.getFieldValue('valueType')) !== null && _this$ref$current$get !== void 0 ? _this$ref$current$get : _this.props.valueType];
+        (_this$props$onModalWi = (_this$props = _this.props).onModalWidthChange) === null || _this$props$onModalWi === void 0 ? void 0 : _this$props$onModalWi.call(_this$props, (_config$modalWidth = config.modalWidth) !== null && _config$modalWidth !== void 0 ? _config$modalWidth : 740);
+
+        _this.forceUpdate();
+      }
+
+      (_this$props$onChange = (_this$props2 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props2, data);
     });
 
     return _this;
@@ -3448,7 +4062,8 @@ var ParamValueEditorModalEl = /*#__PURE__*/function (_PureComponent2) {
 
     _defineProperty(_assertThisInitialized(_this3), "state", {
       visible: false,
-      pending: false
+      pending: false,
+      width: ParamTypeConfig[_this3.props.valueType].modalWidth || 740
     });
 
     _defineProperty(_assertThisInitialized(_this3), "onShow", function () {
@@ -3485,6 +4100,12 @@ var ParamValueEditorModalEl = /*#__PURE__*/function (_PureComponent2) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this3), "handleModalWidthChange", function (width) {
+      _this3.setState({
+        width: width
+      });
+    });
+
     return _this3;
   }
 
@@ -3493,7 +4114,7 @@ var ParamValueEditorModalEl = /*#__PURE__*/function (_PureComponent2) {
     value: function render() {
       return /*#__PURE__*/React.createElement(Modal, {
         key: String(this.state.visible),
-        width: 740,
+        width: this.state.width || 740,
         title: 'Edit Value',
         closable: false,
         visible: this.state.visible,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalplus/params-about",
-  "version": "1.0.25-alpha",
+  "version": "1.0.26-alpha10",
   "description": "A description for the module",
   "main": "./lib/umd/index.js",
   "module": "./lib/es/index.js",
@@ -48,7 +48,7 @@
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.5",
     "ahooks": "^3.3.0",
-    "antd": "^5.24.9",
+    "antd": "^4.19.5",
     "babel-plugin-istanbul": "^5.1.4",
     "babel-preset-react-app": "^9.0.0",
     "big.js": "^6.1.1",