@ntbjs/react-components 1.1.0-beta.90 → 1.1.0-beta.91
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/{AssetGallery-fa59b3c7.js → AssetGallery-d38688e4.js} +1 -1
- package/{Instructions-4041b686.js → Instructions-34b22002.js} +1 -1
- package/{TextArea-14b4864b.js → TextArea-dba4fd6c.js} +79 -79
- package/inputs/TextArea/index.js +1 -1
- package/inputs/index.js +1 -1
- package/package.json +1 -1
- package/widgets/AssetGallery/index.js +2 -2
- package/widgets/Instructions/index.js +2 -2
- package/widgets/index.js +3 -3
|
@@ -14,7 +14,7 @@ require('./CompactStarRating-de1bcfe9.js');
|
|
|
14
14
|
require('./CompactTextInput-480f59cc.js');
|
|
15
15
|
require('./MultiSelect-01a257b8.js');
|
|
16
16
|
require('./Radio-c811ce4a.js');
|
|
17
|
-
require('./TextArea-
|
|
17
|
+
require('./TextArea-dba4fd6c.js');
|
|
18
18
|
require('./Switch-3ac11c97.js');
|
|
19
19
|
require('./Alert-3e4f8be1.js');
|
|
20
20
|
require('./Badge-9bcebe96.js');
|
|
@@ -5,7 +5,7 @@ var lodash = require('lodash');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var warningCircle = require('./warning-circle-24522402.js');
|
|
7
7
|
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-45b12179.js');
|
|
8
|
-
var TextArea = require('./TextArea-
|
|
8
|
+
var TextArea = require('./TextArea-dba4fd6c.js');
|
|
9
9
|
var styled = require('styled-components');
|
|
10
10
|
|
|
11
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
14
14
|
|
|
15
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40;
|
|
15
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42;
|
|
16
16
|
var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
17
17
|
var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
18
18
|
var activeLabel = styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
|
|
@@ -27,16 +27,18 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
27
27
|
return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
|
|
28
28
|
});
|
|
29
29
|
var Container = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral([""])));
|
|
30
|
-
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n
|
|
31
|
-
return props.
|
|
30
|
+
var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n\n ", "\n ", "\n\n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n ", "\n\n\n\n ", "\n \n\n ", "\n \n ", "\n\n ", "\n\n ", "\n \n\n ", "\n\n ", " \n ", "\n\n &&:hover:not(:focus) {\n ", ";\n }\n\n ", "\n\n ", " \n ", "\n\n ", ";\n\n ", ";\n\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n ", "\n ", "\n ", "\n\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n ", "\n ", "\n }\n"])), function (props) {
|
|
31
|
+
return props.expanded && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n height: ", "px;\n "])), props.defaultHeight);
|
|
32
|
+
}, function (props) {
|
|
33
|
+
return !props.expanded && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n height: ", "px;\n "])), props.maxHeight);
|
|
32
34
|
}, function (props) {
|
|
33
|
-
return props.
|
|
35
|
+
return props.theme.themeProp('color', 'white', 'black');
|
|
34
36
|
}, function (props) {
|
|
35
|
-
return props.
|
|
37
|
+
return props.disabled && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
36
38
|
}, function (props) {
|
|
37
|
-
return props.
|
|
39
|
+
return props.readOnly && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
|
|
38
40
|
}, function (props) {
|
|
39
|
-
return props.showMore && styled.css(
|
|
41
|
+
return props.showMore && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
|
|
40
42
|
}, function (props) {
|
|
41
43
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
42
44
|
}, function (props) {
|
|
@@ -46,19 +48,19 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
46
48
|
}, function (props) {
|
|
47
49
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
|
|
48
50
|
}, function (props) {
|
|
49
|
-
return props.noBorder && styled.css(
|
|
51
|
+
return props.noBorder && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
|
|
50
52
|
}, function (props) {
|
|
51
|
-
return props.state === 'error-border' && styled.css(
|
|
53
|
+
return props.state === 'error-border' && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
52
54
|
}, function (props) {
|
|
53
55
|
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
54
56
|
}, function (props) {
|
|
55
|
-
return props.state === 'warning' && styled.css(
|
|
56
|
-
return props.disabled && styled.css(
|
|
57
|
+
return props.state === 'warning' && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover:not(:focus) {\n ", "\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01 ', props.theme.getColor('signal-yellow-400')), function (props) {
|
|
58
|
+
return props.disabled && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n "])));
|
|
57
59
|
}, props.theme.themeProp('background', '#816600', '#F4E21E'), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
|
|
58
60
|
}, function (props) {
|
|
59
|
-
return props.state === 'error' && styled.css(
|
|
61
|
+
return props.state === 'error' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n background: ", " !important;\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n background: #f7d5d0 !important;\n }\n &&:read-only:hover {\n background: ", " !important;\n }\n "])), props.theme.getColor('red-200'), props.theme.getColor('red-200'));
|
|
60
62
|
}, function (props) {
|
|
61
|
-
return props.lightBackground && styled.css(
|
|
63
|
+
return props.lightBackground && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
|
|
62
64
|
}, function (props) {
|
|
63
65
|
return props.edit && !props.state === 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
|
|
64
66
|
}, function (props) {
|
|
@@ -66,15 +68,15 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
66
68
|
}, function (props) {
|
|
67
69
|
return props.noBorder && !props.readOnly && props.state != 'warning' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
|
|
68
70
|
}, InputIconContainer, function (props) {
|
|
69
|
-
return props.state === 'success' && styled.css(
|
|
71
|
+
return props.state === 'success' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
|
|
70
72
|
}, function (props) {
|
|
71
|
-
return props.state === 'warning' && styled.css(
|
|
73
|
+
return props.state === 'warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('orange-500'));
|
|
72
74
|
}, function (props) {
|
|
73
|
-
return props.state === 'error' && styled.css(
|
|
75
|
+
return props.state === 'error' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('red-500'));
|
|
74
76
|
}, function (props) {
|
|
75
|
-
return props.hasIcon && styled.css(
|
|
77
|
+
return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
|
|
76
78
|
}, function (props) {
|
|
77
|
-
return props.instructionsTextArea && styled.css(
|
|
79
|
+
return props.instructionsTextArea && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 15px;\n padding-right: 50px;\n "])));
|
|
78
80
|
}, function (props) {
|
|
79
81
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
|
|
80
82
|
}, function (props) {
|
|
@@ -84,46 +86,50 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
|
|
|
84
86
|
}, function (props) {
|
|
85
87
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
86
88
|
}, function (props) {
|
|
87
|
-
return props.state === 'warning' && styled.css(
|
|
89
|
+
return props.state === 'warning' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n "])), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
88
90
|
}, function (props) {
|
|
89
|
-
return props.state === 'error' && styled.css(
|
|
91
|
+
return props.state === 'error' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n "])), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
90
92
|
});
|
|
91
|
-
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
93
|
+
var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
|
|
92
94
|
return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
|
|
93
95
|
}, function (props) {
|
|
94
|
-
return !props.inputIsEmpty && styled.css(
|
|
96
|
+
return !props.inputIsEmpty && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
|
|
95
97
|
}, function (props) {
|
|
96
|
-
return props.hasPlaceholder && styled.css(
|
|
98
|
+
return props.hasPlaceholder && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.state === 'error' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
|
|
97
99
|
}, function (props) {
|
|
98
|
-
return props.hasIcon && styled.css(
|
|
100
|
+
return props.hasIcon && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
|
|
99
101
|
});
|
|
100
|
-
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
101
|
-
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
102
|
+
var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 2.625rem;\n display: flex;\n padding: 0 10px;\n\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n }\n"])));
|
|
103
|
+
var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n height: 2.625rem;\n display: flex;\n padding: 0 10px 0 30px;\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n margin-top: -3px;\n ", "\n }\n"])), function (props) {
|
|
102
104
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
|
|
103
105
|
});
|
|
104
|
-
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
105
|
-
return props.disabled && styled.css(
|
|
106
|
+
var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n }\n\n ", "\n"])), function (props) {
|
|
107
|
+
return props.disabled && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
106
108
|
}, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
|
|
107
109
|
return props.state === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
|
|
108
110
|
}, function (props) {
|
|
109
|
-
return props.disabled && styled.css(
|
|
111
|
+
return props.disabled && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
|
|
110
112
|
});
|
|
111
|
-
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
113
|
+
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n"])), function (props) {
|
|
112
114
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
113
115
|
}, function (props) {
|
|
114
|
-
return (props.state === 'error-border' || props.state === 'error') && styled.css(
|
|
116
|
+
return (props.state === 'error-border' || props.state === 'error') && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
115
117
|
});
|
|
116
|
-
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
118
|
+
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
|
|
117
119
|
return props.fadeIn ? 0 : 1;
|
|
118
120
|
}, function (props) {
|
|
119
121
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
120
122
|
}, function (props) {
|
|
121
123
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
122
124
|
});
|
|
123
|
-
var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
125
|
+
var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -20px;\n display: block;\n position: absolute;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n cursor: pointer;\n\n ", "\n\n transition: margin-top 550ms ease-in-out;\n\n ", "\n ", ";\n\n ", "\n"])), function (props) {
|
|
126
|
+
return !props.expanded && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
|
|
127
|
+
}, function (props) {
|
|
128
|
+
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
129
|
+
}, function (props) {
|
|
124
130
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
|
|
125
131
|
}, function (props) {
|
|
126
|
-
return props.state === 'error' && styled.css(
|
|
132
|
+
return props.state === 'error' && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
127
133
|
});
|
|
128
134
|
|
|
129
135
|
var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
|
|
@@ -137,9 +143,9 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
137
143
|
hidden = _ref.hidden,
|
|
138
144
|
readOnly = _ref.readOnly,
|
|
139
145
|
edit = _ref.edit,
|
|
140
|
-
isExpanded = _ref.isExpanded,
|
|
141
146
|
showMore = _ref.showMore,
|
|
142
147
|
showMoreText = _ref.showMoreText,
|
|
148
|
+
showLessText = _ref.showLessText,
|
|
143
149
|
autoComplete = _ref.autoComplete,
|
|
144
150
|
description = _ref.description,
|
|
145
151
|
state = _ref.state,
|
|
@@ -152,7 +158,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
152
158
|
lightBackground = _ref.lightBackground,
|
|
153
159
|
noBorder = _ref.noBorder,
|
|
154
160
|
instructionsTextArea = _ref.instructionsTextArea,
|
|
155
|
-
rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "
|
|
161
|
+
rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "showLessText", "autoComplete", "description", "state", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea"]);
|
|
156
162
|
|
|
157
163
|
var textInputRef = React.useRef(null);
|
|
158
164
|
|
|
@@ -163,64 +169,55 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
163
169
|
|
|
164
170
|
var _useState3 = React.useState(''),
|
|
165
171
|
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
166
|
-
|
|
167
|
-
|
|
172
|
+
maxContentRows = _useState4[0],
|
|
173
|
+
setMaxContentRows = _useState4[1];
|
|
168
174
|
|
|
169
|
-
var _useState5 = React.useState(
|
|
175
|
+
var _useState5 = React.useState(false),
|
|
170
176
|
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
171
|
-
|
|
172
|
-
|
|
177
|
+
expanded = _useState6[0],
|
|
178
|
+
setExpanded = _useState6[1];
|
|
173
179
|
|
|
174
|
-
var _useState7 = React.useState(
|
|
180
|
+
var _useState7 = React.useState(''),
|
|
175
181
|
_useState8 = defaultTheme._slicedToArray(_useState7, 2),
|
|
176
|
-
|
|
177
|
-
|
|
182
|
+
maxHeight = _useState8[0],
|
|
183
|
+
setMaxHeight = _useState8[1];
|
|
178
184
|
|
|
179
185
|
var _useState9 = React.useState(''),
|
|
180
186
|
_useState10 = defaultTheme._slicedToArray(_useState9, 2),
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
var _useState11 = React.useState(false),
|
|
185
|
-
_useState12 = defaultTheme._slicedToArray(_useState11, 2),
|
|
186
|
-
showReadMore = _useState12[0],
|
|
187
|
-
setShowReadMore = _useState12[1];
|
|
187
|
+
defaultHeight = _useState10[0],
|
|
188
|
+
setDefaultHeight = _useState10[1];
|
|
188
189
|
|
|
189
|
-
var
|
|
190
|
-
|
|
191
|
-
uniqueId =
|
|
190
|
+
var _useState11 = React.useState(nanoid.nanoid()),
|
|
191
|
+
_useState12 = defaultTheme._slicedToArray(_useState11, 1),
|
|
192
|
+
uniqueId = _useState12[0];
|
|
192
193
|
|
|
193
194
|
var handleTextAreaChange = function handleTextAreaChange() {
|
|
194
195
|
setExpanded(!expanded);
|
|
195
|
-
isExpanded(expanded);
|
|
196
|
-
|
|
197
|
-
if (expanded === true) {
|
|
198
|
-
setContentRows(maxContentRows);
|
|
199
|
-
setMaxHeight(maxHeight);
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
if (expanded === false) {
|
|
203
|
-
setContentRows(rows);
|
|
204
|
-
}
|
|
205
196
|
};
|
|
206
197
|
|
|
207
198
|
var calculateRows = function calculateRows() {
|
|
208
|
-
var textareaRefCurrent = textInputRef.current;
|
|
209
|
-
var textarea = textareaRefCurrent.scrollHeight;
|
|
210
|
-
var calculatedRows = Math.floor(textarea / 16);
|
|
211
|
-
setMaxContentRows(calculatedRows);
|
|
199
|
+
var textareaRefCurrent = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current;
|
|
212
200
|
|
|
213
|
-
if (
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
201
|
+
if (textareaRefCurrent !== null) {
|
|
202
|
+
var textAreaHeight = textareaRefCurrent.scrollHeight;
|
|
203
|
+
var lineHeight = 16;
|
|
204
|
+
var calculatedRows = Math.floor(textAreaHeight / lineHeight);
|
|
205
|
+
var defaultRowsHeight = rows * lineHeight;
|
|
206
|
+
setMaxContentRows(calculatedRows);
|
|
207
|
+
|
|
208
|
+
if (calculatedRows > rows) {
|
|
209
|
+
setExpanded(true);
|
|
210
|
+
setDefaultHeight(defaultRowsHeight);
|
|
211
|
+
setMaxHeight(textAreaHeight);
|
|
212
|
+
} else {
|
|
213
|
+
setMaxHeight();
|
|
214
|
+
}
|
|
218
215
|
}
|
|
219
216
|
};
|
|
220
217
|
|
|
221
218
|
React.useEffect(function () {
|
|
222
219
|
calculateRows();
|
|
223
|
-
}, [value]);
|
|
220
|
+
}, [value, defaultValue]);
|
|
224
221
|
if (hidden) return null;
|
|
225
222
|
return React__default['default'].createElement(TextInput, {
|
|
226
223
|
disabled: disabled,
|
|
@@ -230,8 +227,9 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
230
227
|
style: style
|
|
231
228
|
}, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(Container, null, React__default['default'].createElement(TextInputField, defaultTheme._extends({
|
|
232
229
|
ref: forwardedRef ? forwardedRef : textInputRef,
|
|
233
|
-
rows:
|
|
230
|
+
rows: rows,
|
|
234
231
|
expanded: expanded,
|
|
232
|
+
defaultHeight: defaultHeight,
|
|
235
233
|
maxHeight: maxHeight,
|
|
236
234
|
value: value,
|
|
237
235
|
defaultValue: defaultValue,
|
|
@@ -273,9 +271,10 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
|
|
|
273
271
|
inputIsEmpty: inputIsEmpty
|
|
274
272
|
}, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
|
|
275
273
|
state: state
|
|
276
|
-
}, description), maxContentRows > rows && showMore &&
|
|
277
|
-
onClick: handleTextAreaChange
|
|
278
|
-
|
|
274
|
+
}, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
|
|
275
|
+
onClick: handleTextAreaChange,
|
|
276
|
+
expanded: expanded
|
|
277
|
+
}, expanded ? showMoreText : showLessText));
|
|
279
278
|
});
|
|
280
279
|
TextArea.defaultProps = {
|
|
281
280
|
rows: 4,
|
|
@@ -285,6 +284,7 @@ TextArea.defaultProps = {
|
|
|
285
284
|
hidden: false,
|
|
286
285
|
showMore: false,
|
|
287
286
|
showMoreText: '',
|
|
287
|
+
showLessText: '',
|
|
288
288
|
state: '',
|
|
289
289
|
instructionsTextArea: false
|
|
290
290
|
};
|
|
@@ -300,6 +300,7 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
300
300
|
readOnly: defaultTheme.PropTypes.bool,
|
|
301
301
|
showMore: defaultTheme.PropTypes.bool,
|
|
302
302
|
showMoreText: defaultTheme.PropTypes.string,
|
|
303
|
+
showLessText: defaultTheme.PropTypes.string,
|
|
303
304
|
edit: defaultTheme.PropTypes.bool,
|
|
304
305
|
autoComplete: defaultTheme.PropTypes.string,
|
|
305
306
|
description: defaultTheme.PropTypes.string,
|
|
@@ -313,7 +314,6 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
313
314
|
onChange: defaultTheme.PropTypes.func,
|
|
314
315
|
onBlur: defaultTheme.PropTypes.func,
|
|
315
316
|
noBorder: defaultTheme.PropTypes.bool,
|
|
316
|
-
isExpanded: defaultTheme.PropTypes.func,
|
|
317
317
|
state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
|
|
318
318
|
instructionsTextArea: defaultTheme.PropTypes.bool
|
|
319
319
|
} : {};
|
package/inputs/TextArea/index.js
CHANGED
package/inputs/index.js
CHANGED
|
@@ -10,7 +10,7 @@ var CompactStarRating = require('../CompactStarRating-de1bcfe9.js');
|
|
|
10
10
|
var CompactTextInput = require('../CompactTextInput-480f59cc.js');
|
|
11
11
|
var MultiSelect = require('../MultiSelect-01a257b8.js');
|
|
12
12
|
var Radio = require('../Radio-c811ce4a.js');
|
|
13
|
-
var TextArea = require('../TextArea-
|
|
13
|
+
var TextArea = require('../TextArea-dba4fd6c.js');
|
|
14
14
|
var TextInput = require('../TextInput-8ea31a7b.js');
|
|
15
15
|
var Switch = require('../Switch-3ac11c97.js');
|
|
16
16
|
require('../defaultTheme-50f2b88f.js');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var AssetGallery = require('../../AssetGallery-
|
|
3
|
+
var AssetGallery = require('../../AssetGallery-d38688e4.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
@@ -35,7 +35,7 @@ require('../../Tabs-bf42275e.js');
|
|
|
35
35
|
require('../../Tooltip-1b7b0052.js');
|
|
36
36
|
require('../../MultiSelect-01a257b8.js');
|
|
37
37
|
require('../../Radio-c811ce4a.js');
|
|
38
|
-
require('../../TextArea-
|
|
38
|
+
require('../../TextArea-dba4fd6c.js');
|
|
39
39
|
require('../../Switch-3ac11c97.js');
|
|
40
40
|
require('../../warning-circle-24522402.js');
|
|
41
41
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var Instructions = require('../../Instructions-
|
|
3
|
+
var Instructions = require('../../Instructions-34b22002.js');
|
|
4
4
|
require('../../defaultTheme-50f2b88f.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
@@ -15,7 +15,7 @@ require('../../react-select-creatable.esm-7231b55e.js');
|
|
|
15
15
|
require('react-dom');
|
|
16
16
|
require('../../close-ebf2f3cf.js');
|
|
17
17
|
require('../../expand-more-94585605.js');
|
|
18
|
-
require('../../TextArea-
|
|
18
|
+
require('../../TextArea-dba4fd6c.js');
|
|
19
19
|
require('../../edit-note-c47d292e.js');
|
|
20
20
|
|
|
21
21
|
|
package/widgets/index.js
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var AssetGallery = require('../AssetGallery-
|
|
5
|
+
var AssetGallery = require('../AssetGallery-d38688e4.js');
|
|
6
6
|
var ContextMenu = require('../ContextMenu-d088833b.js');
|
|
7
7
|
var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
|
|
8
|
-
var Instructions = require('../Instructions-
|
|
8
|
+
var Instructions = require('../Instructions-34b22002.js');
|
|
9
9
|
require('../defaultTheme-50f2b88f.js');
|
|
10
10
|
require('styled-components');
|
|
11
11
|
require('react');
|
|
@@ -39,7 +39,7 @@ require('../Tabs-bf42275e.js');
|
|
|
39
39
|
require('../Tooltip-1b7b0052.js');
|
|
40
40
|
require('../MultiSelect-01a257b8.js');
|
|
41
41
|
require('../Radio-c811ce4a.js');
|
|
42
|
-
require('../TextArea-
|
|
42
|
+
require('../TextArea-dba4fd6c.js');
|
|
43
43
|
require('../Switch-3ac11c97.js');
|
|
44
44
|
require('../warning-circle-24522402.js');
|
|
45
45
|
|