@imposium-hub/components 1.48.16 → 1.49.1

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 +8 -1
  2. package/dist/cjs/components/number-field/NumberField.js +54 -5
  3. package/dist/cjs/components/number-field/NumberField.js.map +1 -1
  4. package/dist/esm/components/number-field/NumberField.d.ts +8 -1
  5. package/dist/esm/components/number-field/NumberField.js +54 -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 +60 -7
package/dist/cjs/components/number-field/NumberField.d.ts CHANGED
@@ -14,9 +14,16 @@ 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
+ componentDidUpdate(prevProps: any): void;
26
+ private validate;
20
27
  private onChange;
21
28
  private onSelectFocus;
22
29
  private onSelectBlur;
package/dist/cjs/components/number-field/NumberField.js CHANGED
@@ -47,11 +47,45 @@ 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.componentDidUpdate = function (prevProps) {
64
+ if (prevProps.value !== this.props.value) {
65
+ this.setState({
66
+ error: false,
67
+ value: this.props.value
68
+ });
69
+ }
70
+ };
71
+ NumberField.prototype.validate = function (e) {
72
+ var _a = this.props, max = _a.max, min = _a.min;
73
+ var val = e.target.value;
74
+ this.setState({ value: val });
75
+ if (min || max) {
76
+ if (val < min || val > max) {
77
+ this.setState({ error: true });
78
+ }
79
+ else {
80
+ this.setState({ error: false });
81
+ this.onChange(e);
82
+ }
83
+ }
84
+ else {
85
+ this.onChange(e);
86
+ }
87
+ };
53
88
  NumberField.prototype.onChange = function (e) {
54
- // return null vs an empty string
55
89
  var val = e.target.value;
56
90
  if (val === '') {
57
91
  val = null;
@@ -77,16 +111,31 @@ var NumberField = /** @class */ (function (_super) {
77
111
  };
78
112
  NumberField.prototype.render = function () {
79
113
  var _this = this;
114
+ var error = null;
80
115
  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;
116
+ var value = this.state.value;
82
117
  if (value === null) {
83
118
  value = '';
84
119
  }
85
- return (React.createElement(FieldWrapper_1.default, { customClass: 'number-field',
120
+ if (this.state.error) {
121
+ if (min && !max) {
122
+ error = "Value must be greater than or equal to ".concat(min, ".");
123
+ }
124
+ else if (!min && max) {
125
+ error = "Value must be less than or equal to ".concat(max, ".");
126
+ }
127
+ else if (min && max) {
128
+ error = "Value must be between ".concat(min, " and ").concat(max, ".");
129
+ }
130
+ }
131
+ else {
132
+ error = info;
133
+ }
134
+ return (React.createElement(FieldWrapper_1.default, { customClass: "number-field ".concat(this.state.error ? 'invalid' : ''),
86
135
  // draggableValue = {true}
87
136
  // 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); } })));
137
+ label: label, tooltip: tooltip, buttons: buttons, info: error, labelPosition: labelPosition, width: width },
138
+ 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
139
  };
91
140
  return NumberField;
92
141
  }(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,16 @@ 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
+ componentDidUpdate(prevProps: any): void;
26
+ private validate;
20
27
  private onChange;
21
28
  private onSelectFocus;
22
29
  private onSelectBlur;
package/dist/esm/components/number-field/NumberField.js CHANGED
@@ -4,10 +4,44 @@ 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
+ componentDidUpdate(prevProps) {
20
+ if (prevProps.value !== this.props.value) {
21
+ this.setState({
22
+ error: false,
23
+ value: this.props.value
24
+ });
25
+ }
26
+ }
27
+ validate(e) {
28
+ const { max, min } = this.props;
29
+ const val = e.target.value;
30
+ this.setState({ value: val });
31
+ if (min || max) {
32
+ if (val < min || val > max) {
33
+ this.setState({ error: true });
34
+ }
35
+ else {
36
+ this.setState({ error: false });
37
+ this.onChange(e);
38
+ }
39
+ }
40
+ else {
41
+ this.onChange(e);
42
+ }
43
+ }
9
44
  onChange(e) {
10
- // return null vs an empty string
11
45
  let val = e.target.value;
12
46
  if (val === '') {
13
47
  val = null;
@@ -32,16 +66,31 @@ class NumberField extends React.PureComponent {
32
66
  this.props.onChange(newVal);
33
67
  }
34
68
  render() {
69
+ let error = null;
35
70
  const { label, placeholder, width, readOnly, buttons, tooltip, info, labelPosition, min, max } = this.props;
36
- let value = this.props.value;
71
+ let value = this.state.value;
37
72
  if (value === null) {
38
73
  value = '';
39
74
  }
40
- return (React.createElement(FieldWrapper, { customClass: 'number-field',
75
+ if (this.state.error) {
76
+ if (min && !max) {
77
+ error = `Value must be greater than or equal to ${min}.`;
78
+ }
79
+ else if (!min && max) {
80
+ error = `Value must be less than or equal to ${max}.`;
81
+ }
82
+ else if (min && max) {
83
+ error = `Value must be between ${min} and ${max}.`;
84
+ }
85
+ }
86
+ else {
87
+ error = info;
88
+ }
89
+ return (React.createElement(FieldWrapper, { customClass: `number-field ${this.state.error ? 'invalid' : ''}`,
41
90
  // draggableValue = {true}
42
91
  // 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) })));
92
+ label: label, tooltip: tooltip, buttons: buttons, info: error, labelPosition: labelPosition, width: width },
93
+ 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
94
  }
46
95
  }
47
96
  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.1",
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,56 @@ 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
+ public componentDidUpdate(prevProps): void {
45
+ if (prevProps.value !== this.props.value) {
46
+ this.setState({
47
+ error: false,
48
+ value: this.props.value
49
+ });
50
+ }
51
+ }
52
+
53
+ private validate(e) {
54
+ const { max, min } = this.props;
55
+ const val = e.target.value;
56
+ this.setState({ value: val });
57
+ if (min || max) {
58
+ if (val < min || val > max) {
59
+ this.setState({ error: true });
60
+ } else {
61
+ this.setState({ error: false });
62
+ this.onChange(e);
63
+ }
64
+ } else {
65
+ this.onChange(e);
66
+ }
67
+ }
68
+
29
69
  private onChange(e) {
30
- // return null vs an empty string
31
70
  let val = e.target.value;
32
71
  if (val === '') {
33
72
  val = null;
@@ -56,6 +95,8 @@ class NumberField extends React.PureComponent<INumberFieldProps> {
56
95
  }
57
96
 
58
97
  public render() {
98
+ let error: string = null;
99
+
59
100
  const {
60
101
  label,
61
102
  placeholder,
@@ -68,20 +109,32 @@ class NumberField extends React.PureComponent<INumberFieldProps> {
68
109
  min,
69
110
  max
70
111
  } = this.props;
71
- let value: any = this.props.value;
112
+ let value: any = this.state.value;
72
113
  if (value === null) {
73
114
  value = '';
74
115
  }
75
116
 
117
+ if (this.state.error) {
118
+ if (min && !max) {
119
+ error = `Value must be greater than or equal to ${min}.`;
120
+ } else if (!min && max) {
121
+ error = `Value must be less than or equal to ${max}.`;
122
+ } else if (min && max) {
123
+ error = `Value must be between ${min} and ${max}.`;
124
+ }
125
+ } else {
126
+ error = info;
127
+ }
128
+
76
129
  return (
77
130
  <FieldWrapper
78
- customClass='number-field'
131
+ customClass={`number-field ${this.state.error ? 'invalid' : ''}`}
79
132
  // draggableValue = {true}
80
133
  // onDrag = {(v)=>this.handleLabelDrag(v)}
81
134
  label={label}
82
135
  tooltip={tooltip}
83
136
  buttons={buttons}
84
- info={info}
137
+ info={error}
85
138
  labelPosition={labelPosition}
86
139
  width={width}>
87
140
  <input
@@ -95,7 +148,7 @@ class NumberField extends React.PureComponent<INumberFieldProps> {
95
148
  max={max}
96
149
  onFocus={() => this.onSelectFocus()}
97
150
  onBlur={() => this.onSelectBlur()}
98
- onChange={(e) => this.onChange(e)}
151
+ onChange={(e) => this.validate(e)}
99
152
  />
100
153
  </FieldWrapper>
101
154
  );