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

package/{AssetGallery-276ec477.js → AssetGallery-fadd3e71.js}

@@ -300,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;
@@ -308,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) {
@@ -1765,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),
@@ -1806,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) {
@@ -1840,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,
@@ -1852,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.44",
+  "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-276ec477.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-276ec477.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');