@commercetools-uikit/localized-multiline-text-input 13.0.2 → 13.0.3
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 +74 -22
- package/dist/commercetools-uikit-localized-multiline-text-input.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-localized-multiline-text-input.cjs.dev.js +90 -183
- package/dist/commercetools-uikit-localized-multiline-text-input.cjs.prod.js +25 -19
- package/dist/commercetools-uikit-localized-multiline-text-input.esm.js +90 -181
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/localized-multiline-text-input.d.ts +60 -0
- package/dist/declarations/src/required-value-error-message.d.ts +5 -0
- package/dist/declarations/src/translation-input.d.ts +41 -0
- package/dist/declarations/src/translation-input.styles.d.ts +12 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -48,28 +48,80 @@ export default Example;
|
|
|
48
48
|
|
|
49
49
|
## Properties
|
|
50
50
|
|
|
51
|
-
| Props | Type
|
|
52
|
-
| ------------------------------- |
|
|
53
|
-
| `id` | `string`
|
|
54
|
-
| `name` | `string`
|
|
55
|
-
| `autoComplete` | `string`
|
|
56
|
-
| `value` | `
|
|
57
|
-
| `onChange` | `
|
|
58
|
-
| `selectedLanguage` | `string`
|
|
59
|
-
| `onBlur` | `
|
|
60
|
-
| `onFocus` | `
|
|
61
|
-
| `defaultExpandMultilineText` | `
|
|
62
|
-
| `hideLanguageExpansionControls` | `
|
|
63
|
-
| `defaultExpandLanguages` | `
|
|
64
|
-
| `isAutofocussed` | `
|
|
65
|
-
| `isDisabled` | `
|
|
66
|
-
| `isReadOnly` | `
|
|
67
|
-
| `placeholder` | `
|
|
68
|
-
| `horizontalConstraint` | `
|
|
69
|
-
| `hasError` | `
|
|
70
|
-
| `hasWarning` | `
|
|
71
|
-
| `errors` | `
|
|
72
|
-
| `warnings` | `
|
|
51
|
+
| Props | Type | Required | Default | Description |
|
|
52
|
+
| ------------------------------- | -------------------------------------------------------------------------------------------- | :------: | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
53
|
+
| `id` | `string` | | | Used as prefix of HTML `id` property. Each input field id will have the language as a suffix (`${idPrefix}.${lang}`), e.g. `foo.en` |
|
|
54
|
+
| `name` | `string` | | | Used as HTML `name` property for each input field. Each input field name will have the language as a suffix (`${namePrefix}.${lang}`), e.g. `foo.en` |
|
|
55
|
+
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
|
|
56
|
+
| `value` | `Object`<br/>[See signature.](#signature-value) | ✅ | | Values to use. Keyed by language, the values are the actual values, e.g. `{ en: 'Horse', de: 'Pferd' }`
<br />
The input doesn't accept a "languages" prop, instead all possible
languages have to exist (with empty or filled strings) on the value:
<br /> { en: 'foo', de: '', es: '' } |
|
|
57
|
+
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Gets called when any input is changed. Is called with the change event of the changed input.
<br />
Signature: `(event) => void` |
|
|
58
|
+
| `selectedLanguage` | `string` | ✅ | | Specifies which language will be shown in case the `LocalizedTextInput` is collapsed. |
|
|
59
|
+
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when input is blurred |
|
|
60
|
+
| `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when input is focused |
|
|
61
|
+
| `defaultExpandMultilineText` | `boolean` | | | Expands input components holding multiline values instead of collpasing them by default. |
|
|
62
|
+
| `hideLanguageExpansionControls` | `boolean` | | | Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`. |
|
|
63
|
+
| `defaultExpandLanguages` | `boolean` | | | Controls whether one or all languages are visible by default. Pass `true` to show all languages by default. |
|
|
64
|
+
| `isAutofocussed` | `boolean` | | | Sets the focus on the first input when `true` is passed. |
|
|
65
|
+
| `isDisabled` | `boolean` | | | Disables all input fields. |
|
|
66
|
+
| `isReadOnly` | `boolean` | | | Disables all input fields and shows them in read-only mode. |
|
|
67
|
+
| `placeholder` | `Object`<br/>[See signature.](#signature-placeholder) | | | Placeholders for each language. Object of the same shape as `value`. |
|
|
68
|
+
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. |
|
|
69
|
+
| `hasError` | `boolean` | | | Will apply the error state to each input without showing any error message. |
|
|
70
|
+
| `hasWarning` | `boolean` | | | Will apply the warning state to each input without showing any error message. |
|
|
71
|
+
| `errors` | `Object`<br/>[See signature.](#signature-errors) | | | Used to show errors underneath the inputs of specific currencies. Pass an object whose key is a currency and whose value is the error to show for that key. |
|
|
72
|
+
| `warnings` | `Object`<br/>[See signature.](#signature-warnings) | | | Used to show warnings underneath the inputs of specific currencies. Pass an object whose key is a currency and whose value is the warning to show for that key. |
|
|
73
|
+
|
|
74
|
+
## Signatures
|
|
75
|
+
|
|
76
|
+
### Signature `value`
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
{
|
|
80
|
+
[key: string]: string;
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Signature `onChange`
|
|
85
|
+
|
|
86
|
+
```ts
|
|
87
|
+
() => void
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Signature `onBlur`
|
|
91
|
+
|
|
92
|
+
```ts
|
|
93
|
+
() => void
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Signature `onFocus`
|
|
97
|
+
|
|
98
|
+
```ts
|
|
99
|
+
() => void
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Signature `placeholder`
|
|
103
|
+
|
|
104
|
+
```ts
|
|
105
|
+
{
|
|
106
|
+
[key: string]: string;
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Signature `errors`
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
{
|
|
114
|
+
[key: string]: string;
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Signature `warnings`
|
|
119
|
+
|
|
120
|
+
```ts
|
|
121
|
+
{
|
|
122
|
+
[key: string]: string;
|
|
123
|
+
}
|
|
124
|
+
```
|
|
73
125
|
|
|
74
126
|
## `data-*` props
|
|
75
127
|
|