@ntbjs/react-components 1.1.0-beta.12 → 1.1.0-beta.14
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/{ActionButton-055a0015.js → ActionButton-90485300.js} +1 -1
- package/Alert-fcc0bb50.js +62 -0
- package/{AssetGallery-90248e89.js → AssetGallery-7a2417d6.js} +23 -36
- package/{AssetPreviewTopBar-285559bb.js → AssetPreviewTopBar-020a6f96.js} +1 -1
- package/{AutocompleteSelect-2face013.js → AutocompleteSelect-e82bd937.js} +1 -1
- package/{Badge-41d775cd.js → Badge-34ad2850.js} +1 -1
- package/{Button-0fd88f25.js → Button-e6a6139c.js} +3 -3
- package/{Checkbox-d35b1467.js → Checkbox-50f1f3c7.js} +1 -1
- package/{CompactStarRating-908fb2f6.js → CompactStarRating-f7a58649.js} +1 -1
- package/{CompactTextInput-c4430b82.js → CompactTextInput-cd701b06.js} +7 -6
- package/{ContextMenu-743bc688.js → ContextMenu-a68d4f28.js} +1 -1
- package/{InputGroup-0edfc701.js → InputGroup-66dd343c.js} +1 -1
- package/Instructions-28bab5a0.js +202 -0
- package/{MultiSelect-0bd497c8.js → MultiSelect-3eca3c3e.js} +1 -1
- package/{Popover-8a8db474.js → Popover-63d38274.js} +1 -1
- package/{Radio-4475fda3.js → Radio-0b46b2a8.js} +1 -1
- package/{SectionSeparator-183ba7cd.js → SectionSeparator-12aff748.js} +1 -1
- package/{Switch-90225b6b.js → Switch-aa384260.js} +1 -1
- package/{Tab-562a47c6.js → Tab-51124003.js} +1 -1
- package/{Tabs-604c890b.js → Tabs-452079b5.js} +2 -2
- package/{TextArea-9b32b467.js → TextArea-efe4fa88.js} +1 -1
- package/{TextInput-a6a3def7.js → TextInput-e4c6d536.js} +1 -1
- package/Tooltip-7c57004f.js +59 -0
- package/data/Alert/index.js +10 -0
- package/data/Badge/index.js +2 -2
- package/data/Popover/index.js +2 -2
- package/data/Tab/index.js +2 -2
- package/data/Tabs/index.js +3 -3
- package/data/index.js +11 -10
- package/inputs/ActionButton/index.js +2 -2
- package/inputs/AutocompleteSelect/index.js +2 -2
- package/inputs/Button/index.js +4 -4
- package/inputs/Checkbox/index.js +2 -2
- package/inputs/CompactStarRating/index.js +2 -2
- package/inputs/CompactTextInput/index.js +9 -8
- package/inputs/MultiSelect/index.js +2 -2
- package/inputs/Radio/index.js +2 -2
- package/inputs/Switch/index.js +2 -2
- package/inputs/TextArea/index.js +2 -2
- package/inputs/TextInput/index.js +2 -2
- package/inputs/index.js +19 -18
- package/layout/InputGroup/index.js +2 -2
- package/layout/SectionSeparator/index.js +2 -2
- package/layout/index.js +3 -3
- package/package.json +1 -1
- package/warning-circle-24522402.js +41 -0
- package/widgets/AssetGallery/index.js +21 -19
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +2 -2
- package/widgets/ContextMenu/ContextMenuItem/index.js +1 -1
- package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +1 -1
- package/widgets/ContextMenu/index.js +2 -2
- package/widgets/Instructions/index.js +22 -0
- package/widgets/index.js +31 -217
- package/Tooltip-1bb4c3eb.js +0 -107
- package/{defaultTheme-1772c7ec.js → defaultTheme-870f7df1.js} +194 -194
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var styled = require('styled-components');
|
|
6
|
+
|
|
7
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
+
|
|
9
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
|
+
|
|
12
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
13
|
+
var Alert$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: 17px 30px;\n svg {\n width: 12px;\n padding-right: 5px;\n }\n\n ", "\n\n ", "\n\n ", ";\n\n ", ";\n"])), function (props) {
|
|
14
|
+
return props.warning && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
|
|
15
|
+
}, function (props) {
|
|
16
|
+
return props.error && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200')));
|
|
17
|
+
}, function (props) {
|
|
18
|
+
return props.align === 'left' && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n text-align: left;\n "])));
|
|
19
|
+
}, function (props) {
|
|
20
|
+
return props.align === 'center' && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n text-align: center;\n "])));
|
|
21
|
+
});
|
|
22
|
+
var AlertRender = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n"])));
|
|
23
|
+
|
|
24
|
+
var Alert = React__default['default'].forwardRef(function Alert(_ref, forwardedRef) {
|
|
25
|
+
var warning = _ref.warning,
|
|
26
|
+
error = _ref.error,
|
|
27
|
+
alertMessage = _ref.alertMessage,
|
|
28
|
+
align = _ref.align,
|
|
29
|
+
icon = _ref.icon,
|
|
30
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["warning", "error", "alertMessage", "align", "icon"]);
|
|
31
|
+
|
|
32
|
+
var boxRender = function boxRender(warning, error) {
|
|
33
|
+
if (warning) {
|
|
34
|
+
return React__default['default'].createElement(AlertRender, null, icon, " ", alertMessage);
|
|
35
|
+
} else if (error) {
|
|
36
|
+
return React__default['default'].createElement(AlertRender, null, icon, " ", alertMessage);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
return React__default['default'].createElement(Alert$1, defaultTheme._extends({
|
|
41
|
+
ref: forwardedRef,
|
|
42
|
+
alertMessage: alertMessage,
|
|
43
|
+
warning: warning,
|
|
44
|
+
error: error,
|
|
45
|
+
align: align
|
|
46
|
+
}, props), boxRender(warning, error));
|
|
47
|
+
});
|
|
48
|
+
Alert.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
49
|
+
warning: defaultTheme.PropTypes.bool,
|
|
50
|
+
error: defaultTheme.PropTypes.bool,
|
|
51
|
+
icon: defaultTheme.PropTypes.element,
|
|
52
|
+
align: defaultTheme.PropTypes.oneOf(['left', 'center']),
|
|
53
|
+
alertMessage: defaultTheme.PropTypes.string
|
|
54
|
+
} : {};
|
|
55
|
+
Alert.defaultProps = {
|
|
56
|
+
warning: false,
|
|
57
|
+
error: false,
|
|
58
|
+
align: 'left',
|
|
59
|
+
alertMessage: 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.'
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
exports.Alert = Alert;
|
|
@@ -1,28 +1,30 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var lodash = require('lodash');
|
|
6
|
-
var TextInput = require('./TextInput-
|
|
6
|
+
var TextInput = require('./TextInput-e4c6d536.js');
|
|
7
7
|
var ResizeObserver = require('resize-observer-polyfill');
|
|
8
8
|
var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
|
|
9
|
-
var ActionButton = require('./ActionButton-
|
|
10
|
-
require('./AutocompleteSelect-
|
|
11
|
-
require('./Button-
|
|
12
|
-
require('./Checkbox-
|
|
13
|
-
require('./CompactStarRating-
|
|
14
|
-
require('./CompactTextInput-
|
|
15
|
-
require('./MultiSelect-
|
|
16
|
-
require('./Radio-
|
|
17
|
-
require('./TextArea-
|
|
18
|
-
require('./Switch-
|
|
19
|
-
|
|
20
|
-
require('./Badge-
|
|
21
|
-
require('./Popover-
|
|
22
|
-
require('./Tab-
|
|
23
|
-
require('./Tabs-
|
|
9
|
+
var ActionButton = require('./ActionButton-90485300.js');
|
|
10
|
+
require('./AutocompleteSelect-e82bd937.js');
|
|
11
|
+
require('./Button-e6a6139c.js');
|
|
12
|
+
require('./Checkbox-50f1f3c7.js');
|
|
13
|
+
require('./CompactStarRating-f7a58649.js');
|
|
14
|
+
require('./CompactTextInput-cd701b06.js');
|
|
15
|
+
require('./MultiSelect-3eca3c3e.js');
|
|
16
|
+
require('./Radio-0b46b2a8.js');
|
|
17
|
+
require('./TextArea-efe4fa88.js');
|
|
18
|
+
require('./Switch-aa384260.js');
|
|
19
|
+
require('./Alert-fcc0bb50.js');
|
|
20
|
+
require('./Badge-34ad2850.js');
|
|
21
|
+
require('./Popover-63d38274.js');
|
|
22
|
+
require('./Tab-51124003.js');
|
|
23
|
+
require('./Tabs-452079b5.js');
|
|
24
|
+
var Tooltip = require('./Tooltip-7c57004f.js');
|
|
24
25
|
var styled = require('styled-components');
|
|
25
26
|
var polished = require('polished');
|
|
27
|
+
var warningCircle = require('./warning-circle-24522402.js');
|
|
26
28
|
|
|
27
29
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
28
30
|
|
|
@@ -153,29 +155,15 @@ var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme
|
|
|
153
155
|
var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
|
|
154
156
|
var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
|
|
155
157
|
|
|
156
|
-
function _extends$
|
|
158
|
+
function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
|
|
157
159
|
|
|
158
|
-
var _ref$
|
|
160
|
+
var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
159
161
|
fill: "currentColor",
|
|
160
162
|
d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
|
|
161
163
|
fillOpacity: 0.9
|
|
162
164
|
});
|
|
163
165
|
|
|
164
166
|
function SvgCheckCircleFilled(props) {
|
|
165
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
166
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
167
|
-
viewBox: "0 0 24 24"
|
|
168
|
-
}, props), _ref$6);
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
|
|
172
|
-
|
|
173
|
-
var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
174
|
-
fill: "currentColor",
|
|
175
|
-
d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
|
|
176
|
-
});
|
|
177
|
-
|
|
178
|
-
function SvgWarningCircle(props) {
|
|
179
167
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
180
168
|
xmlns: "http://www.w3.org/2000/svg",
|
|
181
169
|
viewBox: "0 0 24 24"
|
|
@@ -509,7 +497,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
509
497
|
}, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopNote, {
|
|
510
498
|
title: asset.note.title,
|
|
511
499
|
assetTitle: asset.title
|
|
512
|
-
}, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
|
|
500
|
+
}, asset.note.icon ? asset.note.icon : React__default['default'].createElement(warningCircle.SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
|
|
513
501
|
selected: selected
|
|
514
502
|
}, React__default['default'].createElement(SvgCheckCircleFilled, {
|
|
515
503
|
onClick: onSelectClick
|
|
@@ -808,7 +796,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
808
796
|
ref: cardRef
|
|
809
797
|
}, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(Note, {
|
|
810
798
|
title: asset.note.title
|
|
811
|
-
}, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
|
|
799
|
+
}, asset.note.icon ? asset.note.icon : React__default['default'].createElement(warningCircle.SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
|
|
812
800
|
"data-id": "ss"
|
|
813
801
|
}, asset.previewUrl && renderPreview(asset)), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
|
|
814
802
|
style: {
|
|
@@ -1406,4 +1394,3 @@ AssetGallery.defaultProps = {
|
|
|
1406
1394
|
};
|
|
1407
1395
|
|
|
1408
1396
|
exports.AssetGallery = AssetGallery;
|
|
1409
|
-
exports.SvgWarningCircle = SvgWarningCircle;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
|
-
var Popover = require('./Popover-
|
|
7
|
-
var ContextMenu = require('./ContextMenu-
|
|
6
|
+
var Popover = require('./Popover-63d38274.js');
|
|
7
|
+
var ContextMenu = require('./ContextMenu-a68d4f28.js');
|
|
8
8
|
var expandMore = require('./expand-more-94585605.js');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var lodash = require('lodash');
|
|
7
7
|
var styled = require('styled-components');
|
|
8
8
|
var editNote = require('./edit-note-c47d292e.js');
|
|
9
|
-
|
|
10
|
-
require('./Badge-
|
|
11
|
-
var Popover = require('./Popover-
|
|
12
|
-
require('./Tab-
|
|
13
|
-
require('./Tabs-
|
|
9
|
+
require('./Alert-fcc0bb50.js');
|
|
10
|
+
require('./Badge-34ad2850.js');
|
|
11
|
+
var Popover = require('./Popover-63d38274.js');
|
|
12
|
+
require('./Tab-51124003.js');
|
|
13
|
+
require('./Tabs-452079b5.js');
|
|
14
|
+
var Tooltip = require('./Tooltip-7c57004f.js');
|
|
14
15
|
|
|
15
16
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
17
|
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var styled = require('styled-components');
|
|
6
|
+
var TextArea = require('./TextArea-efe4fa88.js');
|
|
7
|
+
var AutocompleteSelect = require('./AutocompleteSelect-e82bd937.js');
|
|
8
|
+
var warningCircle = require('./warning-circle-24522402.js');
|
|
9
|
+
var lodash = require('lodash');
|
|
10
|
+
|
|
11
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
|
+
|
|
13
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
15
|
+
|
|
16
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
17
|
+
var BoxContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n position: relative;\n flex-direction: column;\n width: 100%;\n ", ";\n ", ";\n"])), function (props) {
|
|
18
|
+
return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
|
|
19
|
+
}, function (props) {
|
|
20
|
+
return props.initialHover && props.theme.themeProp('background', '#FFFDE8', '#FFFDE8');
|
|
21
|
+
});
|
|
22
|
+
var TopBarContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n display: flex;\n justify-content: end;\n ", ";\n\n ", ";\n\n width: 100%;\n margin-top: 0;\n transition: margin-top 120ms;\n &&.slide-in {\n margin-top: -24px;\n }\n"])), function (props) {
|
|
23
|
+
return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
|
|
24
|
+
}, function (props) {
|
|
25
|
+
return props.initialHover && props.theme.themeProp('background', '#FFFDE8', '#FFFDE8');
|
|
26
|
+
});
|
|
27
|
+
var SelectContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n width: 25%;\n margin-right: 3px;\n"])));
|
|
28
|
+
var Instructions$1 = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 99.5% !important;\n margin: auto;\n ", ";\n"])), function (props) {
|
|
29
|
+
return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
|
|
33
|
+
var clickToAdd = _ref.clickToAdd,
|
|
34
|
+
customAddMessage = _ref.customAddMessage,
|
|
35
|
+
selectedOption = _ref.selectedOption,
|
|
36
|
+
readOnly = _ref.readOnly,
|
|
37
|
+
lightBackground = _ref.lightBackground,
|
|
38
|
+
options = _ref.options,
|
|
39
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "readOnly", "lightBackground", "options"]);
|
|
40
|
+
|
|
41
|
+
var filterOptions = function filterOptions(inputValue) {
|
|
42
|
+
return options.filter(function (option) {
|
|
43
|
+
return option.label.toLowerCase().includes(inputValue.toLowerCase());
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
var loadOptions = function loadOptions(inputValue, prevOptions) {
|
|
48
|
+
var pageLength = 10;
|
|
49
|
+
var filteredOptions;
|
|
50
|
+
|
|
51
|
+
if (!inputValue) {
|
|
52
|
+
filteredOptions = options;
|
|
53
|
+
} else {
|
|
54
|
+
filteredOptions = filterOptions(inputValue);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
var hasMore = filteredOptions.length > prevOptions.length + pageLength;
|
|
58
|
+
var slicedOptions = filteredOptions.slice(prevOptions.length, prevOptions.length + pageLength);
|
|
59
|
+
return {
|
|
60
|
+
options: slicedOptions,
|
|
61
|
+
hasMore: hasMore
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
var loadOptionsPromise = function loadOptionsPromise(inputValue, prevOptions) {
|
|
66
|
+
return new Promise(function (resolve) {
|
|
67
|
+
resolve(loadOptions(inputValue, prevOptions));
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
var _useState = React.useState(false),
|
|
72
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
73
|
+
isHovered = _useState2[0],
|
|
74
|
+
setIsHovered = _useState2[1];
|
|
75
|
+
|
|
76
|
+
var _useState3 = React.useState({}),
|
|
77
|
+
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
78
|
+
selected = _useState4[0],
|
|
79
|
+
setSelected = _useState4[1];
|
|
80
|
+
|
|
81
|
+
var _useState5 = React.useState(clickToAdd),
|
|
82
|
+
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
83
|
+
addInstructions = _useState6[0],
|
|
84
|
+
setAddInstructions = _useState6[1];
|
|
85
|
+
|
|
86
|
+
var _useState7 = React.useState(customAddMessage),
|
|
87
|
+
_useState8 = defaultTheme._slicedToArray(_useState7, 2),
|
|
88
|
+
customMessage = _useState8[0],
|
|
89
|
+
setCustomMessage = _useState8[1];
|
|
90
|
+
|
|
91
|
+
var _useState9 = React.useState(lightBackground),
|
|
92
|
+
_useState10 = defaultTheme._slicedToArray(_useState9, 2),
|
|
93
|
+
background = _useState10[0],
|
|
94
|
+
setBackground = _useState10[1];
|
|
95
|
+
|
|
96
|
+
var _useState11 = React.useState(true),
|
|
97
|
+
_useState12 = defaultTheme._slicedToArray(_useState11, 2),
|
|
98
|
+
initialHover = _useState12[0],
|
|
99
|
+
setInitialHover = _useState12[1];
|
|
100
|
+
|
|
101
|
+
var _useState13 = React.useState(),
|
|
102
|
+
_useState14 = defaultTheme._slicedToArray(_useState13, 2),
|
|
103
|
+
currentValue = _useState14[0],
|
|
104
|
+
setCurrentValue = _useState14[1];
|
|
105
|
+
|
|
106
|
+
var handleMouseEnter = function handleMouseEnter() {
|
|
107
|
+
setIsHovered(true);
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
var handleMouseLeave = function handleMouseLeave() {
|
|
111
|
+
setIsHovered(false);
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
var handleOnFocus = function handleOnFocus() {
|
|
115
|
+
if (customMessage === currentValue) {
|
|
116
|
+
setCurrentValue('');
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
var handleChange = function handleChange(selected) {
|
|
121
|
+
if (selected === null) {
|
|
122
|
+
setSelected({});
|
|
123
|
+
setAddInstructions(true);
|
|
124
|
+
setBackground(true);
|
|
125
|
+
setInitialHover(true);
|
|
126
|
+
setCustomMessage(customAddMessage);
|
|
127
|
+
} else {
|
|
128
|
+
setSelected(selected);
|
|
129
|
+
setCurrentValue(selected.value);
|
|
130
|
+
setAddInstructions(false);
|
|
131
|
+
setBackground(false);
|
|
132
|
+
setInitialHover(false);
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
var handleLabelChange = function handleLabelChange(event) {
|
|
137
|
+
var newValue = event.target.value;
|
|
138
|
+
|
|
139
|
+
if (lodash.isEmpty(selected) && newValue) {
|
|
140
|
+
setCurrentValue(newValue);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
if (newValue) {
|
|
144
|
+
setCurrentValue(newValue);
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
React.useEffect(function () {
|
|
149
|
+
handleChange(selected);
|
|
150
|
+
}, [selected]);
|
|
151
|
+
React.useEffect(function () {
|
|
152
|
+
if (selectedOption) {
|
|
153
|
+
setCurrentValue(selectedOption.value);
|
|
154
|
+
}
|
|
155
|
+
}, [selectedOption]);
|
|
156
|
+
React.useEffect(function () {
|
|
157
|
+
if (addInstructions) {
|
|
158
|
+
setCurrentValue(customMessage);
|
|
159
|
+
setInitialHover(true);
|
|
160
|
+
}
|
|
161
|
+
}, [addInstructions, handleOnFocus]);
|
|
162
|
+
return React__default['default'].createElement(BoxContainer, {
|
|
163
|
+
initialHover: initialHover,
|
|
164
|
+
onMouseEnter: handleMouseEnter,
|
|
165
|
+
onMouseLeave: handleMouseLeave
|
|
166
|
+
}, React__default['default'].createElement(TopBarContainer, {
|
|
167
|
+
initialHover: initialHover,
|
|
168
|
+
className: isHovered && !readOnly && 'slide-in'
|
|
169
|
+
}, React__default['default'].createElement(SelectContainer, null, React__default['default'].createElement(AutocompleteSelect.AutocompleteSelect, {
|
|
170
|
+
warning: true,
|
|
171
|
+
creatable: false,
|
|
172
|
+
defaultValue: selectedOption,
|
|
173
|
+
loadOptions: loadOptionsPromise,
|
|
174
|
+
onChange: handleChange
|
|
175
|
+
}))), React__default['default'].createElement(Instructions$1, defaultTheme._extends({
|
|
176
|
+
ref: forwardedRef
|
|
177
|
+
}, props), React__default['default'].createElement(TextArea.TextArea, {
|
|
178
|
+
noBorder: true,
|
|
179
|
+
lightBackground: background,
|
|
180
|
+
readOnly: readOnly,
|
|
181
|
+
warningAlert: true,
|
|
182
|
+
value: currentValue,
|
|
183
|
+
onChange: handleLabelChange,
|
|
184
|
+
onFocus: handleOnFocus,
|
|
185
|
+
icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null)
|
|
186
|
+
})));
|
|
187
|
+
});
|
|
188
|
+
Instructions.defaultProps = {
|
|
189
|
+
clickToAdd: false,
|
|
190
|
+
lightBackground: false
|
|
191
|
+
};
|
|
192
|
+
Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
193
|
+
selectedOption: defaultTheme.PropTypes.object,
|
|
194
|
+
clickToAdd: defaultTheme.PropTypes.bool,
|
|
195
|
+
customAddMessage: defaultTheme.PropTypes.string,
|
|
196
|
+
disabled: defaultTheme.PropTypes.bool,
|
|
197
|
+
readOnly: defaultTheme.PropTypes.bool,
|
|
198
|
+
lightBackground: defaultTheme.PropTypes.bool,
|
|
199
|
+
options: defaultTheme.PropTypes.array
|
|
200
|
+
} : {};
|
|
201
|
+
|
|
202
|
+
exports.Instructions = Instructions;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
|
-
var Tab = require('./Tab-
|
|
6
|
+
var Tab = require('./Tab-51124003.js');
|
|
7
7
|
var lodash = require('lodash');
|
|
8
8
|
|
|
9
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var styled = require('styled-components');
|
|
6
|
+
var TippyTooltip = require('@tippyjs/react');
|
|
7
|
+
require('./Popover-63d38274.js');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
13
|
+
var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
|
|
14
|
+
|
|
15
|
+
var _templateObject;
|
|
16
|
+
var Tooltip$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 400;\n background: ", ";\n border-radius: 3px;\n\n .tippy-content {\n padding: 9px 12px;\n }\n\n .tippy-arrow {\n color: ", ";\n }\n\n a {\n color: inherit;\n }\n"])), function (props) {
|
|
17
|
+
return props.theme.primaryFontFamily;
|
|
18
|
+
}, function (props) {
|
|
19
|
+
return props.theme.getColor('gray-700');
|
|
20
|
+
}, function (props) {
|
|
21
|
+
return props.theme.getColor('gray-700');
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
var Tooltip = React__default['default'].forwardRef(function Tooltip(_ref, ref) {
|
|
25
|
+
var content = _ref.content,
|
|
26
|
+
interactive = _ref.interactive,
|
|
27
|
+
placement = _ref.placement,
|
|
28
|
+
duration = _ref.duration,
|
|
29
|
+
trigger = _ref.trigger,
|
|
30
|
+
children = _ref.children,
|
|
31
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "children"]);
|
|
32
|
+
|
|
33
|
+
return React__default['default'].createElement(Tooltip$1, defaultTheme._extends({
|
|
34
|
+
ref: ref,
|
|
35
|
+
content: content,
|
|
36
|
+
interactive: interactive,
|
|
37
|
+
placement: placement,
|
|
38
|
+
duration: duration,
|
|
39
|
+
trigger: trigger,
|
|
40
|
+
animation: 'shift-away-subtle'
|
|
41
|
+
}, props), children);
|
|
42
|
+
});
|
|
43
|
+
Tooltip.defaultProps = {
|
|
44
|
+
content: 'Tooltip',
|
|
45
|
+
interactive: false,
|
|
46
|
+
placement: 'top',
|
|
47
|
+
duration: 350,
|
|
48
|
+
trigger: 'mouseenter focus'
|
|
49
|
+
};
|
|
50
|
+
Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
51
|
+
content: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]).isRequired,
|
|
52
|
+
interactive: defaultTheme.PropTypes.bool,
|
|
53
|
+
placement: defaultTheme.PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
|
|
54
|
+
duration: defaultTheme.PropTypes.number,
|
|
55
|
+
trigger: defaultTheme.PropTypes.oneOf(['mouseenter', 'mouseenter focus', 'click', 'focusin', 'mouseenter click']),
|
|
56
|
+
children: defaultTheme.PropTypes.node.isRequired
|
|
57
|
+
} : {};
|
|
58
|
+
|
|
59
|
+
exports.Tooltip = Tooltip;
|
package/data/Badge/index.js
CHANGED