@imposium-hub/components 1.48.16 → 1.49.0

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 (12) hide show
  1. package/dist/cjs/components/number-field/NumberField.d.ts +7 -1
  2. package/dist/cjs/components/number-field/NumberField.js +46 -5
  3. package/dist/cjs/components/number-field/NumberField.js.map +1 -1
  4. package/dist/esm/components/number-field/NumberField.d.ts +7 -1
  5. package/dist/esm/components/number-field/NumberField.js +46 -5
  6. package/dist/esm/components/number-field/NumberField.js.map +1 -1
  7. package/dist/styles.css +4 -0
  8. package/dist/styles.less +6 -2
  9. package/less/components/form-field.less +5 -1
  10. package/less/components/shortcut-menu.less +1 -1
  11. package/package.json +1 -1
  12. package/src/components/number-field/NumberField.tsx +51 -7
package/dist/cjs/components/number-field/NumberField.d.ts CHANGED
@@ -14,9 +14,15 @@ interface INumberFieldProps {
14
14
  min?: number;
15
15
  max?: number;
16
16
  }
17
- declare class NumberField extends React.PureComponent<INumberFieldProps> {
17
+ interface INumberFieldState {
18
+ error: boolean;
19
+ value: number;
20
+ }
21
+ declare class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldState> {
18
22
  private inputRef;
19
23
  constructor(props: any);
24
+ componentDidMount(): void;
25
+ private validate;
20
26
  private onChange;
21
27
  private onSelectFocus;
22
28
  private onSelectBlur;
package/dist/cjs/components/number-field/NumberField.js CHANGED
@@ -47,11 +47,37 @@ var NumberField = /** @class */ (function (_super) {
47
47
  __extends(NumberField, _super);
48
48
  function NumberField(props) {
49
49
  var _this = _super.call(this, props) || this;
50
+ _this.state = {
51
+ error: false,
52
+ value: _this.props.value
53
+ };
50
54
  _this.inputRef = React.createRef();
51
55
  return _this;
52
56
  }
57
+ NumberField.prototype.componentDidMount = function () {
58
+ this.setState({
59
+ error: false,
60
+ value: this.props.value
61
+ });
62
+ };
63
+ NumberField.prototype.validate = function (e) {
64
+ var _a = this.props, max = _a.max, min = _a.min;
65
+ var val = e.target.value;
66
+ this.setState({ value: val });
67
+ if (min || max) {
68
+ if (val < min || val > max) {
69
+ this.setState({ error: true });
70
+ }
71
+ else {
72
+ this.setState({ error: false });
73
+ this.onChange(e);
74
+ }
75
+ }
76
+ else {
77
+ this.onChange(e);
78
+ }
79
+ };
53
80
  NumberField.prototype.onChange = function (e) {
54
- // return null vs an empty string
55
81
  var val = e.target.value;
56
82
  if (val === '') {
57
83
  val = null;
@@ -77,16 +103,31 @@ var NumberField = /** @class */ (function (_super) {
77
103
  };
78
104
  NumberField.prototype.render = function () {
79
105
  var _this = this;
106
+ var error = null;
80
107
  var _a = this.props, label = _a.label, placeholder = _a.placeholder, width = _a.width, readOnly = _a.readOnly, buttons = _a.buttons, tooltip = _a.tooltip, info = _a.info, labelPosition = _a.labelPosition, min = _a.min, max = _a.max;
81
- var value = this.props.value;
108
+ var value = this.state.value;
82
109
  if (value === null) {
83
110
  value = '';
84
111
  }
85
- return (React.createElement(FieldWrapper_1.default, { customClass: 'number-field',
112
+ if (this.state.error) {
113
+ if (min && !max) {
114
+ error = "Value must be greater than or equal to ".concat(min, ".");
115
+ }
116
+ else if (!min && max) {
117
+ error = "Value must be less than or equal to ".concat(max, ".");
118
+ }
119
+ else if (min && max) {
120
+ error = "Value must be between ".concat(min, " and ").concat(max, ".");
121
+ }
122
+ }
123
+ else {
124
+ error = info;
125
+ }
126
+ return (React.createElement(FieldWrapper_1.default, { customClass: "number-field ".concat(this.state.error ? 'invalid' : ''),
86
127
  // draggableValue = {true}
87
128
  // onDrag = {(v)=>this.handleLabelDrag(v)}
88
- label: label, tooltip: tooltip, buttons: buttons, info: info, labelPosition: labelPosition, width: width },
89
- React.createElement("input", { ref: this.inputRef, type: 'number', pattern: '/^-?(0|[1-9]\\d*)(\\.\\d+)?$/', placeholder: placeholder, value: value, readOnly: readOnly, min: min, max: max, onFocus: function () { return _this.onSelectFocus(); }, onBlur: function () { return _this.onSelectBlur(); }, onChange: function (e) { return _this.onChange(e); } })));
129
+ label: label, tooltip: tooltip, buttons: buttons, info: error, labelPosition: labelPosition, width: width },
130
+ React.createElement("input", { ref: this.inputRef, type: 'number', pattern: '/^-?(0|[1-9]\\d*)(\\.\\d+)?$/', placeholder: placeholder, value: value, readOnly: readOnly, min: min, max: max, onFocus: function () { return _this.onSelectFocus(); }, onBlur: function () { return _this.onSelectBlur(); }, onChange: function (e) { return _this.validate(e); } })));
90
131
  };
91
132
  return NumberField;
92
133
  }(React.PureComponent));
package/dist/cjs/components/number-field/NumberField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../../src/components/number-field/NumberField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,+EAAyD;AAkBzD;IAA0B,+BAAsC;IAG5D,qBAAY,KAAK;QAAjB,YACI,kBAAM,KAAK,CAAC,SAGf;QADG,KAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;;IACtC,CAAC;IAEO,8BAAQ,GAAhB,UAAiB,CAAC;QACd,iCAAiC;QACjC,IAAI,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QACzB,IAAI,GAAG,KAAK,EAAE,EAAE;YACZ,GAAG,GAAG,IAAI,CAAC;SACd;aAAM;YACH,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;SACzB;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAEO,mCAAa,GAArB;QACI,mDAAmD;QACnD,sFAAsF;QACtF,IAAI;IACR,CAAC;IAEO,kCAAY,GAApB;QACI,+BAA+B;QAC/B,qDAAqD;QACrD,IAAI;IACR,CAAC;IAEO,qCAAe,GAAvB,UAAwB,CAAS;QAC7B,IAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAEM,4BAAM,GAAb;QAAA,iBA4CC;QA3CS,IAAA,KAWF,IAAI,CAAC,KAAK,EAVV,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,aAAa,mBAAA,EACb,GAAG,SAAA,EACH,GAAG,SACO,CAAC;QACf,IAAI,KAAK,GAAQ,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAClC,IAAI,KAAK,KAAK,IAAI,EAAE;YAChB,KAAK,GAAG,EAAE,CAAC;SACd;QAED,OAAO,CACH,oBAAC,sBAAY,IACT,WAAW,EAAC,cAAc;YAC1B,0BAA0B;YAC1B,0CAA0C;YAC1C,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK;YACZ,+BACI,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,+BAA4B,EACpC,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,cAAM,OAAA,KAAI,CAAC,aAAa,EAAE,EAApB,CAAoB,EACnC,MAAM,EAAE,cAAM,OAAA,KAAI,CAAC,YAAY,EAAE,EAAnB,CAAmB,EACjC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,KAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAhB,CAAgB,GACnC,CACS,CAClB,CAAC;IACN,CAAC;IACL,kBAAC;AAAD,CAAC,AAnFD,CAA0B,KAAK,CAAC,aAAa,GAmF5C;AAED,kBAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../../src/components/number-field/NumberField.tsx"],"names":[],"mappings":"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"}
package/dist/esm/components/number-field/NumberField.d.ts CHANGED
@@ -14,9 +14,15 @@ interface INumberFieldProps {
14
14
  min?: number;
15
15
  max?: number;
16
16
  }
17
- declare class NumberField extends React.PureComponent<INumberFieldProps> {
17
+ interface INumberFieldState {
18
+ error: boolean;
19
+ value: number;
20
+ }
21
+ declare class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldState> {
18
22
  private inputRef;
19
23
  constructor(props: any);
24
+ componentDidMount(): void;
25
+ private validate;
20
26
  private onChange;
21
27
  private onSelectFocus;
22
28
  private onSelectBlur;
package/dist/esm/components/number-field/NumberField.js CHANGED
@@ -4,10 +4,36 @@ class NumberField extends React.PureComponent {
4
4
  inputRef;
5
5
  constructor(props) {
6
6
  super(props);
7
+ this.state = {
8
+ error: false,
9
+ value: this.props.value
10
+ };
7
11
  this.inputRef = React.createRef();
8
12
  }
13
+ componentDidMount() {
14
+ this.setState({
15
+ error: false,
16
+ value: this.props.value
17
+ });
18
+ }
19
+ validate(e) {
20
+ const { max, min } = this.props;
21
+ const val = e.target.value;
22
+ this.setState({ value: val });
23
+ if (min || max) {
24
+ if (val < min || val > max) {
25
+ this.setState({ error: true });
26
+ }
27
+ else {
28
+ this.setState({ error: false });
29
+ this.onChange(e);
30
+ }
31
+ }
32
+ else {
33
+ this.onChange(e);
34
+ }
35
+ }
9
36
  onChange(e) {
10
- // return null vs an empty string
11
37
  let val = e.target.value;
12
38
  if (val === '') {
13
39
  val = null;
@@ -32,16 +58,31 @@ class NumberField extends React.PureComponent {
32
58
  this.props.onChange(newVal);
33
59
  }
34
60
  render() {
61
+ let error = null;
35
62
  const { label, placeholder, width, readOnly, buttons, tooltip, info, labelPosition, min, max } = this.props;
36
- let value = this.props.value;
63
+ let value = this.state.value;
37
64
  if (value === null) {
38
65
  value = '';
39
66
  }
40
- return (React.createElement(FieldWrapper, { customClass: 'number-field',
67
+ if (this.state.error) {
68
+ if (min && !max) {
69
+ error = `Value must be greater than or equal to ${min}.`;
70
+ }
71
+ else if (!min && max) {
72
+ error = `Value must be less than or equal to ${max}.`;
73
+ }
74
+ else if (min && max) {
75
+ error = `Value must be between ${min} and ${max}.`;
76
+ }
77
+ }
78
+ else {
79
+ error = info;
80
+ }
81
+ return (React.createElement(FieldWrapper, { customClass: `number-field ${this.state.error ? 'invalid' : ''}`,
41
82
  // draggableValue = {true}
42
83
  // onDrag = {(v)=>this.handleLabelDrag(v)}
43
- label: label, tooltip: tooltip, buttons: buttons, info: info, labelPosition: labelPosition, width: width },
44
- React.createElement("input", { ref: this.inputRef, type: 'number', pattern: '/^-?(0|[1-9]\\d*)(\\.\\d+)?$/', placeholder: placeholder, value: value, readOnly: readOnly, min: min, max: max, onFocus: () => this.onSelectFocus(), onBlur: () => this.onSelectBlur(), onChange: (e) => this.onChange(e) })));
84
+ label: label, tooltip: tooltip, buttons: buttons, info: error, labelPosition: labelPosition, width: width },
85
+ React.createElement("input", { ref: this.inputRef, type: 'number', pattern: '/^-?(0|[1-9]\\d*)(\\.\\d+)?$/', placeholder: placeholder, value: value, readOnly: readOnly, min: min, max: max, onFocus: () => this.onSelectFocus(), onBlur: () => this.onSelectBlur(), onChange: (e) => this.validate(e) })));
45
86
  }
46
87
  }
47
88
  export default NumberField;
package/dist/esm/components/number-field/NumberField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../../src/components/number-field/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,YAAY,MAAM,+BAA+B,CAAC;AAkBzD,MAAM,WAAY,SAAQ,KAAK,CAAC,aAAgC;IACpD,QAAQ,CAAM;IAEtB,YAAY,KAAK;QACb,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IACtC,CAAC;IAEO,QAAQ,CAAC,CAAC;QACd,iCAAiC;QACjC,IAAI,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QACzB,IAAI,GAAG,KAAK,EAAE,EAAE;YACZ,GAAG,GAAG,IAAI,CAAC;SACd;aAAM;YACH,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;SACzB;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAEO,aAAa;QACjB,mDAAmD;QACnD,sFAAsF;QACtF,IAAI;IACR,CAAC;IAEO,YAAY;QAChB,+BAA+B;QAC/B,qDAAqD;QACrD,IAAI;IACR,CAAC;IAEO,eAAe,CAAC,CAAS;QAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAEM,MAAM;QACT,MAAM,EACF,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,EACJ,aAAa,EACb,GAAG,EACH,GAAG,EACN,GAAG,IAAI,CAAC,KAAK,CAAC;QACf,IAAI,KAAK,GAAQ,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAClC,IAAI,KAAK,KAAK,IAAI,EAAE;YAChB,KAAK,GAAG,EAAE,CAAC;SACd;QAED,OAAO,CACH,oBAAC,YAAY,IACT,WAAW,EAAC,cAAc;YAC1B,0BAA0B;YAC1B,0CAA0C;YAC1C,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK;YACZ,+BACI,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,+BAA4B,EACpC,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACnC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EACjC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GACnC,CACS,CAClB,CAAC;IACN,CAAC;CACJ;AAED,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../../src/components/number-field/NumberField.tsx"],"names":[],"mappings":"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"}
package/dist/styles.css CHANGED
@@ -1031,6 +1031,9 @@ body a {
1031
1031
  resize: none;
1032
1032
  padding-right: 25px;
1033
1033
  }
1034
+ .form-field.invalid {
1035
+ color: #AF1126;
1036
+ }
1034
1037
  .form-field label {
1035
1038
  font-size: 12px;
1036
1039
  line-height: 21px;
@@ -2170,6 +2173,7 @@ body a {
2170
2173
  padding: 5px;
2171
2174
  box-sizing: border-box;
2172
2175
  background: #272727;
2176
+ width: 210px;
2173
2177
  }
2174
2178
  .shortcuts-menu table tr td {
2175
2179
  font-size: 12px;
package/dist/styles.less CHANGED
@@ -1094,6 +1094,10 @@ body{
1094
1094
  padding-right:25px;
1095
1095
  }
1096
1096
 
1097
+ &.invalid{
1098
+ color: @danger;
1099
+ }
1100
+
1097
1101
  label{
1098
1102
  font-size:@fontSizeSmall;
1099
1103
  line-height:21px;
@@ -1104,7 +1108,7 @@ body{
1104
1108
  text-align:right;
1105
1109
  padding-right:@labelPadding;
1106
1110
  box-sizing: border-box;
1107
-
1111
+
1108
1112
  &.label-top{
1109
1113
  width:100%;
1110
1114
  text-align: left;
@@ -2151,7 +2155,7 @@ body{
2151
2155
  padding: 5px;
2152
2156
  box-sizing: border-box;
2153
2157
  background: @background;
2154
-
2158
+ width: 210px;
2155
2159
  table {
2156
2160
  tr {
2157
2161
  td {
package/less/components/form-field.less CHANGED
@@ -61,6 +61,10 @@
61
61
  padding-right:25px;
62
62
  }
63
63
 
64
+ &.invalid{
65
+ color: @danger;
66
+ }
67
+
64
68
  label{
65
69
  font-size:@fontSizeSmall;
66
70
  line-height:21px;
@@ -71,7 +75,7 @@
71
75
  text-align:right;
72
76
  padding-right:@labelPadding;
73
77
  box-sizing: border-box;
74
-
78
+
75
79
  &.label-top{
76
80
  width:100%;
77
81
  text-align: left;
package/less/components/shortcut-menu.less CHANGED
@@ -2,7 +2,7 @@
2
2
  padding: 5px;
3
3
  box-sizing: border-box;
4
4
  background: @background;
5
-
5
+ width: 210px;
6
6
  table {
7
7
  tr {
8
8
  td {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@imposium-hub/components",
3
- "version": "1.48.16",
3
+ "version": "1.49.0",
4
4
  "description": "React & Typescript component / asset library for Imposium front-ends",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",
package/src/components/number-field/NumberField.tsx CHANGED
@@ -17,17 +17,47 @@ interface INumberFieldProps {
17
17
  max?: number;
18
18
  }
19
19
 
20
- class NumberField extends React.PureComponent<INumberFieldProps> {
20
+ interface INumberFieldState {
21
+ error: boolean;
22
+ value: number;
23
+ }
24
+
25
+ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldState> {
21
26
  private inputRef: any;
22
27
 
23
28
  constructor(props) {
24
29
  super(props);
25
-
30
+ this.state = {
31
+ error: false,
32
+ value: this.props.value
33
+ };
26
34
  this.inputRef = React.createRef();
27
35
  }
28
36
 
37
+ public componentDidMount(): void {
38
+ this.setState({
39
+ error: false,
40
+ value: this.props.value
41
+ });
42
+ }
43
+
44
+ private validate(e) {
45
+ const { max, min } = this.props;
46
+ const val = e.target.value;
47
+ this.setState({ value: val });
48
+ if (min || max) {
49
+ if (val < min || val > max) {
50
+ this.setState({ error: true });
51
+ } else {
52
+ this.setState({ error: false });
53
+ this.onChange(e);
54
+ }
55
+ } else {
56
+ this.onChange(e);
57
+ }
58
+ }
59
+
29
60
  private onChange(e) {
30
- // return null vs an empty string
31
61
  let val = e.target.value;
32
62
  if (val === '') {
33
63
  val = null;
@@ -56,6 +86,8 @@ class NumberField extends React.PureComponent<INumberFieldProps> {
56
86
  }
57
87
 
58
88
  public render() {
89
+ let error: string = null;
90
+
59
91
  const {
60
92
  label,
61
93
  placeholder,
@@ -68,20 +100,32 @@ class NumberField extends React.PureComponent<INumberFieldProps> {
68
100
  min,
69
101
  max
70
102
  } = this.props;
71
- let value: any = this.props.value;
103
+ let value: any = this.state.value;
72
104
  if (value === null) {
73
105
  value = '';
74
106
  }
75
107
 
108
+ if (this.state.error) {
109
+ if (min && !max) {
110
+ error = `Value must be greater than or equal to ${min}.`;
111
+ } else if (!min && max) {
112
+ error = `Value must be less than or equal to ${max}.`;
113
+ } else if (min && max) {
114
+ error = `Value must be between ${min} and ${max}.`;
115
+ }
116
+ } else {
117
+ error = info;
118
+ }
119
+
76
120
  return (
77
121
  <FieldWrapper
78
- customClass='number-field'
122
+ customClass={`number-field ${this.state.error ? 'invalid' : ''}`}
79
123
  // draggableValue = {true}
80
124
  // onDrag = {(v)=>this.handleLabelDrag(v)}
81
125
  label={label}
82
126
  tooltip={tooltip}
83
127
  buttons={buttons}
84
- info={info}
128
+ info={error}
85
129
  labelPosition={labelPosition}
86
130
  width={width}>
87
131
  <input
@@ -95,7 +139,7 @@ class NumberField extends React.PureComponent<INumberFieldProps> {
95
139
  max={max}
96
140
  onFocus={() => this.onSelectFocus()}
97
141
  onBlur={() => this.onSelectBlur()}
98
- onChange={(e) => this.onChange(e)}
142
+ onChange={(e) => this.validate(e)}
99
143
  />
100
144
  </FieldWrapper>
101
145
  );