@dhis2-ui/text-area 8.1.10 → 8.2.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/build/cjs/text-area/text-area.js +5 -5
- package/build/cjs/text-area/text-area.stories.js +12 -18
- package/build/cjs/text-area/text-area.styles.js +1 -1
- package/build/cjs/text-area-field/text-area-field.js +64 -62
- package/build/cjs/text-area-field/text-area-field.stories.js +3 -11
- package/build/es/text-area/text-area.js +5 -5
- package/build/es/text-area/text-area.stories.js +11 -17
- package/build/es/text-area/text-area.styles.js +1 -1
- package/build/es/text-area-field/text-area-field.js +64 -62
- package/build/es/text-area-field/text-area-field.stories.js +2 -10
- package/package.json +7 -7
|
@@ -28,8 +28,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
28
28
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
29
29
|
|
|
30
30
|
class TextArea extends _react.Component {
|
|
31
|
-
constructor(
|
|
32
|
-
super(...
|
|
31
|
+
constructor() {
|
|
32
|
+
super(...arguments);
|
|
33
33
|
|
|
34
34
|
_defineProperty(this, "textareaRef", /*#__PURE__*/_react.default.createRef());
|
|
35
35
|
|
|
@@ -163,7 +163,7 @@ class TextArea extends _react.Component {
|
|
|
163
163
|
} = this.state;
|
|
164
164
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
165
165
|
"data-test": dataTest,
|
|
166
|
-
className:
|
|
166
|
+
className: "jsx-".concat(_textAreaStyles.styles.__hash) + " " + _style.default.dynamic([["3036048772", [width, height, resize]]]) + " " + ((0, _classnames.default)('textarea', className) || "")
|
|
167
167
|
}, /*#__PURE__*/_react.default.createElement("textarea", {
|
|
168
168
|
id: name,
|
|
169
169
|
name: name,
|
|
@@ -177,7 +177,7 @@ class TextArea extends _react.Component {
|
|
|
177
177
|
onBlur: this.handleBlur,
|
|
178
178
|
onChange: this.handleChange,
|
|
179
179
|
rows: rows,
|
|
180
|
-
className:
|
|
180
|
+
className: "jsx-".concat(_textAreaStyles.styles.__hash) + " " + _style.default.dynamic([["3036048772", [width, height, resize]]]) + " " + ((0, _classnames.default)({
|
|
181
181
|
dense,
|
|
182
182
|
disabled,
|
|
183
183
|
error,
|
|
@@ -195,7 +195,7 @@ class TextArea extends _react.Component {
|
|
|
195
195
|
}, _textAreaStyles.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
196
196
|
id: "3036048772",
|
|
197
197
|
dynamic: [width, height, resize]
|
|
198
|
-
}, [
|
|
198
|
+
}, ["textarea.__jsx-style-dynamic-selector{width:".concat(width, ";height:").concat(height, ";resize:").concat(resize, ";}")]));
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.WithValue = exports.TextareaTextOverflow = exports.StatusWarning = exports.StatusValid = exports.StatusLoading = exports.StatusError = exports.Rows = exports.Resize = exports.ReadOnly = exports.PlaceholderNoValue = exports.Focus = exports.Disabled = exports.Dense = exports.Default = exports.Autogrow = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -15,19 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
15
15
|
|
|
16
16
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
17
|
|
|
18
|
-
const description =
|
|
19
|
-
A textarea allows multiple lines of text input. Use a textarea wherever a user needs to input a lot of information. Do not use a textarea if a short, single line of content is expected.
|
|
20
|
-
|
|
21
|
-
Options for textarea inputs are:
|
|
22
|
-
|
|
23
|
-
- Rows: the height of the input, defined by the number of rows of text
|
|
24
|
-
- Resizable: whether the textarea can be resized by the user or not. Can be set for both width and height.
|
|
25
|
-
- Autoheight: if enabled, the texarea will grow in height to adapt to the content.
|
|
26
|
-
|
|
27
|
-
\`\`\`js
|
|
28
|
-
import { TextArea } from '@dhis2/ui'
|
|
29
|
-
\`\`\`
|
|
30
|
-
`;
|
|
18
|
+
const description = "\nA textarea allows multiple lines of text input. Use a textarea wherever a user needs to input a lot of information. Do not use a textarea if a short, single line of content is expected.\n\nOptions for textarea inputs are:\n\n- Rows: the height of the input, defined by the number of rows of text\n- Resizable: whether the textarea can be resized by the user or not. Can be set for both width and height.\n- Autoheight: if enabled, the texarea will grow in height to adapt to the content.\n\n```js\nimport { TextArea } from '@dhis2/ui'\n```\n";
|
|
31
19
|
|
|
32
20
|
window.onChange = (payload, event) => {
|
|
33
21
|
console.log('onChange payload', payload);
|
|
@@ -44,14 +32,20 @@ window.onBlur = (payload, event) => {
|
|
|
44
32
|
console.log('onBlur event', event);
|
|
45
33
|
};
|
|
46
34
|
|
|
47
|
-
const onChange = (
|
|
35
|
+
const onChange = function () {
|
|
36
|
+
return window.onChange(...arguments);
|
|
37
|
+
};
|
|
48
38
|
|
|
49
|
-
const onFocus = (
|
|
39
|
+
const onFocus = function () {
|
|
40
|
+
return window.onFocus(...arguments);
|
|
41
|
+
};
|
|
50
42
|
|
|
51
|
-
const onBlur = (
|
|
43
|
+
const onBlur = function () {
|
|
44
|
+
return window.onBlur(...arguments);
|
|
45
|
+
};
|
|
52
46
|
|
|
53
47
|
var _default = {
|
|
54
|
-
title: '
|
|
48
|
+
title: 'Text Area',
|
|
55
49
|
component: _index.TextArea,
|
|
56
50
|
parameters: {
|
|
57
51
|
docs: {
|
|
@@ -7,6 +7,6 @@ exports.styles = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
10
|
-
const styles = [
|
|
10
|
+
const styles = [".textarea.jsx-1940988187{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(_uiConstants.spacers.dp8, ";}"), "textarea.jsx-1940988187{box-sizing:border-box;padding:8px 12px;color:".concat(_uiConstants.colors.grey900, ";background-color:white;border:1px solid ").concat(_uiConstants.colors.grey500, ";border-radius:3px;box-shadow:inset 0 0 0 1px rgba(102,113,123,0.15), inset 0 1px 2px 0 rgba(102,113,123,0.1);outline:0;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}"), "textarea.dense.jsx-1940988187{padding:4px 12px;}", "textarea.jsx-1940988187:focus{outline:none;box-shadow:inset 0 0 0 2px ".concat(_uiConstants.theme.focus, ";border-color:").concat(_uiConstants.theme.focus, ";}"), "textarea.valid.jsx-1940988187{border-color:".concat(_uiConstants.theme.valid, ";}"), "textarea.warning.jsx-1940988187{border-color:".concat(_uiConstants.theme.warning, ";}"), "textarea.error.jsx-1940988187{border-color:".concat(_uiConstants.theme.error, ";}"), "textarea.read-only.jsx-1940988187{background-color:".concat(_uiConstants.colors.grey100, ";border-color:").concat(_uiConstants.colors.grey500, ";cursor:text;}"), "textarea.disabled.jsx-1940988187{background-color:".concat(_uiConstants.colors.grey100, ";border-color:").concat(_uiConstants.colors.grey500, ";color:").concat(_uiConstants.theme.disabled, ";cursor:not-allowed;}")];
|
|
11
11
|
exports.styles = styles;
|
|
12
12
|
styles.__hash = "1940988187";
|
|
@@ -19,72 +19,74 @@ var _index = require("../index.js");
|
|
|
19
19
|
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
21
|
|
|
22
|
-
const TextAreaField =
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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
|
-
|
|
82
|
-
|
|
22
|
+
const TextAreaField = _ref => {
|
|
23
|
+
let {
|
|
24
|
+
className,
|
|
25
|
+
onChange,
|
|
26
|
+
onFocus,
|
|
27
|
+
onBlur,
|
|
28
|
+
initialFocus,
|
|
29
|
+
dense,
|
|
30
|
+
required,
|
|
31
|
+
label,
|
|
32
|
+
disabled,
|
|
33
|
+
placeholder,
|
|
34
|
+
name,
|
|
35
|
+
valid,
|
|
36
|
+
error,
|
|
37
|
+
warning,
|
|
38
|
+
loading,
|
|
39
|
+
value,
|
|
40
|
+
tabIndex,
|
|
41
|
+
helpText,
|
|
42
|
+
validationText,
|
|
43
|
+
autoGrow,
|
|
44
|
+
readOnly,
|
|
45
|
+
resize,
|
|
46
|
+
rows,
|
|
47
|
+
inputWidth,
|
|
48
|
+
dataTest
|
|
49
|
+
} = _ref;
|
|
50
|
+
return /*#__PURE__*/_react.default.createElement(_field.Field, {
|
|
51
|
+
className: className,
|
|
52
|
+
dataTest: dataTest,
|
|
53
|
+
disabled: disabled,
|
|
54
|
+
required: required,
|
|
55
|
+
name: name,
|
|
56
|
+
helpText: helpText,
|
|
57
|
+
validationText: validationText,
|
|
58
|
+
error: error,
|
|
59
|
+
warning: warning,
|
|
60
|
+
valid: valid,
|
|
61
|
+
label: label
|
|
62
|
+
}, /*#__PURE__*/_react.default.createElement(_box.Box, {
|
|
63
|
+
width: inputWidth,
|
|
64
|
+
minWidth: "220px"
|
|
65
|
+
}, /*#__PURE__*/_react.default.createElement(_index.TextArea, {
|
|
66
|
+
onFocus: onFocus,
|
|
67
|
+
onBlur: onBlur,
|
|
68
|
+
onChange: onChange,
|
|
69
|
+
name: name,
|
|
70
|
+
value: value || '',
|
|
71
|
+
placeholder: placeholder,
|
|
72
|
+
disabled: disabled,
|
|
73
|
+
valid: valid,
|
|
74
|
+
warning: warning,
|
|
75
|
+
error: error,
|
|
76
|
+
loading: loading,
|
|
77
|
+
dense: dense,
|
|
78
|
+
tabIndex: tabIndex,
|
|
79
|
+
initialFocus: initialFocus,
|
|
80
|
+
autoGrow: autoGrow,
|
|
81
|
+
readOnly: readOnly,
|
|
82
|
+
resize: resize,
|
|
83
|
+
rows: rows
|
|
84
|
+
})));
|
|
85
|
+
};
|
|
83
86
|
|
|
84
87
|
exports.TextAreaField = TextAreaField;
|
|
85
88
|
TextAreaField.defaultProps = {
|
|
86
89
|
rows: 4,
|
|
87
|
-
width: '100%',
|
|
88
90
|
resize: 'vertical',
|
|
89
91
|
dataTest: 'dhis2-uiwidgets-textareafield'
|
|
90
92
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.WithValue = exports.WithHelpText = exports.TextareaTextOverflow = exports.StatusWarning = exports.StatusValid = exports.StatusLoading = exports.StatusError = exports.Rows = exports.Resize = exports.Required = exports.ReadOnly = exports.PlaceholderNoValue = exports.NoPlaceholderNoValue = exports.LabelTextOverflow = exports.InputWidth = exports.Focus = exports.Disabled = exports.Dense = exports.Autogrow = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -15,17 +15,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
15
15
|
|
|
16
16
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
17
|
|
|
18
|
-
const description = `
|
|
19
|
-
\`TextAreaField\` wraps a \`TextArea\` component with a label, help text, validation text, and other functions.
|
|
20
|
-
|
|
21
|
-
See the regular TextArea for usage information and options.
|
|
22
|
-
|
|
23
|
-
\`\`\`js
|
|
24
|
-
import { TextAreaField } from '@dhis2/ui'
|
|
25
|
-
\`\`\`
|
|
26
|
-
`;
|
|
18
|
+
const description = "\n`TextAreaField` wraps a `TextArea` component with a label, help text, validation text, and other functions.\n\nSee the regular TextArea for usage information and options.\n\n```js\nimport { TextAreaField } from '@dhis2/ui'\n```\n";
|
|
27
19
|
var _default = {
|
|
28
|
-
title: '
|
|
20
|
+
title: 'Text Area Field',
|
|
29
21
|
component: _index.TextAreaField,
|
|
30
22
|
parameters: {
|
|
31
23
|
docs: {
|
|
@@ -9,8 +9,8 @@ import PropTypes from 'prop-types';
|
|
|
9
9
|
import React, { Component } from 'react';
|
|
10
10
|
import { styles } from './text-area.styles.js';
|
|
11
11
|
export class TextArea extends Component {
|
|
12
|
-
constructor(
|
|
13
|
-
super(...
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
14
|
|
|
15
15
|
_defineProperty(this, "textareaRef", /*#__PURE__*/React.createRef());
|
|
16
16
|
|
|
@@ -144,7 +144,7 @@ export class TextArea extends Component {
|
|
|
144
144
|
} = this.state;
|
|
145
145
|
return /*#__PURE__*/React.createElement("div", {
|
|
146
146
|
"data-test": dataTest,
|
|
147
|
-
className:
|
|
147
|
+
className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["3036048772", [width, height, resize]]]) + " " + (cx('textarea', className) || "")
|
|
148
148
|
}, /*#__PURE__*/React.createElement("textarea", {
|
|
149
149
|
id: name,
|
|
150
150
|
name: name,
|
|
@@ -158,7 +158,7 @@ export class TextArea extends Component {
|
|
|
158
158
|
onBlur: this.handleBlur,
|
|
159
159
|
onChange: this.handleChange,
|
|
160
160
|
rows: rows,
|
|
161
|
-
className:
|
|
161
|
+
className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["3036048772", [width, height, resize]]]) + " " + (cx({
|
|
162
162
|
dense,
|
|
163
163
|
disabled,
|
|
164
164
|
error,
|
|
@@ -176,7 +176,7 @@ export class TextArea extends Component {
|
|
|
176
176
|
}, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
177
177
|
id: "3036048772",
|
|
178
178
|
dynamic: [width, height, resize]
|
|
179
|
-
}, [
|
|
179
|
+
}, ["textarea.__jsx-style-dynamic-selector{width:".concat(width, ";height:").concat(height, ";resize:").concat(resize, ";}")]));
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
}
|
|
@@ -3,19 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
3
3
|
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { TextArea } from './index.js';
|
|
6
|
-
const description =
|
|
7
|
-
A textarea allows multiple lines of text input. Use a textarea wherever a user needs to input a lot of information. Do not use a textarea if a short, single line of content is expected.
|
|
8
|
-
|
|
9
|
-
Options for textarea inputs are:
|
|
10
|
-
|
|
11
|
-
- Rows: the height of the input, defined by the number of rows of text
|
|
12
|
-
- Resizable: whether the textarea can be resized by the user or not. Can be set for both width and height.
|
|
13
|
-
- Autoheight: if enabled, the texarea will grow in height to adapt to the content.
|
|
14
|
-
|
|
15
|
-
\`\`\`js
|
|
16
|
-
import { TextArea } from '@dhis2/ui'
|
|
17
|
-
\`\`\`
|
|
18
|
-
`;
|
|
6
|
+
const description = "\nA textarea allows multiple lines of text input. Use a textarea wherever a user needs to input a lot of information. Do not use a textarea if a short, single line of content is expected.\n\nOptions for textarea inputs are:\n\n- Rows: the height of the input, defined by the number of rows of text\n- Resizable: whether the textarea can be resized by the user or not. Can be set for both width and height.\n- Autoheight: if enabled, the texarea will grow in height to adapt to the content.\n\n```js\nimport { TextArea } from '@dhis2/ui'\n```\n";
|
|
19
7
|
|
|
20
8
|
window.onChange = (payload, event) => {
|
|
21
9
|
console.log('onChange payload', payload);
|
|
@@ -32,14 +20,20 @@ window.onBlur = (payload, event) => {
|
|
|
32
20
|
console.log('onBlur event', event);
|
|
33
21
|
};
|
|
34
22
|
|
|
35
|
-
const onChange = (
|
|
23
|
+
const onChange = function () {
|
|
24
|
+
return window.onChange(...arguments);
|
|
25
|
+
};
|
|
36
26
|
|
|
37
|
-
const onFocus = (
|
|
27
|
+
const onFocus = function () {
|
|
28
|
+
return window.onFocus(...arguments);
|
|
29
|
+
};
|
|
38
30
|
|
|
39
|
-
const onBlur = (
|
|
31
|
+
const onBlur = function () {
|
|
32
|
+
return window.onBlur(...arguments);
|
|
33
|
+
};
|
|
40
34
|
|
|
41
35
|
export default {
|
|
42
|
-
title: '
|
|
36
|
+
title: 'Text Area',
|
|
43
37
|
component: TextArea,
|
|
44
38
|
parameters: {
|
|
45
39
|
docs: {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { colors, theme, spacers } from '@dhis2/ui-constants';
|
|
2
|
-
export const styles = [
|
|
2
|
+
export const styles = [".textarea.jsx-1940988187{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp8, ";}"), "textarea.jsx-1940988187{box-sizing:border-box;padding:8px 12px;color:".concat(colors.grey900, ";background-color:white;border:1px solid ").concat(colors.grey500, ";border-radius:3px;box-shadow:inset 0 0 0 1px rgba(102,113,123,0.15), inset 0 1px 2px 0 rgba(102,113,123,0.1);outline:0;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}"), "textarea.dense.jsx-1940988187{padding:4px 12px;}", "textarea.jsx-1940988187:focus{outline:none;box-shadow:inset 0 0 0 2px ".concat(theme.focus, ";border-color:").concat(theme.focus, ";}"), "textarea.valid.jsx-1940988187{border-color:".concat(theme.valid, ";}"), "textarea.warning.jsx-1940988187{border-color:".concat(theme.warning, ";}"), "textarea.error.jsx-1940988187{border-color:".concat(theme.error, ";}"), "textarea.read-only.jsx-1940988187{background-color:".concat(colors.grey100, ";border-color:").concat(colors.grey500, ";cursor:text;}"), "textarea.disabled.jsx-1940988187{background-color:".concat(colors.grey100, ";border-color:").concat(colors.grey500, ";color:").concat(theme.disabled, ";cursor:not-allowed;}")];
|
|
3
3
|
styles.__hash = "1940988187";
|
|
@@ -5,71 +5,73 @@ import PropTypes from 'prop-types';
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { TextArea } from '../index.js';
|
|
7
7
|
|
|
8
|
-
const TextAreaField =
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
8
|
+
const TextAreaField = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
className,
|
|
11
|
+
onChange,
|
|
12
|
+
onFocus,
|
|
13
|
+
onBlur,
|
|
14
|
+
initialFocus,
|
|
15
|
+
dense,
|
|
16
|
+
required,
|
|
17
|
+
label,
|
|
18
|
+
disabled,
|
|
19
|
+
placeholder,
|
|
20
|
+
name,
|
|
21
|
+
valid,
|
|
22
|
+
error,
|
|
23
|
+
warning,
|
|
24
|
+
loading,
|
|
25
|
+
value,
|
|
26
|
+
tabIndex,
|
|
27
|
+
helpText,
|
|
28
|
+
validationText,
|
|
29
|
+
autoGrow,
|
|
30
|
+
readOnly,
|
|
31
|
+
resize,
|
|
32
|
+
rows,
|
|
33
|
+
inputWidth,
|
|
34
|
+
dataTest
|
|
35
|
+
} = _ref;
|
|
36
|
+
return /*#__PURE__*/React.createElement(Field, {
|
|
37
|
+
className: className,
|
|
38
|
+
dataTest: dataTest,
|
|
39
|
+
disabled: disabled,
|
|
40
|
+
required: required,
|
|
41
|
+
name: name,
|
|
42
|
+
helpText: helpText,
|
|
43
|
+
validationText: validationText,
|
|
44
|
+
error: error,
|
|
45
|
+
warning: warning,
|
|
46
|
+
valid: valid,
|
|
47
|
+
label: label
|
|
48
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
49
|
+
width: inputWidth,
|
|
50
|
+
minWidth: "220px"
|
|
51
|
+
}, /*#__PURE__*/React.createElement(TextArea, {
|
|
52
|
+
onFocus: onFocus,
|
|
53
|
+
onBlur: onBlur,
|
|
54
|
+
onChange: onChange,
|
|
55
|
+
name: name,
|
|
56
|
+
value: value || '',
|
|
57
|
+
placeholder: placeholder,
|
|
58
|
+
disabled: disabled,
|
|
59
|
+
valid: valid,
|
|
60
|
+
warning: warning,
|
|
61
|
+
error: error,
|
|
62
|
+
loading: loading,
|
|
63
|
+
dense: dense,
|
|
64
|
+
tabIndex: tabIndex,
|
|
65
|
+
initialFocus: initialFocus,
|
|
66
|
+
autoGrow: autoGrow,
|
|
67
|
+
readOnly: readOnly,
|
|
68
|
+
resize: resize,
|
|
69
|
+
rows: rows
|
|
70
|
+
})));
|
|
71
|
+
};
|
|
69
72
|
|
|
70
73
|
TextAreaField.defaultProps = {
|
|
71
74
|
rows: 4,
|
|
72
|
-
width: '100%',
|
|
73
75
|
resize: 'vertical',
|
|
74
76
|
dataTest: 'dhis2-uiwidgets-textareafield'
|
|
75
77
|
};
|
|
@@ -3,17 +3,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
3
3
|
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { TextAreaField } from './index.js';
|
|
6
|
-
const description = `
|
|
7
|
-
\`TextAreaField\` wraps a \`TextArea\` component with a label, help text, validation text, and other functions.
|
|
8
|
-
|
|
9
|
-
See the regular TextArea for usage information and options.
|
|
10
|
-
|
|
11
|
-
\`\`\`js
|
|
12
|
-
import { TextAreaField } from '@dhis2/ui'
|
|
13
|
-
\`\`\`
|
|
14
|
-
`;
|
|
6
|
+
const description = "\n`TextAreaField` wraps a `TextArea` component with a label, help text, validation text, and other functions.\n\nSee the regular TextArea for usage information and options.\n\n```js\nimport { TextAreaField } from '@dhis2/ui'\n```\n";
|
|
15
7
|
export default {
|
|
16
|
-
title: '
|
|
8
|
+
title: 'Text Area Field',
|
|
17
9
|
component: TextAreaField,
|
|
18
10
|
parameters: {
|
|
19
11
|
docs: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/text-area",
|
|
3
|
-
"version": "8.1
|
|
3
|
+
"version": "8.2.1",
|
|
4
4
|
"description": "UI TextArea",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,12 +32,12 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@dhis2/prop-types": "^3.0.0-beta.1",
|
|
35
|
-
"@dhis2-ui/box": "8.1
|
|
36
|
-
"@dhis2-ui/field": "8.1
|
|
37
|
-
"@dhis2-ui/loader": "8.1
|
|
38
|
-
"@dhis2-ui/status-icon": "8.1
|
|
39
|
-
"@dhis2/ui-constants": "8.1
|
|
40
|
-
"@dhis2/ui-icons": "8.1
|
|
35
|
+
"@dhis2-ui/box": "8.2.1",
|
|
36
|
+
"@dhis2-ui/field": "8.2.1",
|
|
37
|
+
"@dhis2-ui/loader": "8.2.1",
|
|
38
|
+
"@dhis2-ui/status-icon": "8.2.1",
|
|
39
|
+
"@dhis2/ui-constants": "8.2.1",
|
|
40
|
+
"@dhis2/ui-icons": "8.2.1",
|
|
41
41
|
"classnames": "^2.3.1",
|
|
42
42
|
"prop-types": "^15.7.2"
|
|
43
43
|
},
|