@commercetools-uikit/money-field 13.0.2 → 14.0.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.
- package/README.md +79 -34
- package/dist/commercetools-uikit-money-field.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-money-field.cjs.dev.js +46 -176
- package/dist/commercetools-uikit-money-field.cjs.prod.js +13 -6
- package/dist/commercetools-uikit-money-field.esm.js +47 -176
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/money-field.d.ts +65 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +12 -12
package/README.md
CHANGED
|
@@ -58,40 +58,85 @@ export default Example;
|
|
|
58
58
|
|
|
59
59
|
## Properties
|
|
60
60
|
|
|
61
|
-
| Props | Type
|
|
62
|
-
| ----------------------- |
|
|
63
|
-
| `id` | `string`
|
|
64
|
-
| `horizontalConstraint` | `
|
|
65
|
-
| `errors` | `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
61
|
+
| Props | Type | Required | Default | Description |
|
|
62
|
+
| ----------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
63
|
+
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
|
|
64
|
+
| `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. |
|
|
65
|
+
| `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
<br />
Unknown errors will be forwarded to `renderError` |
|
|
66
|
+
| `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. |
|
|
67
|
+
| `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
|
|
68
|
+
| `touched` | `Object`<br/>[See signature.](#signature-touched) | | | Indicates whether the `currencyCode` or `amount` fields were touched.
<br />
Errors will only be shown when the field was touched. |
|
|
69
|
+
| `isTouched` | `unknown` | | | |
|
|
70
|
+
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
|
|
71
|
+
| `name` | `string` | | | The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`) and the currency dropdown (`${name}.currencyCode`). |
|
|
72
|
+
| `value` | `Object`<br/>[See signature.](#signature-value) | ✅ | | Value of the input. Consists of the currency code and an amount. `amount` is a string representing the amount. A dot has to be used as the decimal separator. |
|
|
73
|
+
| `currencies` | `Array: string[]` | | | List of possible currencies. When not provided or empty, the component renders a label with the value's currency instead of a dropdown. |
|
|
74
|
+
| `placeholder` | `string` | | | Placeholder text for the amount input |
|
|
75
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when input is blurred |
|
|
76
|
+
| `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when input is focused |
|
|
77
|
+
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
|
|
78
|
+
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
|
|
79
|
+
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
|
|
80
|
+
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | ✅ | | Called with the event of the input or dropdown when either the currency or the amount have changed. |
|
|
81
|
+
| `menuPortalTarget` | `ReactSelectProps['menuPortalTarget']` | | | Dom element to portal the currency select menu to
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
82
|
+
| `menuPortalZIndex` | `number` | | | z-index value for the currency select menu portal |
|
|
83
|
+
| `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
84
|
+
| `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | ✅ | | Title of the label |
|
|
85
|
+
| `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`. |
|
|
86
|
+
| `description` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Provides a description for the title. |
|
|
87
|
+
| `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. |
|
|
88
|
+
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
<br />
Will only get rendered when `hint` is passed as well. |
|
|
89
|
+
| `hasHighPrecisionBadge` | `boolean` | | | Shows high precision badge in case current value uses high precision. |
|
|
90
|
+
|
|
91
|
+
## Signatures
|
|
92
|
+
|
|
93
|
+
### Signature `renderError`
|
|
94
|
+
|
|
95
|
+
```ts
|
|
96
|
+
(key: string, error?: boolean) => ReactNode;
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Signature `touched`
|
|
100
|
+
|
|
101
|
+
```ts
|
|
102
|
+
{
|
|
103
|
+
amount?: boolean;
|
|
104
|
+
currencyCode?: boolean;
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Signature `value`
|
|
109
|
+
|
|
110
|
+
```ts
|
|
111
|
+
{
|
|
112
|
+
amount: string;
|
|
113
|
+
currencyCode: TCurrencyCode;
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### Signature `onBlur`
|
|
118
|
+
|
|
119
|
+
```ts
|
|
120
|
+
(event: TEvent) => void
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### Signature `onFocus`
|
|
124
|
+
|
|
125
|
+
```ts
|
|
126
|
+
(event: TEvent) => void
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Signature `onChange`
|
|
130
|
+
|
|
131
|
+
```ts
|
|
132
|
+
(event: TEvent) => void
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Signature `onInfoButtonClick`
|
|
136
|
+
|
|
137
|
+
```ts
|
|
138
|
+
() => void
|
|
139
|
+
```
|
|
95
140
|
|
|
96
141
|
## `data-*` props
|
|
97
142
|
|
|
@@ -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 has = require('lodash/has');
|
|
27
26
|
var utils = require('@commercetools-uikit/utils');
|
|
28
27
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
@@ -43,11 +42,10 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
43
42
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
44
43
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
45
44
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
45
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
46
46
|
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
|
|
47
47
|
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
|
|
48
48
|
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
49
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
50
|
-
var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
|
|
51
49
|
var has__default = /*#__PURE__*/_interopDefault(has);
|
|
52
50
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
53
51
|
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
|
|
@@ -57,12 +55,13 @@ var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
|
57
55
|
|
|
58
56
|
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; }
|
|
59
57
|
|
|
60
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
58
|
+
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; }
|
|
61
59
|
|
|
62
60
|
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); }; }
|
|
63
61
|
|
|
64
62
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
65
63
|
var sequentialId = utils.createSequentialId('money-field-');
|
|
64
|
+
var sequentialErrorsId = utils.createSequentialId('money-field-error-')();
|
|
66
65
|
|
|
67
66
|
var hasErrors = function hasErrors(errors) {
|
|
68
67
|
var _context;
|
|
@@ -102,6 +101,12 @@ var MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
102
101
|
// This avoids showing an error when the user just selected a language but
|
|
103
102
|
// didn't add an amount yet.
|
|
104
103
|
var hasError = MoneyInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
104
|
+
process.env.NODE_ENV !== "production" ? utils.warning(!has__default["default"](this.props, 'isTouched'), 'MoneyField: Invalid prop isTouched supplied to MoneyField. Use touched instead.') : void 0;
|
|
105
|
+
|
|
106
|
+
if (this.props.hintIcon) {
|
|
107
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.hint === 'string' || /*#__PURE__*/react.isValidElement(this.props.hint), 'MoneyField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
108
|
+
}
|
|
109
|
+
|
|
105
110
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
106
111
|
max: this.props.horizontalConstraint,
|
|
107
112
|
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
@@ -114,7 +119,7 @@ var MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
114
119
|
hintIcon: this.props.hintIcon,
|
|
115
120
|
hasRequiredIndicator: this.props.isRequired,
|
|
116
121
|
htmlFor: this.state.id
|
|
117
|
-
}), jsxRuntime.jsx(MoneyInput__default["default"], _objectSpread({
|
|
122
|
+
}), jsxRuntime.jsx(MoneyInput__default["default"], _objectSpread(_objectSpread({
|
|
118
123
|
id: this.state.id,
|
|
119
124
|
name: this.props.name,
|
|
120
125
|
autoComplete: this.props.autoComplete,
|
|
@@ -132,7 +137,11 @@ var MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
132
137
|
menuPortalTarget: this.props.menuPortalTarget,
|
|
133
138
|
menuPortalZIndex: this.props.menuPortalZIndex,
|
|
134
139
|
menuShouldBlockScroll: this.props.menuShouldBlockScroll
|
|
135
|
-
}, utils.filterDataAttributes(this.props))
|
|
140
|
+
}, utils.filterDataAttributes(this.props)), {}, {
|
|
141
|
+
"aria-invalid": hasError,
|
|
142
|
+
"aria-errormessage": sequentialErrorsId
|
|
143
|
+
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
144
|
+
id: sequentialErrorsId,
|
|
136
145
|
errors: this.props.errors,
|
|
137
146
|
isVisible: hasError,
|
|
138
147
|
renderError: this.props.renderError
|
|
@@ -157,181 +166,42 @@ MoneyField.getDerivedStateFromProps = function (props, state) {
|
|
|
157
166
|
};
|
|
158
167
|
|
|
159
168
|
MoneyField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
* Horizontal size limit of the input fields.
|
|
169
|
-
*/
|
|
170
|
-
horizontalConstraint: PropTypes__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
171
|
-
|
|
172
|
-
/**
|
|
173
|
-
* A map of errors. Error messages for known errors are rendered automatically.
|
|
174
|
-
* <br />
|
|
175
|
-
* Unknown errors will be forwarded to `renderError`
|
|
176
|
-
*/
|
|
177
|
-
errors: PropTypes__default["default"].shape({
|
|
178
|
-
missing: PropTypes__default["default"].bool
|
|
179
|
-
}),
|
|
180
|
-
|
|
181
|
-
/**
|
|
182
|
-
* 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.
|
|
183
|
-
* <br />
|
|
184
|
-
* Signature: `(key, error) => React.node`
|
|
185
|
-
*/
|
|
186
|
-
renderError: PropTypes__default["default"].func,
|
|
187
|
-
|
|
188
|
-
/**
|
|
189
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
190
|
-
*/
|
|
191
|
-
isRequired: PropTypes__default["default"].bool,
|
|
192
|
-
|
|
193
|
-
/**
|
|
194
|
-
* Indicates whether the `currencyCode` or `amount` fields were touched.
|
|
195
|
-
* <br />
|
|
196
|
-
* Errors will only be shown when the field was touched.
|
|
197
|
-
*/
|
|
198
|
-
touched: PropTypes__default["default"].shape({
|
|
199
|
-
amount: PropTypes__default["default"].bool,
|
|
200
|
-
currencyCode: PropTypes__default["default"].bool
|
|
169
|
+
id: _pt__default["default"].string,
|
|
170
|
+
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
171
|
+
errors: _pt__default["default"].objectOf(_pt__default["default"].bool),
|
|
172
|
+
renderError: _pt__default["default"].func,
|
|
173
|
+
isRequired: _pt__default["default"].bool,
|
|
174
|
+
touched: _pt__default["default"].shape({
|
|
175
|
+
amount: _pt__default["default"].bool,
|
|
176
|
+
currencyCode: _pt__default["default"].bool
|
|
201
177
|
}),
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
var _context3;
|
|
209
|
-
|
|
210
|
-
return new Error(_concatInstanceProperty__default["default"](_context3 = "Invalid prop `".concat(propName, "` supplied to `")).call(_context3, componentName, "`. Use `touched` instead."));
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
return undefined;
|
|
214
|
-
},
|
|
215
|
-
// MoneyInput
|
|
216
|
-
|
|
217
|
-
/**
|
|
218
|
-
* Used as HTML `autocomplete` property
|
|
219
|
-
*/
|
|
220
|
-
autoComplete: PropTypes__default["default"].string,
|
|
221
|
-
|
|
222
|
-
/**
|
|
223
|
-
* The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`) and the currency dropdown (`${name}.currencyCode`).
|
|
224
|
-
*/
|
|
225
|
-
name: PropTypes__default["default"].string,
|
|
226
|
-
|
|
227
|
-
/**
|
|
228
|
-
* Value of the input. Consists of the currency code and an amount. `amount` is a string representing the amount. A dot has to be used as the decimal separator.
|
|
229
|
-
*/
|
|
230
|
-
value: PropTypes__default["default"].shape({
|
|
231
|
-
amount: PropTypes__default["default"].string.isRequired,
|
|
232
|
-
currencyCode: PropTypes__default["default"].string.isRequired
|
|
178
|
+
isTouched: _pt__default["default"].any,
|
|
179
|
+
autoComplete: _pt__default["default"].string,
|
|
180
|
+
name: _pt__default["default"].string,
|
|
181
|
+
value: _pt__default["default"].shape({
|
|
182
|
+
amount: _pt__default["default"].string.isRequired,
|
|
183
|
+
currencyCode: _pt__default["default"].any.isRequired
|
|
233
184
|
}).isRequired,
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
/**
|
|
251
|
-
* Called when input is focused
|
|
252
|
-
*/
|
|
253
|
-
onFocus: PropTypes__default["default"].func,
|
|
254
|
-
|
|
255
|
-
/**
|
|
256
|
-
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
|
|
257
|
-
*/
|
|
258
|
-
isDisabled: PropTypes__default["default"].bool,
|
|
259
|
-
|
|
260
|
-
/**
|
|
261
|
-
* Indicates that the field is displaying read-only content
|
|
262
|
-
*/
|
|
263
|
-
isReadOnly: PropTypes__default["default"].bool,
|
|
264
|
-
|
|
265
|
-
/**
|
|
266
|
-
* Focus the input on initial render
|
|
267
|
-
*/
|
|
268
|
-
isAutofocussed: PropTypes__default["default"].bool,
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* Called with the event of the input or dropdown when either the currency or the amount have changed.
|
|
272
|
-
* <br />
|
|
273
|
-
* Signature: `(event) => void`
|
|
274
|
-
*/
|
|
275
|
-
onChange: PropTypes__default["default"].func.isRequired,
|
|
276
|
-
|
|
277
|
-
/**
|
|
278
|
-
* Dom element to portal the currency select menu to
|
|
279
|
-
*/
|
|
280
|
-
menuPortalTarget: PropTypes__default["default"].instanceOf(utils.SafeHTMLElement),
|
|
281
|
-
|
|
282
|
-
/**
|
|
283
|
-
* z-index value for the currency select menu portal
|
|
284
|
-
*/
|
|
285
|
-
menuPortalZIndex: PropTypes__default["default"].number,
|
|
286
|
-
|
|
287
|
-
/**
|
|
288
|
-
* whether the menu should block scroll while open
|
|
289
|
-
*/
|
|
290
|
-
menuShouldBlockScroll: PropTypes__default["default"].bool,
|
|
291
|
-
// LabelField
|
|
292
|
-
|
|
293
|
-
/**
|
|
294
|
-
* Title of the label
|
|
295
|
-
*/
|
|
296
|
-
title: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]).isRequired,
|
|
297
|
-
|
|
298
|
-
/**
|
|
299
|
-
* 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`.
|
|
300
|
-
*/
|
|
301
|
-
hint: requiredIf__default["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]), function (props) {
|
|
302
|
-
return props.hintIcon;
|
|
303
|
-
}),
|
|
304
|
-
|
|
305
|
-
/**
|
|
306
|
-
* Provides a description for the title.
|
|
307
|
-
*/
|
|
308
|
-
description: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
|
|
309
|
-
|
|
310
|
-
/**
|
|
311
|
-
* Function called when info button is pressed.
|
|
312
|
-
* <br />
|
|
313
|
-
* Info button will only be visible when this prop is passed.
|
|
314
|
-
* <br />
|
|
315
|
-
* Signature: `(event) => void`
|
|
316
|
-
*/
|
|
317
|
-
onInfoButtonClick: PropTypes__default["default"].func,
|
|
318
|
-
|
|
319
|
-
/**
|
|
320
|
-
* Icon to be displayed beside the hint text.
|
|
321
|
-
* <br />
|
|
322
|
-
* Will only get rendered when `hint` is passed as well.
|
|
323
|
-
*/
|
|
324
|
-
hintIcon: PropTypes__default["default"].node,
|
|
325
|
-
|
|
326
|
-
/**
|
|
327
|
-
* Shows high precision badge in case current value uses high precision.
|
|
328
|
-
*/
|
|
329
|
-
hasHighPrecisionBadge: PropTypes__default["default"].bool
|
|
185
|
+
currencies: _pt__default["default"].arrayOf(_pt__default["default"].string),
|
|
186
|
+
placeholder: _pt__default["default"].string,
|
|
187
|
+
onBlur: _pt__default["default"].func,
|
|
188
|
+
onFocus: _pt__default["default"].func,
|
|
189
|
+
isDisabled: _pt__default["default"].bool,
|
|
190
|
+
isReadOnly: _pt__default["default"].bool,
|
|
191
|
+
isAutofocussed: _pt__default["default"].bool,
|
|
192
|
+
onChange: _pt__default["default"].func.isRequired,
|
|
193
|
+
menuPortalZIndex: _pt__default["default"].number,
|
|
194
|
+
title: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]).isRequired,
|
|
195
|
+
hint: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
|
|
196
|
+
description: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
|
|
197
|
+
onInfoButtonClick: _pt__default["default"].func,
|
|
198
|
+
hintIcon: _pt__default["default"].element,
|
|
199
|
+
hasHighPrecisionBadge: _pt__default["default"].bool
|
|
330
200
|
} : {};
|
|
331
201
|
var MoneyField$1 = MoneyField;
|
|
332
202
|
|
|
333
203
|
// NOTE: This string will be replaced on build time with the package version.
|
|
334
|
-
var version = "
|
|
204
|
+
var version = "14.0.0";
|
|
335
205
|
|
|
336
206
|
exports["default"] = MoneyField$1;
|
|
337
207
|
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
|
require('lodash/has');
|
|
27
26
|
var utils = require('@commercetools-uikit/utils');
|
|
28
27
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
@@ -54,12 +53,13 @@ var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
|
54
53
|
|
|
55
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; }
|
|
56
55
|
|
|
57
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
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; }
|
|
58
57
|
|
|
59
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); }; }
|
|
60
59
|
|
|
61
60
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
62
61
|
var sequentialId = utils.createSequentialId('money-field-');
|
|
62
|
+
var sequentialErrorsId = utils.createSequentialId('money-field-error-')();
|
|
63
63
|
|
|
64
64
|
var hasErrors = function hasErrors(errors) {
|
|
65
65
|
var _context;
|
|
@@ -99,6 +99,9 @@ var MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
99
99
|
// This avoids showing an error when the user just selected a language but
|
|
100
100
|
// didn't add an amount yet.
|
|
101
101
|
var hasError = MoneyInput__default["default"].isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
102
|
+
|
|
103
|
+
if (this.props.hintIcon) ;
|
|
104
|
+
|
|
102
105
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
103
106
|
max: this.props.horizontalConstraint,
|
|
104
107
|
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
@@ -111,7 +114,7 @@ var MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
111
114
|
hintIcon: this.props.hintIcon,
|
|
112
115
|
hasRequiredIndicator: this.props.isRequired,
|
|
113
116
|
htmlFor: this.state.id
|
|
114
|
-
}), jsxRuntime.jsx(MoneyInput__default["default"], _objectSpread({
|
|
117
|
+
}), jsxRuntime.jsx(MoneyInput__default["default"], _objectSpread(_objectSpread({
|
|
115
118
|
id: this.state.id,
|
|
116
119
|
name: this.props.name,
|
|
117
120
|
autoComplete: this.props.autoComplete,
|
|
@@ -129,7 +132,11 @@ var MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
129
132
|
menuPortalTarget: this.props.menuPortalTarget,
|
|
130
133
|
menuPortalZIndex: this.props.menuPortalZIndex,
|
|
131
134
|
menuShouldBlockScroll: this.props.menuShouldBlockScroll
|
|
132
|
-
}, utils.filterDataAttributes(this.props))
|
|
135
|
+
}, utils.filterDataAttributes(this.props)), {}, {
|
|
136
|
+
"aria-invalid": hasError,
|
|
137
|
+
"aria-errormessage": sequentialErrorsId
|
|
138
|
+
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
139
|
+
id: sequentialErrorsId,
|
|
133
140
|
errors: this.props.errors,
|
|
134
141
|
isVisible: hasError,
|
|
135
142
|
renderError: this.props.renderError
|
|
@@ -157,7 +164,7 @@ MoneyField.propTypes = {};
|
|
|
157
164
|
var MoneyField$1 = MoneyField;
|
|
158
165
|
|
|
159
166
|
// NOTE: This string will be replaced on build time with the package version.
|
|
160
|
-
var version = "
|
|
167
|
+
var version = "14.0.0";
|
|
161
168
|
|
|
162
169
|
exports["default"] = MoneyField$1;
|
|
163
170
|
exports.version = version;
|
|
@@ -13,14 +13,13 @@ 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 PropTypes from 'prop-types';
|
|
21
|
-
import requiredIf from 'react-required-if';
|
|
20
|
+
import { isValidElement, Component } from 'react';
|
|
22
21
|
import has from 'lodash/has';
|
|
23
|
-
import { createSequentialId, filterDataAttributes, getFieldId
|
|
22
|
+
import { createSequentialId, warning, filterDataAttributes, getFieldId } from '@commercetools-uikit/utils';
|
|
24
23
|
import Constraints from '@commercetools-uikit/constraints';
|
|
25
24
|
import Spacings from '@commercetools-uikit/spacings';
|
|
26
25
|
import FieldLabel from '@commercetools-uikit/field-label';
|
|
@@ -30,12 +29,13 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
|
30
29
|
|
|
31
30
|
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; }
|
|
32
31
|
|
|
33
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
32
|
+
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; }
|
|
34
33
|
|
|
35
34
|
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); }; }
|
|
36
35
|
|
|
37
36
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
38
37
|
var sequentialId = createSequentialId('money-field-');
|
|
38
|
+
var sequentialErrorsId = createSequentialId('money-field-error-')();
|
|
39
39
|
|
|
40
40
|
var hasErrors = function hasErrors(errors) {
|
|
41
41
|
var _context;
|
|
@@ -75,6 +75,12 @@ var MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
75
75
|
// This avoids showing an error when the user just selected a language but
|
|
76
76
|
// didn't add an amount yet.
|
|
77
77
|
var hasError = MoneyInput.isTouched(this.props.touched) && hasErrors(this.props.errors);
|
|
78
|
+
process.env.NODE_ENV !== "production" ? warning(!has(this.props, 'isTouched'), 'MoneyField: Invalid prop isTouched supplied to MoneyField. Use touched instead.') : void 0;
|
|
79
|
+
|
|
80
|
+
if (this.props.hintIcon) {
|
|
81
|
+
process.env.NODE_ENV !== "production" ? warning(typeof this.props.hint === 'string' || /*#__PURE__*/isValidElement(this.props.hint), 'MoneyField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
78
84
|
return jsx(Constraints.Horizontal, {
|
|
79
85
|
max: this.props.horizontalConstraint,
|
|
80
86
|
children: jsxs(Spacings.Stack, {
|
|
@@ -87,7 +93,7 @@ var MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
87
93
|
hintIcon: this.props.hintIcon,
|
|
88
94
|
hasRequiredIndicator: this.props.isRequired,
|
|
89
95
|
htmlFor: this.state.id
|
|
90
|
-
}), jsx(MoneyInput, _objectSpread({
|
|
96
|
+
}), jsx(MoneyInput, _objectSpread(_objectSpread({
|
|
91
97
|
id: this.state.id,
|
|
92
98
|
name: this.props.name,
|
|
93
99
|
autoComplete: this.props.autoComplete,
|
|
@@ -105,7 +111,11 @@ var MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
105
111
|
menuPortalTarget: this.props.menuPortalTarget,
|
|
106
112
|
menuPortalZIndex: this.props.menuPortalZIndex,
|
|
107
113
|
menuShouldBlockScroll: this.props.menuShouldBlockScroll
|
|
108
|
-
}, filterDataAttributes(this.props))
|
|
114
|
+
}, filterDataAttributes(this.props)), {}, {
|
|
115
|
+
"aria-invalid": hasError,
|
|
116
|
+
"aria-errormessage": sequentialErrorsId
|
|
117
|
+
})), jsx(FieldErrors, {
|
|
118
|
+
id: sequentialErrorsId,
|
|
109
119
|
errors: this.props.errors,
|
|
110
120
|
isVisible: hasError,
|
|
111
121
|
renderError: this.props.renderError
|
|
@@ -130,180 +140,41 @@ MoneyField.getDerivedStateFromProps = function (props, state) {
|
|
|
130
140
|
};
|
|
131
141
|
|
|
132
142
|
MoneyField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
* Horizontal size limit of the input fields.
|
|
142
|
-
*/
|
|
143
|
-
horizontalConstraint: PropTypes.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
144
|
-
|
|
145
|
-
/**
|
|
146
|
-
* A map of errors. Error messages for known errors are rendered automatically.
|
|
147
|
-
* <br />
|
|
148
|
-
* Unknown errors will be forwarded to `renderError`
|
|
149
|
-
*/
|
|
150
|
-
errors: PropTypes.shape({
|
|
151
|
-
missing: PropTypes.bool
|
|
152
|
-
}),
|
|
153
|
-
|
|
154
|
-
/**
|
|
155
|
-
* 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.
|
|
156
|
-
* <br />
|
|
157
|
-
* Signature: `(key, error) => React.node`
|
|
158
|
-
*/
|
|
159
|
-
renderError: PropTypes.func,
|
|
160
|
-
|
|
161
|
-
/**
|
|
162
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
163
|
-
*/
|
|
164
|
-
isRequired: PropTypes.bool,
|
|
165
|
-
|
|
166
|
-
/**
|
|
167
|
-
* Indicates whether the `currencyCode` or `amount` fields were touched.
|
|
168
|
-
* <br />
|
|
169
|
-
* Errors will only be shown when the field was touched.
|
|
170
|
-
*/
|
|
171
|
-
touched: PropTypes.shape({
|
|
172
|
-
amount: PropTypes.bool,
|
|
173
|
-
currencyCode: PropTypes.bool
|
|
143
|
+
id: _pt.string,
|
|
144
|
+
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
145
|
+
errors: _pt.objectOf(_pt.bool),
|
|
146
|
+
renderError: _pt.func,
|
|
147
|
+
isRequired: _pt.bool,
|
|
148
|
+
touched: _pt.shape({
|
|
149
|
+
amount: _pt.bool,
|
|
150
|
+
currencyCode: _pt.bool
|
|
174
151
|
}),
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
var _context3;
|
|
182
|
-
|
|
183
|
-
return new Error(_concatInstanceProperty(_context3 = "Invalid prop `".concat(propName, "` supplied to `")).call(_context3, componentName, "`. Use `touched` instead."));
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
return undefined;
|
|
187
|
-
},
|
|
188
|
-
// MoneyInput
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* Used as HTML `autocomplete` property
|
|
192
|
-
*/
|
|
193
|
-
autoComplete: PropTypes.string,
|
|
194
|
-
|
|
195
|
-
/**
|
|
196
|
-
* The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`) and the currency dropdown (`${name}.currencyCode`).
|
|
197
|
-
*/
|
|
198
|
-
name: PropTypes.string,
|
|
199
|
-
|
|
200
|
-
/**
|
|
201
|
-
* Value of the input. Consists of the currency code and an amount. `amount` is a string representing the amount. A dot has to be used as the decimal separator.
|
|
202
|
-
*/
|
|
203
|
-
value: PropTypes.shape({
|
|
204
|
-
amount: PropTypes.string.isRequired,
|
|
205
|
-
currencyCode: PropTypes.string.isRequired
|
|
152
|
+
isTouched: _pt.any,
|
|
153
|
+
autoComplete: _pt.string,
|
|
154
|
+
name: _pt.string,
|
|
155
|
+
value: _pt.shape({
|
|
156
|
+
amount: _pt.string.isRequired,
|
|
157
|
+
currencyCode: _pt.any.isRequired
|
|
206
158
|
}).isRequired,
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
/**
|
|
224
|
-
* Called when input is focused
|
|
225
|
-
*/
|
|
226
|
-
onFocus: PropTypes.func,
|
|
227
|
-
|
|
228
|
-
/**
|
|
229
|
-
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
|
|
230
|
-
*/
|
|
231
|
-
isDisabled: PropTypes.bool,
|
|
232
|
-
|
|
233
|
-
/**
|
|
234
|
-
* Indicates that the field is displaying read-only content
|
|
235
|
-
*/
|
|
236
|
-
isReadOnly: PropTypes.bool,
|
|
237
|
-
|
|
238
|
-
/**
|
|
239
|
-
* Focus the input on initial render
|
|
240
|
-
*/
|
|
241
|
-
isAutofocussed: PropTypes.bool,
|
|
242
|
-
|
|
243
|
-
/**
|
|
244
|
-
* Called with the event of the input or dropdown when either the currency or the amount have changed.
|
|
245
|
-
* <br />
|
|
246
|
-
* Signature: `(event) => void`
|
|
247
|
-
*/
|
|
248
|
-
onChange: PropTypes.func.isRequired,
|
|
249
|
-
|
|
250
|
-
/**
|
|
251
|
-
* Dom element to portal the currency select menu to
|
|
252
|
-
*/
|
|
253
|
-
menuPortalTarget: PropTypes.instanceOf(SafeHTMLElement),
|
|
254
|
-
|
|
255
|
-
/**
|
|
256
|
-
* z-index value for the currency select menu portal
|
|
257
|
-
*/
|
|
258
|
-
menuPortalZIndex: PropTypes.number,
|
|
259
|
-
|
|
260
|
-
/**
|
|
261
|
-
* whether the menu should block scroll while open
|
|
262
|
-
*/
|
|
263
|
-
menuShouldBlockScroll: PropTypes.bool,
|
|
264
|
-
// LabelField
|
|
265
|
-
|
|
266
|
-
/**
|
|
267
|
-
* Title of the label
|
|
268
|
-
*/
|
|
269
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
|
|
270
|
-
|
|
271
|
-
/**
|
|
272
|
-
* 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`.
|
|
273
|
-
*/
|
|
274
|
-
hint: requiredIf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]), function (props) {
|
|
275
|
-
return props.hintIcon;
|
|
276
|
-
}),
|
|
277
|
-
|
|
278
|
-
/**
|
|
279
|
-
* Provides a description for the title.
|
|
280
|
-
*/
|
|
281
|
-
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
282
|
-
|
|
283
|
-
/**
|
|
284
|
-
* Function called when info button is pressed.
|
|
285
|
-
* <br />
|
|
286
|
-
* Info button will only be visible when this prop is passed.
|
|
287
|
-
* <br />
|
|
288
|
-
* Signature: `(event) => void`
|
|
289
|
-
*/
|
|
290
|
-
onInfoButtonClick: PropTypes.func,
|
|
291
|
-
|
|
292
|
-
/**
|
|
293
|
-
* Icon to be displayed beside the hint text.
|
|
294
|
-
* <br />
|
|
295
|
-
* Will only get rendered when `hint` is passed as well.
|
|
296
|
-
*/
|
|
297
|
-
hintIcon: PropTypes.node,
|
|
298
|
-
|
|
299
|
-
/**
|
|
300
|
-
* Shows high precision badge in case current value uses high precision.
|
|
301
|
-
*/
|
|
302
|
-
hasHighPrecisionBadge: PropTypes.bool
|
|
159
|
+
currencies: _pt.arrayOf(_pt.string),
|
|
160
|
+
placeholder: _pt.string,
|
|
161
|
+
onBlur: _pt.func,
|
|
162
|
+
onFocus: _pt.func,
|
|
163
|
+
isDisabled: _pt.bool,
|
|
164
|
+
isReadOnly: _pt.bool,
|
|
165
|
+
isAutofocussed: _pt.bool,
|
|
166
|
+
onChange: _pt.func.isRequired,
|
|
167
|
+
menuPortalZIndex: _pt.number,
|
|
168
|
+
title: _pt.oneOfType([_pt.string, _pt.node]).isRequired,
|
|
169
|
+
hint: _pt.oneOfType([_pt.string, _pt.node]),
|
|
170
|
+
description: _pt.oneOfType([_pt.string, _pt.node]),
|
|
171
|
+
onInfoButtonClick: _pt.func,
|
|
172
|
+
hintIcon: _pt.element,
|
|
173
|
+
hasHighPrecisionBadge: _pt.bool
|
|
303
174
|
} : {};
|
|
304
175
|
var MoneyField$1 = MoneyField;
|
|
305
176
|
|
|
306
177
|
// NOTE: This string will be replaced on build time with the package version.
|
|
307
|
-
var version = "
|
|
178
|
+
var version = "14.0.0";
|
|
308
179
|
|
|
309
180
|
export { MoneyField$1 as default, version };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { Component, type ReactElement, type ReactNode } from 'react';
|
|
2
|
+
import { type Props as ReactSelectProps } from 'react-select';
|
|
3
|
+
import { type TCurrencyCode } from '@commercetools-uikit/money-input';
|
|
4
|
+
declare type TFieldErrors = Record<string, boolean>;
|
|
5
|
+
declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
|
|
6
|
+
declare type TTouched = {
|
|
7
|
+
amount?: boolean;
|
|
8
|
+
currencyCode?: boolean;
|
|
9
|
+
};
|
|
10
|
+
declare type TValue = {
|
|
11
|
+
amount: string;
|
|
12
|
+
currencyCode: TCurrencyCode;
|
|
13
|
+
};
|
|
14
|
+
declare type TEvent = {
|
|
15
|
+
target: {
|
|
16
|
+
id?: string;
|
|
17
|
+
name?: string;
|
|
18
|
+
value?: string | string[] | null;
|
|
19
|
+
};
|
|
20
|
+
persist?: () => void;
|
|
21
|
+
};
|
|
22
|
+
declare type TMoneyFieldProps = {
|
|
23
|
+
id?: string;
|
|
24
|
+
horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
25
|
+
errors?: TFieldErrors;
|
|
26
|
+
renderError?: TErrorRenderer;
|
|
27
|
+
isRequired?: boolean;
|
|
28
|
+
touched?: TTouched;
|
|
29
|
+
isTouched?: unknown;
|
|
30
|
+
autoComplete?: string;
|
|
31
|
+
name?: string;
|
|
32
|
+
value: TValue;
|
|
33
|
+
currencies?: string[];
|
|
34
|
+
placeholder?: string;
|
|
35
|
+
onBlur?: (event: TEvent) => void;
|
|
36
|
+
onFocus?: (event: TEvent) => void;
|
|
37
|
+
isDisabled?: boolean;
|
|
38
|
+
isReadOnly?: boolean;
|
|
39
|
+
isAutofocussed?: boolean;
|
|
40
|
+
onChange: (event: TEvent) => void;
|
|
41
|
+
menuPortalTarget?: ReactSelectProps['menuPortalTarget'];
|
|
42
|
+
menuPortalZIndex?: number;
|
|
43
|
+
menuShouldBlockScroll?: ReactSelectProps['menuShouldBlockScroll'];
|
|
44
|
+
title: string | ReactNode;
|
|
45
|
+
hint?: string | ReactNode;
|
|
46
|
+
description?: string | ReactNode;
|
|
47
|
+
onInfoButtonClick?: () => void;
|
|
48
|
+
hintIcon?: ReactElement;
|
|
49
|
+
hasHighPrecisionBadge?: boolean;
|
|
50
|
+
};
|
|
51
|
+
declare type TMoneyFieldState = Pick<TMoneyFieldProps, 'id'>;
|
|
52
|
+
declare class MoneyField extends Component<TMoneyFieldProps, TMoneyFieldState> {
|
|
53
|
+
static displayName: string;
|
|
54
|
+
static defaultProps: {
|
|
55
|
+
horizontalConstraint: string;
|
|
56
|
+
};
|
|
57
|
+
state: {
|
|
58
|
+
id: string | undefined;
|
|
59
|
+
};
|
|
60
|
+
static getDerivedStateFromProps: (props: TMoneyFieldProps, state: TMoneyFieldState) => {
|
|
61
|
+
id: string;
|
|
62
|
+
};
|
|
63
|
+
render(): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
64
|
+
}
|
|
65
|
+
export default MoneyField;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/money-field",
|
|
3
3
|
"description": "A controlled input component for money values with validation states and a label.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "14.0.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"directory": "packages/components/fields/money-field"
|
|
10
10
|
},
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
|
-
"keywords": ["javascript", "design
|
|
12
|
+
"keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"publishConfig": {
|
|
15
15
|
"access": "public"
|
|
@@ -19,20 +19,20 @@
|
|
|
19
19
|
"module": "dist/commercetools-uikit-money-field.esm.js",
|
|
20
20
|
"files": ["dist"],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@babel/runtime": "7.17.2",
|
|
23
|
-
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
-
"@commercetools-uikit/constraints": "
|
|
25
|
-
"@commercetools-uikit/design-system": "
|
|
26
|
-
"@commercetools-uikit/field-errors": "
|
|
27
|
-
"@commercetools-uikit/field-label": "
|
|
28
|
-
"@commercetools-uikit/money-input": "
|
|
29
|
-
"@commercetools-uikit/spacings": "
|
|
30
|
-
"@commercetools-uikit/utils": "
|
|
22
|
+
"@babel/runtime": "^7.17.2",
|
|
23
|
+
"@babel/runtime-corejs3": "^7.17.2",
|
|
24
|
+
"@commercetools-uikit/constraints": "14.0.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "14.0.0",
|
|
26
|
+
"@commercetools-uikit/field-errors": "14.0.0",
|
|
27
|
+
"@commercetools-uikit/field-label": "14.0.0",
|
|
28
|
+
"@commercetools-uikit/money-input": "14.0.0",
|
|
29
|
+
"@commercetools-uikit/spacings": "14.0.0",
|
|
30
|
+
"@commercetools-uikit/utils": "14.0.0",
|
|
31
31
|
"@emotion/react": "^11.4.0",
|
|
32
32
|
"@emotion/styled": "^11.3.0",
|
|
33
33
|
"lodash": "4.17.21",
|
|
34
34
|
"prop-types": "15.8.1",
|
|
35
|
-
"react-
|
|
35
|
+
"react-intl": "^5.24.6"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"react": "17.0.2"
|