@signalplus/params-about 0.1.31 → 0.1.34

package/index.d.ts

@@ -139,6 +139,7 @@ declare class ParamValueEditor extends PureComponent<ParamValueEditorProps> {
     get formItems(): {
         label: string;
         name: string;
+        className?: string;
         Comp: React.ComponentType<BaseInputProps>;
         required?: boolean;
         validator?(_: any, val: any): Promise<any>;

package/lib/css/ParamForm/index.scss

@@ -53,6 +53,18 @@
   .react-file-name {
     display: none !important;
   }
+
+  .ant-row {
+    display: flex;
+  }
+
+  .param-value-before {
+    padding: calc((#{$input-height} - #{$input-readonly-height}) / 2) 0;
+
+    .ant-form-item-label > label {
+      height: $input-readonly-height;
+    }
+  }
 }
 
 .param-image-upload.param-image-upload {

package/lib/css/index.css

@@ -1 +1 @@
-.param-parent-selector.readonly .ant-select-selector{padding:0 !important;border-color:transparent !important;background:transparent !important;cursor:initial !important}.param-parent-selector.readonly .ant-select-selection-item{color:#333 !important}.param-parent-selector.readonly .ant-select-arrow{display:none !important}.param-form.param-value-editor .ant-form-item-label,.param-value-editor.param-value-editor .ant-form-item-label,.param-group-editor.param-value-editor .ant-form-item-label,.param-mover.param-value-editor .ant-form-item-label{width:100px}.param-form .ant-form-item-label,.param-value-editor .ant-form-item-label,.param-group-editor .ant-form-item-label,.param-mover .ant-form-item-label{width:80px;padding:0 15px 0 0}.param-form .ant-form-item-label>label,.param-value-editor .ant-form-item-label>label,.param-group-editor .ant-form-item-label>label,.param-mover .ant-form-item-label>label{height:40px}.param-form .ant-form-item-label>label:after,.param-value-editor .ant-form-item-label>label:after,.param-group-editor .ant-form-item-label>label:after,.param-mover .ant-form-item-label>label:after{content:none !important}.param-form input.ant-input.ant-input,.param-form .ant-select-selector.ant-select-selector,.param-form .ant-cascader.ant-cascader,.param-value-editor input.ant-input.ant-input,.param-value-editor .ant-select-selector.ant-select-selector,.param-value-editor .ant-cascader.ant-cascader,.param-group-editor input.ant-input.ant-input,.param-group-editor .ant-select-selector.ant-select-selector,.param-group-editor .ant-cascader.ant-cascader,.param-mover input.ant-input.ant-input,.param-mover .ant-select-selector.ant-select-selector,.param-mover .ant-cascader.ant-cascader{height:40px !important}.param-form input.ant-input.ant-input input,.param-form input.ant-input.ant-input .ant-select-selection-placeholder,.param-form input.ant-input.ant-input .ant-select-selection-item,.param-form .ant-select-selector.ant-select-selector input,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-form .ant-cascader.ant-cascader input,.param-form .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-form .ant-cascader.ant-cascader .ant-select-selection-item,.param-value-editor input.ant-input.ant-input input,.param-value-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-value-editor input.ant-input.ant-input .ant-select-selection-item,.param-value-editor .ant-select-selector.ant-select-selector input,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-value-editor .ant-cascader.ant-cascader input,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-item,.param-group-editor input.ant-input.ant-input input,.param-group-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-group-editor input.ant-input.ant-input .ant-select-selection-item,.param-group-editor .ant-select-selector.ant-select-selector input,.param-group-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-group-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-group-editor .ant-cascader.ant-cascader input,.param-group-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-group-editor .ant-cascader.ant-cascader .ant-select-selection-item,.param-mover input.ant-input.ant-input input,.param-mover input.ant-input.ant-input .ant-select-selection-placeholder,.param-mover input.ant-input.ant-input .ant-select-selection-item,.param-mover .ant-select-selector.ant-select-selector input,.param-mover .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-mover .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-mover .ant-cascader.ant-cascader input,.param-mover .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-mover .ant-cascader.ant-cascader .ant-select-selection-item{height:calc(40px - 2px) !important;line-height:calc(40px - 2px) !important}.param-form textarea.ant-input.ant-input,.param-value-editor textarea.ant-input.ant-input,.param-group-editor textarea.ant-input.ant-input,.param-mover textarea.ant-input.ant-input{height:100px;min-height:40px;padding:9px 10px}.param-form .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-value-editor .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-group-editor .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-mover .ant-form-item.ant-form-item:not(.ant-form-item-with-help){margin:0 0 12px}.param-form .ant-form-item-explain.ant-form-item-explain,.param-value-editor .ant-form-item-explain.ant-form-item-explain,.param-group-editor .ant-form-item-explain.ant-form-item-explain,.param-mover .ant-form-item-explain.ant-form-item-explain{height:auto;min-height:auto;margin:0 0 12px;font-size:12px;line-height:14px}.param-form .react-file-name,.param-value-editor .react-file-name,.param-group-editor .react-file-name,.param-mover .react-file-name{display:none !important}.param-image-upload.param-image-upload .react-file-input{border-color:#d9d9d9}.param-bool{flex:1;display:flex;align-items:center;height:40px}.param-bool.readonly{height:30px}.param-bool-option{display:inline-flex;align-items:center;margin:0 16px 0 0;cursor:pointer}.param-bool-option>svg{margin:0 5px 0 0}.param-expiries{position:relative;flex:1;max-width:100%;min-width:calc(7em + 24px + 2px);padding:calc((40px - 22px) / 2) calc(1em + 14px) calc((40px - 22px) / 2) 10px;line-height:0;border:1px solid #d9d9d9;border-radius:2px;cursor:pointer;background:#fff}.param-expiries.readonly{padding:calc((30px - 20px) / 2) 0;border-color:transparent;overflow:initial;white-space:initial;cursor:default;background:transparent}.param-expiries.multiple{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.param-expiries-arrow{position:absolute;top:50%;right:7px;margin:-0.5em 0 0;color:#d9d9d9 !important}.param-expiries-val{display:inline-block;margin:0 6px 0 0;line-height:20px;white-space:initial}.param-expiries-placeholder{display:inline-block;margin:0 6px 0 0;line-height:20px;color:rgba(0,0,0,0.25);max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.param-expiries-multi-val{display:inline-block;margin:0 6px 0 0;padding:0 3px 0 8px;line-height:20px;border-radius:2px;background:rgba(0,0,0,0.1)}.param-expiries-multi-val svg{display:inline-block;margin:0 0 0 4px;color:#999;cursor:pointer}.param-expiries-popover .ant-popover-inner-content{max-height:50vh;overflow-y:auto}.param-expiries-option{display:flex;align-items:center;justify-content:space-between;width:240px;margin:0 -16px;padding:0 16px;line-height:30px;color:rgba(51,51,51,0.6);cursor:pointer}.param-expiries-option.param-expiries-option-checked{font-weight:bold;color:#333}.param-expiries-option.param-expiries-option-disabled{cursor:not-allowed;opacity:0.5}.param-expiries-option:hover{color:#333;background:rgba(0,0,0,0.1)}.param-expiries-option svg{color:#57be6a}.param-expiries-limit{padding:calc((40px - 20px) / 2) 0}.param-expiries-limit.readonly{padding:calc((30px - 20px) / 2) 0}.param-expiries-limit .param-number-range{margin:0 0 0 10px}.param-expiries-limit .param-number-range-prefix{display:none}.param-expiries-limit .param-number-suffix{padding:0 7px}.param-expiries-limit-val{display:block}.param-expiries-limit-val:after{content:';'}.param-expiries-limit-val-sep{padding:0 4px;color:#999}.param-expiries-limit-inputs{display:grid;grid-row-gap:10px;grid-column-gap:10px;grid-template-rows:auto;grid-template-columns:auto auto auto auto}.param-expiries-limit-inputs .param-expiries,.param-expiries-limit-inputs .param-number-range,.param-expiries-limit-inputs .param-arr-ops{height:30px;padding-top:0;padding-right:0;margin:0}.param-expiries-limit-inputs .param-expiries.readonly,.param-expiries-limit-inputs .param-number-range.readonly,.param-expiries-limit-inputs .param-arr-ops.readonly{height:20px;line-height:18px}.param-expiries-limit-inputs .param-expiries.readonly .param-expiries-val,.param-expiries-limit-inputs .param-number-range.readonly .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops.readonly .param-expiries-val{margin-top:0}.param-expiries-limit-inputs .param-expiries .param-expiries-placeholder,.param-expiries-limit-inputs .param-expiries .param-expiries-val,.param-expiries-limit-inputs .param-number-range .param-expiries-placeholder,.param-expiries-limit-inputs .param-number-range .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops .param-expiries-placeholder,.param-expiries-limit-inputs .param-arr-ops .param-expiries-val{margin-top:4px}.param-expiries-limit-inputs .param-expiries .param-number-range-sep,.param-expiries-limit-inputs .param-number-range .param-number-range-sep,.param-expiries-limit-inputs .param-arr-ops .param-number-range-sep{margin:0 6px}.param-expiries-limit-inputs .param-arr-ops{padding:0}.param-expiries-popover{padding:0 !important}.param-expiries-popover .ant-popover-arrow{display:none}.param-number{flex:1;display:flex;align-items:center;height:40px}.param-number.readonly{height:30px}.param-number.readonly .param-number-suffix{padding:0;margin:0 0 0 1px;border:none;background:none}.param-number-val{position:relative;z-index:1;margin:0}.param-number-suffix{display:flex;align-items:center;justify-content:center;position:relative;z-index:0;flex:none;height:100%;padding:0 14px;margin:0 0 0 -2px;border-radius:2px;border:1px solid #d9d9d9;background:#f2f2f2}.param-number-range{flex:1;display:flex;align-items:center;height:40px}.param-number-range .param-number{height:100%}.param-number-range.readonly{height:30px}.param-number-range.readonly .param-number{flex:none}.param-number-range .param-number-range-prefix{margin:0 8px 0 0}.param-number-range .param-number-range-sep{margin:0 10px}.param-text-array{padding:calc((40px - 30px) / 2) 0}.param-arr-item{display:flex;align-items:center;height:30px;margin:0 0 4px}.param-arr-item>input{flex:none;width:160px}.param-arr-ops{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:100%;padding:0 10px}.param-arr-ops .param-arr-ops-add,.param-arr-ops .param-arr-ops-del{display:flex;align-items:center;justify-content:center;width:30px;height:100%;border-radius:4px;color:#006FA7}.param-arr-ops .param-arr-ops-add:hover,.param-arr-ops .param-arr-ops-del:hover{background:rgba(0,0,0,0.1)}.param-arr-ops .param-arr-ops-del{color:#d51414}.param-renderer{box-sizing:border-box;margin:0;line-height:20px;color:#333}.param-renderer.readonly input,.param-renderer.readonly select,.param-renderer.readonly .select{padding:0;border:none;box-shadow:none}.param-renderer *{box-sizing:border-box}.param-renderer input,.param-renderer select,.param-renderer .select{flex:1;width:50px;height:100%;padding:0 10px;border:1px solid #d9d9d9;border-radius:2px;outline:none;box-shadow:none;background:#fff}.param-renderer input::placeholder,.param-renderer select::placeholder,.param-renderer .select::placeholder{color:rgba(0,0,0,0.25)}.param-renderer input:hover,.param-renderer select:hover,.param-renderer .select:hover{border-color:#006FA7}.param-renderer input:focus,.param-renderer select:focus,.param-renderer .select:focus{border-color:#006FA7;box-shadow:0 0 0 2px rgba(0,111,167,0.1)}
+.param-parent-selector.readonly .ant-select-selector{padding:0 !important;border-color:transparent !important;background:transparent !important;cursor:initial !important}.param-parent-selector.readonly .ant-select-selection-item{color:#333 !important}.param-parent-selector.readonly .ant-select-arrow{display:none !important}.param-form.param-value-editor .ant-form-item-label,.param-value-editor.param-value-editor .ant-form-item-label,.param-group-editor.param-value-editor .ant-form-item-label,.param-mover.param-value-editor .ant-form-item-label{width:100px}.param-form .ant-form-item-label,.param-value-editor .ant-form-item-label,.param-group-editor .ant-form-item-label,.param-mover .ant-form-item-label{width:80px;padding:0 15px 0 0}.param-form .ant-form-item-label>label,.param-value-editor .ant-form-item-label>label,.param-group-editor .ant-form-item-label>label,.param-mover .ant-form-item-label>label{height:40px}.param-form .ant-form-item-label>label:after,.param-value-editor .ant-form-item-label>label:after,.param-group-editor .ant-form-item-label>label:after,.param-mover .ant-form-item-label>label:after{content:none !important}.param-form input.ant-input.ant-input,.param-form .ant-select-selector.ant-select-selector,.param-form .ant-cascader.ant-cascader,.param-value-editor input.ant-input.ant-input,.param-value-editor .ant-select-selector.ant-select-selector,.param-value-editor .ant-cascader.ant-cascader,.param-group-editor input.ant-input.ant-input,.param-group-editor .ant-select-selector.ant-select-selector,.param-group-editor .ant-cascader.ant-cascader,.param-mover input.ant-input.ant-input,.param-mover .ant-select-selector.ant-select-selector,.param-mover .ant-cascader.ant-cascader{height:40px !important}.param-form input.ant-input.ant-input input,.param-form input.ant-input.ant-input .ant-select-selection-placeholder,.param-form input.ant-input.ant-input .ant-select-selection-item,.param-form .ant-select-selector.ant-select-selector input,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-form .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-form .ant-cascader.ant-cascader input,.param-form .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-form .ant-cascader.ant-cascader .ant-select-selection-item,.param-value-editor input.ant-input.ant-input input,.param-value-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-value-editor input.ant-input.ant-input .ant-select-selection-item,.param-value-editor .ant-select-selector.ant-select-selector input,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-value-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-value-editor .ant-cascader.ant-cascader input,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-value-editor .ant-cascader.ant-cascader .ant-select-selection-item,.param-group-editor input.ant-input.ant-input input,.param-group-editor input.ant-input.ant-input .ant-select-selection-placeholder,.param-group-editor input.ant-input.ant-input .ant-select-selection-item,.param-group-editor .ant-select-selector.ant-select-selector input,.param-group-editor .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-group-editor .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-group-editor .ant-cascader.ant-cascader input,.param-group-editor .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-group-editor .ant-cascader.ant-cascader .ant-select-selection-item,.param-mover input.ant-input.ant-input input,.param-mover input.ant-input.ant-input .ant-select-selection-placeholder,.param-mover input.ant-input.ant-input .ant-select-selection-item,.param-mover .ant-select-selector.ant-select-selector input,.param-mover .ant-select-selector.ant-select-selector .ant-select-selection-placeholder,.param-mover .ant-select-selector.ant-select-selector .ant-select-selection-item,.param-mover .ant-cascader.ant-cascader input,.param-mover .ant-cascader.ant-cascader .ant-select-selection-placeholder,.param-mover .ant-cascader.ant-cascader .ant-select-selection-item{height:calc(40px - 2px) !important;line-height:calc(40px - 2px) !important}.param-form textarea.ant-input.ant-input,.param-value-editor textarea.ant-input.ant-input,.param-group-editor textarea.ant-input.ant-input,.param-mover textarea.ant-input.ant-input{height:100px;min-height:40px;padding:9px 10px}.param-form .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-value-editor .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-group-editor .ant-form-item.ant-form-item:not(.ant-form-item-with-help),.param-mover .ant-form-item.ant-form-item:not(.ant-form-item-with-help){margin:0 0 12px}.param-form .ant-form-item-explain.ant-form-item-explain,.param-value-editor .ant-form-item-explain.ant-form-item-explain,.param-group-editor .ant-form-item-explain.ant-form-item-explain,.param-mover .ant-form-item-explain.ant-form-item-explain{height:auto;min-height:auto;margin:0 0 12px;font-size:12px;line-height:14px}.param-form .react-file-name,.param-value-editor .react-file-name,.param-group-editor .react-file-name,.param-mover .react-file-name{display:none !important}.param-form .ant-row,.param-value-editor .ant-row,.param-group-editor .ant-row,.param-mover .ant-row{display:flex}.param-form .param-value-before,.param-value-editor .param-value-before,.param-group-editor .param-value-before,.param-mover .param-value-before{padding:calc((40px - 30px) / 2) 0}.param-form .param-value-before .ant-form-item-label>label,.param-value-editor .param-value-before .ant-form-item-label>label,.param-group-editor .param-value-before .ant-form-item-label>label,.param-mover .param-value-before .ant-form-item-label>label{height:30px}.param-image-upload.param-image-upload .react-file-input{border-color:#d9d9d9}.param-bool{flex:1;display:flex;align-items:center;height:40px}.param-bool.readonly{height:30px}.param-bool-option{display:inline-flex;align-items:center;margin:0 16px 0 0;cursor:pointer}.param-bool-option>svg{margin:0 5px 0 0}.param-expiries{position:relative;flex:1;max-width:100%;min-width:calc(7em + 24px + 2px);padding:calc((40px - 22px) / 2) calc(1em + 14px) calc((40px - 22px) / 2) 10px;line-height:0;border:1px solid #d9d9d9;border-radius:2px;cursor:pointer;background:#fff}.param-expiries.readonly{padding:calc((30px - 20px) / 2) 0;border-color:transparent;overflow:initial;white-space:initial;cursor:default;background:transparent}.param-expiries.multiple{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.param-expiries-arrow{position:absolute;top:50%;right:7px;margin:-0.5em 0 0;color:#d9d9d9 !important}.param-expiries-val{display:inline-block;margin:0 6px 0 0;line-height:20px;white-space:initial}.param-expiries-placeholder{display:inline-block;margin:0 6px 0 0;line-height:20px;color:rgba(0,0,0,0.25);max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.param-expiries-multi-val{display:inline-block;margin:0 6px 0 0;padding:0 3px 0 8px;line-height:20px;border-radius:2px;background:rgba(0,0,0,0.1)}.param-expiries-multi-val svg{display:inline-block;margin:0 0 0 4px;color:#999;cursor:pointer}.param-expiries-popover .ant-popover-inner-content{max-height:50vh;overflow-y:auto}.param-expiries-option{display:flex;align-items:center;justify-content:space-between;width:240px;margin:0 -16px;padding:0 16px;line-height:30px;color:rgba(51,51,51,0.6);cursor:pointer}.param-expiries-option.param-expiries-option-checked{font-weight:bold;color:#333}.param-expiries-option.param-expiries-option-disabled{cursor:not-allowed;opacity:0.5}.param-expiries-option:hover{color:#333;background:rgba(0,0,0,0.1)}.param-expiries-option svg{color:#57be6a}.param-expiries-limit{padding:calc((40px - 20px) / 2) 0}.param-expiries-limit.readonly{padding:calc((30px - 20px) / 2) 0}.param-expiries-limit .param-number-range{margin:0 0 0 10px}.param-expiries-limit .param-number-range-prefix{display:none}.param-expiries-limit .param-number-suffix{padding:0 7px}.param-expiries-limit-val{display:block}.param-expiries-limit-val:after{content:';'}.param-expiries-limit-val-sep{padding:0 4px;color:#999}.param-expiries-limit-inputs{display:grid;grid-row-gap:10px;grid-column-gap:10px;grid-template-rows:auto;grid-template-columns:auto auto auto auto}.param-expiries-limit-inputs .param-expiries,.param-expiries-limit-inputs .param-number-range,.param-expiries-limit-inputs .param-arr-ops{height:30px;padding-top:0;padding-right:0;margin:0}.param-expiries-limit-inputs .param-expiries.readonly,.param-expiries-limit-inputs .param-number-range.readonly,.param-expiries-limit-inputs .param-arr-ops.readonly{height:20px;line-height:18px}.param-expiries-limit-inputs .param-expiries.readonly .param-expiries-val,.param-expiries-limit-inputs .param-number-range.readonly .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops.readonly .param-expiries-val{margin-top:0}.param-expiries-limit-inputs .param-expiries .param-expiries-placeholder,.param-expiries-limit-inputs .param-expiries .param-expiries-val,.param-expiries-limit-inputs .param-number-range .param-expiries-placeholder,.param-expiries-limit-inputs .param-number-range .param-expiries-val,.param-expiries-limit-inputs .param-arr-ops .param-expiries-placeholder,.param-expiries-limit-inputs .param-arr-ops .param-expiries-val{margin-top:4px}.param-expiries-limit-inputs .param-expiries .param-number-range-sep,.param-expiries-limit-inputs .param-number-range .param-number-range-sep,.param-expiries-limit-inputs .param-arr-ops .param-number-range-sep{margin:0 6px}.param-expiries-limit-inputs .param-arr-ops{padding:0}.param-expiries-popover{padding:0 !important}.param-expiries-popover .ant-popover-arrow{display:none}.param-number{flex:1;display:flex;align-items:center;height:40px}.param-number.readonly{height:30px}.param-number.readonly .param-number-suffix{padding:0;margin:0 0 0 1px;border:none;background:none}.param-number-val{position:relative;z-index:1;margin:0}.param-number-suffix{display:flex;align-items:center;justify-content:center;position:relative;z-index:0;flex:none;height:100%;padding:0 14px;margin:0 0 0 -2px;border-radius:2px;border:1px solid #d9d9d9;background:#f2f2f2}.param-number-range{flex:1;display:flex;align-items:center;height:40px}.param-number-range .param-number{height:100%}.param-number-range.readonly{height:30px}.param-number-range.readonly .param-number{flex:none}.param-number-range .param-number-range-prefix{margin:0 8px 0 0}.param-number-range .param-number-range-sep{margin:0 10px}.param-text-array{padding:calc((40px - 30px) / 2) 0}.param-arr-item{display:flex;align-items:center;height:30px;margin:0 0 4px}.param-arr-item>input{flex:none;width:160px}.param-arr-ops{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:100%;padding:0 10px}.param-arr-ops .param-arr-ops-add,.param-arr-ops .param-arr-ops-del{display:flex;align-items:center;justify-content:center;width:30px;height:100%;border-radius:4px;color:#006FA7}.param-arr-ops .param-arr-ops-add:hover,.param-arr-ops .param-arr-ops-del:hover{background:rgba(0,0,0,0.1)}.param-arr-ops .param-arr-ops-del{color:#d51414}.param-renderer{box-sizing:border-box;margin:0;line-height:20px;color:#333}.param-renderer.readonly input,.param-renderer.readonly select,.param-renderer.readonly .select{padding:0;border:none;box-shadow:none}.param-renderer *{box-sizing:border-box}.param-renderer input,.param-renderer select,.param-renderer .select{flex:1;width:50px;height:100%;padding:0 10px;border:1px solid #d9d9d9;border-radius:2px;outline:none;box-shadow:none;background:#fff}.param-renderer input::placeholder,.param-renderer select::placeholder,.param-renderer .select::placeholder{color:rgba(0,0,0,0.25)}.param-renderer input:hover,.param-renderer select:hover,.param-renderer .select:hover{border-color:#006FA7}.param-renderer input:focus,.param-renderer select:focus,.param-renderer .select:focus{border-color:#006FA7;box-shadow:0 0 0 2px rgba(0,111,167,0.1)}

package/lib/es/index.js

@@ -1,7 +1,7 @@
 /**
  * Bundle of @signalplus/params-about
- * Generated: 2022-04-13
- * Version: 0.1.31
+ * Generated: 2022-04-14
+ * Version: 0.1.34
  * License: MIT
  * Author: 2631541504@qq.com
  */
@@ -538,7 +538,7 @@ var Bool = /*#__PURE__*/function (_PureComponent) {
         style: this.props.style
       }, 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) {
+      }, !isNullLike(this.props.value) ? String(this.props.value).toUpperCase() : 'N/A') : this.options.map(function (it) {
         var active = it.value === _this2.props.value;
         return /*#__PURE__*/React.createElement("div", {
           key: String(it.value),
@@ -615,18 +615,24 @@ var Num = /*#__PURE__*/function (_PureComponent) {
       }, function () {
         var _this$props$onChange, _this$props;
 
-        if (value !== _this.props.value) (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, value);
+        if ($val !== '-' && value !== _this.props.value) (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, value);
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
+      var _this$props$onBlur, _this$props2;
+
+      var value = e.target.value;
+      if (value === '-') e.target.value = '';
+      (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2);
+    });
+
     return _this;
   }
 
   _createClass(Num, [{
     key: "render",
     value: function render() {
-      var _this$state$tempValue;
-
       return /*#__PURE__*/React.createElement("div", {
         className: classNames('param-number', {
           readonly: this.props.readonly
@@ -634,13 +640,13 @@ var Num = /*#__PURE__*/function (_PureComponent) {
         style: this.props.style
       }, this.props.readonly ? /*#__PURE__*/React.createElement("span", {
         className: "param-number-val"
-      }, (_this$state$tempValue = this.state.tempValue) !== null && _this$state$tempValue !== void 0 ? _this$state$tempValue : '-') : /*#__PURE__*/React.createElement("input", {
+      }, this.state.tempValue || 'N/A') : /*#__PURE__*/React.createElement("input", {
         className: "param-number-val",
         type: "text",
         placeholder: this.props.placeholder || 'Value',
         value: this.state.tempValue || '',
         onChange: this.onChange,
-        onBlur: this.props.onBlur
+        onBlur: this.onBlur
       }), this.props.isPercentage && /*#__PURE__*/React.createElement("span", {
         className: "param-number-suffix"
       }, "%"));
@@ -699,9 +705,7 @@ var NumRange = /*#__PURE__*/function (_PureComponent) {
           readonly: this.props.readonly
         }, this.props.className),
         style: this.props.style
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "param-number-range-prefix"
-      }, "Min"), /*#__PURE__*/React.createElement(Num, {
+      }, this.props.readonly ? '(' : '', /*#__PURE__*/React.createElement(Num, {
         placeholder: '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'),
@@ -709,17 +713,19 @@ var NumRange = /*#__PURE__*/function (_PureComponent) {
         readonly: this.props.readonly,
         onBlur: this.props.onBlur
       }), /*#__PURE__*/React.createElement("span", {
-        className: "param-number-range-sep"
-      }, this.props.readonly ? ',' : '-'), /*#__PURE__*/React.createElement("span", {
-        className: "param-number-range-prefix"
-      }, "Max"), /*#__PURE__*/React.createElement(Num, {
+        className: "param-number-range-sep",
+        style: this.props.readonly ? {
+          marginLeft: 0,
+          marginRight: 4
+        } : undefined
+      }, this.props.readonly ? ',' : '~'), /*#__PURE__*/React.createElement(Num, {
         placeholder: '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,
         readonly: this.props.readonly,
         onBlur: this.props.onBlur
-      }));
+      }), this.props.readonly ? ')' : '');
     }
   }]);
 
@@ -1295,11 +1301,9 @@ var ParamRenderer = /*#__PURE__*/function (_PureComponent) {
 }(PureComponent);
 
 function ParentSelector(props) {
-  var _useMemo = useMemo(function () {
+  var options = useMemo(function () {
     var _props$parentOptions;
 
-    var $value = [];
-
     var cvt = function cvt(it) {
       var _it$children;
 
@@ -1310,13 +1314,16 @@ function ParentSelector(props) {
       });
     };
 
-    var $options = ((_props$parentOptions = props.parentOptions) === null || _props$parentOptions === void 0 ? void 0 : _props$parentOptions.map(cvt)) || [];
+    return ((_props$parentOptions = props.parentOptions) === null || _props$parentOptions === void 0 ? void 0 : _props$parentOptions.map(cvt)) || [];
+  }, [props.parentOptions]);
+  var value = useMemo(function () {
+    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;
+      $value[index] = String(item.value);
       $value.length = index + 1;
       if (String(item.value) === String(props.value)) return true;
       return Boolean((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.some(function (it) {
@@ -1324,23 +1331,13 @@ function ParentSelector(props) {
       }));
     };
 
-    var matched = props.value && $options.some(function (it) {
+    var matched = props.value && options.some(function (it) {
       return find(it);
     });
-    if (!matched) return {
-      value: [],
-      options: $options
-    };
-    return {
-      value: $value,
-      options: $options
-    };
-  }, [props.parentOptions, props.value]),
-      value = _useMemo.value,
-      options = _useMemo.options;
-
+    if (!matched) return [];
+    return $value;
+  }, [options, props.value]);
   return /*#__PURE__*/React.createElement(Cascader, {
-    changeOnSelect: true,
     style: props.style,
     disabled: props.readonly,
     placeholder: '请选择',
@@ -1352,8 +1349,9 @@ function ParentSelector(props) {
     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());
-    }
+      return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, val[val.length - 1]);
+    },
+    changeOnSelect: true
   });
 }
 
@@ -1428,9 +1426,10 @@ var ParamForm = /*#__PURE__*/function (_PureComponent) {
         name: 'valueType',
         Comp: function Comp(props) {
           return /*#__PURE__*/React.createElement(Select, Object.assign({}, props, {
-            placeholder: '请选择',
-            defaultValue: 1
-          }), ParamTypeOptions.map(function (it) {
+            placeholder: '请选择'
+          }), ParamTypeOptions.filter(function (item) {
+            return item.value !== ParamType.ParamGroup;
+          }).map(function (it) {
             return /*#__PURE__*/React.createElement(Select.Option, {
               key: it.value,
               value: it.value
@@ -1674,10 +1673,12 @@ var ParamValueEditor = /*#__PURE__*/function (_PureComponent) {
       }, {
         label: 'Value before',
         name: 'valueBefore',
+        className: 'param-value-before',
         Comp: function Comp(props) {
           return /*#__PURE__*/React.createElement(ParamRenderer, Object.assign({}, props, {
             readonly: true,
-            parentOptions: _this2.props.allParams
+            expiriesOptions: _this2.props.expiriesOptions,
+            valueType: _this2.props.valueType
           }));
         }
       }, {
@@ -1719,7 +1720,8 @@ var ParamValueEditor = /*#__PURE__*/function (_PureComponent) {
               return Promise.resolve();
             }
           }],
-          validateTrigger: 'onBlur'
+          validateTrigger: 'onBlur',
+          className: it.className
         }, /*#__PURE__*/React.createElement(it.Comp, null));
       }), this.props.onSubmit && /*#__PURE__*/React.createElement(Button, {
         type: "primary",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalplus/params-about",
-  "version": "0.1.31",
+  "version": "0.1.34",
   "description": "A description for the module",
   "main": "./lib/umd/index.js",
   "module": "./lib/es/index.js",
@@ -47,7 +47,7 @@
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.5",
     "ahooks": "^3.3.0",
-    "antd": "^4.19.3",
+    "antd": "^4.19.5",
     "babel-plugin-istanbul": "^5.1.4",
     "babel-preset-react-app": "^9.0.0",
     "big.js": "^6.1.1",
@@ -68,6 +68,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-global-comp": "^2.0.4",
+    "rimraf": "^3.0.2",
     "rollup": "2.70.1",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-commonjs": "9.3.4",
@@ -81,14 +82,11 @@
     "@ant-design/icons": "^4.7.0",
     "@livelybone/react-file-input": "^1.2.4",
     "ahooks": "^3.3.0",
-    "antd": "^4.19.3",
+    "antd": "^4.19.5",
     "big.js": "^6.1.1",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.0",
     "lodash-es": "^4.17.21",
     "react-global-comp": "^2.0.1"
-  },
-  "dependencies": {
-    "rimraf": "^3.0.2"
   }
 }