@commercetools-uikit/multiline-text-field 13.0.0 → 13.0.4
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 +39 -26
- package/dist/commercetools-uikit-multiline-text-field.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-multiline-text-field.cjs.dev.js +42 -149
- package/dist/commercetools-uikit-multiline-text-field.cjs.prod.js +14 -5
- package/dist/commercetools-uikit-multiline-text-field.esm.js +43 -149
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/multiline-text-field.d.ts +43 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -45,32 +45,45 @@ export default Example;
|
|
|
45
45
|
|
|
46
46
|
## Properties
|
|
47
47
|
|
|
48
|
-
| Props | Type
|
|
49
|
-
| ---------------------------- |
|
|
50
|
-
| `id` | `string`
|
|
51
|
-
| `horizontalConstraint` | `
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
|
|
48
|
+
| Props | Type | Required | Default | Description |
|
|
49
|
+
| ---------------------------- | -------------------------------------------------------------------------------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
50
|
+
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
|
|
51
|
+
| `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. |
|
|
52
|
+
| `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. |
|
|
53
|
+
| `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
|
|
54
|
+
| `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
|
|
55
|
+
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
|
|
56
|
+
| `name` | `string` | | | Used as HTML name of the input component. property |
|
|
57
|
+
| `value` | `string` | ✅ | | Value of the input component. |
|
|
58
|
+
| `onChange` | `ChangeEventHandler` | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. |
|
|
59
|
+
| `onBlur` | `FocusEventHandler` | | | Called when input is blurred |
|
|
60
|
+
| `onFocus` | `FocusEventHandler` | | | Called when input is focused |
|
|
61
|
+
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
|
|
62
|
+
| `defaultExpandMultilineText` | `boolean` | | | Expands multiline text input initially |
|
|
63
|
+
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
|
|
64
|
+
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
|
|
65
|
+
| `placeholder` | `string` | | | Placeholder text for the input |
|
|
66
|
+
| `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
<br />
Unknown errors will be forwarded to `renderError` |
|
|
67
|
+
| `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Title of the label |
|
|
68
|
+
| `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`. |
|
|
69
|
+
| `description` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Provides a description for the title. |
|
|
70
|
+
| `onInfoButtonClick` | `Function`<br/>[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
<br />
Info button will only be visible when this prop is passed. |
|
|
71
|
+
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
<br />
Will only get rendered when `hint` is passed as well. |
|
|
72
|
+
| `badge` | `string` | | | Badge to be displayed beside the label.
<br />
Might be used to display additional information about the content of the field (E.g verified email) |
|
|
73
|
+
|
|
74
|
+
## Signatures
|
|
75
|
+
|
|
76
|
+
### Signature `renderError`
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
(key: string, error?: boolean) => ReactNode;
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Signature `onInfoButtonClick`
|
|
83
|
+
|
|
84
|
+
```ts
|
|
85
|
+
() => void
|
|
86
|
+
```
|
|
74
87
|
|
|
75
88
|
## `data-*` props
|
|
76
89
|
|
|
@@ -17,12 +17,11 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
|
17
17
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
18
18
|
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
|
|
19
19
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
20
|
+
var _pt = require('prop-types');
|
|
20
21
|
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
21
22
|
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
22
23
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
23
24
|
var react = require('react');
|
|
24
|
-
var PropTypes = require('prop-types');
|
|
25
|
-
var requiredIf = require('react-required-if');
|
|
26
25
|
var utils = require('@commercetools-uikit/utils');
|
|
27
26
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
28
27
|
var Spacings = require('@commercetools-uikit/spacings');
|
|
@@ -42,11 +41,10 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
42
41
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
43
42
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
44
43
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
44
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
45
45
|
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
|
|
46
46
|
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
|
|
47
47
|
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
48
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
49
|
-
var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
|
|
50
48
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
51
49
|
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
|
|
52
50
|
var FieldLabel__default = /*#__PURE__*/_interopDefault(FieldLabel);
|
|
@@ -61,6 +59,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
|
|
|
61
59
|
|
|
62
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; } }
|
|
63
61
|
var sequentialId = utils.createSequentialId('multiline-text-field-');
|
|
62
|
+
var sequentialErrorsId = utils.createSequentialId('multiline-text-field-error-')();
|
|
64
63
|
|
|
65
64
|
var hasErrors = function hasErrors(errors) {
|
|
66
65
|
var _context;
|
|
@@ -97,6 +96,15 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
97
96
|
key: "render",
|
|
98
97
|
value: function render() {
|
|
99
98
|
var hasError = this.props.touched && hasErrors(this.props.errors);
|
|
99
|
+
|
|
100
|
+
if (!this.props.isReadOnly) {
|
|
101
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'MultilineField: "onChange" is required when is not read only.') : void 0;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
if (this.props.hint) {
|
|
105
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.hint === 'string' || /*#__PURE__*/react.isValidElement(this.props.hint), 'MultilineField: "hint" should be string or ReactNode if `hintIcon` is present') : void 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
100
108
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
101
109
|
max: this.props.horizontalConstraint,
|
|
102
110
|
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
@@ -110,7 +118,7 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
110
118
|
badge: this.props.badge,
|
|
111
119
|
hasRequiredIndicator: this.props.isRequired,
|
|
112
120
|
htmlFor: this.state.id
|
|
113
|
-
}), jsxRuntime.jsx(MultilineTextInput__default["default"], _objectSpread({
|
|
121
|
+
}), jsxRuntime.jsx(MultilineTextInput__default["default"], _objectSpread(_objectSpread({
|
|
114
122
|
id: this.state.id,
|
|
115
123
|
name: this.props.name,
|
|
116
124
|
autoComplete: this.props.autoComplete,
|
|
@@ -125,7 +133,11 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
125
133
|
hasError: hasError,
|
|
126
134
|
placeholder: this.props.placeholder,
|
|
127
135
|
horizontalConstraint: "scale"
|
|
128
|
-
}, utils.filterDataAttributes(this.props))
|
|
136
|
+
}, utils.filterDataAttributes(this.props)), {}, {
|
|
137
|
+
"aria-invalid": hasError,
|
|
138
|
+
"aria-errormessage": sequentialErrorsId
|
|
139
|
+
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
140
|
+
id: sequentialErrorsId,
|
|
129
141
|
errors: this.props.errors,
|
|
130
142
|
isVisible: hasError,
|
|
131
143
|
renderError: this.props.renderError
|
|
@@ -150,153 +162,34 @@ MultilineTextField.getDerivedStateFromProps = function (props, state) {
|
|
|
150
162
|
};
|
|
151
163
|
|
|
152
164
|
MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
* <br />
|
|
177
|
-
* Signature: `(key, error) => React.node`
|
|
178
|
-
*/
|
|
179
|
-
renderError: PropTypes__default["default"].func,
|
|
180
|
-
|
|
181
|
-
/**
|
|
182
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
183
|
-
*/
|
|
184
|
-
isRequired: PropTypes__default["default"].bool,
|
|
185
|
-
|
|
186
|
-
/**
|
|
187
|
-
* Indicates whether the field was touched. Errors will only be shown when the field was touched.
|
|
188
|
-
*/
|
|
189
|
-
touched: PropTypes__default["default"].bool,
|
|
190
|
-
// TextInput
|
|
191
|
-
|
|
192
|
-
/**
|
|
193
|
-
* Used as HTML `autocomplete` property
|
|
194
|
-
*/
|
|
195
|
-
autoComplete: PropTypes__default["default"].string,
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* Used as HTML name of the input component. property
|
|
199
|
-
*/
|
|
200
|
-
name: PropTypes__default["default"].string,
|
|
201
|
-
|
|
202
|
-
/**
|
|
203
|
-
* Value of the input component.
|
|
204
|
-
*/
|
|
205
|
-
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired,
|
|
206
|
-
|
|
207
|
-
/**
|
|
208
|
-
* Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
|
|
209
|
-
* <br />
|
|
210
|
-
* Signature: `(event) => void`
|
|
211
|
-
*/
|
|
212
|
-
onChange: requiredIf__default["default"](PropTypes__default["default"].func, function (props) {
|
|
213
|
-
return !props.isReadOnly;
|
|
214
|
-
}),
|
|
215
|
-
|
|
216
|
-
/**
|
|
217
|
-
* Called when input is blurred
|
|
218
|
-
* <br />
|
|
219
|
-
* Signature: `(event) => void`
|
|
220
|
-
*/
|
|
221
|
-
onBlur: PropTypes__default["default"].func,
|
|
222
|
-
|
|
223
|
-
/**
|
|
224
|
-
* Called when input is focused
|
|
225
|
-
* <br />
|
|
226
|
-
* Signature: `(event) => void`
|
|
227
|
-
*/
|
|
228
|
-
onFocus: PropTypes__default["default"].func,
|
|
229
|
-
|
|
230
|
-
/**
|
|
231
|
-
* Focus the input on initial render
|
|
232
|
-
*/
|
|
233
|
-
isAutofocussed: PropTypes__default["default"].bool,
|
|
234
|
-
|
|
235
|
-
/**
|
|
236
|
-
* Expands multiline text input initially
|
|
237
|
-
*/
|
|
238
|
-
defaultExpandMultilineText: PropTypes__default["default"].bool,
|
|
239
|
-
|
|
240
|
-
/**
|
|
241
|
-
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
|
|
242
|
-
*/
|
|
243
|
-
isDisabled: PropTypes__default["default"].bool,
|
|
244
|
-
|
|
245
|
-
/**
|
|
246
|
-
* Indicates that the field is displaying read-only content
|
|
247
|
-
*/
|
|
248
|
-
isReadOnly: PropTypes__default["default"].bool,
|
|
249
|
-
|
|
250
|
-
/**
|
|
251
|
-
* Placeholder text for the input
|
|
252
|
-
*/
|
|
253
|
-
placeholder: PropTypes__default["default"].string,
|
|
254
|
-
// LabelField
|
|
255
|
-
|
|
256
|
-
/**
|
|
257
|
-
* Title of the label
|
|
258
|
-
*/
|
|
259
|
-
title: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]).isRequired,
|
|
260
|
-
|
|
261
|
-
/**
|
|
262
|
-
* 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`.
|
|
263
|
-
*/
|
|
264
|
-
hint: requiredIf__default["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]), function (props) {
|
|
265
|
-
return props.hintIcon;
|
|
266
|
-
}),
|
|
267
|
-
|
|
268
|
-
/**
|
|
269
|
-
* Provides a description for the title.
|
|
270
|
-
*/
|
|
271
|
-
description: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
|
|
272
|
-
|
|
273
|
-
/**
|
|
274
|
-
* Function called when info button is pressed.
|
|
275
|
-
* <br />
|
|
276
|
-
* Info button will only be visible when this prop is passed.
|
|
277
|
-
* <br />
|
|
278
|
-
* Signature: `(event) => void`
|
|
279
|
-
*/
|
|
280
|
-
onInfoButtonClick: PropTypes__default["default"].func,
|
|
281
|
-
|
|
282
|
-
/**
|
|
283
|
-
* Icon to be displayed beside the hint text.
|
|
284
|
-
* <br />
|
|
285
|
-
* Will only get rendered when `hint` is passed as well.
|
|
286
|
-
*/
|
|
287
|
-
hintIcon: PropTypes__default["default"].node,
|
|
288
|
-
|
|
289
|
-
/**
|
|
290
|
-
* Badge to be displayed beside the label.
|
|
291
|
-
* <br />
|
|
292
|
-
* Might be used to display additional information about the content of the field (E.g verified email)
|
|
293
|
-
*/
|
|
294
|
-
badge: PropTypes__default["default"].node
|
|
165
|
+
id: _pt__default["default"].string,
|
|
166
|
+
horizontalConstraint: _pt__default["default"].oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
167
|
+
renderError: _pt__default["default"].func,
|
|
168
|
+
isRequired: _pt__default["default"].bool,
|
|
169
|
+
touched: _pt__default["default"].bool,
|
|
170
|
+
autoComplete: _pt__default["default"].string,
|
|
171
|
+
name: _pt__default["default"].string,
|
|
172
|
+
value: _pt__default["default"].string.isRequired,
|
|
173
|
+
onChange: _pt__default["default"].func,
|
|
174
|
+
onBlur: _pt__default["default"].func,
|
|
175
|
+
onFocus: _pt__default["default"].func,
|
|
176
|
+
isAutofocussed: _pt__default["default"].bool,
|
|
177
|
+
defaultExpandMultilineText: _pt__default["default"].bool,
|
|
178
|
+
isDisabled: _pt__default["default"].bool,
|
|
179
|
+
isReadOnly: _pt__default["default"].bool,
|
|
180
|
+
placeholder: _pt__default["default"].string,
|
|
181
|
+
errors: _pt__default["default"].objectOf(_pt__default["default"].bool),
|
|
182
|
+
title: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
|
|
183
|
+
hint: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
|
|
184
|
+
description: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
|
|
185
|
+
onInfoButtonClick: _pt__default["default"].func,
|
|
186
|
+
hintIcon: _pt__default["default"].element,
|
|
187
|
+
badge: _pt__default["default"].string
|
|
295
188
|
} : {};
|
|
296
189
|
var MultilineTextField$1 = MultilineTextField;
|
|
297
190
|
|
|
298
191
|
// NOTE: This string will be replaced on build time with the package version.
|
|
299
|
-
var version = "13.0.
|
|
192
|
+
var version = "13.0.4";
|
|
300
193
|
|
|
301
194
|
exports["default"] = MultilineTextField$1;
|
|
302
195
|
exports.version = version;
|
|
@@ -17,12 +17,11 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
|
|
|
17
17
|
var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
|
|
18
18
|
var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
|
|
19
19
|
var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
|
|
20
|
+
require('prop-types');
|
|
20
21
|
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
21
22
|
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
22
23
|
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
23
24
|
var react = require('react');
|
|
24
|
-
require('prop-types');
|
|
25
|
-
require('react-required-if');
|
|
26
25
|
var utils = require('@commercetools-uikit/utils');
|
|
27
26
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
28
27
|
var Spacings = require('@commercetools-uikit/spacings');
|
|
@@ -59,6 +58,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
|
|
|
59
58
|
|
|
60
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; } }
|
|
61
60
|
var sequentialId = utils.createSequentialId('multiline-text-field-');
|
|
61
|
+
var sequentialErrorsId = utils.createSequentialId('multiline-text-field-error-')();
|
|
62
62
|
|
|
63
63
|
var hasErrors = function hasErrors(errors) {
|
|
64
64
|
var _context;
|
|
@@ -95,6 +95,11 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
95
95
|
key: "render",
|
|
96
96
|
value: function render() {
|
|
97
97
|
var hasError = this.props.touched && hasErrors(this.props.errors);
|
|
98
|
+
|
|
99
|
+
if (!this.props.isReadOnly) ;
|
|
100
|
+
|
|
101
|
+
if (this.props.hint) ;
|
|
102
|
+
|
|
98
103
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
99
104
|
max: this.props.horizontalConstraint,
|
|
100
105
|
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
@@ -108,7 +113,7 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
108
113
|
badge: this.props.badge,
|
|
109
114
|
hasRequiredIndicator: this.props.isRequired,
|
|
110
115
|
htmlFor: this.state.id
|
|
111
|
-
}), jsxRuntime.jsx(MultilineTextInput__default["default"], _objectSpread({
|
|
116
|
+
}), jsxRuntime.jsx(MultilineTextInput__default["default"], _objectSpread(_objectSpread({
|
|
112
117
|
id: this.state.id,
|
|
113
118
|
name: this.props.name,
|
|
114
119
|
autoComplete: this.props.autoComplete,
|
|
@@ -123,7 +128,11 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
123
128
|
hasError: hasError,
|
|
124
129
|
placeholder: this.props.placeholder,
|
|
125
130
|
horizontalConstraint: "scale"
|
|
126
|
-
}, utils.filterDataAttributes(this.props))
|
|
131
|
+
}, utils.filterDataAttributes(this.props)), {}, {
|
|
132
|
+
"aria-invalid": hasError,
|
|
133
|
+
"aria-errormessage": sequentialErrorsId
|
|
134
|
+
})), jsxRuntime.jsx(FieldErrors__default["default"], {
|
|
135
|
+
id: sequentialErrorsId,
|
|
127
136
|
errors: this.props.errors,
|
|
128
137
|
isVisible: hasError,
|
|
129
138
|
renderError: this.props.renderError
|
|
@@ -151,7 +160,7 @@ MultilineTextField.propTypes = {};
|
|
|
151
160
|
var MultilineTextField$1 = MultilineTextField;
|
|
152
161
|
|
|
153
162
|
// NOTE: This string will be replaced on build time with the package version.
|
|
154
|
-
var version = "13.0.
|
|
163
|
+
var version = "13.0.4";
|
|
155
164
|
|
|
156
165
|
exports["default"] = MultilineTextField$1;
|
|
157
166
|
exports.version = version;
|
|
@@ -13,13 +13,12 @@ import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
|
|
|
13
13
|
import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
|
|
14
14
|
import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
|
|
15
15
|
import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
|
|
16
|
+
import _pt from 'prop-types';
|
|
16
17
|
import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
|
|
17
18
|
import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
|
|
18
19
|
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
19
|
-
import { Component } from 'react';
|
|
20
|
-
import
|
|
21
|
-
import requiredIf from 'react-required-if';
|
|
22
|
-
import { createSequentialId, filterDataAttributes, getFieldId } from '@commercetools-uikit/utils';
|
|
20
|
+
import { isValidElement, Component } from 'react';
|
|
21
|
+
import { createSequentialId, warning, filterDataAttributes, getFieldId } from '@commercetools-uikit/utils';
|
|
23
22
|
import Constraints from '@commercetools-uikit/constraints';
|
|
24
23
|
import Spacings from '@commercetools-uikit/spacings';
|
|
25
24
|
import FieldLabel from '@commercetools-uikit/field-label';
|
|
@@ -35,6 +34,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
|
|
|
35
34
|
|
|
36
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; } }
|
|
37
36
|
var sequentialId = createSequentialId('multiline-text-field-');
|
|
37
|
+
var sequentialErrorsId = createSequentialId('multiline-text-field-error-')();
|
|
38
38
|
|
|
39
39
|
var hasErrors = function hasErrors(errors) {
|
|
40
40
|
var _context;
|
|
@@ -71,6 +71,15 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
71
71
|
key: "render",
|
|
72
72
|
value: function render() {
|
|
73
73
|
var hasError = this.props.touched && hasErrors(this.props.errors);
|
|
74
|
+
|
|
75
|
+
if (!this.props.isReadOnly) {
|
|
76
|
+
process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'MultilineField: "onChange" is required when is not read only.') : void 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
if (this.props.hint) {
|
|
80
|
+
process.env.NODE_ENV !== "production" ? warning(typeof this.props.hint === 'string' || /*#__PURE__*/isValidElement(this.props.hint), 'MultilineField: "hint" should be string or ReactNode if `hintIcon` is present') : void 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
74
83
|
return jsx(Constraints.Horizontal, {
|
|
75
84
|
max: this.props.horizontalConstraint,
|
|
76
85
|
children: jsxs(Spacings.Stack, {
|
|
@@ -84,7 +93,7 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
84
93
|
badge: this.props.badge,
|
|
85
94
|
hasRequiredIndicator: this.props.isRequired,
|
|
86
95
|
htmlFor: this.state.id
|
|
87
|
-
}), jsx(MultilineTextInput, _objectSpread({
|
|
96
|
+
}), jsx(MultilineTextInput, _objectSpread(_objectSpread({
|
|
88
97
|
id: this.state.id,
|
|
89
98
|
name: this.props.name,
|
|
90
99
|
autoComplete: this.props.autoComplete,
|
|
@@ -99,7 +108,11 @@ var MultilineTextField = /*#__PURE__*/function (_Component) {
|
|
|
99
108
|
hasError: hasError,
|
|
100
109
|
placeholder: this.props.placeholder,
|
|
101
110
|
horizontalConstraint: "scale"
|
|
102
|
-
}, filterDataAttributes(this.props))
|
|
111
|
+
}, filterDataAttributes(this.props)), {}, {
|
|
112
|
+
"aria-invalid": hasError,
|
|
113
|
+
"aria-errormessage": sequentialErrorsId
|
|
114
|
+
})), jsx(FieldErrors, {
|
|
115
|
+
id: sequentialErrorsId,
|
|
103
116
|
errors: this.props.errors,
|
|
104
117
|
isVisible: hasError,
|
|
105
118
|
renderError: this.props.renderError
|
|
@@ -124,152 +137,33 @@ MultilineTextField.getDerivedStateFromProps = function (props, state) {
|
|
|
124
137
|
};
|
|
125
138
|
|
|
126
139
|
MultilineTextField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
* <br />
|
|
151
|
-
* Signature: `(key, error) => React.node`
|
|
152
|
-
*/
|
|
153
|
-
renderError: PropTypes.func,
|
|
154
|
-
|
|
155
|
-
/**
|
|
156
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
157
|
-
*/
|
|
158
|
-
isRequired: PropTypes.bool,
|
|
159
|
-
|
|
160
|
-
/**
|
|
161
|
-
* Indicates whether the field was touched. Errors will only be shown when the field was touched.
|
|
162
|
-
*/
|
|
163
|
-
touched: PropTypes.bool,
|
|
164
|
-
// TextInput
|
|
165
|
-
|
|
166
|
-
/**
|
|
167
|
-
* Used as HTML `autocomplete` property
|
|
168
|
-
*/
|
|
169
|
-
autoComplete: PropTypes.string,
|
|
170
|
-
|
|
171
|
-
/**
|
|
172
|
-
* Used as HTML name of the input component. property
|
|
173
|
-
*/
|
|
174
|
-
name: PropTypes.string,
|
|
175
|
-
|
|
176
|
-
/**
|
|
177
|
-
* Value of the input component.
|
|
178
|
-
*/
|
|
179
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
|
180
|
-
|
|
181
|
-
/**
|
|
182
|
-
* Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
|
|
183
|
-
* <br />
|
|
184
|
-
* Signature: `(event) => void`
|
|
185
|
-
*/
|
|
186
|
-
onChange: requiredIf(PropTypes.func, function (props) {
|
|
187
|
-
return !props.isReadOnly;
|
|
188
|
-
}),
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* Called when input is blurred
|
|
192
|
-
* <br />
|
|
193
|
-
* Signature: `(event) => void`
|
|
194
|
-
*/
|
|
195
|
-
onBlur: PropTypes.func,
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* Called when input is focused
|
|
199
|
-
* <br />
|
|
200
|
-
* Signature: `(event) => void`
|
|
201
|
-
*/
|
|
202
|
-
onFocus: PropTypes.func,
|
|
203
|
-
|
|
204
|
-
/**
|
|
205
|
-
* Focus the input on initial render
|
|
206
|
-
*/
|
|
207
|
-
isAutofocussed: PropTypes.bool,
|
|
208
|
-
|
|
209
|
-
/**
|
|
210
|
-
* Expands multiline text input initially
|
|
211
|
-
*/
|
|
212
|
-
defaultExpandMultilineText: PropTypes.bool,
|
|
213
|
-
|
|
214
|
-
/**
|
|
215
|
-
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
|
|
216
|
-
*/
|
|
217
|
-
isDisabled: PropTypes.bool,
|
|
218
|
-
|
|
219
|
-
/**
|
|
220
|
-
* Indicates that the field is displaying read-only content
|
|
221
|
-
*/
|
|
222
|
-
isReadOnly: PropTypes.bool,
|
|
223
|
-
|
|
224
|
-
/**
|
|
225
|
-
* Placeholder text for the input
|
|
226
|
-
*/
|
|
227
|
-
placeholder: PropTypes.string,
|
|
228
|
-
// LabelField
|
|
229
|
-
|
|
230
|
-
/**
|
|
231
|
-
* Title of the label
|
|
232
|
-
*/
|
|
233
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
|
|
234
|
-
|
|
235
|
-
/**
|
|
236
|
-
* 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`.
|
|
237
|
-
*/
|
|
238
|
-
hint: requiredIf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]), function (props) {
|
|
239
|
-
return props.hintIcon;
|
|
240
|
-
}),
|
|
241
|
-
|
|
242
|
-
/**
|
|
243
|
-
* Provides a description for the title.
|
|
244
|
-
*/
|
|
245
|
-
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
246
|
-
|
|
247
|
-
/**
|
|
248
|
-
* Function called when info button is pressed.
|
|
249
|
-
* <br />
|
|
250
|
-
* Info button will only be visible when this prop is passed.
|
|
251
|
-
* <br />
|
|
252
|
-
* Signature: `(event) => void`
|
|
253
|
-
*/
|
|
254
|
-
onInfoButtonClick: PropTypes.func,
|
|
255
|
-
|
|
256
|
-
/**
|
|
257
|
-
* Icon to be displayed beside the hint text.
|
|
258
|
-
* <br />
|
|
259
|
-
* Will only get rendered when `hint` is passed as well.
|
|
260
|
-
*/
|
|
261
|
-
hintIcon: PropTypes.node,
|
|
262
|
-
|
|
263
|
-
/**
|
|
264
|
-
* Badge to be displayed beside the label.
|
|
265
|
-
* <br />
|
|
266
|
-
* Might be used to display additional information about the content of the field (E.g verified email)
|
|
267
|
-
*/
|
|
268
|
-
badge: PropTypes.node
|
|
140
|
+
id: _pt.string,
|
|
141
|
+
horizontalConstraint: _pt.oneOf([6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
142
|
+
renderError: _pt.func,
|
|
143
|
+
isRequired: _pt.bool,
|
|
144
|
+
touched: _pt.bool,
|
|
145
|
+
autoComplete: _pt.string,
|
|
146
|
+
name: _pt.string,
|
|
147
|
+
value: _pt.string.isRequired,
|
|
148
|
+
onChange: _pt.func,
|
|
149
|
+
onBlur: _pt.func,
|
|
150
|
+
onFocus: _pt.func,
|
|
151
|
+
isAutofocussed: _pt.bool,
|
|
152
|
+
defaultExpandMultilineText: _pt.bool,
|
|
153
|
+
isDisabled: _pt.bool,
|
|
154
|
+
isReadOnly: _pt.bool,
|
|
155
|
+
placeholder: _pt.string,
|
|
156
|
+
errors: _pt.objectOf(_pt.bool),
|
|
157
|
+
title: _pt.oneOfType([_pt.string, _pt.node]),
|
|
158
|
+
hint: _pt.oneOfType([_pt.string, _pt.node]),
|
|
159
|
+
description: _pt.oneOfType([_pt.string, _pt.node]),
|
|
160
|
+
onInfoButtonClick: _pt.func,
|
|
161
|
+
hintIcon: _pt.element,
|
|
162
|
+
badge: _pt.string
|
|
269
163
|
} : {};
|
|
270
164
|
var MultilineTextField$1 = MultilineTextField;
|
|
271
165
|
|
|
272
166
|
// NOTE: This string will be replaced on build time with the package version.
|
|
273
|
-
var version = "13.0.
|
|
167
|
+
var version = "13.0.4";
|
|
274
168
|
|
|
275
169
|
export { MultilineTextField$1 as default, version };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { type ChangeEventHandler, type FocusEventHandler, type ReactElement, type ReactNode, Component } from 'react';
|
|
2
|
+
export declare type TFieldErrors = Record<string, boolean>;
|
|
3
|
+
export declare type TMultiTextFieldProps = {
|
|
4
|
+
id?: string;
|
|
5
|
+
horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
6
|
+
renderError?: TErrorRenderer;
|
|
7
|
+
isRequired?: boolean;
|
|
8
|
+
touched?: boolean;
|
|
9
|
+
autoComplete?: string;
|
|
10
|
+
name?: string;
|
|
11
|
+
value: string;
|
|
12
|
+
onChange?: ChangeEventHandler;
|
|
13
|
+
onBlur?: FocusEventHandler;
|
|
14
|
+
onFocus?: FocusEventHandler;
|
|
15
|
+
isAutofocussed?: boolean;
|
|
16
|
+
defaultExpandMultilineText?: boolean;
|
|
17
|
+
isDisabled?: boolean;
|
|
18
|
+
isReadOnly?: boolean;
|
|
19
|
+
placeholder?: string;
|
|
20
|
+
errors?: TFieldErrors;
|
|
21
|
+
title?: string | ReactNode;
|
|
22
|
+
hint?: string | ReactNode;
|
|
23
|
+
description?: string | ReactNode;
|
|
24
|
+
onInfoButtonClick?: () => void;
|
|
25
|
+
hintIcon?: ReactElement;
|
|
26
|
+
badge?: string;
|
|
27
|
+
};
|
|
28
|
+
declare type TState = {
|
|
29
|
+
id?: string;
|
|
30
|
+
};
|
|
31
|
+
declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
|
|
32
|
+
declare class MultilineTextField extends Component<TMultiTextFieldProps, TState> {
|
|
33
|
+
static displayName: string;
|
|
34
|
+
static defaultProps: Pick<TMultiTextFieldProps, 'horizontalConstraint'>;
|
|
35
|
+
state: {
|
|
36
|
+
id: string | undefined;
|
|
37
|
+
};
|
|
38
|
+
static getDerivedStateFromProps: (props: TMultiTextFieldProps, state: TState) => {
|
|
39
|
+
id: string;
|
|
40
|
+
};
|
|
41
|
+
render(): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
42
|
+
}
|
|
43
|
+
export default MultilineTextField;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/multiline-text-field",
|
|
3
3
|
"description": "A controlled text input component for multi-line strings with validation states and a label.",
|
|
4
|
-
"version": "13.0.
|
|
4
|
+
"version": "13.0.4",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,17 +21,17 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "7.17.2",
|
|
23
23
|
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
-
"@commercetools-uikit/constraints": "13.0.
|
|
24
|
+
"@commercetools-uikit/constraints": "13.0.2",
|
|
25
25
|
"@commercetools-uikit/design-system": "13.0.0",
|
|
26
|
-
"@commercetools-uikit/field-errors": "13.0.
|
|
27
|
-
"@commercetools-uikit/field-label": "13.0.
|
|
28
|
-
"@commercetools-uikit/multiline-text-input": "13.0.
|
|
29
|
-
"@commercetools-uikit/spacings": "13.0.
|
|
30
|
-
"@commercetools-uikit/utils": "
|
|
26
|
+
"@commercetools-uikit/field-errors": "13.0.4",
|
|
27
|
+
"@commercetools-uikit/field-label": "13.0.4",
|
|
28
|
+
"@commercetools-uikit/multiline-text-input": "13.0.4",
|
|
29
|
+
"@commercetools-uikit/spacings": "13.0.2",
|
|
30
|
+
"@commercetools-uikit/utils": "13.0.2",
|
|
31
31
|
"@emotion/react": "^11.4.0",
|
|
32
32
|
"@emotion/styled": "^11.3.0",
|
|
33
33
|
"prop-types": "15.8.1",
|
|
34
|
-
"react-
|
|
34
|
+
"react-intl": "^5.24.6"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"react": "17.0.2"
|