@ntbjs/react-components 1.2.0-rc.41 → 1.2.0-rc.42
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.
|
@@ -294,7 +294,7 @@ SummaryCard.defaultProps = {
|
|
|
294
294
|
activeSummaryCard: false
|
|
295
295
|
};
|
|
296
296
|
|
|
297
|
-
var _templateObject$1, _templateObject2$1, _templateObject3$1, _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$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1;
|
|
297
|
+
var _templateObject$1, _templateObject2$1, _templateObject3$1, _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$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27;
|
|
298
298
|
var AssetGalleryWrapper$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n"])), function (props) {
|
|
299
299
|
return props.disabled && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
|
|
300
300
|
});
|
|
@@ -313,32 +313,34 @@ var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultThem
|
|
|
313
313
|
}, function (props) {
|
|
314
314
|
return props.extendedSelectMode && styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
|
|
315
315
|
});
|
|
316
|
-
var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n margin: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n .lazy-load-image-background {\n display: block !important;\n }\n\n
|
|
317
|
-
return props.hasHeightAndWidth
|
|
316
|
+
var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n align-items: center;\n position: relative;\n margin: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n .lazy-load-image-background {\n display: block !important;\n }\n\n video {\n ", "\n }\n\n img {\n display: block;\n height: 100%;\n width: 100%;\n ", "\n }\n"])), function (props) {
|
|
317
|
+
return !props.hasHeightAndWidth && styled.css(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n width: 31.6% !important;\n "])));
|
|
318
|
+
}, function (props) {
|
|
319
|
+
return props.hasHeightAndWidth ? styled.css(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: cover;\n "]))) : styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: contain;\n "])));
|
|
318
320
|
});
|
|
319
|
-
var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
321
|
+
var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n inset: 0;\n opacity: ", ";\n background-color: ", ";\n"])), function (props) {
|
|
320
322
|
return props.selected ? 0.6 : 0;
|
|
321
323
|
}, function (props) {
|
|
322
324
|
return props.selected ? '#ACCEF7' : 'transparent';
|
|
323
325
|
});
|
|
324
|
-
var Overlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
325
|
-
var OverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
326
|
-
return !props.selected ? styled.css(
|
|
326
|
+
var Overlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
|
|
327
|
+
var OverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n transition: opacity 220ms;\n\n ", "\n ", "\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
328
|
+
return !props.selected ? styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n background: radial-gradient(\n ellipse at center,\n rgba(0, 0, 0, 0.3) 27%,\n rgba(0, 0, 0, 0.5) 60%,\n rgba(0, 0, 0, 0.7) 90%\n );\n "]))) : null;
|
|
327
329
|
}, function (props) {
|
|
328
|
-
return (props.selected || props.softSelected) && styled.css(
|
|
330
|
+
return (props.selected || props.softSelected) && styled.css(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
329
331
|
}, Overlay$1);
|
|
330
|
-
var OverlayInfo$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
332
|
+
var OverlayInfo$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$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) {
|
|
331
333
|
return props.theme.getColor('gray-100');
|
|
332
334
|
});
|
|
333
|
-
var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
335
|
+
var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = 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: 3px solid;\n ", ";\n"])), function (props) {
|
|
334
336
|
if (props.softSelected) return null;
|
|
335
337
|
return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'), polished.rgba(props.theme.getColor('emerald-500'), 0.7));
|
|
336
338
|
});
|
|
337
|
-
var OverlayHasError = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
339
|
+
var OverlayHasError = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17$1 || (_templateObject17$1 = 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: 3px solid;\n ", "\n"])), function (props) {
|
|
338
340
|
if (props.softSelected) return null;
|
|
339
341
|
return props.theme.themeProp('border-color', props.theme.getColor('red-600'), polished.rgba(props.theme.getColor('red-500'), 0.7));
|
|
340
342
|
});
|
|
341
|
-
var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
343
|
+
var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18$1 || (_templateObject18$1 = 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-style: solid;\n border-width: 3px;\n\n ", ";\n"])), function (props) {
|
|
342
344
|
if (props.softSelected) {
|
|
343
345
|
return props.theme.themeProp('border-color', polished.rgba(props.theme.getColor('gray-100'), 0.5), polished.rgba(props.theme.getColor('gray-700'), 0.5));
|
|
344
346
|
}
|
|
@@ -349,31 +351,31 @@ var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyD
|
|
|
349
351
|
|
|
350
352
|
return props.theme.themeProp('border-color', 'transparent', 'transparent');
|
|
351
353
|
});
|
|
352
|
-
var OverlayInfoTop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
353
|
-
var OverlayInfoTopActions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
354
|
+
var OverlayInfoTop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n padding: 8px;\n display: flex;\n"])));
|
|
355
|
+
var OverlayInfoTopActions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n padding: 4px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n transition: opacity 220ms;\n z-index: 99999;\n ", "\n\n opacity: ", ";\n"])), function (props) {
|
|
354
356
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
|
|
355
357
|
}, function (props) {
|
|
356
358
|
return props.isOverlayHovered ? 1 : 0;
|
|
357
359
|
});
|
|
358
|
-
var OverlayInfoTopVersions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
360
|
+
var OverlayInfoTopVersions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21$1 || (_templateObject21$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n display: ", ";\n\n ", ":hover & {\n opacity: 0;\n }\n"])), function (props) {
|
|
359
361
|
return props !== null && props !== void 0 && props.collapseExtraInfo ? 'none' : 'block';
|
|
360
362
|
}, Overlay$1);
|
|
361
|
-
var OverlayInfoTopWarning$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
363
|
+
var OverlayInfoTopWarning$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22$1 || (_templateObject22$1 = defaultTheme._taggedTemplateLiteral(["\n margin-left: auto;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n box-sizing: border-box;\n padding: ", ";\n background-color: ", ";\n opacity: 1;\n\n svg {\n width: 100%;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 0;\n }\n"])), function (props) {
|
|
362
364
|
return props.type === 'error' ? 0 : '3px 4px';
|
|
363
365
|
}, function (props) {
|
|
364
366
|
return props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100');
|
|
365
367
|
}, function (props) {
|
|
366
368
|
return props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700');
|
|
367
369
|
}, Overlay$1);
|
|
368
|
-
var OverlayInfoBottom$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
369
|
-
var OverlayInfoBottomSelectButton$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
370
|
+
var OverlayInfoBottom$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23$1 || (_templateObject23$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 8px;\n display: flex;\n"])));
|
|
371
|
+
var OverlayInfoBottomSelectButton$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24$1 || (_templateObject24$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n height: 24px;\n\n > svg {\n width: 24px;\n height: 24px;\n transition: opacity 120ms;\n opacity: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
370
372
|
return props.selected ? 1 : 0;
|
|
371
373
|
}, function (props) {
|
|
372
374
|
return props.selected ? 1 : 0.5;
|
|
373
375
|
}, Overlay$1);
|
|
374
|
-
var OverlayInfoBottomMediaIcon$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
375
|
-
var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
376
|
-
var Fragment$1 = styled__default['default'].div(
|
|
376
|
+
var OverlayInfoBottomMediaIcon$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25$1 || (_templateObject25$1 = defaultTheme._taggedTemplateLiteral(["\n margin-left: auto;\n opacity: 1;\n\n ", ":hover & {\n opacity: 0;\n }\n"])), Overlay$1);
|
|
377
|
+
var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26$1 || (_templateObject26$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
|
|
378
|
+
var Fragment$1 = styled__default['default'].div(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n margin: 4px;\n"])));
|
|
377
379
|
|
|
378
380
|
var ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
|
|
379
381
|
var component = _ref.component,
|
|
@@ -473,7 +475,8 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
473
475
|
softSelected = props.softSelected,
|
|
474
476
|
component = props.component,
|
|
475
477
|
scrollPosition = props.scrollPosition,
|
|
476
|
-
collapseExtraInfo = props.collapseExtraInfo
|
|
478
|
+
collapseExtraInfo = props.collapseExtraInfo,
|
|
479
|
+
thumbnailMaxHeight = props.thumbnailMaxHeight;
|
|
477
480
|
|
|
478
481
|
var _React$useState = React__default['default'].useState(false),
|
|
479
482
|
_React$useState2 = defaultTheme._slicedToArray(_React$useState, 2),
|
|
@@ -485,6 +488,14 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
485
488
|
openedSubActions = _React$useState4[0],
|
|
486
489
|
updateOpenedSubActions = _React$useState4[1];
|
|
487
490
|
|
|
491
|
+
var _React$useState5 = React__default['default'].useState(),
|
|
492
|
+
_React$useState6 = defaultTheme._slicedToArray(_React$useState5, 2),
|
|
493
|
+
maxHeight = _React$useState6[0],
|
|
494
|
+
setMaxHeight = _React$useState6[1];
|
|
495
|
+
|
|
496
|
+
React.useEffect(function () {
|
|
497
|
+
setMaxHeight(thumbnailMaxHeight);
|
|
498
|
+
}, [thumbnailMaxHeight]);
|
|
488
499
|
React.useEffect(function () {
|
|
489
500
|
var _asset$actions;
|
|
490
501
|
|
|
@@ -643,7 +654,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
643
654
|
}, React__default['default'].createElement("div", {
|
|
644
655
|
className: "audio",
|
|
645
656
|
style: {
|
|
646
|
-
height:
|
|
657
|
+
height: maxHeight
|
|
647
658
|
}
|
|
648
659
|
}, React__default['default'].createElement(SvgHeadset, null)));
|
|
649
660
|
} else {
|
|
@@ -808,6 +819,7 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
808
819
|
softSelected: defaultTheme.PropTypes.bool.isRequired,
|
|
809
820
|
component: defaultTheme.PropTypes.func,
|
|
810
821
|
scrollPosition: defaultTheme.PropTypes.number,
|
|
822
|
+
thumbnailMaxHeight: defaultTheme.PropTypes.number,
|
|
811
823
|
collapseExtraInfo: defaultTheme.PropTypes.bool
|
|
812
824
|
} : {};
|
|
813
825
|
AssetGalleryCompactCard.defaultProps = {};
|
|
@@ -1709,7 +1721,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1709
1721
|
style: {
|
|
1710
1722
|
transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
|
|
1711
1723
|
width: "".concat(asset.layout.width, "px"),
|
|
1712
|
-
height:
|
|
1724
|
+
height: "".concat(asset.layout.height, "px")
|
|
1713
1725
|
}
|
|
1714
1726
|
}, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
|
|
1715
1727
|
asset: asset,
|
|
@@ -1731,6 +1743,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1731
1743
|
onAssetSelected: onAssetSelected,
|
|
1732
1744
|
onAssetUnselected: onAssetUnselected,
|
|
1733
1745
|
softSelected: softSelectedAssetKey === asset.key,
|
|
1746
|
+
thumbnailMaxHeight: "".concat(asset.layout.height, "px"),
|
|
1734
1747
|
component: component
|
|
1735
1748
|
})));
|
|
1736
1749
|
})));
|
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-57bd6815.js');
|
|
6
6
|
var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
|
|
7
7
|
var AssetPreviewTopBar = require('../AssetPreviewTopBar-c28715f7.js');
|
|
8
8
|
var Instructions = require('../Instructions-b1311846.js');
|