@ntbjs/react-components 1.2.0-rc.43 → 1.2.0-rc.45

package/{AssetGallery-9427c4a0.js → AssetGallery-fadd3e71.js}

@@ -170,7 +170,9 @@ var GroupLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
 });
-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"])));
+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) {
+  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
+});
 
 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";
 defaultTheme.styleInject(css_248z);
@@ -298,7 +300,7 @@ var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$
 var AssetGalleryWrapper$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
   return props.disabled && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
 });
-var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  box-sizing: border-box;\n  cursor: pointer;\n\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n  video {\n    width: 100%;\n    height: 100%;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
+var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  box-sizing: border-box;\n  cursor: pointer;\n\n  ", ";\n\n  ", ";\n\n  ", "\n  video {\n    width: 100%;\n    height: 100%;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
   return props.selected ? 1 : 0;
 }, function (props) {
   return props.selected ? 1 : 0;
@@ -306,8 +308,6 @@ var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultThem
   return props.selected ? 1 : 0;
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
-}, function (props) {
-  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
 }, function (props) {
   return props.disabled && styled.css(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n      pointer-events: none;\n      opacity: 0.4;\n    "])));
 }, function (props) {
@@ -473,8 +473,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       softSelected = props.softSelected,
       component = props.component,
       scrollPosition = props.scrollPosition,
-      collapseExtraInfo = props.collapseExtraInfo,
-      thumbnailMaxHeight = props.thumbnailMaxHeight;
+      collapseExtraInfo = props.collapseExtraInfo;
 
   var _React$useState = React__default['default'].useState(false),
       _React$useState2 = defaultTheme._slicedToArray(_React$useState, 2),
@@ -486,14 +485,6 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       openedSubActions = _React$useState4[0],
       updateOpenedSubActions = _React$useState4[1];
 
-  var _React$useState5 = React__default['default'].useState(),
-      _React$useState6 = defaultTheme._slicedToArray(_React$useState5, 2),
-      maxHeight = _React$useState6[0],
-      setMaxHeight = _React$useState6[1];
-
-  React.useEffect(function () {
-    setMaxHeight(thumbnailMaxHeight);
-  }, [thumbnailMaxHeight]);
   React.useEffect(function () {
     var _asset$actions;
 
@@ -641,10 +632,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       }, React__default['default'].createElement("video", {
         ref: videoPlayerRef,
         loop: true,
-        muted: true,
-        style: {
-          height: maxHeight
-        }
+        muted: true
       }, React__default['default'].createElement("source", {
         src: asset.previewUrl,
         type: "video/mp4"
@@ -653,10 +641,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
         scrollPosition: scrollPosition
       }, React__default['default'].createElement("div", {
-        className: "audio",
-        style: {
-          height: maxHeight
-        }
+        className: "audio"
       }, React__default['default'].createElement(SvgHeadset, null)));
     } else {
       previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
@@ -820,7 +805,6 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   softSelected: defaultTheme.PropTypes.bool.isRequired,
   component: defaultTheme.PropTypes.func,
   scrollPosition: defaultTheme.PropTypes.number,
-  thumbnailMaxHeight: defaultTheme.PropTypes.number,
   collapseExtraInfo: defaultTheme.PropTypes.bool
 } : {};
 AssetGalleryCompactCard.defaultProps = {};
@@ -1722,7 +1706,9 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       style: {
         transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
         width: "".concat(asset.layout.width, "px"),
-        height: "".concat(asset.layout.height, "px")
+        height: "".concat(asset.layout.height, "px"),
+        display: 'flex',
+        justifyContent: 'center'
       }
     }, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
       asset: asset,
@@ -1744,7 +1730,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       onAssetSelected: onAssetSelected,
       onAssetUnselected: onAssetUnselected,
       softSelected: softSelectedAssetKey === asset.key,
-      thumbnailMaxHeight: "".concat(asset.layout.height, "px"),
       component: component
     })));
   })));
@@ -1778,7 +1763,8 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
       scrollElement = _ref.scrollElement,
       onSoftSelectedChanged = _ref.onSoftSelectedChanged,
       component = _ref.component,
-      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component"]);
+      selectAll = _ref.selectAll,
+      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component", "selectAll"]);
 
   var _useState = React.useState(selectedAssetKeys || []),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -1819,6 +1805,16 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
       return [].concat(defaultTheme._toConsumableArray(currentState), [assetKey]);
     });
   }, []);
+  React.useEffect(function () {
+    if (selectAll) {
+      var allAssetKeys = assets.map(function (asset) {
+        return asset.key;
+      });
+      setSelectedAssetKeysInternalState(allAssetKeys);
+    } else {
+      setSelectedAssetKeysInternalState([]);
+    }
+  }, [selectAll, assets]);
   var onUnselected = React.useCallback(function (assetKey) {
     setSelectedAssetKeysInternalState(function (currentState) {
       return currentState.filter(function (filteredAssetKey) {
@@ -1853,6 +1849,7 @@ AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
   viewMode: defaultTheme.PropTypes.oneOf(['compact', 'grid']),
   thumbnailMaxHeight: defaultTheme.PropTypes.number,
   selectable: defaultTheme.PropTypes.bool,
+  selectAll: defaultTheme.PropTypes.bool,
   selectedAssetKeys: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string), defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number)]),
   onSelectedChanged: defaultTheme.PropTypes.func,
   softSelectable: defaultTheme.PropTypes.bool,
@@ -1865,7 +1862,8 @@ AssetGallery.defaultProps = {
   viewMode: 'compact',
   thumbnailMaxHeight: 300,
   selectedAssetKeys: [],
-  activeSummaryCard: false
+  activeSummaryCard: false,
+  selectAll: false
 };
 
 exports.AssetGallery = AssetGallery;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.2.0-rc.43",
+  "version": "1.2.0-rc.45",
   "description": "NTBs common front-end design utilities and React components.",
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",

package/widgets/AssetGallery/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var AssetGallery = require('../../AssetGallery-9427c4a0.js');
+var AssetGallery = require('../../AssetGallery-fadd3e71.js');
 require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('lodash');

package/widgets/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-9427c4a0.js');
+var AssetGallery = require('../AssetGallery-fadd3e71.js');
 var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-c28715f7.js');
 var Instructions = require('../Instructions-b1311846.js');