@ntbjs/react-components 0.0.1-beta.35 → 0.0.1-beta.36
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.
|
@@ -120,8 +120,8 @@ var assetShapeWithLayout = defaultTheme._objectSpread2(defaultTheme._objectSprea
|
|
|
120
120
|
var css_248z = ".lazy-load-image-background.opacity {\n opacity: 0;\n}\n\n.lazy-load-image-background.opacity.lazy-load-image-loaded {\n opacity: 1;\n transition: opacity .3s;\n}\n";
|
|
121
121
|
defaultTheme.styleInject(css_248z);
|
|
122
122
|
|
|
123
|
-
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
|
|
124
|
-
var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n ", ";\n ", ";\n\n ", "\n
|
|
123
|
+
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
|
|
124
|
+
var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n ", ";\n ", ";\n\n ", "\n video {\n width: 100%;\n height: 100%;\n }\n"])), function (props) {
|
|
125
125
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
|
|
126
126
|
}, function (props) {
|
|
127
127
|
return props.disabled && styled.css(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n opacity: 0.4;\n "])));
|
|
@@ -132,47 +132,51 @@ var Figure = styled__default['default'].figure(_templateObject4$1 || (_templateO
|
|
|
132
132
|
return props.hasHeightAndWidth ? styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: cover;\n "]))) : styled.css(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: contain;\n "])));
|
|
133
133
|
});
|
|
134
134
|
var Overlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
|
|
135
|
-
var OverlayBackdrop = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n background: linear-gradient(rgba(0, 0, 0, 0.6), transparent 70%, rgba(0, 0, 0, 0.6));\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])),
|
|
136
|
-
|
|
135
|
+
var OverlayBackdrop = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n background: linear-gradient(rgba(0, 0, 0, 0.6), transparent 70%, rgba(0, 0, 0, 0.6));\n transition: opacity 220ms;\n\n ", "\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
136
|
+
return props.softSelected && styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
137
|
+
}, Overlay);
|
|
138
|
+
var OverlayInfo = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 15px 12px 10px;\n color: ", ";\n"])), function (props) {
|
|
137
139
|
return props.theme.getColor('gray-100');
|
|
138
140
|
});
|
|
139
|
-
var OverlayInfoTopTitleAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
140
|
-
var OverlayInfoTopTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
141
|
+
var OverlayInfoTopTitleAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
142
|
+
var OverlayInfoTopTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n flex-grow: 1;\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-right: 20px;\n opacity: 0;\n transition: opacity 220ms;\n\n ", "\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
141
143
|
return props.theme.primaryFontFamily;
|
|
144
|
+
}, function (props) {
|
|
145
|
+
return props.softSelected && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
142
146
|
}, Overlay);
|
|
143
|
-
var OverlayInfoTopFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
144
|
-
var OverlayInfoTopNoteAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
145
|
-
var OverlayInfoTopNote = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
147
|
+
var OverlayInfoTopFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n width: auto;\n max-width: 19px;\n max-height: 19px;\n"])));
|
|
148
|
+
var OverlayInfoTopNoteAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
149
|
+
var OverlayInfoTopNote = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
|
|
146
150
|
var _props$assetTitle;
|
|
147
151
|
|
|
148
|
-
return ((_props$assetTitle = props.assetTitle) === null || _props$assetTitle === void 0 ? void 0 : _props$assetTitle.trim().length) > 0 ? styled.css(
|
|
152
|
+
return ((_props$assetTitle = props.assetTitle) === null || _props$assetTitle === void 0 ? void 0 : _props$assetTitle.trim().length) > 0 ? styled.css(_templateObject17$1 || (_templateObject17$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject18$1 || (_templateObject18$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
|
|
149
153
|
});
|
|
150
|
-
var OverlayInfoTopFileTypeTopLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
154
|
+
var OverlayInfoTopFileTypeTopLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n margin-right: 5px;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
|
|
151
155
|
var _props$assetTitle2;
|
|
152
156
|
|
|
153
|
-
return ((_props$assetTitle2 = props.assetTitle) === null || _props$assetTitle2 === void 0 ? void 0 : _props$assetTitle2.trim().length) > 0 ? styled.css(
|
|
157
|
+
return ((_props$assetTitle2 = props.assetTitle) === null || _props$assetTitle2 === void 0 ? void 0 : _props$assetTitle2.trim().length) > 0 ? styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
|
|
154
158
|
});
|
|
155
|
-
var OverlayInfoTopNoteTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
159
|
+
var OverlayInfoTopNoteTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-left: 5px;\n opacity: 0;\n transition: opacity 250ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
156
160
|
return props.theme.primaryFontFamily;
|
|
157
161
|
}, Overlay);
|
|
158
|
-
var OverlayCompleted$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
159
|
-
return polished.rgba(props.theme.getColor('emerald-500'), 0.7);
|
|
162
|
+
var OverlayCompleted$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
|
|
163
|
+
return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
|
|
160
164
|
});
|
|
161
|
-
var OverlayHasError$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
162
|
-
return polished.rgba(props.theme.getColor('red-500'), 0.7);
|
|
165
|
+
var OverlayHasError$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
|
|
166
|
+
return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
|
|
163
167
|
});
|
|
164
|
-
var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
165
|
-
return props.selected ? props.theme.getColor('orange-500') : 'transparent';
|
|
168
|
+
var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
|
|
169
|
+
return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
|
|
166
170
|
});
|
|
167
|
-
var OverlayInfoBottom = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
168
|
-
var OverlayInfoBottomSelectButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
171
|
+
var OverlayInfoBottom = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
172
|
+
var OverlayInfoBottomSelectButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n\n > svg {\n width: 23px;\n height: 100%;\n transition: color 120ms;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
169
173
|
return props.selected ? 1 : 0;
|
|
170
174
|
}, function (props) {
|
|
171
175
|
return props.selected ? props.theme.getColor('orange-500') : 'inherit';
|
|
172
176
|
}, Overlay);
|
|
173
|
-
var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
174
|
-
var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
175
|
-
var Fragment$1 = styled__default['default'].div(
|
|
177
|
+
var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), Overlay);
|
|
178
|
+
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"])));
|
|
179
|
+
var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
|
|
176
180
|
|
|
177
181
|
function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
|
|
178
182
|
|
|
@@ -297,6 +301,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
297
301
|
extendedSelectMode = props.extendedSelectMode,
|
|
298
302
|
onAssetSelected = props.onAssetSelected,
|
|
299
303
|
onAssetUnselected = props.onAssetUnselected,
|
|
304
|
+
softSelected = props.softSelected,
|
|
300
305
|
component = props.component,
|
|
301
306
|
scrollPosition = props.scrollPosition;
|
|
302
307
|
|
|
@@ -403,6 +408,14 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
403
408
|
}
|
|
404
409
|
}
|
|
405
410
|
}, [asset.fileType]);
|
|
411
|
+
React.useEffect(function () {
|
|
412
|
+
if (softSelected) {
|
|
413
|
+
cardRef.current.scrollIntoView({
|
|
414
|
+
behavior: 'smooth',
|
|
415
|
+
block: 'nearest'
|
|
416
|
+
});
|
|
417
|
+
}
|
|
418
|
+
}, [softSelected]);
|
|
406
419
|
return React__default['default'].createElement(AssetGalleryCompactCard$2, {
|
|
407
420
|
as: ComputedRootComponent$1,
|
|
408
421
|
component: component,
|
|
@@ -434,8 +447,11 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
434
447
|
scrollPosition: scrollPosition
|
|
435
448
|
}))), React__default['default'].createElement(Overlay, {
|
|
436
449
|
ref: cardRef
|
|
437
|
-
}, React__default['default'].createElement(OverlayBackdrop,
|
|
438
|
-
|
|
450
|
+
}, React__default['default'].createElement(OverlayBackdrop, {
|
|
451
|
+
softSelected: softSelected
|
|
452
|
+
}), React__default['default'].createElement(OverlayInfo, null, React__default['default'].createElement("div", null, React__default['default'].createElement(OverlayInfoTopTitleAndFileType, null, React__default['default'].createElement(OverlayInfoTopTitle, {
|
|
453
|
+
title: asset.title,
|
|
454
|
+
softSelected: softSelected
|
|
439
455
|
}, asset.title || "\xA0"), (!asset.fileTypeIconPosition || asset.fileTypeIconPosition === 'top-right') && typeIcon), React__default['default'].createElement(OverlayInfoTopNoteAndFileType, null, asset.fileTypeIconPosition === 'top-left' && React__default['default'].createElement(OverlayInfoTopFileTypeTopLeft, {
|
|
440
456
|
assetTitle: asset.title
|
|
441
457
|
}, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopNote, {
|
|
@@ -458,8 +474,13 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
458
474
|
return onActionClick(event, action);
|
|
459
475
|
}
|
|
460
476
|
}));
|
|
461
|
-
})))), asset.completed && React__default['default'].createElement(OverlayCompleted$1,
|
|
462
|
-
|
|
477
|
+
})))), asset.completed && React__default['default'].createElement(OverlayCompleted$1, {
|
|
478
|
+
softSelected: softSelected
|
|
479
|
+
}), asset.hasError && React__default['default'].createElement(OverlayHasError$1, {
|
|
480
|
+
softSelected: softSelected
|
|
481
|
+
}), selectable && React__default['default'].createElement(OverlaySelected$1, {
|
|
482
|
+
selected: selected,
|
|
483
|
+
softSelected: softSelected
|
|
463
484
|
})), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay$1, null, asset.overlay));
|
|
464
485
|
};
|
|
465
486
|
|
|
@@ -471,12 +492,13 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
471
492
|
extendedSelectMode: defaultTheme.PropTypes.bool,
|
|
472
493
|
onAssetSelected: defaultTheme.PropTypes.func.isRequired,
|
|
473
494
|
onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
|
|
495
|
+
softSelected: defaultTheme.PropTypes.bool.isRequired,
|
|
474
496
|
component: defaultTheme.PropTypes.func,
|
|
475
497
|
scrollPosition: defaultTheme.PropTypes.number
|
|
476
498
|
} : {};
|
|
477
499
|
AssetGalleryCompactCard.defaultProps = {};
|
|
478
500
|
var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
|
|
479
|
-
var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
|
|
501
|
+
var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
|
|
480
502
|
return reactiveProps.every(function (propKey) {
|
|
481
503
|
return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
|
|
482
504
|
});
|
|
@@ -512,14 +534,14 @@ var BottomSelectButton = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
512
534
|
return props.selected ? props.theme.getColor('orange-500') : 'inherit';
|
|
513
535
|
}, AssetGalleryGridCard$2);
|
|
514
536
|
var BottomActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), AssetGalleryGridCard$2);
|
|
515
|
-
var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid
|
|
516
|
-
return polished.rgba(props.theme.getColor('emerald-500'), 0.7);
|
|
537
|
+
var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
|
|
538
|
+
return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
|
|
517
539
|
});
|
|
518
540
|
var OverlayHasError = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
|
|
519
|
-
return polished.rgba(props.theme.getColor('red-500'), 0.7);
|
|
541
|
+
return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
|
|
520
542
|
});
|
|
521
543
|
var OverlaySelected = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
|
|
522
|
-
return props.selected ? props.theme.getColor('orange-500') : 'transparent';
|
|
544
|
+
return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
|
|
523
545
|
});
|
|
524
546
|
var ConsumerDefinedOverlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
|
|
525
547
|
var Fragment = styled__default['default'].div(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral([""])));
|
|
@@ -576,6 +598,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
576
598
|
extendedSelectMode = props.extendedSelectMode,
|
|
577
599
|
onAssetSelected = props.onAssetSelected,
|
|
578
600
|
onAssetUnselected = props.onAssetUnselected,
|
|
601
|
+
softSelected = props.softSelected,
|
|
579
602
|
component = props.component,
|
|
580
603
|
scrollPosition = props.scrollPosition;
|
|
581
604
|
var videoPlayerRef = React.useRef();
|
|
@@ -650,6 +673,14 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
650
673
|
};
|
|
651
674
|
}
|
|
652
675
|
}, []);
|
|
676
|
+
React.useEffect(function () {
|
|
677
|
+
if (softSelected) {
|
|
678
|
+
cardRef.current.scrollIntoView({
|
|
679
|
+
behavior: 'smooth',
|
|
680
|
+
block: 'nearest'
|
|
681
|
+
});
|
|
682
|
+
}
|
|
683
|
+
}, [softSelected]);
|
|
653
684
|
return React__default['default'].createElement(AssetGalleryGridCard$2, {
|
|
654
685
|
as: ComputedRootComponent,
|
|
655
686
|
component: component,
|
|
@@ -714,8 +745,13 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
|
|
|
714
745
|
return onActionClick(event, action);
|
|
715
746
|
}
|
|
716
747
|
}));
|
|
717
|
-
})))), asset.completed && React__default['default'].createElement(OverlayCompleted,
|
|
718
|
-
|
|
748
|
+
})))), asset.completed && React__default['default'].createElement(OverlayCompleted, {
|
|
749
|
+
softSelected: softSelected
|
|
750
|
+
}), asset.hasError && React__default['default'].createElement(OverlayHasError, {
|
|
751
|
+
softSelected: softSelected
|
|
752
|
+
}), selectable && React__default['default'].createElement(OverlaySelected, {
|
|
753
|
+
selected: selected,
|
|
754
|
+
softSelected: softSelected
|
|
719
755
|
}), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay, null, asset.overlay));
|
|
720
756
|
};
|
|
721
757
|
|
|
@@ -726,12 +762,13 @@ AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
726
762
|
extendedSelectMode: defaultTheme.PropTypes.bool,
|
|
727
763
|
onAssetSelected: defaultTheme.PropTypes.func.isRequired,
|
|
728
764
|
onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
|
|
765
|
+
softSelected: defaultTheme.PropTypes.bool.isRequired,
|
|
729
766
|
component: defaultTheme.PropTypes.func,
|
|
730
767
|
scrollPosition: defaultTheme.PropTypes.number
|
|
731
768
|
} : {};
|
|
732
769
|
AssetGalleryGridCard.defaultProps = {};
|
|
733
770
|
var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
|
|
734
|
-
var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
|
|
771
|
+
var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
|
|
735
772
|
return reactiveProps.every(function (propKey) {
|
|
736
773
|
return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
|
|
737
774
|
});
|
|
@@ -754,8 +791,11 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
754
791
|
selectedAssetKeys = _ref.selectedAssetKeys,
|
|
755
792
|
onAssetSelected = _ref.onAssetSelected,
|
|
756
793
|
onAssetUnselected = _ref.onAssetUnselected,
|
|
794
|
+
softSelectable = _ref.softSelectable,
|
|
795
|
+
softSelectedAssetKey = _ref.softSelectedAssetKey,
|
|
796
|
+
onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
|
|
757
797
|
component = _ref.component,
|
|
758
|
-
props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "component"]);
|
|
798
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "onAssetSoftSelectedChanged", "component"]);
|
|
759
799
|
|
|
760
800
|
var assetGalleryDOMNode = React.useRef();
|
|
761
801
|
var assetGalleryCompactRef = useMergedRefs(forwardedRef, assetGalleryDOMNode);
|
|
@@ -997,6 +1037,106 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
997
1037
|
return offsetTop;
|
|
998
1038
|
}
|
|
999
1039
|
|
|
1040
|
+
var handleKeyPress = React.useCallback(function (e) {
|
|
1041
|
+
function isElementVisible(el) {
|
|
1042
|
+
var rect = el.getBoundingClientRect(),
|
|
1043
|
+
vWidth = window.innerWidth || document.documentElement.clientWidth,
|
|
1044
|
+
vHeight = window.innerHeight || document.documentElement.clientHeight,
|
|
1045
|
+
efp = function efp(x, y) {
|
|
1046
|
+
return document.elementFromPoint(x, y);
|
|
1047
|
+
};
|
|
1048
|
+
|
|
1049
|
+
if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) return false;
|
|
1050
|
+
return el.contains(efp(rect.left, rect.top)) || el.contains(efp(rect.right, rect.top)) || el.contains(efp(rect.right, rect.bottom)) || el.contains(efp(rect.left, rect.bottom));
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
function softSelectFirstVisibleAsset() {
|
|
1054
|
+
var visibleAssets = assets.filter(function (asset) {
|
|
1055
|
+
return asset.layout.show;
|
|
1056
|
+
});
|
|
1057
|
+
|
|
1058
|
+
for (var i = 0; i < assetGalleryDOMNode.current.children.length; i++) {
|
|
1059
|
+
if (isElementVisible(assetGalleryDOMNode.current.children[i])) {
|
|
1060
|
+
onAssetSoftSelectedChanged(visibleAssets[i].key);
|
|
1061
|
+
break;
|
|
1062
|
+
}
|
|
1063
|
+
}
|
|
1064
|
+
}
|
|
1065
|
+
|
|
1066
|
+
if (assets.length === 0) return;
|
|
1067
|
+
|
|
1068
|
+
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
|
|
1069
|
+
if (softSelectedAssetKey === null) {
|
|
1070
|
+
softSelectFirstVisibleAsset();
|
|
1071
|
+
return;
|
|
1072
|
+
}
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
if (e.key === 'ArrowLeft') {
|
|
1076
|
+
var previousAssetIndex = assets.findIndex(function (asset) {
|
|
1077
|
+
return asset.key === softSelectedAssetKey;
|
|
1078
|
+
}) - 1;
|
|
1079
|
+
var previousAsset = assets[previousAssetIndex];
|
|
1080
|
+
|
|
1081
|
+
if (previousAsset) {
|
|
1082
|
+
if (previousAsset.layout.show) {
|
|
1083
|
+
onAssetSoftSelectedChanged(previousAsset.key);
|
|
1084
|
+
} else {
|
|
1085
|
+
softSelectFirstVisibleAsset();
|
|
1086
|
+
}
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
return;
|
|
1090
|
+
}
|
|
1091
|
+
|
|
1092
|
+
if (e.key === 'ArrowRight') {
|
|
1093
|
+
var nextAssetIndex = assets.findIndex(function (asset) {
|
|
1094
|
+
return asset.key === softSelectedAssetKey;
|
|
1095
|
+
}) + 1;
|
|
1096
|
+
var nextAsset = assets[nextAssetIndex];
|
|
1097
|
+
|
|
1098
|
+
if (nextAsset) {
|
|
1099
|
+
if (nextAsset.layout.show) {
|
|
1100
|
+
onAssetSoftSelectedChanged(nextAsset.key);
|
|
1101
|
+
} else {
|
|
1102
|
+
softSelectFirstVisibleAsset();
|
|
1103
|
+
}
|
|
1104
|
+
}
|
|
1105
|
+
|
|
1106
|
+
return;
|
|
1107
|
+
}
|
|
1108
|
+
|
|
1109
|
+
if (e.key === 'Enter') {
|
|
1110
|
+
if (softSelectedAssetKey === null) return;
|
|
1111
|
+
|
|
1112
|
+
if (selectedAssetKeys.includes(softSelectedAssetKey)) {
|
|
1113
|
+
onAssetUnselected(softSelectedAssetKey);
|
|
1114
|
+
} else {
|
|
1115
|
+
onAssetSelected(softSelectedAssetKey);
|
|
1116
|
+
}
|
|
1117
|
+
}
|
|
1118
|
+
}, [assets, softSelectedAssetKey, onAssetSoftSelectedChanged, selectedAssetKeys, assetGalleryCompactRef]);
|
|
1119
|
+
var handleClick = React.useCallback(function () {
|
|
1120
|
+
onAssetSoftSelectedChanged(null);
|
|
1121
|
+
}, []);
|
|
1122
|
+
React.useEffect(function () {
|
|
1123
|
+
if (softSelectable) {
|
|
1124
|
+
document.addEventListener('keydown', handleKeyPress);
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
return function () {
|
|
1128
|
+
return document.removeEventListener('keydown', handleKeyPress);
|
|
1129
|
+
};
|
|
1130
|
+
}, [softSelectable, handleKeyPress]);
|
|
1131
|
+
React.useEffect(function () {
|
|
1132
|
+
if (softSelectable && softSelectedAssetKey !== null) {
|
|
1133
|
+
document.addEventListener('click', handleClick, true);
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
return function () {
|
|
1137
|
+
return document.removeEventListener('click', handleClick, true);
|
|
1138
|
+
};
|
|
1139
|
+
}, [softSelectable, softSelectedAssetKey, handleClick]);
|
|
1000
1140
|
return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(AssetGalleryBase$1, defaultTheme._extends({
|
|
1001
1141
|
ref: assetGalleryCompactRef,
|
|
1002
1142
|
style: {
|
|
@@ -1024,6 +1164,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1024
1164
|
extendedSelectMode: Boolean(selectedAssetKeys.length),
|
|
1025
1165
|
onAssetSelected: onAssetSelected,
|
|
1026
1166
|
onAssetUnselected: onAssetUnselected,
|
|
1167
|
+
softSelected: softSelectedAssetKey === asset.key,
|
|
1027
1168
|
component: component
|
|
1028
1169
|
}) : React__default['default'].createElement(AssetGalleryCompactCard$1, {
|
|
1029
1170
|
asset: asset,
|
|
@@ -1033,6 +1174,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1033
1174
|
extendedSelectMode: Boolean(selectedAssetKeys.length),
|
|
1034
1175
|
onAssetSelected: onAssetSelected,
|
|
1035
1176
|
onAssetUnselected: onAssetUnselected,
|
|
1177
|
+
softSelected: softSelectedAssetKey === asset.key,
|
|
1036
1178
|
component: component
|
|
1037
1179
|
})));
|
|
1038
1180
|
})));
|
|
@@ -1045,6 +1187,9 @@ AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1045
1187
|
selectedAssetKeys: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string), defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number)]).isRequired,
|
|
1046
1188
|
onAssetSelected: defaultTheme.PropTypes.func.isRequired,
|
|
1047
1189
|
onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
|
|
1190
|
+
softSelectable: defaultTheme.PropTypes.bool,
|
|
1191
|
+
softSelectedAssetKey: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]),
|
|
1192
|
+
onAssetSoftSelectedChanged: defaultTheme.PropTypes.func.isRequired,
|
|
1048
1193
|
component: defaultTheme.PropTypes.func,
|
|
1049
1194
|
className: defaultTheme.PropTypes.string
|
|
1050
1195
|
} : {};
|
|
@@ -1056,14 +1201,21 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
|
|
|
1056
1201
|
selectable = _ref.selectable,
|
|
1057
1202
|
selectedAssetKeys = _ref.selectedAssetKeys,
|
|
1058
1203
|
onSelectedChanged = _ref.onSelectedChanged,
|
|
1204
|
+
softSelectable = _ref.softSelectable,
|
|
1205
|
+
onSoftSelectedChanged = _ref.onSoftSelectedChanged,
|
|
1059
1206
|
component = _ref.component,
|
|
1060
|
-
props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "component"]);
|
|
1207
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "onSoftSelectedChanged", "component"]);
|
|
1061
1208
|
|
|
1062
1209
|
var _useState = React.useState(selectedAssetKeys || []),
|
|
1063
1210
|
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
1064
1211
|
selectedAssetKeysInternalState = _useState2[0],
|
|
1065
1212
|
setSelectedAssetKeysInternalState = _useState2[1];
|
|
1066
1213
|
|
|
1214
|
+
var _useState3 = React.useState(null),
|
|
1215
|
+
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
1216
|
+
softSelectedAssetKeyInternalState = _useState4[0],
|
|
1217
|
+
setSoftSelectedAssetKeyInternalState = _useState4[1];
|
|
1218
|
+
|
|
1067
1219
|
React.useEffect(function () {
|
|
1068
1220
|
setSelectedAssetKeysInternalState(selectedAssetKeys || []);
|
|
1069
1221
|
}, [selectedAssetKeys]);
|
|
@@ -1074,6 +1226,11 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
|
|
|
1074
1226
|
onSelectedChanged(selectedAssetKeysInternalState);
|
|
1075
1227
|
}
|
|
1076
1228
|
}, [selectedAssetKeysInternalState]);
|
|
1229
|
+
React.useEffect(function () {
|
|
1230
|
+
if (lodash.isFunction(onSoftSelectedChanged)) {
|
|
1231
|
+
onSoftSelectedChanged(softSelectedAssetKeyInternalState);
|
|
1232
|
+
}
|
|
1233
|
+
}, [softSelectedAssetKeyInternalState]);
|
|
1077
1234
|
var onSelected = React.useCallback(function (assetKey) {
|
|
1078
1235
|
setSelectedAssetKeysInternalState(function (currentState) {
|
|
1079
1236
|
return [].concat(defaultTheme._toConsumableArray(currentState), [assetKey]);
|
|
@@ -1086,6 +1243,10 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
|
|
|
1086
1243
|
});
|
|
1087
1244
|
});
|
|
1088
1245
|
}, []);
|
|
1246
|
+
var onAssetSoftSelectedChanged = React.useCallback(function () {
|
|
1247
|
+
var assetKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
1248
|
+
setSoftSelectedAssetKeyInternalState(assetKey);
|
|
1249
|
+
}, []);
|
|
1089
1250
|
return React__default['default'].createElement(AssetGalleryBase, defaultTheme._extends({
|
|
1090
1251
|
ref: forwardedRef,
|
|
1091
1252
|
assets: assets,
|
|
@@ -1094,6 +1255,9 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
|
|
|
1094
1255
|
selectedAssetKeys: selectedAssetKeysInternalState,
|
|
1095
1256
|
onAssetSelected: onSelected,
|
|
1096
1257
|
onAssetUnselected: onUnselected,
|
|
1258
|
+
softSelectable: softSelectable,
|
|
1259
|
+
softSelectedAssetKey: softSelectedAssetKeyInternalState,
|
|
1260
|
+
onAssetSoftSelectedChanged: onAssetSoftSelectedChanged,
|
|
1097
1261
|
component: component,
|
|
1098
1262
|
viewMode: viewMode
|
|
1099
1263
|
}, props));
|
|
@@ -1105,6 +1269,8 @@ AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1105
1269
|
selectable: defaultTheme.PropTypes.bool,
|
|
1106
1270
|
selectedAssetKeys: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string), defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number)]),
|
|
1107
1271
|
onSelectedChanged: defaultTheme.PropTypes.func,
|
|
1272
|
+
softSelectable: defaultTheme.PropTypes.bool,
|
|
1273
|
+
onSoftSelectedChanged: defaultTheme.PropTypes.func,
|
|
1108
1274
|
component: defaultTheme.PropTypes.func
|
|
1109
1275
|
} : {};
|
|
1110
1276
|
AssetGallery.defaultProps = {
|
package/package.json
CHANGED
package/widgets/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var AssetGallery = require('../AssetGallery-
|
|
5
|
+
var AssetGallery = require('../AssetGallery-703449c0.js');
|
|
6
6
|
require('../defaultTheme-18d7c1ee.js');
|
|
7
7
|
require('styled-components');
|
|
8
8
|
require('react');
|