@commercetools-uikit/money-field 19.6.0 → 19.7.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
CHANGED
|
@@ -58,37 +58,38 @@ export default Example;
|
|
|
58
58
|
|
|
59
59
|
## Properties
|
|
60
60
|
|
|
61
|
-
| Props
|
|
62
|
-
|
|
|
63
|
-
| `id`
|
|
64
|
-
| `horizontalConstraint`
|
|
65
|
-
| `errors`
|
|
66
|
-
| `warnings`
|
|
67
|
-
| `renderError`
|
|
68
|
-
| `renderWarning`
|
|
69
|
-
| `isRequired`
|
|
70
|
-
| `touched`
|
|
71
|
-
| `isTouched`
|
|
72
|
-
| `autoComplete`
|
|
73
|
-
| `name`
|
|
74
|
-
| `value`
|
|
75
|
-
| `currencies`
|
|
76
|
-
| `placeholder`
|
|
77
|
-
| `onBlur`
|
|
78
|
-
| `onFocus`
|
|
79
|
-
| `isDisabled`
|
|
80
|
-
| `isReadOnly`
|
|
81
|
-
| `isAutofocussed`
|
|
82
|
-
| `onChange`
|
|
83
|
-
| `menuPortalTarget`
|
|
84
|
-
| `menuPortalZIndex`
|
|
85
|
-
| `menuShouldBlockScroll`
|
|
86
|
-
| `title`
|
|
87
|
-
| `hint`
|
|
88
|
-
| `description`
|
|
89
|
-
| `onInfoButtonClick`
|
|
90
|
-
| `hintIcon`
|
|
91
|
-
| `hasHighPrecisionBadge`
|
|
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
|
+
| `warnings` | `Record` | | | A map of warnings. Warning messages for known warnings are rendered automatically.
<br/>
Unknown warnings will be forwarded to renderWarning. |
|
|
67
|
+
| `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. |
|
|
68
|
+
| `renderWarning` | `Function`<br/>[See signature.](#signature-renderWarning) | | | Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
<br />
It can also return null to show no warning. |
|
|
69
|
+
| `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
|
|
70
|
+
| `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. |
|
|
71
|
+
| `isTouched` | `unknown` | | | |
|
|
72
|
+
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
|
|
73
|
+
| `name` | `string` | | | The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`) and the currency dropdown (`${name}.currencyCode`). |
|
|
74
|
+
| `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. |
|
|
75
|
+
| `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. |
|
|
76
|
+
| `placeholder` | `string` | | | Placeholder text for the amount input |
|
|
77
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when input is blurred |
|
|
78
|
+
| `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when input is focused |
|
|
79
|
+
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
|
|
80
|
+
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
|
|
81
|
+
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
|
|
82
|
+
| `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. |
|
|
83
|
+
| `menuPortalTarget` | `ReactSelectProps['menuPortalTarget']` | | | Dom element to portal the currency select menu to
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
84
|
+
| `menuPortalZIndex` | `number` | | | z-index value for the currency select menu portal
<br>
Use in conjunction with `menuPortalTarget` |
|
|
85
|
+
| `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
86
|
+
| `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | ✅ | | Title of the label |
|
|
87
|
+
| `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`. |
|
|
88
|
+
| `description` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Provides a description for the title. |
|
|
89
|
+
| `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. |
|
|
90
|
+
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
<br />
Will only get rendered when `hint` is passed as well. |
|
|
91
|
+
| `hasHighPrecisionBadge` | `boolean` | | | Shows high precision badge in case current value uses high precision. |
|
|
92
|
+
| `isCurrencyInputDisabled` | `boolean` | | | Indicates that the currency input cannot be modified. |
|
|
92
93
|
|
|
93
94
|
## Signatures
|
|
94
95
|
|
|
@@ -132,7 +132,8 @@ let MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
132
132
|
menuShouldBlockScroll: this.props.menuShouldBlockScroll
|
|
133
133
|
}, utils.filterDataAttributes(this.props)), {}, {
|
|
134
134
|
"aria-invalid": hasError,
|
|
135
|
-
"aria-errormessage": sequentialErrorsId
|
|
135
|
+
"aria-errormessage": sequentialErrorsId,
|
|
136
|
+
isCurrencyInputDisabled: this.props.isCurrencyInputDisabled
|
|
136
137
|
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
137
138
|
id: sequentialErrorsId,
|
|
138
139
|
errors: this.props.errors,
|
|
@@ -204,7 +205,7 @@ MoneyField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
204
205
|
var MoneyField$1 = MoneyField;
|
|
205
206
|
|
|
206
207
|
// NOTE: This string will be replaced on build time with the package version.
|
|
207
|
-
var version = "19.
|
|
208
|
+
var version = "19.7.0";
|
|
208
209
|
|
|
209
210
|
exports["default"] = MoneyField$1;
|
|
210
211
|
exports.version = version;
|
|
@@ -125,7 +125,8 @@ let MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
125
125
|
menuShouldBlockScroll: this.props.menuShouldBlockScroll
|
|
126
126
|
}, utils.filterDataAttributes(this.props)), {}, {
|
|
127
127
|
"aria-invalid": hasError,
|
|
128
|
-
"aria-errormessage": sequentialErrorsId
|
|
128
|
+
"aria-errormessage": sequentialErrorsId,
|
|
129
|
+
isCurrencyInputDisabled: this.props.isCurrencyInputDisabled
|
|
129
130
|
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
130
131
|
id: sequentialErrorsId,
|
|
131
132
|
errors: this.props.errors,
|
|
@@ -165,7 +166,7 @@ MoneyField.propTypes = {};
|
|
|
165
166
|
var MoneyField$1 = MoneyField;
|
|
166
167
|
|
|
167
168
|
// NOTE: This string will be replaced on build time with the package version.
|
|
168
|
-
var version = "19.
|
|
169
|
+
var version = "19.7.0";
|
|
169
170
|
|
|
170
171
|
exports["default"] = MoneyField$1;
|
|
171
172
|
exports.version = version;
|
|
@@ -106,7 +106,8 @@ let MoneyField = /*#__PURE__*/function (_Component) {
|
|
|
106
106
|
menuShouldBlockScroll: this.props.menuShouldBlockScroll
|
|
107
107
|
}, filterDataAttributes(this.props)), {}, {
|
|
108
108
|
"aria-invalid": hasError,
|
|
109
|
-
"aria-errormessage": sequentialErrorsId
|
|
109
|
+
"aria-errormessage": sequentialErrorsId,
|
|
110
|
+
isCurrencyInputDisabled: this.props.isCurrencyInputDisabled
|
|
110
111
|
})), jsx(FieldErrors, {
|
|
111
112
|
id: sequentialErrorsId,
|
|
112
113
|
errors: this.props.errors,
|
|
@@ -178,6 +179,6 @@ MoneyField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
178
179
|
var MoneyField$1 = MoneyField;
|
|
179
180
|
|
|
180
181
|
// NOTE: This string will be replaced on build time with the package version.
|
|
181
|
-
var version = "19.
|
|
182
|
+
var version = "19.7.0";
|
|
182
183
|
|
|
183
184
|
export { MoneyField$1 as default, version };
|
|
@@ -53,6 +53,7 @@ export type TMoneyFieldProps = {
|
|
|
53
53
|
onInfoButtonClick?: () => void;
|
|
54
54
|
hintIcon?: ReactElement;
|
|
55
55
|
hasHighPrecisionBadge?: boolean;
|
|
56
|
+
isCurrencyInputDisabled?: boolean;
|
|
56
57
|
};
|
|
57
58
|
type TMoneyFieldState = Pick<TMoneyFieldProps, 'id'>;
|
|
58
59
|
declare class MoneyField extends Component<TMoneyFieldProps, TMoneyFieldState> {
|
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": "19.
|
|
4
|
+
"version": "19.7.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/constraints": "19.
|
|
25
|
-
"@commercetools-uikit/design-system": "19.
|
|
26
|
-
"@commercetools-uikit/field-errors": "19.
|
|
27
|
-
"@commercetools-uikit/field-label": "19.
|
|
28
|
-
"@commercetools-uikit/field-warnings": "19.
|
|
29
|
-
"@commercetools-uikit/money-input": "19.
|
|
30
|
-
"@commercetools-uikit/spacings": "19.
|
|
31
|
-
"@commercetools-uikit/utils": "19.
|
|
24
|
+
"@commercetools-uikit/constraints": "19.7.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "19.7.0",
|
|
26
|
+
"@commercetools-uikit/field-errors": "19.7.0",
|
|
27
|
+
"@commercetools-uikit/field-label": "19.7.0",
|
|
28
|
+
"@commercetools-uikit/field-warnings": "19.7.0",
|
|
29
|
+
"@commercetools-uikit/money-input": "19.7.0",
|
|
30
|
+
"@commercetools-uikit/spacings": "19.7.0",
|
|
31
|
+
"@commercetools-uikit/utils": "19.7.0",
|
|
32
32
|
"@emotion/react": "^11.10.5",
|
|
33
33
|
"@emotion/styled": "^11.10.5",
|
|
34
34
|
"lodash": "4.17.21",
|