@signalplus/params-about 0.1.32 → 0.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/index.d.ts +3 -1
  2. package/lib/css/ParamForm/index.scss +12 -0
  3. package/lib/css/Text.scss +18 -0
  4. package/lib/css/index.css +1 -1
  5. package/lib/css/index.scss +11 -1
  6. package/lib/es/index.js +122 -42
  7. package/package.json +4 -6
package/index.d.ts CHANGED
@@ -10,7 +10,8 @@ declare enum ParamType {
10
10
  PercentageRange = 5,
11
11
  ExpiryLimit = 6,
12
12
  Expiry = 7,
13
- Phone = 8
13
+ Phone = 8,
14
+ Text = 9
14
15
  }
15
16
  interface BaseInputProps {
16
17
  value?: any;
@@ -139,6 +140,7 @@ declare class ParamValueEditor extends PureComponent<ParamValueEditorProps> {
139
140
  get formItems(): {
140
141
  label: string;
141
142
  name: string;
143
+ className?: string;
142
144
  Comp: React.ComponentType<BaseInputProps>;
143
145
  required?: boolean;
144
146
  validator?(_: any, val: any): Promise<any>;
package/lib/css/ParamForm/index.scss CHANGED
@@ -53,6 +53,18 @@
53
53
  .react-file-name {
54
54
  display: none !important;
55
55
  }
56
+
57
+ .ant-row {
58
+ display: flex;
59
+ }
60
+
61
+ .param-value-before {
62
+ padding: calc((#{$input-height} - #{$input-readonly-height}) / 2) 0;
63
+
64
+ .ant-form-item-label > label {
65
+ height: $input-readonly-height;
66
+ }
67
+ }
56
68
  }
57
69
 
58
70
  .param-image-upload.param-image-upload {
package/lib/css/Text.scss ADDED
@@ -0,0 +1,18 @@
1
+ @import "./var";
2
+
3
+ .param-text {
4
+ flex: 1;
5
+ display: flex;
6
+ align-items: center;
7
+ height: $input-height;
8
+
9
+ &.readonly {
10
+ height: $input-readonly-height;
11
+ }
12
+ }
13
+
14
+ .param-text-val {
15
+ position: relative;
16
+ z-index: 1;
17
+ margin: 0;
18
+ }
package/lib/css/index.css CHANGED
@@ -1 +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)}
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-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 CHANGED
@@ -6,6 +6,7 @@
6
6
  @import "./Num";
7
7
  @import "./NumRange";
8
8
  @import "./TextArray";
9
+ @import "./Text";
9
10
 
10
11
  .param-renderer {
11
12
  box-sizing: border-box;
@@ -20,13 +21,17 @@
20
21
  border: none;
21
22
  box-shadow: none;
22
23
  }
24
+
25
+ textarea {
26
+ padding: calc((#{$input-readonly-height} - 20px - 2px) / 2) 10px;
27
+ }
23
28
  }
24
29
 
25
30
  * {
26
31
  box-sizing: border-box;
27
32
  }
28
33
 
29
- input, select, .select {
34
+ textarea, input, select, .select {
30
35
  flex: 1;
31
36
  width: 50px;
32
37
  height: 100%;
@@ -50,4 +55,9 @@
50
55
  box-shadow: 0 0 0 2px rgba($primary, 0.1);
51
56
  }
52
57
  }
58
+
59
+ textarea {
60
+ width: 100%;
61
+ padding: calc((#{$input-height} - 20px - 2px) / 2) 10px;
62
+ }
53
63
  }
package/lib/es/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Bundle of @signalplus/params-about
3
- * Generated: 2022-04-13
4
- * Version: 0.1.32
3
+ * Generated: 2022-04-15
4
+ * Version: 0.1.35
5
5
  * License: MIT
6
6
  * Author: 2631541504@qq.com
7
7
  */
@@ -192,6 +192,7 @@ var ParamType;
192
192
  ParamType[ParamType["ExpiryLimit"] = 6] = "ExpiryLimit";
193
193
  ParamType[ParamType["Expiry"] = 7] = "Expiry";
194
194
  ParamType[ParamType["Phone"] = 8] = "Phone";
195
+ ParamType[ParamType["Text"] = 9] = "Text";
195
196
  })(ParamType || (ParamType = {}));
196
197
 
197
198
  function _arrayWithHoles(arr) {
@@ -538,7 +539,7 @@ var Bool = /*#__PURE__*/function (_PureComponent) {
538
539
  style: this.props.style
539
540
  }, this.props.readonly ? /*#__PURE__*/React.createElement("span", {
540
541
  className: "param-bool-val"
541
- }, !isNullLike(this.props.value) ? String(this.props.value).toUpperCase() : '-') : this.options.map(function (it) {
542
+ }, !isNullLike(this.props.value) ? String(this.props.value).toUpperCase() : 'N/A') : this.options.map(function (it) {
542
543
  var active = it.value === _this2.props.value;
543
544
  return /*#__PURE__*/React.createElement("div", {
544
545
  key: String(it.value),
@@ -577,7 +578,7 @@ var NumCvt = /*#__PURE__*/function () {
577
578
  return NumCvt;
578
579
  }();
579
580
 
580
- function initState$1(props) {
581
+ function initState$2(props) {
581
582
  return {
582
583
  preProps: props,
583
584
  tempValue: NumCvt.show(props.value, props.isPercentage)
@@ -600,7 +601,7 @@ var Num = /*#__PURE__*/function (_PureComponent) {
600
601
 
601
602
  _this = _super.call.apply(_super, [this].concat(args));
602
603
 
603
- _defineProperty(_assertThisInitialized(_this), "state", initState$1(_this.props));
604
+ _defineProperty(_assertThisInitialized(_this), "state", initState$2(_this.props));
604
605
 
605
606
  _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
606
607
  var $value = e.target.value;
@@ -615,18 +616,24 @@ var Num = /*#__PURE__*/function (_PureComponent) {
615
616
  }, function () {
616
617
  var _this$props$onChange, _this$props;
617
618
 
618
- 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);
619
+ 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);
619
620
  });
620
621
  });
621
622
 
623
+ _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
624
+ var _this$props$onBlur, _this$props2;
625
+
626
+ var value = e.target.value;
627
+ if (value === '-') e.target.value = '';
628
+ (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2);
629
+ });
630
+
622
631
  return _this;
623
632
  }
624
633
 
625
634
  _createClass(Num, [{
626
635
  key: "render",
627
636
  value: function render() {
628
- var _this$state$tempValue;
629
-
630
637
  return /*#__PURE__*/React.createElement("div", {
631
638
  className: classNames('param-number', {
632
639
  readonly: this.props.readonly
@@ -634,13 +641,13 @@ var Num = /*#__PURE__*/function (_PureComponent) {
634
641
  style: this.props.style
635
642
  }, this.props.readonly ? /*#__PURE__*/React.createElement("span", {
636
643
  className: "param-number-val"
637
- }, (_this$state$tempValue = this.state.tempValue) !== null && _this$state$tempValue !== void 0 ? _this$state$tempValue : '-') : /*#__PURE__*/React.createElement("input", {
644
+ }, this.state.tempValue || 'N/A') : /*#__PURE__*/React.createElement("input", {
638
645
  className: "param-number-val",
639
646
  type: "text",
640
647
  placeholder: this.props.placeholder || 'Value',
641
648
  value: this.state.tempValue || '',
642
649
  onChange: this.onChange,
643
- onBlur: this.props.onBlur
650
+ onBlur: this.onBlur
644
651
  }), this.props.isPercentage && /*#__PURE__*/React.createElement("span", {
645
652
  className: "param-number-suffix"
646
653
  }, "%"));
@@ -699,9 +706,7 @@ var NumRange = /*#__PURE__*/function (_PureComponent) {
699
706
  readonly: this.props.readonly
700
707
  }, this.props.className),
701
708
  style: this.props.style
702
- }, /*#__PURE__*/React.createElement("span", {
703
- className: "param-number-range-prefix"
704
- }, "Min"), /*#__PURE__*/React.createElement(Num, {
709
+ }, this.props.readonly ? '(' : '', /*#__PURE__*/React.createElement(Num, {
705
710
  placeholder: 'Min',
706
711
  value: (_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.min,
707
712
  onChange: this.onChange.bind(null, 'min'),
@@ -709,17 +714,19 @@ var NumRange = /*#__PURE__*/function (_PureComponent) {
709
714
  readonly: this.props.readonly,
710
715
  onBlur: this.props.onBlur
711
716
  }), /*#__PURE__*/React.createElement("span", {
712
- className: "param-number-range-sep"
713
- }, this.props.readonly ? ',' : '-'), /*#__PURE__*/React.createElement("span", {
714
- className: "param-number-range-prefix"
715
- }, "Max"), /*#__PURE__*/React.createElement(Num, {
717
+ className: "param-number-range-sep",
718
+ style: this.props.readonly ? {
719
+ marginLeft: 0,
720
+ marginRight: 4
721
+ } : undefined
722
+ }, this.props.readonly ? ',' : '~'), /*#__PURE__*/React.createElement(Num, {
716
723
  placeholder: 'Max',
717
724
  value: (_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.max,
718
725
  onChange: this.onChange.bind(null, 'max'),
719
726
  isPercentage: this.props.isPercentage,
720
727
  readonly: this.props.readonly,
721
728
  onBlur: this.props.onBlur
722
- }));
729
+ }), this.props.readonly ? ')' : '');
723
730
  }
724
731
  }]);
725
732
 
@@ -1128,6 +1135,77 @@ var ExpiriesLimit = /*#__PURE__*/function (_PureComponent) {
1128
1135
  return ExpiriesLimit;
1129
1136
  }(PureComponent);
1130
1137
 
1138
+ function initState$1(props) {
1139
+ return {
1140
+ preProps: props
1141
+ };
1142
+ }
1143
+
1144
+ var Text = /*#__PURE__*/function (_PureComponent) {
1145
+ _inherits(Text, _PureComponent);
1146
+
1147
+ var _super = _createSuper(Text);
1148
+
1149
+ function Text() {
1150
+ var _this;
1151
+
1152
+ _classCallCheck(this, Text);
1153
+
1154
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1155
+ args[_key] = arguments[_key];
1156
+ }
1157
+
1158
+ _this = _super.call.apply(_super, [this].concat(args));
1159
+
1160
+ _defineProperty(_assertThisInitialized(_this), "state", initState$1(_this.props));
1161
+
1162
+ _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
1163
+ var _this$props$onChange, _this$props;
1164
+
1165
+ var $value = e.target.value;
1166
+ (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, $value);
1167
+ });
1168
+
1169
+ _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
1170
+ var _this$props$onBlur, _this$props2;
1171
+
1172
+ (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2);
1173
+ });
1174
+
1175
+ return _this;
1176
+ }
1177
+
1178
+ _createClass(Text, [{
1179
+ key: "render",
1180
+ value: function render() {
1181
+ return /*#__PURE__*/React.createElement("div", {
1182
+ className: classNames('param-text', {
1183
+ readonly: this.props.readonly
1184
+ }, this.props.className),
1185
+ style: this.props.style
1186
+ }, this.props.readonly ? /*#__PURE__*/React.createElement("span", {
1187
+ className: "param-text-val"
1188
+ }, this.props.value || '-') : /*#__PURE__*/React.createElement("input", {
1189
+ className: "param-text-val",
1190
+ type: "text",
1191
+ placeholder: this.props.placeholder || 'Text',
1192
+ value: this.props.value || '',
1193
+ onChange: this.onChange,
1194
+ onBlur: this.onBlur
1195
+ }));
1196
+ }
1197
+ }], [{
1198
+ key: "getDerivedStateFromProps",
1199
+ value: function getDerivedStateFromProps(props, state) {
1200
+ return _objectSpread2(_objectSpread2({}, state), {}, {
1201
+ preProps: props
1202
+ });
1203
+ }
1204
+ }]);
1205
+
1206
+ return Text;
1207
+ }(PureComponent);
1208
+
1131
1209
  var _ParamTypeConfig;
1132
1210
  var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig, ParamType.ParamGroup, {
1133
1211
  name: '参数组',
@@ -1220,6 +1298,11 @@ var ParamTypeConfig = (_ParamTypeConfig = {}, _defineProperty(_ParamTypeConfig,
1220
1298
  if (index > -1) return "The ".concat(index + 1, "th item: should not be empty");
1221
1299
  return '';
1222
1300
  }
1301
+ }), _defineProperty(_ParamTypeConfig, ParamType.Text, {
1302
+ name: '文本',
1303
+ key: 'text',
1304
+ Comp: Text,
1305
+ validator: emptyValidator
1223
1306
  }), _ParamTypeConfig);
1224
1307
  function paramValidator(val, values) {
1225
1308
  var _config$validator;
@@ -1295,11 +1378,9 @@ var ParamRenderer = /*#__PURE__*/function (_PureComponent) {
1295
1378
  }(PureComponent);
1296
1379
 
1297
1380
  function ParentSelector(props) {
1298
- var _useMemo = useMemo(function () {
1381
+ var options = useMemo(function () {
1299
1382
  var _props$parentOptions;
1300
1383
 
1301
- var $value = [];
1302
-
1303
1384
  var cvt = function cvt(it) {
1304
1385
  var _it$children;
1305
1386
 
@@ -1310,13 +1391,16 @@ function ParentSelector(props) {
1310
1391
  });
1311
1392
  };
1312
1393
 
1313
- var $options = ((_props$parentOptions = props.parentOptions) === null || _props$parentOptions === void 0 ? void 0 : _props$parentOptions.map(cvt)) || [];
1394
+ return ((_props$parentOptions = props.parentOptions) === null || _props$parentOptions === void 0 ? void 0 : _props$parentOptions.map(cvt)) || [];
1395
+ }, [props.parentOptions]);
1396
+ var value = useMemo(function () {
1397
+ var $value = [];
1314
1398
 
1315
1399
  var find = function find(item) {
1316
1400
  var _item$children;
1317
1401
 
1318
1402
  var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
1319
- $value[index] = item.value;
1403
+ $value[index] = String(item.value);
1320
1404
  $value.length = index + 1;
1321
1405
  if (String(item.value) === String(props.value)) return true;
1322
1406
  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) {
1324
1408
  }));
1325
1409
  };
1326
1410
 
1327
- var matched = props.value && $options.some(function (it) {
1411
+ var matched = props.value && options.some(function (it) {
1328
1412
  return find(it);
1329
1413
  });
1330
- if (!matched) return {
1331
- value: [],
1332
- options: $options
1333
- };
1334
- return {
1335
- value: $value,
1336
- options: $options
1337
- };
1338
- }, [props.parentOptions, props.value]),
1339
- value = _useMemo.value,
1340
- options = _useMemo.options;
1341
-
1414
+ if (!matched) return [];
1415
+ return $value;
1416
+ }, [options, props.value]);
1342
1417
  return /*#__PURE__*/React.createElement(Cascader, {
1343
- changeOnSelect: true,
1344
1418
  style: props.style,
1345
1419
  disabled: props.readonly,
1346
1420
  placeholder: '请选择',
@@ -1352,8 +1426,9 @@ function ParentSelector(props) {
1352
1426
  onChange: function onChange(val) {
1353
1427
  var _props$onChange;
1354
1428
 
1355
- return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, val.pop());
1356
- }
1429
+ return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, val[val.length - 1]);
1430
+ },
1431
+ changeOnSelect: true
1357
1432
  });
1358
1433
  }
1359
1434
 
@@ -1429,7 +1504,9 @@ var ParamForm = /*#__PURE__*/function (_PureComponent) {
1429
1504
  Comp: function Comp(props) {
1430
1505
  return /*#__PURE__*/React.createElement(Select, Object.assign({}, props, {
1431
1506
  placeholder: '请选择'
1432
- }), ParamTypeOptions.map(function (it) {
1507
+ }), ParamTypeOptions.filter(function (item) {
1508
+ return item.value !== ParamType.ParamGroup;
1509
+ }).map(function (it) {
1433
1510
  return /*#__PURE__*/React.createElement(Select.Option, {
1434
1511
  key: it.value,
1435
1512
  value: it.value
@@ -1673,10 +1750,12 @@ var ParamValueEditor = /*#__PURE__*/function (_PureComponent) {
1673
1750
  }, {
1674
1751
  label: 'Value before',
1675
1752
  name: 'valueBefore',
1753
+ className: 'param-value-before',
1676
1754
  Comp: function Comp(props) {
1677
1755
  return /*#__PURE__*/React.createElement(ParamRenderer, Object.assign({}, props, {
1678
1756
  readonly: true,
1679
- parentOptions: _this2.props.allParams
1757
+ expiriesOptions: _this2.props.expiriesOptions,
1758
+ valueType: _this2.props.valueType
1680
1759
  }));
1681
1760
  }
1682
1761
  }, {
@@ -1718,7 +1797,8 @@ var ParamValueEditor = /*#__PURE__*/function (_PureComponent) {
1718
1797
  return Promise.resolve();
1719
1798
  }
1720
1799
  }],
1721
- validateTrigger: 'onBlur'
1800
+ validateTrigger: 'onBlur',
1801
+ className: it.className
1722
1802
  }, /*#__PURE__*/React.createElement(it.Comp, null));
1723
1803
  }), this.props.onSubmit && /*#__PURE__*/React.createElement(Button, {
1724
1804
  type: "primary",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@signalplus/params-about",
3
- "version": "0.1.32",
3
+ "version": "0.1.35",
4
4
  "description": "A description for the module",
5
5
  "main": "./lib/umd/index.js",
6
6
  "module": "./lib/es/index.js",
@@ -47,7 +47,7 @@
47
47
  "@types/react": "^16.8.23",
48
48
  "@types/react-dom": "^16.8.5",
49
49
  "ahooks": "^3.3.0",
50
- "antd": "^4.19.3",
50
+ "antd": "^4.19.5",
51
51
  "babel-plugin-istanbul": "^5.1.4",
52
52
  "babel-preset-react-app": "^9.0.0",
53
53
  "big.js": "^6.1.1",
@@ -68,6 +68,7 @@
68
68
  "react": "^16.8.6",
69
69
  "react-dom": "^16.8.6",
70
70
  "react-global-comp": "^2.0.4",
71
+ "rimraf": "^3.0.2",
71
72
  "rollup": "2.70.1",
72
73
  "rollup-plugin-babel": "4.4.0",
73
74
  "rollup-plugin-commonjs": "9.3.4",
@@ -81,14 +82,11 @@
81
82
  "@ant-design/icons": "^4.7.0",
82
83
  "@livelybone/react-file-input": "^1.2.4",
83
84
  "ahooks": "^3.3.0",
84
- "antd": "^4.19.3",
85
+ "antd": "^4.19.5",
85
86
  "big.js": "^6.1.1",
86
87
  "classnames": "^2.3.1",
87
88
  "dayjs": "^1.11.0",
88
89
  "lodash-es": "^4.17.21",
89
90
  "react-global-comp": "^2.0.1"
90
- },
91
- "dependencies": {
92
- "rimraf": "^3.0.2"
93
91
  }
94
92
  }