@commercetools-uikit/money-input 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 +50 -23
- package/dist/commercetools-uikit-money-input.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-money-input.cjs.dev.js +103 -171
- package/dist/commercetools-uikit-money-input.cjs.prod.js +65 -53
- package/dist/commercetools-uikit-money-input.esm.js +104 -171
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/messages.d.ts +8 -0
- package/dist/declarations/src/money-input.d.ts +95 -0
- package/dist/declarations/src/money-input.styles.d.ts +11 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -49,29 +49,56 @@ export default Example;
|
|
|
49
49
|
|
|
50
50
|
## Properties
|
|
51
51
|
|
|
52
|
-
| Props | Type
|
|
53
|
-
| ----------------------- |
|
|
54
|
-
| `id` | `string`
|
|
55
|
-
| `autoComplete` | `string`
|
|
56
|
-
| `name` | `string`
|
|
57
|
-
| `value` | `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
|
|
74
|
-
|
|
52
|
+
| Props | Type | Required | Default | Description |
|
|
53
|
+
| ----------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
54
|
+
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
|
|
55
|
+
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
|
|
56
|
+
| `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
|
+
| `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
|
+
| `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. |
|
|
59
|
+
| `placeholder` | `string` | | | Placeholder text for the input |
|
|
60
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when input is blurred |
|
|
61
|
+
| `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when input is focused |
|
|
62
|
+
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
|
|
63
|
+
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
|
|
64
|
+
| `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.
<br />
Signature: `(event) => void` |
|
|
66
|
+
| `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
|
+
| `menuPortalZIndex` | `number` | | `1` | z-index value for the currency select menu portal |
|
|
68
|
+
| `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | ✅ | | whether the menu should block scroll while open
<br>
[Props from React select was used](https://react-select.com/props) |
|
|
69
|
+
| `hasError` | `boolean` | | | Indicates that input has errors |
|
|
70
|
+
| `hasWarning` | `boolean` | | | Control to indicate on the input if there are selected values that are potentially invalid |
|
|
71
|
+
| `hasHighPrecisionBadge` | `boolean` | | | Shows high precision badge in case current value uses high precision. |
|
|
72
|
+
| `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. |
|
|
73
|
+
|
|
74
|
+
## Signatures
|
|
75
|
+
|
|
76
|
+
### Signature `value`
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
{
|
|
80
|
+
amount: string;
|
|
81
|
+
currencyCode: TCurrencyCode;
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Signature `onBlur`
|
|
86
|
+
|
|
87
|
+
```ts
|
|
88
|
+
(event: TEvent) => void
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Signature `onFocus`
|
|
92
|
+
|
|
93
|
+
```ts
|
|
94
|
+
(event: TEvent) => void
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Signature `onChange`
|
|
98
|
+
|
|
99
|
+
```ts
|
|
100
|
+
(event: TEvent) => void
|
|
101
|
+
```
|
|
75
102
|
|
|
76
103
|
## Static methods
|
|
77
104
|
|