@signalplus/params-about 0.1.33 → 0.1.36

package/index.d.ts

@@ -10,7 +10,8 @@ declare enum ParamType {
     PercentageRange = 5,
     ExpiryLimit = 6,
     Expiry = 7,
-    Phone = 8
+    Phone = 8,
+    Text = 9
 }
 interface BaseInputProps {
     value?: any;
@@ -139,6 +140,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/Expiries.scss

@@ -19,6 +19,10 @@
     white-space: initial;
     cursor: default;
     background: transparent;
+
+    &.multiple {
+      white-space: pre-wrap;
+    }
   }
 
   &.multiple {

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/Text.scss

@@ -0,0 +1,18 @@
+@import "./var";
+
+.param-text {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: $input-height;
+
+  &.readonly {
+    height: $input-readonly-height;
+  }
+}
+
+.param-text-val {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+}

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.readonly.multiple{white-space:pre-wrap}.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-text{flex:1;display:flex;align-items:center;height:40px}.param-text.readonly{height:30px}.param-text-val{position:relative;z-index:1;margin:0}.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.readonly textarea{padding:calc((30px - 20px - 2px) / 2) 10px}.param-renderer *{box-sizing:border-box}.param-renderer textarea,.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 textarea::placeholder,.param-renderer input::placeholder,.param-renderer select::placeholder,.param-renderer .select::placeholder{color:rgba(0,0,0,0.25)}.param-renderer textarea:hover,.param-renderer input:hover,.param-renderer select:hover,.param-renderer .select:hover{border-color:#006FA7}.param-renderer textarea:focus,.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-renderer textarea{width:100%;padding:calc((40px - 20px - 2px) / 2) 10px}

package/lib/css/index.scss

@@ -6,6 +6,7 @@
 @import "./Num";
 @import "./NumRange";
 @import "./TextArray";
+@import "./Text";
 
 .param-renderer {
   box-sizing: border-box;
@@ -20,13 +21,17 @@
       border: none;
       box-shadow: none;
     }
+
+    textarea {
+      padding: calc((#{$input-readonly-height} - 20px - 2px) / 2) 10px;
+    }
   }
 
   * {
     box-sizing: border-box;
   }
 
-  input, select, .select {
+  textarea, input, select, .select {
     flex: 1;
     width: 50px;
     height: 100%;
@@ -50,4 +55,9 @@
       box-shadow: 0 0 0 2px rgba($primary, 0.1);
     }
   }
+
+  textarea {
+    width: 100%;
+    padding: calc((#{$input-height} - 20px - 2px) / 2) 10px;
+  }
 }

package/lib/es/index.js

@@ -1,7 +1,7 @@
 /**
  * Bundle of @signalplus/params-about
- * Generated: 2022-04-13
- * Version: 0.1.33
+ * Generated: 2022-04-15
+ * Version: 0.1.36
  * License: MIT
  * Author: 2631541504@qq.com
  */
@@ -192,6 +192,7 @@ var ParamType;
   ParamType[ParamType["ExpiryLimit"] = 6] = "ExpiryLimit";
   ParamType[ParamType["Expiry"] = 7] = "Expiry";
   ParamType[ParamType["Phone"] = 8] = "Phone";
+  ParamType[ParamType["Text"] = 9] = "Text";
 })(ParamType || (ParamType = {}));
 
 function _arrayWithHoles(arr) {
@@ -538,7 +539,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),
@@ -577,7 +578,7 @@ var NumCvt = /*#__PURE__*/function () {
   return NumCvt;
 }();
 
-function initState$1(props) {
+function initState$2(props) {
   return {
     preProps: props,
     tempValue: NumCvt.show(props.value, props.isPercentage)
@@ -600,7 +601,7 @@ var Num = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "state", initState$1(_this.props));
+    _defineProperty(_assertThisInitialized(_this), "state", initState$2(_this.props));
 
     _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
       var $value = e.target.value;
@@ -615,18 +616,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 +641,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 +706,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 +714,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 ? ')' : '');
     }
   }]);
 
@@ -1128,6 +1135,77 @@ var ExpiriesLimit = /*#__PURE__*/function (_PureComponent) {
   return ExpiriesLimit;
 }(PureComponent);
 
+function initState$1(props) {
+  return {
+    preProps: props
+  };
+}
+
+var Text = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Text, _PureComponent);
+
+  var _super = _createSuper(Text);
+
+  function Text() {
+    var _this;
+
+    _classCallCheck(this, Text);
+
+    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$1(_this.props));
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
+      var _this$props$onChange, _this$props;
+
+      var $value = e.target.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;
+
+      (_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(Text, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('param-text', {
+          readonly: this.props.readonly
+        }, this.props.className),
+        style: this.props.style
+      }, this.props.readonly ? /*#__PURE__*/React.createElement("span", {
+        className: "param-text-val"
+      }, this.props.value || '-') : /*#__PURE__*/React.createElement("input", {
+        className: "param-text-val",
+        type: "text",
+        placeholder: this.props.placeholder || 'Text',
+        value: this.props.value || '',
+        onChange: this.onChange,
+        onBlur: this.onBlur
+      }));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        preProps: props
+      });
+    }
+  }]);
+
+  return Text;
+}(PureComponent);
+
 var _ParamTypeConfig;
 var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig, ParamType.ParamGroup, {
   name: '参数组',
@@ -1220,6 +1298,11 @@ var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig,
     if (index > -1) return "The ".concat(index + 1, "th item: should not be empty");
     return '';
   }
+}), _defineProperty(_ParamTypeConfig, ParamType.Text, {
+  name: '文本',
+  key: 'text',
+  Comp: Text,
+  validator: emptyValidator
 }), _ParamTypeConfig);
 function paramValidator(val, values) {
   var _config$validator;
@@ -1295,28 +1378,29 @@ 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;
 
       return _objectSpread2(_objectSpread2({}, it), {}, {
-        label: it.name,
+        label: it.name || it.key,
         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)) || [];
+    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 +1408,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 +1426,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
   });
 }
 
@@ -1675,10 +1750,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
           }));
         }
       }, {
@@ -1720,7 +1797,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",
@@ -2128,11 +2206,13 @@ function genOptions(props) {
     return it.valueType === ParamType.ParamGroup && level < maxLevel;
   };
 
+  var targetParams = props.targetParams.map(String);
+
   var cvt = function cvt(it, level) {
     var _it$children;
 
     return _objectSpread2(_objectSpread2({}, it), {}, {
-      disabled: props.targetParams.includes(String(it.$paramId)),
+      disabled: targetParams.includes(String(it.$paramId)),
       children: (_it$children = it.children) === null || _it$children === void 0 ? void 0 : _it$children.filter(function ($it) {
         return filter($it, level + 1);
       }).map(function ($it) {
@@ -2150,12 +2230,13 @@ function genOptions(props) {
 
 function genParamsMap(props) {
   var map = {};
+  var targetParams = props.targetParams.map(String);
 
   var append = function append(it) {
     var _it$children2;
 
     map[it.$paramId] = _objectSpread2(_objectSpread2({}, it), {}, {
-      disabled: props.targetParams.includes(String(it.$paramId))
+      disabled: targetParams.includes(String(it.$paramId))
     });
     (_it$children2 = it.children) === null || _it$children2 === void 0 ? void 0 : _it$children2.forEach(append);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalplus/params-about",
-  "version": "0.1.33",
+  "version": "0.1.36",
   "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"
   }
 }