@commercetools-uikit/localized-multiline-text-input 0.0.0-canary-2021830134526

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.
Files changed (7) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +161 -0
  3. package/dist/commercetools-uikit-localized-multiline-text-input.cjs.dev.js +612 -0
  4. package/dist/commercetools-uikit-localized-multiline-text-input.cjs.js +7 -0
  5. package/dist/commercetools-uikit-localized-multiline-text-input.cjs.prod.js +404 -0
  6. package/dist/commercetools-uikit-localized-multiline-text-input.esm.js +586 -0
  7. package/package.json +64 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2019 commercetools GmbH
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,161 @@
1
+ <!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
2
+ <!-- This file is created by the `yarn generate-readme` script. -->
3
+
4
+ # LocalizedMultilineTextInput
5
+
6
+ ## Description
7
+
8
+ A controlled text input component for localized multi-line strings with validation states.
9
+
10
+ ## Installation
11
+
12
+ ```
13
+ yarn add @commercetools-uikit/localized-multiline-text-input
14
+ ```
15
+
16
+ ```
17
+ npm --save install @commercetools-uikit/localized-multiline-text-input
18
+ ```
19
+
20
+ Additionally install the peer dependencies (if not present)
21
+
22
+ ```
23
+ yarn add react react-dom react-intl
24
+ ```
25
+
26
+ ```
27
+ npm --save install react react-dom react-intl
28
+ ```
29
+
30
+ ## Usage
31
+
32
+ ```jsx
33
+ import LocalizedMultilineTextInput from '@commercetools-uikit/localized-multiline-text-input';
34
+
35
+ const Example = () => (
36
+ <LocalizedMultilineTextInput
37
+ value={{ en: 'House\nFoo', de: 'House' }}
38
+ onChange={
39
+ (/** event */) => {
40
+ // alert(event.target.name, event.target.value)
41
+ }
42
+ }
43
+ />
44
+ );
45
+
46
+ export default Example;
47
+ ```
48
+
49
+ ## Properties
50
+
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` | `objectOf(string)` | ✅ | | Values to use. Keyed by language, the values are the actual values, e.g. `{ en: 'Horse', de: 'Pferd' }`&#xA;<br />&#xA;The input doesn't accept a "languages" prop, instead all possible&#xA;languages have to exist (with empty or filled strings) on the value:&#xA;<br /> { en: 'foo', de: '', es: '' } |
57
+ | `onChange` | `custom` | | | Gets called when any input is changed. Is called with the change event of the changed input.&#xA;<br />&#xA;Signature: `(event) => void` |
58
+ | `selectedLanguage` | `string` | ✅ | | Specifies which language will be shown in case the `LocalizedTextInput` is collapsed. |
59
+ | `onBlur` | `func` | | | Called when input is blurred |
60
+ | `onFocus` | `func` | | | Called when input is focused |
61
+ | `defaultExpandMultilineText` | `bool` | | | Expands input components holding multiline values instead of collpasing them by default. |
62
+ | `hideLanguageExpansionControls` | `bool` | | | Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`. |
63
+ | `defaultExpandLanguages` | `custom` | | | Controls whether one or all languages are visible by default. Pass `true` to show all languages by default. |
64
+ | `isAutofocussed` | `bool` | | | Sets the focus on the first input when `true` is passed. |
65
+ | `isDisabled` | `bool` | | | Disables all input fields. |
66
+ | `isReadOnly` | `bool` | | | Disables all input fields and shows them in read-only mode. |
67
+ | `placeholder` | `objectOf(string)` | | | Placeholders for each language. Object of the same shape as `value`. |
68
+ | `horizontalConstraint` | `enum`<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` | `bool` | | | Will apply the error state to each input without showing any error message. |
70
+ | `hasWarning` | `bool` | | | Will apply the warning state to each input without showing any error message. |
71
+ | `errors` | `objectOf(node)` | | | 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` | `objectOf(node)` | | | 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
+ ## `data-*` props
75
+
76
+ The component forwards all `data` attribute props. It further adds a `-${language}` suffix to the values of the `data-test` and `data-track-component` attributes, e.g `data-test="foo"` will get added to the input for `en` as `data-test="foo-en"`.
77
+
78
+ Main Functions and use cases are:
79
+
80
+ - Receiving localized input from user
81
+
82
+ ## Static Properties
83
+
84
+ ### `createLocalizedString(languages, existingTranslations)`
85
+
86
+ This function creates a [localized string](https://docs.commercetools.com/http-api-types.html#localizedstring). It merges the `languages` and the language keys of existing translations to form a localized string holding all languages.
87
+ The `existingTranslations` argument is optional. If it is not passed, an empty localized field will be created.
88
+
89
+ ```js
90
+ const languages = ['en', 'de'];
91
+ LocalizedMultilineTextInput.createLocalizedString(languages);
92
+ // -> { en: '', de: '' }
93
+ ```
94
+
95
+ In case existingTranslations is passed, it will merge an empty localized field with the existing translations. Usually this is used to ensure that a localized string contains at least the project's languages.
96
+
97
+ ```js
98
+ const languages = ['en', 'de'];
99
+ const existingTranslations = { en: 'Tree', ar: 'شجرة' };
100
+ LocalizedMultilineTextInput.createLocalizedString(
101
+ languages,
102
+ existingTranslations
103
+ );
104
+ // -> { en: 'Tree', de: '', ar: 'شجرة' }
105
+ ```
106
+
107
+ ### `isEmpty(localizedField)`
108
+
109
+ Returns `true` when all values in a localized field are empty.
110
+
111
+ ```js
112
+ LocalizedMultilineTextInput.isEmpty({});
113
+ // -> true
114
+ ```
115
+
116
+ ```js
117
+ LocalizedMultilineTextInput.isEmpty({ en: '', de: ' ' });
118
+ // -> true
119
+ ```
120
+
121
+ ```js
122
+ LocalizedMultilineTextInput.isEmpty({ en: 'Tree', de: '' });
123
+ // -> false
124
+ ```
125
+
126
+ ### `omitEmptyTranslations(localizedField)`
127
+
128
+ Omits translations with empty values.
129
+
130
+ ```js
131
+ LocalizedMultilineTextInput.omitEmptyTranslations({ en: '', de: ' ' });
132
+ // -> {}
133
+ ```
134
+
135
+ ```js
136
+ LocalizedMultilineTextInput.omitEmptyTranslations({ en: 'Tree', de: '' });
137
+ // -> { en: 'Tree' }
138
+ ```
139
+
140
+ ### `isTouched(touched)`
141
+
142
+ Expects to be called with an object or `undefined`.
143
+ Returns `true` when at least one value is truthy.
144
+
145
+ ### `RequiredValueErrorMessage`
146
+
147
+ This field exports a default error message which can be used when the field is
148
+ required, but the user provided no value. You can use it as
149
+
150
+ ```js
151
+ render (
152
+ return (
153
+ <div>
154
+ <LocalizedMultilineTextInput hasError={isMissing} />
155
+ {
156
+ isMissing && <LocalizedMultilineTextInput.RequiredValueErrorMessage />
157
+ }
158
+ </div>
159
+ )
160
+ )
161
+ ```