@commercetools-uikit/localized-multiline-text-field 13.0.3 → 14.0.1
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 +99 -30
- package/dist/commercetools-uikit-localized-multiline-text-field.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-localized-multiline-text-field.cjs.dev.js +56 -184
- package/dist/commercetools-uikit-localized-multiline-text-field.cjs.prod.js +26 -8
- package/dist/commercetools-uikit-localized-multiline-text-field.esm.js +57 -184
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/localized-multiline-text-field.d.ts +60 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +12 -13
package/README.md
CHANGED
|
@@ -49,36 +49,85 @@ export default Example;
|
|
|
49
49
|
|
|
50
50
|
## Properties
|
|
51
51
|
|
|
52
|
-
| Props | Type
|
|
53
|
-
| ------------------------------- |
|
|
54
|
-
| `id` | `string`
|
|
55
|
-
| `horizontalConstraint` | `
|
|
56
|
-
| `errors` | `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
|
|
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
|
+
| `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. |
|
|
56
|
+
| `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
<br />
Unknown errors will be forwarded to `renderError` |
|
|
57
|
+
| `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. |
|
|
58
|
+
| `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
|
|
59
|
+
| `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
|
|
60
|
+
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
|
|
61
|
+
| `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` |
|
|
62
|
+
| `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: '' } |
|
|
63
|
+
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Gets called when any input is changed. Is called with the change event of the changed input. |
|
|
64
|
+
| `selectedLanguage` | `string` | ✅ | | Specifies which language will be shown in case the `LocalizedTextInput` is collapsed. |
|
|
65
|
+
| `onBlur` | `ChangeEventHandler` | | | Called when input is blurred |
|
|
66
|
+
| `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when input is focused |
|
|
67
|
+
| `defaultExpandMultilineText` | `boolean` | | | Expands input components holding multiline values instead of collpasing them by default. |
|
|
68
|
+
| `hideLanguageExpansionControls` | `boolean` | | | Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`. |
|
|
69
|
+
| `defaultExpandLanguages` | `boolean` | | | Controls whether one or all languages are visible by default. Pass `true` to show all languages by default. |
|
|
70
|
+
| `isAutofocussed` | `boolean` | | | Sets the focus on the first input when `true` is passed. |
|
|
71
|
+
| `isDisabled` | `boolean` | | | Disables all input fields. |
|
|
72
|
+
| `isReadOnly` | `boolean` | | | Disables all input fields and shows them in read-only mode. |
|
|
73
|
+
| `placeholder` | `Object`<br/>[See signature.](#signature-placeholder) | | | Placeholders for each language. Object of the same shape as `value`. |
|
|
74
|
+
| `errorsByLanguage` | `Object`<br/>[See signature.](#signature-errorsByLanguage) | | | Errors for each translation. These are forwarded to the `errors` prop of `LocalizedTextInput`. |
|
|
75
|
+
| `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | ✅ | | Title of the label |
|
|
76
|
+
| `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. |
|
|
77
|
+
| `description` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Provides a description for the title. |
|
|
78
|
+
| `onInfoButtonClick` | `Function`<br/>[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed. Info button will only be visible when this prop is passed. |
|
|
79
|
+
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well. |
|
|
80
|
+
| `badge` | `ReactNode` | | | Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email) |
|
|
81
|
+
|
|
82
|
+
## Signatures
|
|
83
|
+
|
|
84
|
+
### Signature `renderError`
|
|
85
|
+
|
|
86
|
+
```ts
|
|
87
|
+
(key: string, error?: boolean) => ReactNode;
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Signature `value`
|
|
91
|
+
|
|
92
|
+
```ts
|
|
93
|
+
{
|
|
94
|
+
[key: string]: string;
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Signature `onChange`
|
|
99
|
+
|
|
100
|
+
```ts
|
|
101
|
+
(event: TEvent) => void
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Signature `onFocus`
|
|
105
|
+
|
|
106
|
+
```ts
|
|
107
|
+
() => void
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Signature `placeholder`
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
{
|
|
114
|
+
[key: string]: string;
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Signature `errorsByLanguage`
|
|
119
|
+
|
|
120
|
+
```ts
|
|
121
|
+
{
|
|
122
|
+
[key: string]: ReactNode;
|
|
123
|
+
}
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### Signature `onInfoButtonClick`
|
|
127
|
+
|
|
128
|
+
```ts
|
|
129
|
+
() => void
|
|
130
|
+
```
|
|
82
131
|
|
|
83
132
|
## `data-*` props
|
|
84
133
|
|
|
@@ -95,3 +144,23 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
|
|
|
95
144
|
Known error keys are:
|
|
96
145
|
|
|
97
146
|
- `missing`: tells the user that this field is required
|
|
147
|
+
|
|
148
|
+
## Static methods
|
|
149
|
+
|
|
150
|
+
### `LocalizedMultilineTextField.toFieldErrors`
|
|
151
|
+
|
|
152
|
+
Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
|
|
153
|
+
|
|
154
|
+
```ts
|
|
155
|
+
type FormValues = {
|
|
156
|
+
myField: string;
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
<LocalizedMultilineTextField
|
|
160
|
+
// ...
|
|
161
|
+
name="my-field"
|
|
162
|
+
errors={
|
|
163
|
+
LocalizedMultilineTextField.toFieldErrors<FormValues>(formik.errors).myField
|
|
164
|
+
}
|
|
165
|
+
/>;
|
|
166
|
+
```
|
|
@@ -11,20 +11,17 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
11
11
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
12
12
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
13
13
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
14
|
-
var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
|
|
15
14
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
16
15
|
var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
|
|
17
16
|
var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
18
17
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
19
18
|
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
|
|
20
19
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
20
|
+
var _pt = require('prop-types');
|
|
21
21
|
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
22
22
|
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
23
23
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
24
24
|
var react = require('react');
|
|
25
|
-
var PropTypes = require('prop-types');
|
|
26
|
-
var requiredIf = require('react-required-if');
|
|
27
|
-
var commonTags = require('common-tags');
|
|
28
25
|
var utils = require('@commercetools-uikit/utils');
|
|
29
26
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
30
27
|
var Spacings = require('@commercetools-uikit/spacings');
|
|
@@ -44,27 +41,25 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
44
41
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
45
42
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
46
43
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
44
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
47
45
|
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
|
|
48
46
|
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
|
|
49
47
|
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
50
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
51
|
-
var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
|
|
52
48
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
53
49
|
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
|
|
54
50
|
var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
|
|
55
51
|
var LocalizedMultilineTextInput__default = /*#__PURE__*/_interopDefault(LocalizedMultilineTextInput);
|
|
56
52
|
var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
57
53
|
|
|
58
|
-
var _templateObject;
|
|
59
|
-
|
|
60
54
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
61
55
|
|
|
62
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
56
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
63
57
|
|
|
64
58
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
65
59
|
|
|
66
60
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
67
61
|
var sequentialId = utils.createSequentialId('localized-multiline-text-field-');
|
|
62
|
+
var sequentialErrorsId = utils.createSequentialId('localized-multiline-text-field-error-')();
|
|
68
63
|
|
|
69
64
|
var hasErrors = function hasErrors(errors) {
|
|
70
65
|
var _context;
|
|
@@ -100,6 +95,14 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
100
95
|
_createClass(LocalizedMultilineTextField, [{
|
|
101
96
|
key: "render",
|
|
102
97
|
value: function render() {
|
|
98
|
+
if (!this.props.isReadOnly) {
|
|
99
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'LocalizedMultilineTextField: `onChange` is required when is not read only.') : void 0;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
if (this.props.hintIcon) {
|
|
103
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.hint === 'string' || /*#__PURE__*/react.isValidElement(this.props.hint), 'LocalizedMultilineTextField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
103
106
|
var hasError = this.props.touched && hasErrors(this.props.errors);
|
|
104
107
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
105
108
|
max: this.props.horizontalConstraint,
|
|
@@ -114,7 +117,7 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
114
117
|
badge: this.props.badge,
|
|
115
118
|
hasRequiredIndicator: this.props.isRequired,
|
|
116
119
|
htmlFor: this.state.id
|
|
117
|
-
}), jsxRuntime.jsx(LocalizedMultilineTextInput__default["default"], _objectSpread({
|
|
120
|
+
}), jsxRuntime.jsx(LocalizedMultilineTextInput__default["default"], _objectSpread(_objectSpread({
|
|
118
121
|
id: this.state.id,
|
|
119
122
|
name: this.props.name,
|
|
120
123
|
autoComplete: this.props.autoComplete,
|
|
@@ -133,7 +136,12 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
133
136
|
hasError: hasError,
|
|
134
137
|
placeholder: this.props.placeholder,
|
|
135
138
|
horizontalConstraint: "scale"
|
|
136
|
-
}, utils.filterDataAttributes(this.props))
|
|
139
|
+
}, utils.filterDataAttributes(this.props)), {}, {
|
|
140
|
+
/* ARIA */
|
|
141
|
+
"aria-invalid": hasError,
|
|
142
|
+
"aria-errormessage": sequentialErrorsId
|
|
143
|
+
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
144
|
+
id: sequentialErrorsId,
|
|
137
145
|
errors: this.props.errors,
|
|
138
146
|
isVisible: hasError,
|
|
139
147
|
renderError: this.props.renderError
|
|
@@ -141,6 +149,17 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
141
149
|
})
|
|
142
150
|
});
|
|
143
151
|
}
|
|
152
|
+
}], [{
|
|
153
|
+
key: "toFieldErrors",
|
|
154
|
+
value:
|
|
155
|
+
/**
|
|
156
|
+
* Use this function to convert the Formik `errors` object type to
|
|
157
|
+
* our custom field errors type.
|
|
158
|
+
* This is primarly useful when using TypeScript.
|
|
159
|
+
*/
|
|
160
|
+
function toFieldErrors(errors) {
|
|
161
|
+
return errors;
|
|
162
|
+
}
|
|
144
163
|
}]);
|
|
145
164
|
|
|
146
165
|
return LocalizedMultilineTextField;
|
|
@@ -158,183 +177,36 @@ LocalizedMultilineTextField.getDerivedStateFromProps = function (props, state) {
|
|
|
158
177
|
};
|
|
159
178
|
|
|
160
179
|
LocalizedMultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
*/
|
|
187
|
-
renderError: PropTypes__default["default"].func,
|
|
188
|
-
|
|
189
|
-
/**
|
|
190
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
191
|
-
*/
|
|
192
|
-
isRequired: PropTypes__default["default"].bool,
|
|
193
|
-
|
|
194
|
-
/**
|
|
195
|
-
* Indicates whether the field was touched. Errors will only be shown when the field was touched.
|
|
196
|
-
*/
|
|
197
|
-
touched: PropTypes__default["default"].bool,
|
|
198
|
-
// LocalizedMultilineTextInput
|
|
199
|
-
|
|
200
|
-
/**
|
|
201
|
-
* Used as HTML `autocomplete` of the input component. property
|
|
202
|
-
*/
|
|
203
|
-
autoComplete: PropTypes__default["default"].string,
|
|
204
|
-
|
|
205
|
-
/**
|
|
206
|
-
* Used as HTML name of the input component. property
|
|
207
|
-
*/
|
|
208
|
-
name: PropTypes__default["default"].string,
|
|
209
|
-
|
|
210
|
-
/**
|
|
211
|
-
* Values to use.
|
|
212
|
-
* <br />
|
|
213
|
-
* Keyed by language, the values are the actual values, e.g. `{ en: 'Horse', de: 'Pferd' }`
|
|
214
|
-
*/
|
|
215
|
-
value: PropTypes__default["default"].objectOf(PropTypes__default["default"].string).isRequired,
|
|
216
|
-
|
|
217
|
-
/**
|
|
218
|
-
* Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
|
|
219
|
-
* <br />
|
|
220
|
-
* Signature: `(event) => void`
|
|
221
|
-
*/
|
|
222
|
-
onChange: requiredIf__default["default"](PropTypes__default["default"].func, function (props) {
|
|
223
|
-
return !props.isReadOnly;
|
|
224
|
-
}),
|
|
225
|
-
|
|
226
|
-
/**
|
|
227
|
-
* Specifies which language will be shown in case the `LocalizedTextInput` is collapsed.
|
|
228
|
-
*/
|
|
229
|
-
selectedLanguage: PropTypes__default["default"].string.isRequired,
|
|
230
|
-
|
|
231
|
-
/**
|
|
232
|
-
* Called when input is blurred
|
|
233
|
-
*/
|
|
234
|
-
onBlur: PropTypes__default["default"].func,
|
|
235
|
-
|
|
236
|
-
/**
|
|
237
|
-
* Called when input is focused
|
|
238
|
-
*/
|
|
239
|
-
onFocus: PropTypes__default["default"].func,
|
|
240
|
-
|
|
241
|
-
/**
|
|
242
|
-
* Expands input components holding multiline values instead of collpasing them by default.
|
|
243
|
-
*/
|
|
244
|
-
defaultExpandMultilineText: PropTypes__default["default"].bool,
|
|
245
|
-
|
|
246
|
-
/**
|
|
247
|
-
* Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`.
|
|
248
|
-
*/
|
|
249
|
-
hideLanguageExpansionControls: PropTypes__default["default"].bool,
|
|
250
|
-
|
|
251
|
-
/**
|
|
252
|
-
* Controls whether one or all languages are visible by default. Pass `true` to show all languages by default.
|
|
253
|
-
*/
|
|
254
|
-
defaultExpandLanguages: function defaultExpandLanguages(props, propName, componentName) {
|
|
255
|
-
var _context3;
|
|
256
|
-
|
|
257
|
-
if (props.hideLanguageExpansionControls && typeof props[propName] === 'boolean') {
|
|
258
|
-
throw new Error(commonTags.oneLine(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", ": \"", "\" does not have any effect when\n \"hideLanguageExpansionControls\" is set.\n "])), componentName, propName));
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
for (var _len2 = arguments.length, rest = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
|
|
262
|
-
rest[_key2 - 3] = arguments[_key2];
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
return PropTypes__default["default"].bool.apply(PropTypes__default["default"], _concatInstanceProperty__default["default"](_context3 = [props, propName, componentName]).call(_context3, rest));
|
|
266
|
-
},
|
|
267
|
-
|
|
268
|
-
/**
|
|
269
|
-
* Focus the input on initial render
|
|
270
|
-
*/
|
|
271
|
-
isAutofocussed: PropTypes__default["default"].bool,
|
|
272
|
-
|
|
273
|
-
/**
|
|
274
|
-
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
|
|
275
|
-
*/
|
|
276
|
-
isDisabled: PropTypes__default["default"].bool,
|
|
277
|
-
|
|
278
|
-
/**
|
|
279
|
-
* Indicates that the field is displaying read-only content
|
|
280
|
-
*/
|
|
281
|
-
isReadOnly: PropTypes__default["default"].bool,
|
|
282
|
-
|
|
283
|
-
/**
|
|
284
|
-
* Placeholders for each language. Object of the same shape as `value`.
|
|
285
|
-
*/
|
|
286
|
-
placeholder: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
|
|
287
|
-
|
|
288
|
-
/**
|
|
289
|
-
* Errors for each translation. These are forwarded to the `errors` prop of `LocalizedTextInput`.
|
|
290
|
-
*/
|
|
291
|
-
errorsByLanguage: PropTypes__default["default"].objectOf(PropTypes__default["default"].node),
|
|
292
|
-
// LabelField
|
|
293
|
-
|
|
294
|
-
/**
|
|
295
|
-
* Title of the label
|
|
296
|
-
*/
|
|
297
|
-
title: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]).isRequired,
|
|
298
|
-
|
|
299
|
-
/**
|
|
300
|
-
* 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`.
|
|
301
|
-
*/
|
|
302
|
-
hint: requiredIf__default["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]), function (props) {
|
|
303
|
-
return props.hintIcon;
|
|
304
|
-
}),
|
|
305
|
-
|
|
306
|
-
/**
|
|
307
|
-
* Provides a description for the title.
|
|
308
|
-
*/
|
|
309
|
-
description: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
|
|
310
|
-
|
|
311
|
-
/**
|
|
312
|
-
* Function called when info button is pressed.
|
|
313
|
-
* <br />
|
|
314
|
-
* Info button will only be visible when this prop is passed.
|
|
315
|
-
* <br />
|
|
316
|
-
* Signature: `(event) => void`
|
|
317
|
-
*/
|
|
318
|
-
onInfoButtonClick: PropTypes__default["default"].func,
|
|
319
|
-
|
|
320
|
-
/**
|
|
321
|
-
* Icon to be displayed beside the hint text.
|
|
322
|
-
* <br />
|
|
323
|
-
* Will only get rendered when `hint` is passed as well.
|
|
324
|
-
*/
|
|
325
|
-
hintIcon: PropTypes__default["default"].node,
|
|
326
|
-
|
|
327
|
-
/**
|
|
328
|
-
* Badge to be displayed beside the label.
|
|
329
|
-
* <br />
|
|
330
|
-
* Might be used to display additional information about the content of the field (E.g verified email)
|
|
331
|
-
*/
|
|
332
|
-
badge: PropTypes__default["default"].node
|
|
180
|
+
id: _pt__default["default"].string,
|
|
181
|
+
horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
182
|
+
errors: _pt__default["default"].objectOf(_pt__default["default"].bool),
|
|
183
|
+
renderError: _pt__default["default"].func,
|
|
184
|
+
isRequired: _pt__default["default"].bool,
|
|
185
|
+
touched: _pt__default["default"].bool,
|
|
186
|
+
autoComplete: _pt__default["default"].string,
|
|
187
|
+
name: _pt__default["default"].string,
|
|
188
|
+
value: _pt__default["default"].objectOf(_pt__default["default"].string).isRequired,
|
|
189
|
+
onChange: _pt__default["default"].func,
|
|
190
|
+
selectedLanguage: _pt__default["default"].string.isRequired,
|
|
191
|
+
onBlur: _pt__default["default"].func,
|
|
192
|
+
onFocus: _pt__default["default"].func,
|
|
193
|
+
defaultExpandMultilineText: _pt__default["default"].bool,
|
|
194
|
+
hideLanguageExpansionControls: _pt__default["default"].bool,
|
|
195
|
+
defaultExpandLanguages: _pt__default["default"].bool,
|
|
196
|
+
isAutofocussed: _pt__default["default"].bool,
|
|
197
|
+
isDisabled: _pt__default["default"].bool,
|
|
198
|
+
isReadOnly: _pt__default["default"].bool,
|
|
199
|
+
placeholder: _pt__default["default"].objectOf(_pt__default["default"].string),
|
|
200
|
+
errorsByLanguage: _pt__default["default"].objectOf(_pt__default["default"].node),
|
|
201
|
+
title: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]).isRequired,
|
|
202
|
+
hint: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
|
|
203
|
+
description: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
|
|
204
|
+
onInfoButtonClick: _pt__default["default"].func
|
|
333
205
|
} : {};
|
|
334
206
|
var LocalizedMultilineTextField$1 = LocalizedMultilineTextField;
|
|
335
207
|
|
|
336
208
|
// NOTE: This string will be replaced on build time with the package version.
|
|
337
|
-
var version = "
|
|
209
|
+
var version = "14.0.1";
|
|
338
210
|
|
|
339
211
|
exports["default"] = LocalizedMultilineTextField$1;
|
|
340
212
|
exports.version = version;
|
|
@@ -11,20 +11,17 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
11
11
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
12
12
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
13
13
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
14
|
-
require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
|
|
15
14
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
16
15
|
var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
|
|
17
16
|
var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
18
17
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
19
18
|
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
|
|
20
19
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
20
|
+
require('prop-types');
|
|
21
21
|
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
22
22
|
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
23
23
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
24
24
|
var react = require('react');
|
|
25
|
-
require('prop-types');
|
|
26
|
-
require('react-required-if');
|
|
27
|
-
require('common-tags');
|
|
28
25
|
var utils = require('@commercetools-uikit/utils');
|
|
29
26
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
30
27
|
var Spacings = require('@commercetools-uikit/spacings');
|
|
@@ -55,12 +52,13 @@ var FieldErrors__default = /*#__PURE__*/_interopDefault(FieldErrors);
|
|
|
55
52
|
|
|
56
53
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
57
54
|
|
|
58
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
55
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
59
56
|
|
|
60
57
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
61
58
|
|
|
62
59
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
63
60
|
var sequentialId = utils.createSequentialId('localized-multiline-text-field-');
|
|
61
|
+
var sequentialErrorsId = utils.createSequentialId('localized-multiline-text-field-error-')();
|
|
64
62
|
|
|
65
63
|
var hasErrors = function hasErrors(errors) {
|
|
66
64
|
var _context;
|
|
@@ -96,6 +94,10 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
96
94
|
_createClass(LocalizedMultilineTextField, [{
|
|
97
95
|
key: "render",
|
|
98
96
|
value: function render() {
|
|
97
|
+
if (!this.props.isReadOnly) ;
|
|
98
|
+
|
|
99
|
+
if (this.props.hintIcon) ;
|
|
100
|
+
|
|
99
101
|
var hasError = this.props.touched && hasErrors(this.props.errors);
|
|
100
102
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
101
103
|
max: this.props.horizontalConstraint,
|
|
@@ -110,7 +112,7 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
110
112
|
badge: this.props.badge,
|
|
111
113
|
hasRequiredIndicator: this.props.isRequired,
|
|
112
114
|
htmlFor: this.state.id
|
|
113
|
-
}), jsxRuntime.jsx(LocalizedMultilineTextInput__default["default"], _objectSpread({
|
|
115
|
+
}), jsxRuntime.jsx(LocalizedMultilineTextInput__default["default"], _objectSpread(_objectSpread({
|
|
114
116
|
id: this.state.id,
|
|
115
117
|
name: this.props.name,
|
|
116
118
|
autoComplete: this.props.autoComplete,
|
|
@@ -129,7 +131,12 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
129
131
|
hasError: hasError,
|
|
130
132
|
placeholder: this.props.placeholder,
|
|
131
133
|
horizontalConstraint: "scale"
|
|
132
|
-
}, utils.filterDataAttributes(this.props))
|
|
134
|
+
}, utils.filterDataAttributes(this.props)), {}, {
|
|
135
|
+
/* ARIA */
|
|
136
|
+
"aria-invalid": hasError,
|
|
137
|
+
"aria-errormessage": sequentialErrorsId
|
|
138
|
+
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
139
|
+
id: sequentialErrorsId,
|
|
133
140
|
errors: this.props.errors,
|
|
134
141
|
isVisible: hasError,
|
|
135
142
|
renderError: this.props.renderError
|
|
@@ -137,6 +144,17 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
137
144
|
})
|
|
138
145
|
});
|
|
139
146
|
}
|
|
147
|
+
}], [{
|
|
148
|
+
key: "toFieldErrors",
|
|
149
|
+
value:
|
|
150
|
+
/**
|
|
151
|
+
* Use this function to convert the Formik `errors` object type to
|
|
152
|
+
* our custom field errors type.
|
|
153
|
+
* This is primarly useful when using TypeScript.
|
|
154
|
+
*/
|
|
155
|
+
function toFieldErrors(errors) {
|
|
156
|
+
return errors;
|
|
157
|
+
}
|
|
140
158
|
}]);
|
|
141
159
|
|
|
142
160
|
return LocalizedMultilineTextField;
|
|
@@ -157,7 +175,7 @@ LocalizedMultilineTextField.propTypes = {};
|
|
|
157
175
|
var LocalizedMultilineTextField$1 = LocalizedMultilineTextField;
|
|
158
176
|
|
|
159
177
|
// NOTE: This string will be replaced on build time with the package version.
|
|
160
|
-
var version = "
|
|
178
|
+
var version = "14.0.1";
|
|
161
179
|
|
|
162
180
|
exports["default"] = LocalizedMultilineTextField$1;
|
|
163
181
|
exports.version = version;
|
|
@@ -7,21 +7,18 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
|
|
|
7
7
|
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
|
|
8
8
|
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
|
|
9
9
|
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
|
|
10
|
-
import _taggedTemplateLiteral from '@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral';
|
|
11
10
|
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
12
11
|
import _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
|
|
13
12
|
import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
|
|
14
13
|
import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
|
|
15
14
|
import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
|
|
16
15
|
import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
|
|
16
|
+
import _pt from 'prop-types';
|
|
17
17
|
import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
|
|
18
18
|
import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
|
|
19
19
|
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
20
|
-
import { Component } from 'react';
|
|
21
|
-
import
|
|
22
|
-
import requiredIf from 'react-required-if';
|
|
23
|
-
import { oneLine } from 'common-tags';
|
|
24
|
-
import { createSequentialId, filterDataAttributes, getFieldId } from '@commercetools-uikit/utils';
|
|
20
|
+
import { isValidElement, Component } from 'react';
|
|
21
|
+
import { createSequentialId, warning, filterDataAttributes, getFieldId } from '@commercetools-uikit/utils';
|
|
25
22
|
import Constraints from '@commercetools-uikit/constraints';
|
|
26
23
|
import Spacings from '@commercetools-uikit/spacings';
|
|
27
24
|
import FieldLabel from '@commercetools-uikit/field-label';
|
|
@@ -29,16 +26,15 @@ import LocalizedMultilineTextInput from '@commercetools-uikit/localized-multilin
|
|
|
29
26
|
import FieldErrors from '@commercetools-uikit/field-errors';
|
|
30
27
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
31
28
|
|
|
32
|
-
var _templateObject;
|
|
33
|
-
|
|
34
29
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
35
30
|
|
|
36
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
31
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
37
32
|
|
|
38
33
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
39
34
|
|
|
40
35
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
41
36
|
var sequentialId = createSequentialId('localized-multiline-text-field-');
|
|
37
|
+
var sequentialErrorsId = createSequentialId('localized-multiline-text-field-error-')();
|
|
42
38
|
|
|
43
39
|
var hasErrors = function hasErrors(errors) {
|
|
44
40
|
var _context;
|
|
@@ -74,6 +70,14 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
74
70
|
_createClass(LocalizedMultilineTextField, [{
|
|
75
71
|
key: "render",
|
|
76
72
|
value: function render() {
|
|
73
|
+
if (!this.props.isReadOnly) {
|
|
74
|
+
process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'LocalizedMultilineTextField: `onChange` is required when is not read only.') : void 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
if (this.props.hintIcon) {
|
|
78
|
+
process.env.NODE_ENV !== "production" ? warning(typeof this.props.hint === 'string' || /*#__PURE__*/isValidElement(this.props.hint), 'LocalizedMultilineTextField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
77
81
|
var hasError = this.props.touched && hasErrors(this.props.errors);
|
|
78
82
|
return jsx(Constraints.Horizontal, {
|
|
79
83
|
max: this.props.horizontalConstraint,
|
|
@@ -88,7 +92,7 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
88
92
|
badge: this.props.badge,
|
|
89
93
|
hasRequiredIndicator: this.props.isRequired,
|
|
90
94
|
htmlFor: this.state.id
|
|
91
|
-
}), jsx(LocalizedMultilineTextInput, _objectSpread({
|
|
95
|
+
}), jsx(LocalizedMultilineTextInput, _objectSpread(_objectSpread({
|
|
92
96
|
id: this.state.id,
|
|
93
97
|
name: this.props.name,
|
|
94
98
|
autoComplete: this.props.autoComplete,
|
|
@@ -107,7 +111,12 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
107
111
|
hasError: hasError,
|
|
108
112
|
placeholder: this.props.placeholder,
|
|
109
113
|
horizontalConstraint: "scale"
|
|
110
|
-
}, filterDataAttributes(this.props))
|
|
114
|
+
}, filterDataAttributes(this.props)), {}, {
|
|
115
|
+
/* ARIA */
|
|
116
|
+
"aria-invalid": hasError,
|
|
117
|
+
"aria-errormessage": sequentialErrorsId
|
|
118
|
+
})), jsx(FieldErrors, {
|
|
119
|
+
id: sequentialErrorsId,
|
|
111
120
|
errors: this.props.errors,
|
|
112
121
|
isVisible: hasError,
|
|
113
122
|
renderError: this.props.renderError
|
|
@@ -115,6 +124,17 @@ var LocalizedMultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
115
124
|
})
|
|
116
125
|
});
|
|
117
126
|
}
|
|
127
|
+
}], [{
|
|
128
|
+
key: "toFieldErrors",
|
|
129
|
+
value:
|
|
130
|
+
/**
|
|
131
|
+
* Use this function to convert the Formik `errors` object type to
|
|
132
|
+
* our custom field errors type.
|
|
133
|
+
* This is primarly useful when using TypeScript.
|
|
134
|
+
*/
|
|
135
|
+
function toFieldErrors(errors) {
|
|
136
|
+
return errors;
|
|
137
|
+
}
|
|
118
138
|
}]);
|
|
119
139
|
|
|
120
140
|
return LocalizedMultilineTextField;
|
|
@@ -132,182 +152,35 @@ LocalizedMultilineTextField.getDerivedStateFromProps = function (props, state) {
|
|
|
132
152
|
};
|
|
133
153
|
|
|
134
154
|
LocalizedMultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
*/
|
|
161
|
-
renderError: PropTypes.func,
|
|
162
|
-
|
|
163
|
-
/**
|
|
164
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
165
|
-
*/
|
|
166
|
-
isRequired: PropTypes.bool,
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* Indicates whether the field was touched. Errors will only be shown when the field was touched.
|
|
170
|
-
*/
|
|
171
|
-
touched: PropTypes.bool,
|
|
172
|
-
// LocalizedMultilineTextInput
|
|
173
|
-
|
|
174
|
-
/**
|
|
175
|
-
* Used as HTML `autocomplete` of the input component. property
|
|
176
|
-
*/
|
|
177
|
-
autoComplete: PropTypes.string,
|
|
178
|
-
|
|
179
|
-
/**
|
|
180
|
-
* Used as HTML name of the input component. property
|
|
181
|
-
*/
|
|
182
|
-
name: PropTypes.string,
|
|
183
|
-
|
|
184
|
-
/**
|
|
185
|
-
* Values to use.
|
|
186
|
-
* <br />
|
|
187
|
-
* Keyed by language, the values are the actual values, e.g. `{ en: 'Horse', de: 'Pferd' }`
|
|
188
|
-
*/
|
|
189
|
-
value: PropTypes.objectOf(PropTypes.string).isRequired,
|
|
190
|
-
|
|
191
|
-
/**
|
|
192
|
-
* Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
|
|
193
|
-
* <br />
|
|
194
|
-
* Signature: `(event) => void`
|
|
195
|
-
*/
|
|
196
|
-
onChange: requiredIf(PropTypes.func, function (props) {
|
|
197
|
-
return !props.isReadOnly;
|
|
198
|
-
}),
|
|
199
|
-
|
|
200
|
-
/**
|
|
201
|
-
* Specifies which language will be shown in case the `LocalizedTextInput` is collapsed.
|
|
202
|
-
*/
|
|
203
|
-
selectedLanguage: PropTypes.string.isRequired,
|
|
204
|
-
|
|
205
|
-
/**
|
|
206
|
-
* Called when input is blurred
|
|
207
|
-
*/
|
|
208
|
-
onBlur: PropTypes.func,
|
|
209
|
-
|
|
210
|
-
/**
|
|
211
|
-
* Called when input is focused
|
|
212
|
-
*/
|
|
213
|
-
onFocus: PropTypes.func,
|
|
214
|
-
|
|
215
|
-
/**
|
|
216
|
-
* Expands input components holding multiline values instead of collpasing them by default.
|
|
217
|
-
*/
|
|
218
|
-
defaultExpandMultilineText: PropTypes.bool,
|
|
219
|
-
|
|
220
|
-
/**
|
|
221
|
-
* Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`.
|
|
222
|
-
*/
|
|
223
|
-
hideLanguageExpansionControls: PropTypes.bool,
|
|
224
|
-
|
|
225
|
-
/**
|
|
226
|
-
* Controls whether one or all languages are visible by default. Pass `true` to show all languages by default.
|
|
227
|
-
*/
|
|
228
|
-
defaultExpandLanguages: function defaultExpandLanguages(props, propName, componentName) {
|
|
229
|
-
var _context3;
|
|
230
|
-
|
|
231
|
-
if (props.hideLanguageExpansionControls && typeof props[propName] === 'boolean') {
|
|
232
|
-
throw new Error(oneLine(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", ": \"", "\" does not have any effect when\n \"hideLanguageExpansionControls\" is set.\n "])), componentName, propName));
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
for (var _len2 = arguments.length, rest = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
|
|
236
|
-
rest[_key2 - 3] = arguments[_key2];
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
return PropTypes.bool.apply(PropTypes, _concatInstanceProperty(_context3 = [props, propName, componentName]).call(_context3, rest));
|
|
240
|
-
},
|
|
241
|
-
|
|
242
|
-
/**
|
|
243
|
-
* Focus the input on initial render
|
|
244
|
-
*/
|
|
245
|
-
isAutofocussed: PropTypes.bool,
|
|
246
|
-
|
|
247
|
-
/**
|
|
248
|
-
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
|
|
249
|
-
*/
|
|
250
|
-
isDisabled: PropTypes.bool,
|
|
251
|
-
|
|
252
|
-
/**
|
|
253
|
-
* Indicates that the field is displaying read-only content
|
|
254
|
-
*/
|
|
255
|
-
isReadOnly: PropTypes.bool,
|
|
256
|
-
|
|
257
|
-
/**
|
|
258
|
-
* Placeholders for each language. Object of the same shape as `value`.
|
|
259
|
-
*/
|
|
260
|
-
placeholder: PropTypes.objectOf(PropTypes.string),
|
|
261
|
-
|
|
262
|
-
/**
|
|
263
|
-
* Errors for each translation. These are forwarded to the `errors` prop of `LocalizedTextInput`.
|
|
264
|
-
*/
|
|
265
|
-
errorsByLanguage: PropTypes.objectOf(PropTypes.node),
|
|
266
|
-
// LabelField
|
|
267
|
-
|
|
268
|
-
/**
|
|
269
|
-
* Title of the label
|
|
270
|
-
*/
|
|
271
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
|
|
272
|
-
|
|
273
|
-
/**
|
|
274
|
-
* 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`.
|
|
275
|
-
*/
|
|
276
|
-
hint: requiredIf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]), function (props) {
|
|
277
|
-
return props.hintIcon;
|
|
278
|
-
}),
|
|
279
|
-
|
|
280
|
-
/**
|
|
281
|
-
* Provides a description for the title.
|
|
282
|
-
*/
|
|
283
|
-
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
284
|
-
|
|
285
|
-
/**
|
|
286
|
-
* Function called when info button is pressed.
|
|
287
|
-
* <br />
|
|
288
|
-
* Info button will only be visible when this prop is passed.
|
|
289
|
-
* <br />
|
|
290
|
-
* Signature: `(event) => void`
|
|
291
|
-
*/
|
|
292
|
-
onInfoButtonClick: PropTypes.func,
|
|
293
|
-
|
|
294
|
-
/**
|
|
295
|
-
* Icon to be displayed beside the hint text.
|
|
296
|
-
* <br />
|
|
297
|
-
* Will only get rendered when `hint` is passed as well.
|
|
298
|
-
*/
|
|
299
|
-
hintIcon: PropTypes.node,
|
|
300
|
-
|
|
301
|
-
/**
|
|
302
|
-
* Badge to be displayed beside the label.
|
|
303
|
-
* <br />
|
|
304
|
-
* Might be used to display additional information about the content of the field (E.g verified email)
|
|
305
|
-
*/
|
|
306
|
-
badge: PropTypes.node
|
|
155
|
+
id: _pt.string,
|
|
156
|
+
horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
157
|
+
errors: _pt.objectOf(_pt.bool),
|
|
158
|
+
renderError: _pt.func,
|
|
159
|
+
isRequired: _pt.bool,
|
|
160
|
+
touched: _pt.bool,
|
|
161
|
+
autoComplete: _pt.string,
|
|
162
|
+
name: _pt.string,
|
|
163
|
+
value: _pt.objectOf(_pt.string).isRequired,
|
|
164
|
+
onChange: _pt.func,
|
|
165
|
+
selectedLanguage: _pt.string.isRequired,
|
|
166
|
+
onBlur: _pt.func,
|
|
167
|
+
onFocus: _pt.func,
|
|
168
|
+
defaultExpandMultilineText: _pt.bool,
|
|
169
|
+
hideLanguageExpansionControls: _pt.bool,
|
|
170
|
+
defaultExpandLanguages: _pt.bool,
|
|
171
|
+
isAutofocussed: _pt.bool,
|
|
172
|
+
isDisabled: _pt.bool,
|
|
173
|
+
isReadOnly: _pt.bool,
|
|
174
|
+
placeholder: _pt.objectOf(_pt.string),
|
|
175
|
+
errorsByLanguage: _pt.objectOf(_pt.node),
|
|
176
|
+
title: _pt.oneOfType([_pt.string, _pt.node]).isRequired,
|
|
177
|
+
hint: _pt.oneOfType([_pt.string, _pt.node]),
|
|
178
|
+
description: _pt.oneOfType([_pt.string, _pt.node]),
|
|
179
|
+
onInfoButtonClick: _pt.func
|
|
307
180
|
} : {};
|
|
308
181
|
var LocalizedMultilineTextField$1 = LocalizedMultilineTextField;
|
|
309
182
|
|
|
310
183
|
// NOTE: This string will be replaced on build time with the package version.
|
|
311
|
-
var version = "
|
|
184
|
+
var version = "14.0.1";
|
|
312
185
|
|
|
313
186
|
export { LocalizedMultilineTextField$1 as default, version };
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { Component, type ReactNode, type ChangeEventHandler, type ReactElement } from 'react';
|
|
2
|
+
declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
|
|
3
|
+
declare type TFieldErrors = Record<string, boolean>;
|
|
4
|
+
declare type TCustomFormErrors<Values> = {
|
|
5
|
+
[K in keyof Values]?: TFieldErrors;
|
|
6
|
+
};
|
|
7
|
+
declare type TEvent = {
|
|
8
|
+
target: {
|
|
9
|
+
language: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
declare type TLocalizedMultilineTextFieldProps = {
|
|
13
|
+
id?: string;
|
|
14
|
+
horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
15
|
+
errors?: TFieldErrors;
|
|
16
|
+
renderError?: TErrorRenderer;
|
|
17
|
+
isRequired?: boolean;
|
|
18
|
+
touched?: boolean;
|
|
19
|
+
autoComplete?: string;
|
|
20
|
+
name?: string;
|
|
21
|
+
value: {
|
|
22
|
+
[key: string]: string;
|
|
23
|
+
};
|
|
24
|
+
onChange?: (event: TEvent) => void;
|
|
25
|
+
selectedLanguage: string;
|
|
26
|
+
onBlur?: ChangeEventHandler<Element>;
|
|
27
|
+
onFocus?: () => void;
|
|
28
|
+
defaultExpandMultilineText?: boolean;
|
|
29
|
+
hideLanguageExpansionControls?: boolean;
|
|
30
|
+
defaultExpandLanguages?: boolean;
|
|
31
|
+
isAutofocussed?: boolean;
|
|
32
|
+
isDisabled?: boolean;
|
|
33
|
+
isReadOnly?: boolean;
|
|
34
|
+
placeholder?: {
|
|
35
|
+
[key: string]: string;
|
|
36
|
+
};
|
|
37
|
+
errorsByLanguage?: {
|
|
38
|
+
[key: string]: ReactNode;
|
|
39
|
+
};
|
|
40
|
+
title: string | ReactNode;
|
|
41
|
+
hint?: string | ReactNode;
|
|
42
|
+
description?: string | ReactNode;
|
|
43
|
+
onInfoButtonClick?: () => void;
|
|
44
|
+
hintIcon?: ReactElement;
|
|
45
|
+
badge?: ReactNode;
|
|
46
|
+
};
|
|
47
|
+
declare type TLocalizedMultilineTextFieldState = Pick<TLocalizedMultilineTextFieldProps, 'id'>;
|
|
48
|
+
declare class LocalizedMultilineTextField extends Component<TLocalizedMultilineTextFieldProps, TLocalizedMultilineTextFieldState> {
|
|
49
|
+
static displayName: string;
|
|
50
|
+
static defaultProps: Pick<TLocalizedMultilineTextFieldProps, 'horizontalConstraint'>;
|
|
51
|
+
state: {
|
|
52
|
+
id: string | undefined;
|
|
53
|
+
};
|
|
54
|
+
static getDerivedStateFromProps: (props: TLocalizedMultilineTextFieldProps, state: TLocalizedMultilineTextFieldState) => {
|
|
55
|
+
id: string;
|
|
56
|
+
};
|
|
57
|
+
static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
|
|
58
|
+
render(): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
59
|
+
}
|
|
60
|
+
export default LocalizedMultilineTextField;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/localized-multiline-text-field",
|
|
3
3
|
"description": "A controlled text input component for localized multi-line strings with validation states.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "14.0.1",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"directory": "packages/components/fields/localized-multiline-text-field"
|
|
10
10
|
},
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
|
-
"keywords": ["javascript", "design
|
|
12
|
+
"keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"publishConfig": {
|
|
15
15
|
"access": "public"
|
|
@@ -19,20 +19,19 @@
|
|
|
19
19
|
"module": "dist/commercetools-uikit-localized-multiline-text-field.esm.js",
|
|
20
20
|
"files": ["dist"],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@babel/runtime": "7.17.2",
|
|
23
|
-
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
-
"@commercetools-uikit/constraints": "
|
|
25
|
-
"@commercetools-uikit/design-system": "
|
|
26
|
-
"@commercetools-uikit/field-errors": "
|
|
27
|
-
"@commercetools-uikit/field-label": "
|
|
28
|
-
"@commercetools-uikit/localized-multiline-text-input": "
|
|
29
|
-
"@commercetools-uikit/spacings": "
|
|
30
|
-
"@commercetools-uikit/utils": "
|
|
22
|
+
"@babel/runtime": "^7.17.2",
|
|
23
|
+
"@babel/runtime-corejs3": "^7.17.2",
|
|
24
|
+
"@commercetools-uikit/constraints": "14.0.1",
|
|
25
|
+
"@commercetools-uikit/design-system": "14.0.0",
|
|
26
|
+
"@commercetools-uikit/field-errors": "14.0.1",
|
|
27
|
+
"@commercetools-uikit/field-label": "14.0.1",
|
|
28
|
+
"@commercetools-uikit/localized-multiline-text-input": "14.0.1",
|
|
29
|
+
"@commercetools-uikit/spacings": "14.0.1",
|
|
30
|
+
"@commercetools-uikit/utils": "14.0.1",
|
|
31
31
|
"@emotion/react": "^11.4.0",
|
|
32
32
|
"@emotion/styled": "^11.3.0",
|
|
33
|
-
"common-tags": "1.8.2",
|
|
34
33
|
"prop-types": "15.8.1",
|
|
35
|
-
"react-
|
|
34
|
+
"react-intl": "^5.24.6"
|
|
36
35
|
},
|
|
37
36
|
"devDependencies": {
|
|
38
37
|
"react": "17.0.2"
|