@ntbjs/react-components 1.2.0-rc.42 → 1.2.0-rc.44
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.
|
@@ -170,7 +170,9 @@ var GroupLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
|
|
|
170
170
|
}, function (props) {
|
|
171
171
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
|
|
172
172
|
});
|
|
173
|
-
var AssetGalleryCardBase = styled__default['default'].div(_templateObject3$3 || (_templateObject3$3 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n z-index: 1;\n will-change: transform, width, height;\n\n &:hover {\n z-index: 2;\n }\n"])))
|
|
173
|
+
var AssetGalleryCardBase = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$3 || (_templateObject3$3 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n z-index: 1;\n will-change: transform, width, height;\n\n &:hover {\n z-index: 2;\n }\n"])), function (props) {
|
|
174
|
+
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
|
|
175
|
+
});
|
|
174
176
|
|
|
175
177
|
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";
|
|
176
178
|
defaultTheme.styleInject(css_248z);
|
|
@@ -294,7 +296,7 @@ SummaryCard.defaultProps = {
|
|
|
294
296
|
activeSummaryCard: false
|
|
295
297
|
};
|
|
296
298
|
|
|
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
|
|
299
|
+
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;
|
|
298
300
|
var AssetGalleryWrapper$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n"])), function (props) {
|
|
299
301
|
return props.disabled && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
|
|
300
302
|
});
|
|
@@ -313,34 +315,32 @@ var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultThem
|
|
|
313
315
|
}, function (props) {
|
|
314
316
|
return props.extendedSelectMode && styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
|
|
315
317
|
});
|
|
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
|
|
317
|
-
return
|
|
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
|
+
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 img {\n display: block;\n height: 100%;\n width: 100%;\n ", "\n }\n"])), function (props) {
|
|
319
|
+
return props.hasHeightAndWidth ? styled.css(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: cover;\n "]))) : styled.css(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: contain;\n "])));
|
|
320
320
|
});
|
|
321
|
-
var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
321
|
+
var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n inset: 0;\n opacity: ", ";\n background-color: ", ";\n"])), function (props) {
|
|
322
322
|
return props.selected ? 0.6 : 0;
|
|
323
323
|
}, function (props) {
|
|
324
324
|
return props.selected ? '#ACCEF7' : 'transparent';
|
|
325
325
|
});
|
|
326
|
-
var Overlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
327
|
-
var OverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
328
|
-
return !props.selected ? styled.css(
|
|
326
|
+
var Overlay$1 = 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"])));
|
|
327
|
+
var OverlayBackdrop$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 opacity: 0;\n transition: opacity 220ms;\n\n ", "\n ", "\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
328
|
+
return !props.selected ? styled.css(_templateObject12$1 || (_templateObject12$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;
|
|
329
329
|
}, function (props) {
|
|
330
|
-
return (props.selected || props.softSelected) && styled.css(
|
|
330
|
+
return (props.selected || props.softSelected) && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
331
331
|
}, Overlay$1);
|
|
332
|
-
var OverlayInfo$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
332
|
+
var OverlayInfo$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$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) {
|
|
333
333
|
return props.theme.getColor('gray-100');
|
|
334
334
|
});
|
|
335
|
-
var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
335
|
+
var OverlayCompleted = 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 pointer-events: none;\n transition: border-color 120ms;\n border: 3px solid;\n ", ";\n"])), function (props) {
|
|
336
336
|
if (props.softSelected) return null;
|
|
337
337
|
return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'), polished.rgba(props.theme.getColor('emerald-500'), 0.7));
|
|
338
338
|
});
|
|
339
|
-
var OverlayHasError = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
339
|
+
var OverlayHasError = 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) {
|
|
340
340
|
if (props.softSelected) return null;
|
|
341
341
|
return props.theme.themeProp('border-color', props.theme.getColor('red-600'), polished.rgba(props.theme.getColor('red-500'), 0.7));
|
|
342
342
|
});
|
|
343
|
-
var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
343
|
+
var OverlaySelected$1 = 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-style: solid;\n border-width: 3px;\n\n ", ";\n"])), function (props) {
|
|
344
344
|
if (props.softSelected) {
|
|
345
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));
|
|
346
346
|
}
|
|
@@ -351,31 +351,31 @@ var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyD
|
|
|
351
351
|
|
|
352
352
|
return props.theme.themeProp('border-color', 'transparent', 'transparent');
|
|
353
353
|
});
|
|
354
|
-
var OverlayInfoTop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
355
|
-
var OverlayInfoTopActions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
354
|
+
var OverlayInfoTop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18$1 || (_templateObject18$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)(_templateObject19$1 || (_templateObject19$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) {
|
|
356
356
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
|
|
357
357
|
}, function (props) {
|
|
358
358
|
return props.isOverlayHovered ? 1 : 0;
|
|
359
359
|
});
|
|
360
|
-
var OverlayInfoTopVersions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
360
|
+
var OverlayInfoTopVersions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n display: ", ";\n\n ", ":hover & {\n opacity: 0;\n }\n"])), function (props) {
|
|
361
361
|
return props !== null && props !== void 0 && props.collapseExtraInfo ? 'none' : 'block';
|
|
362
362
|
}, Overlay$1);
|
|
363
|
-
var OverlayInfoTopWarning$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
363
|
+
var OverlayInfoTopWarning$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21$1 || (_templateObject21$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) {
|
|
364
364
|
return props.type === 'error' ? 0 : '3px 4px';
|
|
365
365
|
}, function (props) {
|
|
366
366
|
return props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100');
|
|
367
367
|
}, function (props) {
|
|
368
368
|
return props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700');
|
|
369
369
|
}, Overlay$1);
|
|
370
|
-
var OverlayInfoBottom$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
371
|
-
var OverlayInfoBottomSelectButton$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
370
|
+
var OverlayInfoBottom$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22$1 || (_templateObject22$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)(_templateObject23$1 || (_templateObject23$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) {
|
|
372
372
|
return props.selected ? 1 : 0;
|
|
373
373
|
}, function (props) {
|
|
374
374
|
return props.selected ? 1 : 0.5;
|
|
375
375
|
}, Overlay$1);
|
|
376
|
-
var OverlayInfoBottomMediaIcon$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
377
|
-
var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
378
|
-
var Fragment$1 = styled__default['default'].div(
|
|
376
|
+
var OverlayInfoBottomMediaIcon$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24$1 || (_templateObject24$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)(_templateObject25$1 || (_templateObject25$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(_templateObject26$1 || (_templateObject26$1 = defaultTheme._taggedTemplateLiteral(["\n margin: 4px;\n"])));
|
|
379
379
|
|
|
380
380
|
var ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
|
|
381
381
|
var component = _ref.component,
|
|
@@ -475,8 +475,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
475
475
|
softSelected = props.softSelected,
|
|
476
476
|
component = props.component,
|
|
477
477
|
scrollPosition = props.scrollPosition,
|
|
478
|
-
collapseExtraInfo = props.collapseExtraInfo
|
|
479
|
-
thumbnailMaxHeight = props.thumbnailMaxHeight;
|
|
478
|
+
collapseExtraInfo = props.collapseExtraInfo;
|
|
480
479
|
|
|
481
480
|
var _React$useState = React__default['default'].useState(false),
|
|
482
481
|
_React$useState2 = defaultTheme._slicedToArray(_React$useState, 2),
|
|
@@ -488,14 +487,6 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
488
487
|
openedSubActions = _React$useState4[0],
|
|
489
488
|
updateOpenedSubActions = _React$useState4[1];
|
|
490
489
|
|
|
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]);
|
|
499
490
|
React.useEffect(function () {
|
|
500
491
|
var _asset$actions;
|
|
501
492
|
|
|
@@ -652,10 +643,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
|
|
|
652
643
|
previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
|
|
653
644
|
scrollPosition: scrollPosition
|
|
654
645
|
}, React__default['default'].createElement("div", {
|
|
655
|
-
className: "audio"
|
|
656
|
-
style: {
|
|
657
|
-
height: maxHeight
|
|
658
|
-
}
|
|
646
|
+
className: "audio"
|
|
659
647
|
}, React__default['default'].createElement(SvgHeadset, null)));
|
|
660
648
|
} else {
|
|
661
649
|
previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
|
|
@@ -819,7 +807,6 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
819
807
|
softSelected: defaultTheme.PropTypes.bool.isRequired,
|
|
820
808
|
component: defaultTheme.PropTypes.func,
|
|
821
809
|
scrollPosition: defaultTheme.PropTypes.number,
|
|
822
|
-
thumbnailMaxHeight: defaultTheme.PropTypes.number,
|
|
823
810
|
collapseExtraInfo: defaultTheme.PropTypes.bool
|
|
824
811
|
} : {};
|
|
825
812
|
AssetGalleryCompactCard.defaultProps = {};
|
|
@@ -1721,7 +1708,9 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1721
1708
|
style: {
|
|
1722
1709
|
transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
|
|
1723
1710
|
width: "".concat(asset.layout.width, "px"),
|
|
1724
|
-
height: "".concat(asset.layout.height, "px")
|
|
1711
|
+
height: "".concat(asset.layout.height, "px"),
|
|
1712
|
+
display: 'flex',
|
|
1713
|
+
justifyContent: 'center'
|
|
1725
1714
|
}
|
|
1726
1715
|
}, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
|
|
1727
1716
|
asset: asset,
|
|
@@ -1743,7 +1732,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
|
|
|
1743
1732
|
onAssetSelected: onAssetSelected,
|
|
1744
1733
|
onAssetUnselected: onAssetUnselected,
|
|
1745
1734
|
softSelected: softSelectedAssetKey === asset.key,
|
|
1746
|
-
thumbnailMaxHeight: "".concat(asset.layout.height, "px"),
|
|
1747
1735
|
component: component
|
|
1748
1736
|
})));
|
|
1749
1737
|
})));
|
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-276ec477.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');
|