@commercetools-uikit/number-field 12.2.7 → 13.0.2
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.
- package/README.md +43 -28
- package/dist/commercetools-uikit-number-field.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-number-field.cjs.dev.js +38 -161
- package/dist/commercetools-uikit-number-field.cjs.prod.js +8 -5
- package/dist/commercetools-uikit-number-field.esm.js +39 -161
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/number-field.d.ts +43 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +11 -11
package/README.md
CHANGED
|
@@ -45,34 +45,49 @@ export default Example;
|
|
|
45
45
|
|
|
46
46
|
## Properties
|
|
47
47
|
|
|
48
|
-
| Props | Type
|
|
49
|
-
| ---------------------- |
|
|
50
|
-
| `id` | `string`
|
|
51
|
-
| `horizontalConstraint` | `
|
|
52
|
-
| `errors` | `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
|
|
48
|
+
| Props | Type | Required | Default | Description |
|
|
49
|
+
| ---------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
50
|
+
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
|
|
51
|
+
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. |
|
|
52
|
+
| `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
<br />
Unknown errors will be forwarded to `renderError` |
|
|
53
|
+
| `renderError` | `Function`<br/>[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
<br /> |
|
|
54
|
+
| `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
|
|
55
|
+
| `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
|
|
56
|
+
| `name` | `string` | | | Used as HTML name of the input component. property |
|
|
57
|
+
| `value` | `union`<br/>Possible values:<br/>`string , number` | ✅ | | Value of the input component. |
|
|
58
|
+
| `autoComplete` | `string` | | | Used as HTML `autocomplete` of the input component. property |
|
|
59
|
+
| `onChange` | `ChangeEventHandler` | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
<br /> |
|
|
60
|
+
| `onBlur` | `FocusEventHandler` | | | Called when input is blurred
<br /> |
|
|
61
|
+
| `onFocus` | `FocusEventHandler` | | | Called when input is focused
<br /> |
|
|
62
|
+
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
|
|
63
|
+
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
|
|
64
|
+
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
|
|
65
|
+
| `placeholder` | `string` | | | Placeholder text for the input |
|
|
66
|
+
| `min` | `number` | | | Value is used as `min` property on input field |
|
|
67
|
+
| `max` | `number` | | | Value is used as `max` property on input field |
|
|
68
|
+
| `step` | `union`<br/>Possible values:<br/>`number , 'any'` | | | Value is used as `step` property on input field.
<br />
Use the value `any` for inputs which accept an unpredictable amount of decimals. |
|
|
69
|
+
| `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | ✅ | | Title of the label |
|
|
70
|
+
| `hint` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. |
|
|
71
|
+
| `description` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Provides a description for the title. |
|
|
72
|
+
| `onInfoButtonClick` | `Function`<br/>[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
<br />
Info button will only be visible when this prop is passed.
<br /> |
|
|
73
|
+
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
<br />
Will only get rendered when `hint` is passed as well. |
|
|
74
|
+
| `badge` | `ReactNode` | | | Badge to be displayed beside the label.
<br />
Might be used to display additional information about the content of the field (E.g verified email) |
|
|
75
|
+
|
|
76
|
+
## Signatures
|
|
77
|
+
|
|
78
|
+
### Signature `renderError`
|
|
79
|
+
|
|
80
|
+
```ts
|
|
81
|
+
(key: string, error?: boolean) => ReactNode;
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Signature `onInfoButtonClick`
|
|
85
|
+
|
|
86
|
+
```ts
|
|
87
|
+
(
|
|
88
|
+
event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
|
|
89
|
+
) => void
|
|
90
|
+
```
|
|
76
91
|
|
|
77
92
|
## `data-*` props
|
|
78
93
|
|
|
@@ -17,12 +17,11 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
|
17
17
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
18
18
|
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
|
|
19
19
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
20
|
+
var _pt = require('prop-types');
|
|
20
21
|
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
21
22
|
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
22
23
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
23
24
|
var react = require('react');
|
|
24
|
-
var PropTypes = require('prop-types');
|
|
25
|
-
var requiredIf = require('react-required-if');
|
|
26
25
|
var utils = require('@commercetools-uikit/utils');
|
|
27
26
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
28
27
|
var Stack = require('@commercetools-uikit/spacings-stack');
|
|
@@ -42,20 +41,19 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
42
41
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
43
42
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
44
43
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
44
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
45
45
|
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
|
|
46
46
|
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
|
|
47
47
|
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
48
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
49
|
-
var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
|
|
50
48
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
51
49
|
var Stack__default = /*#__PURE__*/_interopDefault(Stack);
|
|
52
50
|
var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
|
|
53
51
|
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
54
52
|
var NumberInput__default = /*#__PURE__*/_interopDefault(NumberInput);
|
|
55
53
|
|
|
56
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object);
|
|
54
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
57
55
|
|
|
58
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
56
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
59
57
|
|
|
60
58
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
61
59
|
|
|
@@ -96,6 +94,14 @@ var NumberField = /*#__PURE__*/function (_Component) {
|
|
|
96
94
|
_createClass(NumberField, [{
|
|
97
95
|
key: "render",
|
|
98
96
|
value: function render() {
|
|
97
|
+
if (!this.props.isReadOnly) {
|
|
98
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'NumberField: `onChange` is required when field is not read only.') : void 0;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
if (this.props.hintIcon) {
|
|
102
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.hint === 'string' || /*#__PURE__*/react.isValidElement(this.props.hint), 'NumberField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
99
105
|
var hasError = this.props.touched && hasErrors(this.props.errors);
|
|
100
106
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
101
107
|
max: this.props.horizontalConstraint,
|
|
@@ -152,165 +158,36 @@ NumberField.getDerivedStateFromProps = function (props, state) {
|
|
|
152
158
|
};
|
|
153
159
|
|
|
154
160
|
NumberField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
*/
|
|
181
|
-
renderError: PropTypes__default["default"].func,
|
|
182
|
-
|
|
183
|
-
/**
|
|
184
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
185
|
-
*/
|
|
186
|
-
isRequired: PropTypes__default["default"].bool,
|
|
187
|
-
|
|
188
|
-
/**
|
|
189
|
-
* Indicates whether the field was touched. Errors will only be shown when the field was touched.
|
|
190
|
-
*/
|
|
191
|
-
touched: PropTypes__default["default"].bool,
|
|
192
|
-
// NumberInput
|
|
193
|
-
|
|
194
|
-
/**
|
|
195
|
-
* Used as HTML name of the input component. property
|
|
196
|
-
*/
|
|
197
|
-
name: PropTypes__default["default"].string,
|
|
198
|
-
|
|
199
|
-
/**
|
|
200
|
-
* Value of the input component.
|
|
201
|
-
*/
|
|
202
|
-
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired,
|
|
203
|
-
|
|
204
|
-
/**
|
|
205
|
-
* Used as HTML `autocomplete` of the input component. property
|
|
206
|
-
*/
|
|
207
|
-
autoComplete: PropTypes__default["default"].string,
|
|
208
|
-
|
|
209
|
-
/**
|
|
210
|
-
* Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
|
|
211
|
-
* <br />
|
|
212
|
-
* Signature: `(event) => void`
|
|
213
|
-
*/
|
|
214
|
-
onChange: requiredIf__default["default"](PropTypes__default["default"].func, function (props) {
|
|
215
|
-
return !props.isReadOnly;
|
|
216
|
-
}),
|
|
217
|
-
|
|
218
|
-
/**
|
|
219
|
-
* Called when input is blurred
|
|
220
|
-
* <br />
|
|
221
|
-
* Signature: `(event) => void`
|
|
222
|
-
*/
|
|
223
|
-
onBlur: PropTypes__default["default"].func,
|
|
224
|
-
|
|
225
|
-
/**
|
|
226
|
-
* Called when input is focused
|
|
227
|
-
* <br />
|
|
228
|
-
* Signature: `(event) => void`
|
|
229
|
-
*/
|
|
230
|
-
onFocus: PropTypes__default["default"].func,
|
|
231
|
-
|
|
232
|
-
/**
|
|
233
|
-
* Focus the input on initial render
|
|
234
|
-
*/
|
|
235
|
-
isAutofocussed: PropTypes__default["default"].bool,
|
|
236
|
-
|
|
237
|
-
/**
|
|
238
|
-
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
|
|
239
|
-
*/
|
|
240
|
-
isDisabled: PropTypes__default["default"].bool,
|
|
241
|
-
|
|
242
|
-
/**
|
|
243
|
-
* Indicates that the field is displaying read-only content
|
|
244
|
-
*/
|
|
245
|
-
isReadOnly: PropTypes__default["default"].bool,
|
|
246
|
-
|
|
247
|
-
/**
|
|
248
|
-
* Placeholder text for the input
|
|
249
|
-
*/
|
|
250
|
-
placeholder: PropTypes__default["default"].string,
|
|
251
|
-
|
|
252
|
-
/**
|
|
253
|
-
* Value is used as `min` property on input field
|
|
254
|
-
*/
|
|
255
|
-
min: PropTypes__default["default"].number,
|
|
256
|
-
|
|
257
|
-
/**
|
|
258
|
-
* Value is used as `max` property on input field
|
|
259
|
-
*/
|
|
260
|
-
max: PropTypes__default["default"].number,
|
|
261
|
-
|
|
262
|
-
/**
|
|
263
|
-
* Value is used as `step` property on input field.
|
|
264
|
-
* <br />
|
|
265
|
-
* Use the value `any` for inputs which accept an unpredictable amount of decimals.
|
|
266
|
-
*/
|
|
267
|
-
step: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].oneOf(['any'])]),
|
|
268
|
-
// LabelField
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* Title of the label
|
|
272
|
-
*/
|
|
273
|
-
title: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]).isRequired,
|
|
274
|
-
|
|
275
|
-
/**
|
|
276
|
-
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
|
|
277
|
-
*/
|
|
278
|
-
hint: requiredIf__default["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]), function (props) {
|
|
279
|
-
return props.hintIcon;
|
|
280
|
-
}),
|
|
281
|
-
|
|
282
|
-
/**
|
|
283
|
-
* Provides a description for the title.
|
|
284
|
-
*/
|
|
285
|
-
description: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
|
|
286
|
-
|
|
287
|
-
/**
|
|
288
|
-
* Function called when info button is pressed.
|
|
289
|
-
* <br />
|
|
290
|
-
* Info button will only be visible when this prop is passed.
|
|
291
|
-
* <br />
|
|
292
|
-
* Signature: `(event) => void`
|
|
293
|
-
*/
|
|
294
|
-
onInfoButtonClick: PropTypes__default["default"].func,
|
|
295
|
-
|
|
296
|
-
/**
|
|
297
|
-
* Icon to be displayed beside the hint text.
|
|
298
|
-
* <br />
|
|
299
|
-
* Will only get rendered when `hint` is passed as well.
|
|
300
|
-
*/
|
|
301
|
-
hintIcon: PropTypes__default["default"].node,
|
|
302
|
-
|
|
303
|
-
/**
|
|
304
|
-
* Badge to be displayed beside the label.
|
|
305
|
-
* <br />
|
|
306
|
-
* Might be used to display additional information about the content of the field (E.g verified email)
|
|
307
|
-
*/
|
|
308
|
-
badge: PropTypes__default["default"].node
|
|
161
|
+
id: _pt__default["default"].string,
|
|
162
|
+
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
163
|
+
errors: _pt__default["default"].objectOf(_pt__default["default"].bool),
|
|
164
|
+
renderError: _pt__default["default"].func,
|
|
165
|
+
isRequired: _pt__default["default"].bool,
|
|
166
|
+
touched: _pt__default["default"].bool,
|
|
167
|
+
name: _pt__default["default"].string,
|
|
168
|
+
value: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].number]).isRequired,
|
|
169
|
+
autoComplete: _pt__default["default"].string,
|
|
170
|
+
onChange: _pt__default["default"].func,
|
|
171
|
+
onBlur: _pt__default["default"].func,
|
|
172
|
+
onFocus: _pt__default["default"].func,
|
|
173
|
+
isAutofocussed: _pt__default["default"].bool,
|
|
174
|
+
isDisabled: _pt__default["default"].bool,
|
|
175
|
+
isReadOnly: _pt__default["default"].bool,
|
|
176
|
+
placeholder: _pt__default["default"].string,
|
|
177
|
+
min: _pt__default["default"].number,
|
|
178
|
+
max: _pt__default["default"].number,
|
|
179
|
+
step: _pt__default["default"].oneOfType([_pt__default["default"].number, _pt__default["default"].oneOf(['any'])]),
|
|
180
|
+
title: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]).isRequired,
|
|
181
|
+
hint: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
|
|
182
|
+
description: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
|
|
183
|
+
onInfoButtonClick: _pt__default["default"].func,
|
|
184
|
+
hintIcon: _pt__default["default"].element,
|
|
185
|
+
badge: _pt__default["default"].node
|
|
309
186
|
} : {};
|
|
310
187
|
var NumberField$1 = NumberField;
|
|
311
188
|
|
|
312
189
|
// NOTE: This string will be replaced on build time with the package version.
|
|
313
|
-
var version = "
|
|
190
|
+
var version = "13.0.2";
|
|
314
191
|
|
|
315
192
|
exports["default"] = NumberField$1;
|
|
316
193
|
exports.version = version;
|
|
@@ -17,12 +17,11 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
|
17
17
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
18
18
|
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
|
|
19
19
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
20
|
+
require('prop-types');
|
|
20
21
|
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
21
22
|
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
22
23
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
23
24
|
var react = require('react');
|
|
24
|
-
require('prop-types');
|
|
25
|
-
require('react-required-if');
|
|
26
25
|
var utils = require('@commercetools-uikit/utils');
|
|
27
26
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
28
27
|
var Stack = require('@commercetools-uikit/spacings-stack');
|
|
@@ -51,9 +50,9 @@ var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
|
|
|
51
50
|
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
52
51
|
var NumberInput__default = /*#__PURE__*/_interopDefault(NumberInput);
|
|
53
52
|
|
|
54
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object);
|
|
53
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
55
54
|
|
|
56
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
55
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
57
56
|
|
|
58
57
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
59
58
|
|
|
@@ -94,6 +93,10 @@ var NumberField = /*#__PURE__*/function (_Component) {
|
|
|
94
93
|
_createClass(NumberField, [{
|
|
95
94
|
key: "render",
|
|
96
95
|
value: function render() {
|
|
96
|
+
if (!this.props.isReadOnly) ;
|
|
97
|
+
|
|
98
|
+
if (this.props.hintIcon) ;
|
|
99
|
+
|
|
97
100
|
var hasError = this.props.touched && hasErrors(this.props.errors);
|
|
98
101
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
99
102
|
max: this.props.horizontalConstraint,
|
|
@@ -153,7 +156,7 @@ NumberField.propTypes = {};
|
|
|
153
156
|
var NumberField$1 = NumberField;
|
|
154
157
|
|
|
155
158
|
// NOTE: This string will be replaced on build time with the package version.
|
|
156
|
-
var version = "
|
|
159
|
+
var version = "13.0.2";
|
|
157
160
|
|
|
158
161
|
exports["default"] = NumberField$1;
|
|
159
162
|
exports.version = version;
|
|
@@ -13,13 +13,12 @@ import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
|
|
|
13
13
|
import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
|
|
14
14
|
import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
|
|
15
15
|
import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
|
|
16
|
+
import _pt from 'prop-types';
|
|
16
17
|
import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
|
|
17
18
|
import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
|
|
18
19
|
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
19
|
-
import { Component } from 'react';
|
|
20
|
-
import
|
|
21
|
-
import requiredIf from 'react-required-if';
|
|
22
|
-
import { createSequentialId, filterDataAttributes, getFieldId } from '@commercetools-uikit/utils';
|
|
20
|
+
import { isValidElement, Component } from 'react';
|
|
21
|
+
import { createSequentialId, warning, filterDataAttributes, getFieldId } from '@commercetools-uikit/utils';
|
|
23
22
|
import Constraints from '@commercetools-uikit/constraints';
|
|
24
23
|
import Stack from '@commercetools-uikit/spacings-stack';
|
|
25
24
|
import FieldLabel from '@commercetools-uikit/field-label';
|
|
@@ -27,9 +26,9 @@ import FieldErrors from '@commercetools-uikit/field-errors';
|
|
|
27
26
|
import NumberInput from '@commercetools-uikit/number-input';
|
|
28
27
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
29
28
|
|
|
30
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object);
|
|
29
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
31
30
|
|
|
32
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
31
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
33
32
|
|
|
34
33
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
35
34
|
|
|
@@ -70,6 +69,14 @@ var NumberField = /*#__PURE__*/function (_Component) {
|
|
|
70
69
|
_createClass(NumberField, [{
|
|
71
70
|
key: "render",
|
|
72
71
|
value: function render() {
|
|
72
|
+
if (!this.props.isReadOnly) {
|
|
73
|
+
process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'NumberField: `onChange` is required when field is not read only.') : void 0;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
if (this.props.hintIcon) {
|
|
77
|
+
process.env.NODE_ENV !== "production" ? warning(typeof this.props.hint === 'string' || /*#__PURE__*/isValidElement(this.props.hint), 'NumberField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
78
|
+
}
|
|
79
|
+
|
|
73
80
|
var hasError = this.props.touched && hasErrors(this.props.errors);
|
|
74
81
|
return jsx(Constraints.Horizontal, {
|
|
75
82
|
max: this.props.horizontalConstraint,
|
|
@@ -126,164 +133,35 @@ NumberField.getDerivedStateFromProps = function (props, state) {
|
|
|
126
133
|
};
|
|
127
134
|
|
|
128
135
|
NumberField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
*/
|
|
155
|
-
renderError: PropTypes.func,
|
|
156
|
-
|
|
157
|
-
/**
|
|
158
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
159
|
-
*/
|
|
160
|
-
isRequired: PropTypes.bool,
|
|
161
|
-
|
|
162
|
-
/**
|
|
163
|
-
* Indicates whether the field was touched. Errors will only be shown when the field was touched.
|
|
164
|
-
*/
|
|
165
|
-
touched: PropTypes.bool,
|
|
166
|
-
// NumberInput
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* Used as HTML name of the input component. property
|
|
170
|
-
*/
|
|
171
|
-
name: PropTypes.string,
|
|
172
|
-
|
|
173
|
-
/**
|
|
174
|
-
* Value of the input component.
|
|
175
|
-
*/
|
|
176
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* Used as HTML `autocomplete` of the input component. property
|
|
180
|
-
*/
|
|
181
|
-
autoComplete: PropTypes.string,
|
|
182
|
-
|
|
183
|
-
/**
|
|
184
|
-
* Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
|
|
185
|
-
* <br />
|
|
186
|
-
* Signature: `(event) => void`
|
|
187
|
-
*/
|
|
188
|
-
onChange: requiredIf(PropTypes.func, function (props) {
|
|
189
|
-
return !props.isReadOnly;
|
|
190
|
-
}),
|
|
191
|
-
|
|
192
|
-
/**
|
|
193
|
-
* Called when input is blurred
|
|
194
|
-
* <br />
|
|
195
|
-
* Signature: `(event) => void`
|
|
196
|
-
*/
|
|
197
|
-
onBlur: PropTypes.func,
|
|
198
|
-
|
|
199
|
-
/**
|
|
200
|
-
* Called when input is focused
|
|
201
|
-
* <br />
|
|
202
|
-
* Signature: `(event) => void`
|
|
203
|
-
*/
|
|
204
|
-
onFocus: PropTypes.func,
|
|
205
|
-
|
|
206
|
-
/**
|
|
207
|
-
* Focus the input on initial render
|
|
208
|
-
*/
|
|
209
|
-
isAutofocussed: PropTypes.bool,
|
|
210
|
-
|
|
211
|
-
/**
|
|
212
|
-
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
|
|
213
|
-
*/
|
|
214
|
-
isDisabled: PropTypes.bool,
|
|
215
|
-
|
|
216
|
-
/**
|
|
217
|
-
* Indicates that the field is displaying read-only content
|
|
218
|
-
*/
|
|
219
|
-
isReadOnly: PropTypes.bool,
|
|
220
|
-
|
|
221
|
-
/**
|
|
222
|
-
* Placeholder text for the input
|
|
223
|
-
*/
|
|
224
|
-
placeholder: PropTypes.string,
|
|
225
|
-
|
|
226
|
-
/**
|
|
227
|
-
* Value is used as `min` property on input field
|
|
228
|
-
*/
|
|
229
|
-
min: PropTypes.number,
|
|
230
|
-
|
|
231
|
-
/**
|
|
232
|
-
* Value is used as `max` property on input field
|
|
233
|
-
*/
|
|
234
|
-
max: PropTypes.number,
|
|
235
|
-
|
|
236
|
-
/**
|
|
237
|
-
* Value is used as `step` property on input field.
|
|
238
|
-
* <br />
|
|
239
|
-
* Use the value `any` for inputs which accept an unpredictable amount of decimals.
|
|
240
|
-
*/
|
|
241
|
-
step: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['any'])]),
|
|
242
|
-
// LabelField
|
|
243
|
-
|
|
244
|
-
/**
|
|
245
|
-
* Title of the label
|
|
246
|
-
*/
|
|
247
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
|
|
248
|
-
|
|
249
|
-
/**
|
|
250
|
-
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
|
|
251
|
-
*/
|
|
252
|
-
hint: requiredIf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]), function (props) {
|
|
253
|
-
return props.hintIcon;
|
|
254
|
-
}),
|
|
255
|
-
|
|
256
|
-
/**
|
|
257
|
-
* Provides a description for the title.
|
|
258
|
-
*/
|
|
259
|
-
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
260
|
-
|
|
261
|
-
/**
|
|
262
|
-
* Function called when info button is pressed.
|
|
263
|
-
* <br />
|
|
264
|
-
* Info button will only be visible when this prop is passed.
|
|
265
|
-
* <br />
|
|
266
|
-
* Signature: `(event) => void`
|
|
267
|
-
*/
|
|
268
|
-
onInfoButtonClick: PropTypes.func,
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* Icon to be displayed beside the hint text.
|
|
272
|
-
* <br />
|
|
273
|
-
* Will only get rendered when `hint` is passed as well.
|
|
274
|
-
*/
|
|
275
|
-
hintIcon: PropTypes.node,
|
|
276
|
-
|
|
277
|
-
/**
|
|
278
|
-
* Badge to be displayed beside the label.
|
|
279
|
-
* <br />
|
|
280
|
-
* Might be used to display additional information about the content of the field (E.g verified email)
|
|
281
|
-
*/
|
|
282
|
-
badge: PropTypes.node
|
|
136
|
+
id: _pt.string,
|
|
137
|
+
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
138
|
+
errors: _pt.objectOf(_pt.bool),
|
|
139
|
+
renderError: _pt.func,
|
|
140
|
+
isRequired: _pt.bool,
|
|
141
|
+
touched: _pt.bool,
|
|
142
|
+
name: _pt.string,
|
|
143
|
+
value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
|
|
144
|
+
autoComplete: _pt.string,
|
|
145
|
+
onChange: _pt.func,
|
|
146
|
+
onBlur: _pt.func,
|
|
147
|
+
onFocus: _pt.func,
|
|
148
|
+
isAutofocussed: _pt.bool,
|
|
149
|
+
isDisabled: _pt.bool,
|
|
150
|
+
isReadOnly: _pt.bool,
|
|
151
|
+
placeholder: _pt.string,
|
|
152
|
+
min: _pt.number,
|
|
153
|
+
max: _pt.number,
|
|
154
|
+
step: _pt.oneOfType([_pt.number, _pt.oneOf(['any'])]),
|
|
155
|
+
title: _pt.oneOfType([_pt.string, _pt.node]).isRequired,
|
|
156
|
+
hint: _pt.oneOfType([_pt.string, _pt.node]),
|
|
157
|
+
description: _pt.oneOfType([_pt.string, _pt.node]),
|
|
158
|
+
onInfoButtonClick: _pt.func,
|
|
159
|
+
hintIcon: _pt.element,
|
|
160
|
+
badge: _pt.node
|
|
283
161
|
} : {};
|
|
284
162
|
var NumberField$1 = NumberField;
|
|
285
163
|
|
|
286
164
|
// NOTE: This string will be replaced on build time with the package version.
|
|
287
|
-
var version = "
|
|
165
|
+
var version = "13.0.2";
|
|
288
166
|
|
|
289
167
|
export { NumberField$1 as default, version };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { Component, type ChangeEventHandler, type FocusEventHandler, type ReactElement, type ReactNode, type MouseEvent, type KeyboardEvent } from 'react';
|
|
2
|
+
declare type TFieldErrors = Record<string, boolean>;
|
|
3
|
+
declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
|
|
4
|
+
declare type TNumberFieldProps = {
|
|
5
|
+
id?: string;
|
|
6
|
+
horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
7
|
+
errors?: TFieldErrors;
|
|
8
|
+
renderError?: TErrorRenderer;
|
|
9
|
+
isRequired?: boolean;
|
|
10
|
+
touched?: boolean;
|
|
11
|
+
name?: string;
|
|
12
|
+
value: string | number;
|
|
13
|
+
autoComplete?: string;
|
|
14
|
+
onChange?: ChangeEventHandler;
|
|
15
|
+
onBlur?: FocusEventHandler;
|
|
16
|
+
onFocus?: FocusEventHandler;
|
|
17
|
+
isAutofocussed?: boolean;
|
|
18
|
+
isDisabled?: boolean;
|
|
19
|
+
isReadOnly?: boolean;
|
|
20
|
+
placeholder?: string;
|
|
21
|
+
min?: number;
|
|
22
|
+
max?: number;
|
|
23
|
+
step?: number | 'any';
|
|
24
|
+
title: string | ReactNode;
|
|
25
|
+
hint?: string | ReactNode;
|
|
26
|
+
description?: string | ReactNode;
|
|
27
|
+
onInfoButtonClick?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
|
|
28
|
+
hintIcon?: ReactElement;
|
|
29
|
+
badge?: ReactNode;
|
|
30
|
+
};
|
|
31
|
+
declare type TNumberFieldState = Pick<TNumberFieldProps, 'id'>;
|
|
32
|
+
declare class NumberField extends Component<TNumberFieldProps, TNumberFieldState> {
|
|
33
|
+
static displayName: string;
|
|
34
|
+
static defaultProps: Pick<TNumberFieldProps, 'horizontalConstraint'>;
|
|
35
|
+
state: {
|
|
36
|
+
id: string | undefined;
|
|
37
|
+
};
|
|
38
|
+
static getDerivedStateFromProps: (props: TNumberFieldProps, state: TNumberFieldState) => {
|
|
39
|
+
id: string;
|
|
40
|
+
};
|
|
41
|
+
render(): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
42
|
+
}
|
|
43
|
+
export default NumberField;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/number-field",
|
|
3
3
|
"description": "A controlled input component for numbers with validation states and a label.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "13.0.2",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -19,18 +19,18 @@
|
|
|
19
19
|
"module": "dist/commercetools-uikit-number-field.esm.js",
|
|
20
20
|
"files": ["dist"],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@babel/runtime": "7.
|
|
23
|
-
"@babel/runtime-corejs3": "7.
|
|
24
|
-
"@commercetools-uikit/constraints": "
|
|
25
|
-
"@commercetools-uikit/design-system": "
|
|
26
|
-
"@commercetools-uikit/field-errors": "
|
|
27
|
-
"@commercetools-uikit/field-label": "
|
|
28
|
-
"@commercetools-uikit/number-input": "
|
|
29
|
-
"@commercetools-uikit/spacings-stack": "
|
|
30
|
-
"@commercetools-uikit/utils": "
|
|
22
|
+
"@babel/runtime": "7.17.2",
|
|
23
|
+
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
+
"@commercetools-uikit/constraints": "13.0.2",
|
|
25
|
+
"@commercetools-uikit/design-system": "13.0.0",
|
|
26
|
+
"@commercetools-uikit/field-errors": "13.0.2",
|
|
27
|
+
"@commercetools-uikit/field-label": "13.0.2",
|
|
28
|
+
"@commercetools-uikit/number-input": "13.0.2",
|
|
29
|
+
"@commercetools-uikit/spacings-stack": "13.0.2",
|
|
30
|
+
"@commercetools-uikit/utils": "13.0.2",
|
|
31
31
|
"@emotion/react": "^11.4.0",
|
|
32
32
|
"@emotion/styled": "^11.3.0",
|
|
33
|
-
"prop-types": "15.
|
|
33
|
+
"prop-types": "15.8.1",
|
|
34
34
|
"react-required-if": "1.0.3"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|