@ntbjs/react-components 2.0.0-rc.26 → 2.0.0-rc.28
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/{ActionButton-03dc5f67.js → ActionButton-4db754c3.js} +17 -24
- package/build/{Alert-8a511bdc.js → Alert-e6847a22.js} +29 -36
- package/build/{AssetAction-d081e4b7.js → AssetGallery-f67393d4.js} +588 -622
- package/build/{Badge-aa4cd9c1.js → Badge-d93586a9.js} +35 -42
- package/build/{Button-2e26f5da.js → Button-179a2fe4.js} +83 -90
- package/build/{Checkbox-0b8faf49.js → Checkbox-4a5fd716.js} +45 -52
- package/build/{CompactAutocompleteSelect-797778cb.js → CompactAutocompleteSelect-52c49513.js} +116 -125
- package/build/{CompactStarRating-da21b53f.js → CompactStarRating-9af2f427.js} +76 -101
- package/build/{CompactTextInput-d56aec71.js → CompactTextInput-42ca5d42.js} +104 -129
- package/build/InputGroup-1294d190.js +23 -0
- package/build/{MultiLevelCheckboxSelect-d229cf98.js → MultiLevelCheckboxSelect-d8044c88.js} +139 -167
- package/build/{MultiSelect-d7920eb1.js → MultiSelect-9f497e62.js} +81 -90
- package/build/{Popover-c4be47ea.js → Popover-20050b91.js} +35 -44
- package/build/{Radio-150fb2c9.js → Radio-73ca3ae2.js} +28 -35
- package/build/SectionSeparator-f47760a2.js +31 -0
- package/build/{Switch-d2d6e9ec.js → Switch-ecf3122b.js} +35 -42
- package/build/Tab-04d435c3.js +32 -0
- package/build/{Tabs-b06c0e24.js → Tabs-74d1ea8a.js} +37 -44
- package/build/{TextArea-26d3c8a1.js → TextArea-1e5b9201.js} +105 -113
- package/build/{TextInput-3a567daa.js → TextInput-fab35842.js} +78 -86
- package/build/Tooltip-c1d1199e.js +65 -0
- package/build/{VerificationStatusIcon-9876b68f.js → VerificationStatusIcon-49cb1c1b.js} +19 -44
- package/build/{_rollupPluginBabelHelpers-4b342fad.js → _rollupPluginBabelHelpers-c245b26a.js} +1 -3
- package/build/arrow-forward-ad12c5f3.js +15 -0
- package/build/close-a5d37608.js +15 -0
- package/build/data/Alert/index.js +6 -12
- package/build/data/Badge/index.js +5 -11
- package/build/data/Popover/index.js +10 -16
- package/build/data/Tab/index.js +5 -11
- package/build/data/Tabs/index.js +7 -13
- package/build/data/Tooltip/index.js +7 -13
- package/build/data/index.js +16 -30
- package/build/{defaultTheme-d9a7342e.js → defaultTheme-1bcc2541.js} +3 -7
- package/build/edit-note-283a0e15.js +15 -0
- package/build/expand-more-c5523c46.js +15 -0
- package/build/inputs/ActionButton/index.js +6 -12
- package/build/inputs/Button/index.js +13 -19
- package/build/inputs/Checkbox/index.js +6 -12
- package/build/inputs/CompactAutocompleteSelect/index.js +23 -29
- package/build/inputs/CompactStarRating/index.js +17 -23
- package/build/inputs/CompactTextInput/index.js +19 -25
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js +26 -0
- package/build/inputs/MultiSelect/index.js +10 -16
- package/build/inputs/Radio/index.js +7 -13
- package/build/inputs/Switch/index.js +6 -12
- package/build/inputs/TextArea/index.js +20 -26
- package/build/inputs/TextInput/index.js +9 -15
- package/build/inputs/index.js +40 -60
- package/build/layout/InputGroup/index.js +5 -11
- package/build/layout/SectionSeparator/index.js +5 -11
- package/build/layout/index.js +6 -15
- package/build/{shift-away-subtle-158617af.js → shift-away-subtle-0dd94a03.js} +3 -5
- package/build/ssr/index.js +1 -12
- package/build/styles/utils/colors.scss +4 -4
- package/build/warning-circle-24f3efcd.js +15 -0
- package/build/widgets/AssetGallery/AssetGallery.js +45 -0
- package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js +127 -0
- package/build/widgets/ContextMenu/ContextMenu.js +26 -0
- package/build/{ContextMenuItem-3967010d.js → widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js} +23 -48
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js +37 -0
- package/build/{InfoCard-d0fdf377.js → widgets/InfoCard/InfoCard.js} +27 -34
- package/build/widgets/Instructions/Instructions.js +255 -0
- package/build/{ProgressBar-2d26c1fb.js → widgets/ProgressBar/ProgressBar.js} +39 -46
- package/build/widgets/index.js +50 -65
- package/package.json +3 -3
- package/styles/utils/colors.scss +4 -4
- package/build/AssetPreviewTopBar-623cfa18.js +0 -152
- package/build/ContextMenu-82f9d728.js +0 -33
- package/build/InputGroup-8d4a4644.js +0 -30
- package/build/Instructions-af191987.js +0 -274
- package/build/SectionSeparator-e06c7660.js +0 -38
- package/build/Tab-ccbca1f2.js +0 -39
- package/build/Tooltip-d5882b82.js +0 -73
- package/build/arrow-forward-d7c77ae3.js +0 -37
- package/build/close-1751121a.js +0 -37
- package/build/edit-note-cefe2215.js +0 -37
- package/build/expand-more-d74e2bd2.js +0 -37
- package/build/widgets/AssetGallery/index.js +0 -55
- package/build/widgets/AssetPreview/AssetPreviewTopBar/index.js +0 -12
- package/build/widgets/ContextMenu/ContextMenuItem/index.js +0 -11
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/index.js +0 -44
- package/build/widgets/ContextMenu/index.js +0 -11
- package/build/widgets/InfoCard/index.js +0 -12
- package/build/widgets/Instructions/index.js +0 -33
- package/build/widgets/ProgressBar/index.js +0 -12
|
@@ -1,56 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var styled = require('styled-components');
|
|
16
|
-
|
|
17
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
18
|
-
|
|
19
|
-
function _interopNamespace(e) {
|
|
20
|
-
if (e && e.__esModule) return e;
|
|
21
|
-
var n = Object.create(null);
|
|
22
|
-
if (e) {
|
|
23
|
-
Object.keys(e).forEach(function (k) {
|
|
24
|
-
if (k !== 'default') {
|
|
25
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
26
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
27
|
-
enumerable: true,
|
|
28
|
-
get: function () { return e[k]; }
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
n["default"] = e;
|
|
34
|
-
return Object.freeze(n);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
38
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
39
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
1
|
+
import { isFunction, isEmpty } from 'lodash';
|
|
2
|
+
import { nanoid } from 'nanoid';
|
|
3
|
+
import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import React__default, { useState, useMemo, useEffect, useCallback } from 'react';
|
|
6
|
+
import { S as SvgEditNote } from './edit-note-283a0e15.js';
|
|
7
|
+
import './Alert-e6847a22.js';
|
|
8
|
+
import './Badge-d93586a9.js';
|
|
9
|
+
import { P as Popover } from './Popover-20050b91.js';
|
|
10
|
+
import './Tab-04d435c3.js';
|
|
11
|
+
import './Tabs-74d1ea8a.js';
|
|
12
|
+
import { T as Tooltip } from './Tooltip-c1d1199e.js';
|
|
13
|
+
import './VerificationStatusIcon-49cb1c1b.js';
|
|
14
|
+
import styled, { keyframes, css } from 'styled-components';
|
|
40
15
|
|
|
41
16
|
var _path;
|
|
42
17
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
43
18
|
function SvgLink(props) {
|
|
44
|
-
return /*#__PURE__*/
|
|
19
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
45
20
|
xmlns: "http://www.w3.org/2000/svg",
|
|
46
21
|
viewBox: "0 0 20 10"
|
|
47
|
-
}, props), _path || (_path = /*#__PURE__*/
|
|
22
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
48
23
|
fill: "currentColor",
|
|
49
24
|
d: "M9 10H5c-1.38 0-2.56-.49-3.54-1.46S0 6.39 0 5s.49-2.56 1.46-3.54S3.62 0 5 0h4v2H5c-.83 0-1.54.29-2.13.88s-.88 1.29-.88 2.13.29 1.54.88 2.13 1.29.88 2.13.88h4v2zM6 6V4h8v2H6zm5 4V8h4c.83 0 1.54-.29 2.13-.88s.88-1.29.88-2.13-.29-1.54-.88-2.13-1.29-.88-2.13-.88h-4V0h4c1.38 0 2.56.49 3.54 1.46S20 3.61 20 5s-.49 2.56-1.46 3.54S16.39 10 15 10h-4z"
|
|
50
25
|
})));
|
|
51
26
|
}
|
|
52
27
|
|
|
53
|
-
const fadeIn =
|
|
28
|
+
const fadeIn = keyframes`
|
|
54
29
|
from {
|
|
55
30
|
background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};
|
|
56
31
|
}
|
|
@@ -58,7 +33,7 @@ const fadeIn = styled.keyframes`
|
|
|
58
33
|
background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};
|
|
59
34
|
}
|
|
60
35
|
`;
|
|
61
|
-
const fadeOut =
|
|
36
|
+
const fadeOut = keyframes`
|
|
62
37
|
from {
|
|
63
38
|
background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};
|
|
64
39
|
}
|
|
@@ -66,7 +41,7 @@ const fadeOut = styled.keyframes`
|
|
|
66
41
|
background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};
|
|
67
42
|
}
|
|
68
43
|
`;
|
|
69
|
-
const fadeInCheck =
|
|
44
|
+
const fadeInCheck = keyframes`
|
|
70
45
|
from {
|
|
71
46
|
opacity: 0
|
|
72
47
|
}
|
|
@@ -74,7 +49,7 @@ const fadeInCheck = styled.keyframes`
|
|
|
74
49
|
opacity: 1
|
|
75
50
|
}
|
|
76
51
|
`;
|
|
77
|
-
const fadeOutCheck =
|
|
52
|
+
const fadeOutCheck = keyframes`
|
|
78
53
|
from {
|
|
79
54
|
opacity: 1
|
|
80
55
|
}
|
|
@@ -82,31 +57,31 @@ const fadeOutCheck = styled.keyframes`
|
|
|
82
57
|
opacity: 0
|
|
83
58
|
}
|
|
84
59
|
`;
|
|
85
|
-
const linkColor =
|
|
60
|
+
const linkColor = css`
|
|
86
61
|
${props => props.theme.themeProp('color', '#ACCDC3', props.theme.getColor('emerald-500'))}
|
|
87
|
-
${props => !props.disabled &&
|
|
62
|
+
${props => !props.disabled && css`
|
|
88
63
|
&:hover {
|
|
89
64
|
text-decoration: underline;
|
|
90
65
|
}
|
|
91
66
|
`}
|
|
92
67
|
`;
|
|
93
|
-
const commonAnchorTagStyle =
|
|
68
|
+
const commonAnchorTagStyle = css`
|
|
94
69
|
a,
|
|
95
70
|
&& {
|
|
96
71
|
font-size: 0.875rem;
|
|
97
72
|
text-decoration: none;
|
|
98
73
|
}
|
|
99
74
|
`;
|
|
100
|
-
const readOnlyBackground =
|
|
75
|
+
const readOnlyBackground = css`
|
|
101
76
|
${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
|
|
102
77
|
`;
|
|
103
|
-
const CompactTextInput$1 =
|
|
78
|
+
const CompactTextInput$1 = styled.div.attrs(applyDefaultTheme)`
|
|
104
79
|
display: flex;
|
|
105
80
|
align-items: center;
|
|
106
81
|
height: 24px;
|
|
107
82
|
font-family: ${props => props.theme.primaryFontFamily};
|
|
108
83
|
`;
|
|
109
|
-
const Label =
|
|
84
|
+
const Label = styled.label.attrs(applyDefaultTheme)`
|
|
110
85
|
${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
|
|
111
86
|
flex-basis: 33.33%;
|
|
112
87
|
font-size: 0.875rem;
|
|
@@ -115,17 +90,17 @@ const Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTh
|
|
|
115
90
|
height: 19px;
|
|
116
91
|
display: flex;
|
|
117
92
|
align-items: center;
|
|
118
|
-
${props => props.disabled &&
|
|
93
|
+
${props => props.disabled && css`
|
|
119
94
|
opacity: 0.5;
|
|
120
95
|
cursor: not-allowed;
|
|
121
96
|
`}
|
|
122
97
|
`;
|
|
123
|
-
const InputContainer =
|
|
98
|
+
const InputContainer = styled.div.attrs(applyDefaultTheme)`
|
|
124
99
|
position: relative;
|
|
125
100
|
height: 19px;
|
|
126
101
|
flex-basis: ${props => props.$hasLabel ? '66.66%' : '100%'};
|
|
127
102
|
`;
|
|
128
|
-
const SuccessContainer =
|
|
103
|
+
const SuccessContainer = styled.div.attrs(applyDefaultTheme)`
|
|
129
104
|
opacity: 1;
|
|
130
105
|
pointer-events: none;
|
|
131
106
|
display: flex;
|
|
@@ -138,7 +113,7 @@ const SuccessContainer = styled__default["default"].div.attrs(defaultTheme.apply
|
|
|
138
113
|
width: 13px;
|
|
139
114
|
}
|
|
140
115
|
`;
|
|
141
|
-
const InputSuccessContainer =
|
|
116
|
+
const InputSuccessContainer = styled.div.attrs(applyDefaultTheme)`
|
|
142
117
|
opacity: 1;
|
|
143
118
|
pointer-events: none;
|
|
144
119
|
display: flex;
|
|
@@ -154,17 +129,17 @@ const InputSuccessContainer = styled__default["default"].div.attrs(defaultTheme.
|
|
|
154
129
|
width: 13px;
|
|
155
130
|
}
|
|
156
131
|
`;
|
|
157
|
-
const InputIconContainer =
|
|
132
|
+
const InputIconContainer = styled.div.attrs(applyDefaultTheme)`
|
|
158
133
|
opacity: 0;
|
|
159
134
|
pointer-events: none;
|
|
160
135
|
border-top-right-radius: 3px;
|
|
161
136
|
border-bottom-right-radius: 3px;
|
|
162
137
|
padding: 5px 10px 0 0;
|
|
163
|
-
${props => props.theme.themeProp('background',
|
|
138
|
+
${props => props.theme.themeProp('background', css`
|
|
164
139
|
linear-gradient(-90deg,
|
|
165
140
|
${props => props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700')} 55%,
|
|
166
141
|
transparent)
|
|
167
|
-
`,
|
|
142
|
+
`, css`
|
|
168
143
|
linear-gradient(-90deg,
|
|
169
144
|
${props => props.type === 'error' ? '#f7d5d0' : props.type === 'warning' ? '#fffebf' : props.theme.getColor('gray-100')} 55%,
|
|
170
145
|
transparent)
|
|
@@ -186,7 +161,7 @@ const InputIconContainer = styled__default["default"].div.attrs(defaultTheme.app
|
|
|
186
161
|
width: 12px;
|
|
187
162
|
}
|
|
188
163
|
`;
|
|
189
|
-
const Input =
|
|
164
|
+
const Input = styled.input.attrs(applyDefaultTheme)`
|
|
190
165
|
box-sizing: border-box;
|
|
191
166
|
height: 22px;
|
|
192
167
|
width: 100%;
|
|
@@ -200,11 +175,11 @@ const Input = styled__default["default"].input.attrs(defaultTheme.applyDefaultTh
|
|
|
200
175
|
|
|
201
176
|
${props => {
|
|
202
177
|
if (props.type === 'error') {
|
|
203
|
-
return
|
|
178
|
+
return css`
|
|
204
179
|
${props.theme.themeProp('background', '#7f1b1b', '#FEE2E2')} !important;
|
|
205
180
|
`;
|
|
206
181
|
} else if (props.type === 'warning') {
|
|
207
|
-
return
|
|
182
|
+
return css`
|
|
208
183
|
${props.theme.themeProp('background', '#634E01', '#FFFDE8')} !important;
|
|
209
184
|
`;
|
|
210
185
|
} else {
|
|
@@ -212,15 +187,15 @@ ${props => {
|
|
|
212
187
|
}
|
|
213
188
|
}}
|
|
214
189
|
|
|
215
|
-
${props => props.readOnly &&
|
|
190
|
+
${props => props.readOnly && css`
|
|
216
191
|
cursor: default;
|
|
217
192
|
`}
|
|
218
193
|
|
|
219
|
-
${props => props.disabled &&
|
|
194
|
+
${props => props.disabled && css`
|
|
220
195
|
opacity: 0.5;
|
|
221
196
|
`}
|
|
222
197
|
|
|
223
|
-
${props => props.type === 'success' &&
|
|
198
|
+
${props => props.type === 'success' && css`
|
|
224
199
|
animation: ${props => props.type === 'success' ? fadeIn : fadeOut} 0.5s ease-in-out;
|
|
225
200
|
`}
|
|
226
201
|
|
|
@@ -231,7 +206,7 @@ ${props => {
|
|
|
231
206
|
|
|
232
207
|
|
|
233
208
|
|
|
234
|
-
${props => props.hasLink &&
|
|
209
|
+
${props => props.hasLink && css`
|
|
235
210
|
&&:not(:focus),
|
|
236
211
|
&&:read-only {
|
|
237
212
|
${linkColor}
|
|
@@ -262,7 +237,7 @@ ${props => {
|
|
|
262
237
|
|
|
263
238
|
${props => props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')};
|
|
264
239
|
|
|
265
|
-
${props => props.hasLink &&
|
|
240
|
+
${props => props.hasLink && css`
|
|
266
241
|
&&:not(:focus),
|
|
267
242
|
&&:read-only {
|
|
268
243
|
cursor: default;
|
|
@@ -275,7 +250,7 @@ ${props => {
|
|
|
275
250
|
|
|
276
251
|
${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))}
|
|
277
252
|
|
|
278
|
-
${props => props.readOnly &&
|
|
253
|
+
${props => props.readOnly && css`
|
|
279
254
|
${readOnlyBackground}
|
|
280
255
|
`};
|
|
281
256
|
|
|
@@ -286,7 +261,7 @@ ${props => {
|
|
|
286
261
|
${props => props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0')};
|
|
287
262
|
|
|
288
263
|
|
|
289
|
-
${props => props.hasLink &&
|
|
264
|
+
${props => props.hasLink && css`
|
|
290
265
|
cursor: pointer;
|
|
291
266
|
&&:read-only {
|
|
292
267
|
background: none !important;
|
|
@@ -299,11 +274,11 @@ ${props => {
|
|
|
299
274
|
}
|
|
300
275
|
}
|
|
301
276
|
|
|
302
|
-
${props => props.disabled &&
|
|
277
|
+
${props => props.disabled && css`
|
|
303
278
|
background: none !important;
|
|
304
279
|
cursor: not-allowed;
|
|
305
280
|
`}
|
|
306
|
-
${props => props.disabled && props.hasLink &&
|
|
281
|
+
${props => props.disabled && props.hasLink && css`
|
|
307
282
|
background: none !important;
|
|
308
283
|
cursor: not-allowed !important;
|
|
309
284
|
`}
|
|
@@ -313,24 +288,24 @@ ${props => {
|
|
|
313
288
|
&&:focus {
|
|
314
289
|
${props => !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))};
|
|
315
290
|
|
|
316
|
-
${props => props.readOnly &&
|
|
291
|
+
${props => props.readOnly && css`
|
|
317
292
|
${readOnlyBackground}
|
|
318
293
|
`};
|
|
319
294
|
|
|
320
295
|
${props => props.type === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))};
|
|
321
296
|
|
|
322
|
-
${props => !props.readOnly &&
|
|
297
|
+
${props => !props.readOnly && css`
|
|
323
298
|
border-color: ${props => props.theme.getColor('gray-600')};
|
|
324
299
|
`};
|
|
325
300
|
outline: none;
|
|
326
301
|
|
|
327
|
-
${props => props.type === 'warning' &&
|
|
302
|
+
${props => props.type === 'warning' && css`
|
|
328
303
|
${props => props.theme.themeProp('border-color', '#F4E21E', '#F4E21E')}
|
|
329
304
|
${props.theme.themeProp('background', 'white', 'white')}
|
|
330
305
|
${props.theme.themeProp('color', 'black', 'black')}
|
|
331
306
|
`};
|
|
332
307
|
|
|
333
|
-
${props => props.type === 'error' &&
|
|
308
|
+
${props => props.type === 'error' && css`
|
|
334
309
|
${props => props.theme.themeProp('border-color', '#D83018', '#D83018')}
|
|
335
310
|
${props.theme.themeProp('background', 'white', 'white')}
|
|
336
311
|
${props.theme.themeProp('color', 'black', 'black')}
|
|
@@ -342,7 +317,7 @@ ${props => {
|
|
|
342
317
|
opacity: 0.6;
|
|
343
318
|
}
|
|
344
319
|
|
|
345
|
-
${props => props.bold &&
|
|
320
|
+
${props => props.bold && css`
|
|
346
321
|
font-size: 1rem;
|
|
347
322
|
font-weight: 500;
|
|
348
323
|
line-height: 1.0625;
|
|
@@ -350,7 +325,7 @@ ${props => {
|
|
|
350
325
|
padding-bottom: 2px;
|
|
351
326
|
`}
|
|
352
327
|
`;
|
|
353
|
-
const LinkPopoverContainer =
|
|
328
|
+
const LinkPopoverContainer = styled.div.attrs(applyDefaultTheme)`
|
|
354
329
|
${commonAnchorTagStyle}
|
|
355
330
|
|
|
356
331
|
padding: 5px 8px;
|
|
@@ -360,18 +335,18 @@ const LinkPopoverContainer = styled__default["default"].div.attrs(defaultTheme.a
|
|
|
360
335
|
margin-right: 8px;
|
|
361
336
|
}
|
|
362
337
|
`;
|
|
363
|
-
const StyledLink =
|
|
338
|
+
const StyledLink = styled.a.attrs(applyDefaultTheme)`
|
|
364
339
|
${commonAnchorTagStyle}
|
|
365
340
|
${linkColor}
|
|
366
341
|
`;
|
|
367
|
-
const ReadOnlyLinkContainer =
|
|
342
|
+
const ReadOnlyLinkContainer = styled.div.attrs(applyDefaultTheme)`
|
|
368
343
|
${readOnlyBackground};
|
|
369
344
|
border: 1px solid transparent;
|
|
370
345
|
border-radius: 3px;
|
|
371
346
|
padding: 0 10px 1px;
|
|
372
347
|
`;
|
|
373
348
|
|
|
374
|
-
const CompactTextInput = React__default
|
|
349
|
+
const CompactTextInput = React__default.forwardRef(function CompactTextInput({
|
|
375
350
|
label,
|
|
376
351
|
inputType,
|
|
377
352
|
name,
|
|
@@ -397,40 +372,40 @@ const CompactTextInput = React__default["default"].forwardRef(function CompactTe
|
|
|
397
372
|
successIcon,
|
|
398
373
|
...props
|
|
399
374
|
}, forwardedRef) {
|
|
400
|
-
const [uniqueId] =
|
|
401
|
-
const [currentValue, setCurrentValue] =
|
|
402
|
-
const [autoFocus, setAutoFocus] =
|
|
403
|
-
const memoizedDescriptionToolTip =
|
|
375
|
+
const [uniqueId] = useState(nanoid());
|
|
376
|
+
const [currentValue, setCurrentValue] = useState();
|
|
377
|
+
const [autoFocus, setAutoFocus] = useState(false);
|
|
378
|
+
const memoizedDescriptionToolTip = useMemo(() => {
|
|
404
379
|
return descriptionToolTip;
|
|
405
380
|
}, [descriptionToolTip]);
|
|
406
|
-
|
|
381
|
+
useEffect(() => {
|
|
407
382
|
setCurrentValue(value || defaultValue);
|
|
408
383
|
setAutoFocus(false);
|
|
409
384
|
}, [value, defaultValue]);
|
|
410
|
-
const onChange =
|
|
385
|
+
const onChange = useCallback(event => {
|
|
411
386
|
setCurrentValue(event.target.value);
|
|
412
387
|
if (!autoFocus) {
|
|
413
388
|
setAutoFocus(true);
|
|
414
389
|
}
|
|
415
|
-
if (
|
|
390
|
+
if (isFunction(onChangeProp)) {
|
|
416
391
|
onChangeProp(event);
|
|
417
392
|
}
|
|
418
393
|
}, [onChangeProp]);
|
|
419
|
-
const onFocus =
|
|
394
|
+
const onFocus = useCallback(event => {
|
|
420
395
|
if (autoSelect) {
|
|
421
396
|
event.target.select();
|
|
422
397
|
}
|
|
423
|
-
if (
|
|
398
|
+
if (isFunction(onFocusProp)) {
|
|
424
399
|
onFocusProp(event);
|
|
425
400
|
}
|
|
426
401
|
}, [autoSelect, readOnly, onFocusProp]);
|
|
427
|
-
const onBlur =
|
|
428
|
-
if (
|
|
402
|
+
const onBlur = useCallback(event => {
|
|
403
|
+
if (isFunction(onBlurProp)) {
|
|
429
404
|
onBlurProp(event);
|
|
430
405
|
}
|
|
431
406
|
}, [onBlurProp]);
|
|
432
407
|
const input = () => {
|
|
433
|
-
return React__default
|
|
408
|
+
return React__default.createElement(Input, {
|
|
434
409
|
ref: forwardedRef,
|
|
435
410
|
id: uniqueId,
|
|
436
411
|
key: uniqueId,
|
|
@@ -445,27 +420,27 @@ const CompactTextInput = React__default["default"].forwardRef(function CompactTe
|
|
|
445
420
|
value: value,
|
|
446
421
|
type: type,
|
|
447
422
|
bold: bold,
|
|
448
|
-
hasLink: !
|
|
423
|
+
hasLink: !isEmpty(link),
|
|
449
424
|
onFocus: onFocus,
|
|
450
425
|
onChange: onChange,
|
|
451
426
|
onBlur: onBlur
|
|
452
427
|
});
|
|
453
428
|
};
|
|
454
429
|
if (hidden) return null;
|
|
455
|
-
return React__default
|
|
430
|
+
return React__default.createElement(CompactTextInput$1, props, label && React__default.createElement(Label, {
|
|
456
431
|
htmlFor: uniqueId,
|
|
457
432
|
disabled: disabled
|
|
458
|
-
}, label, React__default
|
|
459
|
-
$hasLabel: !
|
|
460
|
-
}, !memoizedDescriptionToolTip && !link && React__default
|
|
433
|
+
}, label, React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default.createElement(InputContainer, {
|
|
434
|
+
$hasLabel: !isEmpty(label)
|
|
435
|
+
}, !memoizedDescriptionToolTip && !link && React__default.createElement("div", null, input()), memoizedDescriptionToolTip && !link && React__default.createElement("div", null, React__default.createElement(Tooltip, {
|
|
461
436
|
content: memoizedDescriptionToolTip,
|
|
462
437
|
key: "tooltip1",
|
|
463
438
|
placement: "bottom-end",
|
|
464
439
|
trigger: 'mouseenter',
|
|
465
440
|
zIndex: 999999
|
|
466
|
-
}, input())), link && !readOnly && React__default
|
|
441
|
+
}, input())), link && !readOnly && React__default.createElement("div", null, React__default.createElement(Popover, {
|
|
467
442
|
arrow: false,
|
|
468
|
-
content: React__default
|
|
443
|
+
content: React__default.createElement(LinkPopoverContainer, null, activeLinkHandler ? React__default.createElement(StyledLink, {
|
|
469
444
|
href: link,
|
|
470
445
|
target: linkTarget,
|
|
471
446
|
onClick: e => {
|
|
@@ -475,53 +450,53 @@ const CompactTextInput = React__default["default"].forwardRef(function CompactTe
|
|
|
475
450
|
}
|
|
476
451
|
},
|
|
477
452
|
rel: "noreferrer"
|
|
478
|
-
}, React__default
|
|
453
|
+
}, React__default.createElement(SvgLink, null), currentValue) : React__default.createElement(StyledLink, {
|
|
479
454
|
href: link,
|
|
480
455
|
target: linkTarget,
|
|
481
456
|
rel: "noreferrer"
|
|
482
|
-
}, React__default
|
|
457
|
+
}, React__default.createElement(SvgLink, null), currentValue)),
|
|
483
458
|
key: "tooltip2",
|
|
484
459
|
placement: "bottom-start",
|
|
485
460
|
trigger: "focusin",
|
|
486
461
|
zIndex: 999999,
|
|
487
462
|
interactive: true
|
|
488
|
-
}, input())), link && readOnly && React__default
|
|
463
|
+
}, input())), link && readOnly && React__default.createElement(ReadOnlyLinkContainer, null, React__default.createElement(StyledLink, {
|
|
489
464
|
href: link,
|
|
490
465
|
rel: "noreferrer",
|
|
491
466
|
style: {
|
|
492
467
|
display: 'inline-block'
|
|
493
468
|
},
|
|
494
469
|
target: linkTarget
|
|
495
|
-
}, currentValue)), !readOnly && !disabled && React__default
|
|
470
|
+
}, currentValue)), !readOnly && !disabled && React__default.createElement(React__default.Fragment, null, React__default.createElement(InputIconContainer, {
|
|
496
471
|
type: type
|
|
497
|
-
}, React__default
|
|
472
|
+
}, React__default.createElement(SvgEditNote, null)), isEmpty(label) && React__default.createElement(InputSuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon))));
|
|
498
473
|
});
|
|
499
474
|
CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
500
|
-
label:
|
|
501
|
-
success:
|
|
502
|
-
inputType:
|
|
503
|
-
name:
|
|
504
|
-
defaultValue:
|
|
505
|
-
value:
|
|
506
|
-
placeholder:
|
|
507
|
-
link:
|
|
508
|
-
linkTarget:
|
|
509
|
-
linkHandler:
|
|
510
|
-
activeLinkHandler:
|
|
511
|
-
autoSelect:
|
|
512
|
-
readOnly:
|
|
513
|
-
disabled:
|
|
514
|
-
edit:
|
|
515
|
-
warning:
|
|
516
|
-
bold:
|
|
517
|
-
hidden:
|
|
518
|
-
onChange:
|
|
519
|
-
onFocus:
|
|
520
|
-
onBlur:
|
|
521
|
-
type:
|
|
522
|
-
descriptionToolTip:
|
|
523
|
-
loadingIcon:
|
|
524
|
-
successIcon:
|
|
475
|
+
label: PropTypes.string,
|
|
476
|
+
success: PropTypes.bool,
|
|
477
|
+
inputType: PropTypes.string,
|
|
478
|
+
name: PropTypes.string,
|
|
479
|
+
defaultValue: PropTypes.string,
|
|
480
|
+
value: PropTypes.string,
|
|
481
|
+
placeholder: PropTypes.string,
|
|
482
|
+
link: PropTypes.string,
|
|
483
|
+
linkTarget: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
|
|
484
|
+
linkHandler: PropTypes.func,
|
|
485
|
+
activeLinkHandler: PropTypes.bool,
|
|
486
|
+
autoSelect: PropTypes.bool,
|
|
487
|
+
readOnly: PropTypes.bool,
|
|
488
|
+
disabled: PropTypes.bool,
|
|
489
|
+
edit: PropTypes.bool,
|
|
490
|
+
warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
|
491
|
+
bold: PropTypes.bool,
|
|
492
|
+
hidden: PropTypes.bool,
|
|
493
|
+
onChange: PropTypes.func,
|
|
494
|
+
onFocus: PropTypes.func,
|
|
495
|
+
onBlur: PropTypes.func,
|
|
496
|
+
type: PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),
|
|
497
|
+
descriptionToolTip: PropTypes.string,
|
|
498
|
+
loadingIcon: PropTypes.element,
|
|
499
|
+
successIcon: PropTypes.element
|
|
525
500
|
} : {};
|
|
526
501
|
CompactTextInput.defaultProps = {
|
|
527
502
|
inputType: 'text',
|
|
@@ -538,4 +513,4 @@ CompactTextInput.defaultProps = {
|
|
|
538
513
|
onChange: () => {}
|
|
539
514
|
};
|
|
540
515
|
|
|
541
|
-
|
|
516
|
+
export { CompactTextInput as C };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
|
+
|
|
6
|
+
const InputGroup$1 = styled.div.attrs(applyDefaultTheme)`
|
|
7
|
+
margin: 8px 0;
|
|
8
|
+
`;
|
|
9
|
+
|
|
10
|
+
const InputGroup = React__default.forwardRef(function InputGroup({
|
|
11
|
+
children,
|
|
12
|
+
...props
|
|
13
|
+
}, forwardedRef) {
|
|
14
|
+
return React__default.createElement(InputGroup$1, _extends({
|
|
15
|
+
ref: forwardedRef
|
|
16
|
+
}, props), children);
|
|
17
|
+
});
|
|
18
|
+
InputGroup.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
19
|
+
children: PropTypes.node
|
|
20
|
+
} : {};
|
|
21
|
+
InputGroup.defaultProps = {};
|
|
22
|
+
|
|
23
|
+
export { InputGroup as I };
|