@commercetools-uikit/money-input 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 +7 -5
- package/dist/commercetools-uikit-money-input.cjs.dev.js +65 -48
- package/dist/commercetools-uikit-money-input.cjs.prod.js +57 -42
- package/dist/commercetools-uikit-money-input.esm.js +65 -48
- package/dist/declarations/src/export-types.d.ts +1 -0
- package/dist/declarations/src/index.d.ts +1 -0
- package/dist/declarations/src/money-input.d.ts +23 -39
- package/package.json +13 -14
package/README.md
CHANGED
|
@@ -53,6 +53,8 @@ export default Example;
|
|
|
53
53
|
| ----------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
54
54
|
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
|
|
55
55
|
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
|
|
56
|
+
| `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. |
|
|
57
|
+
| `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
|
|
56
58
|
| `name` | `string` | | | The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`) and the currency dropdown (`${name}.currencyCode`). |
|
|
57
59
|
| `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. |
|
|
58
60
|
| `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. |
|
|
@@ -62,10 +64,10 @@ export default Example;
|
|
|
62
64
|
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
|
|
63
65
|
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
|
|
64
66
|
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
|
|
65
|
-
| `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
|
|
67
|
+
| `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. |
|
|
66
68
|
| `menuPortalTarget` | `ReactSelectProps['menuPortalTarget']` | | | Dom element to portal the currency select menu to
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
67
69
|
| `menuPortalZIndex` | `number` | | `1` | z-index value for the currency select menu portal |
|
|
68
|
-
| `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` |
|
|
70
|
+
| `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
69
71
|
| `hasError` | `boolean` | | | Indicates that input has errors |
|
|
70
72
|
| `hasWarning` | `boolean` | | | Control to indicate on the input if there are selected values that are potentially invalid |
|
|
71
73
|
| `hasHighPrecisionBadge` | `boolean` | | | Shows high precision badge in case current value uses high precision. |
|
|
@@ -78,7 +80,7 @@ export default Example;
|
|
|
78
80
|
```ts
|
|
79
81
|
{
|
|
80
82
|
amount: string;
|
|
81
|
-
currencyCode: TCurrencyCode;
|
|
83
|
+
currencyCode: TCurrencyCode | '';
|
|
82
84
|
}
|
|
83
85
|
```
|
|
84
86
|
|
|
@@ -104,7 +106,7 @@ export default Example;
|
|
|
104
106
|
|
|
105
107
|
### `MoneyInput.convertToMoneyValue`
|
|
106
108
|
|
|
107
|
-
The `convertToMoneyValue` function will turn a MoneyInput value into a [`MoneyValue`](https://docs.commercetools.com/http-api-types#money) the API can handle. It automatically converts to `centPrecision` or `highPrecision` types when the number of supplied fraction digits exceeds the number of fraction digits used by the currency.
|
|
109
|
+
The `convertToMoneyValue` function will turn a `MoneyInput` value into a [`MoneyValue`](https://docs.commercetools.com/http-api-types#money) the API can handle. It automatically converts to `centPrecision` or `highPrecision` types when the number of supplied fraction digits exceeds the number of fraction digits used by the currency.
|
|
108
110
|
If you want to forbid `highPrecision`, then the form's validation needs to add an error when it sees a `highPrecision` price. See example below.
|
|
109
111
|
|
|
110
112
|
Here are examples of `centPrecision` and `highPrecision` prices.
|
|
@@ -132,7 +134,7 @@ Here are examples of `centPrecision` and `highPrecision` prices.
|
|
|
132
134
|
|
|
133
135
|
### `MoneyInput.parseMoneyValue`
|
|
134
136
|
|
|
135
|
-
The `parseMoneyValue` function will turn a [`MoneyValue`](https://docs.commercetools.com/http-api-types#money) into a value the MoneyInput component can handle `({ amount, currencyCode })`.
|
|
137
|
+
The `parseMoneyValue` function will turn a [`MoneyValue`](https://docs.commercetools.com/http-api-types#money) into a value the `MoneyInput` component can handle `({ amount, currencyCode })`.
|
|
136
138
|
|
|
137
139
|
### `MoneyInput.isEmpty`
|
|
138
140
|
|