box-ui-elements 16.1.0-beta.9 → 17.0.0

package/es/features/content-explorer/content-explorer/ContentExplorer.js

@@ -40,10 +40,11 @@ import ContentExplorerHeaderActions from './ContentExplorerHeaderActions';
 import ContentExplorerEmptyState from './ContentExplorerEmptyState';
 import ContentExplorerActionButtons from './ContentExplorerActionButtons';
 import ContentExplorerSelectAll from './ContentExplorerSelectAll';
+import ContentExplorerIncludeSubfolders from './ContentExplorerIncludeSubfolders';
 import ItemList from '../item-list';
 import { ContentExplorerModePropType, FoldersPathPropType, ItemsPropType } from '../prop-types';
 import ContentExplorerModes from '../modes';
-import ItemTypes from '../item-types';
+import { TYPE_FOLDER } from '../../../constants';
 import './ContentExplorer.scss';
 
 var ContentExplorer =
@@ -103,7 +104,8 @@ function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "enterFolder", function (enteredFolder) {
       var _this$props = _this.props,
           contentExplorerMode = _this$props.contentExplorerMode,
-          onEnterFolder = _this$props.onEnterFolder;
+          onEnterFolder = _this$props.onEnterFolder,
+          onFoldersPathUpdate = _this$props.onFoldersPathUpdate;
       var foldersPath = _this.state.foldersPath;
       var folderIndex = foldersPath.findIndex(function (folder) {
         return folder.id === enteredFolder.id;
@@ -128,13 +130,23 @@ function (_Component) {
 
       _this.setState(newState);
 
+      if (onFoldersPathUpdate) {
+        onFoldersPathUpdate(newFoldersPath);
+      }
+
       onEnterFolder(enteredFolder, newFoldersPath);
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleFoldersPathUpdated", function (newFoldersPath) {
+      var onFoldersPathUpdate = _this.props.onFoldersPathUpdate;
+
       _this.setState({
         foldersPath: newFoldersPath
       });
+
+      if (onFoldersPathUpdate) {
+        onFoldersPathUpdate(newFoldersPath);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleSearchSubmit", function (searchQuery) {
@@ -163,11 +175,12 @@ function (_Component) {
       var _this$props2 = _this.props,
           contentExplorerMode = _this$props2.contentExplorerMode,
           items = _this$props2.items,
-          onSelectItem = _this$props2.onSelectItem;
+          onSelectItem = _this$props2.onSelectItem,
+          onSelectedItemsUpdate = _this$props2.onSelectedItemsUpdate;
       var selectedItems = _this.state.selectedItems;
       var item = items[index];
 
-      if (item.isDisabled || item.isLoading) {
+      if (item.isDisabled || item.isLoading || item.isActionDisabled) {
         return;
       } // Prevent the event from bubbling up (so our content explorer click handler doesn't fire)
 
@@ -186,6 +199,10 @@ function (_Component) {
         isSelectAllChecked: false
       });
 
+      if (onSelectedItemsUpdate) {
+        onSelectedItemsUpdate(newSelectedItems);
+      }
+
       if (onSelectItem) {
         onSelectItem(item, index);
       }
@@ -202,9 +219,9 @@ function (_Component) {
         return;
       }
 
-      if (item.type === ItemTypes.FOLDER) {
+      if (item.type === TYPE_FOLDER) {
         _this.enterFolder(item);
-      } else {
+      } else if (!item.isActionDisabled) {
         onChooseItems([item]);
       }
 
@@ -221,7 +238,7 @@ function (_Component) {
         return;
       }
 
-      if (item.type !== ItemTypes.FOLDER) {
+      if (item.type !== TYPE_FOLDER) {
         return;
       } // Prevent the event from bubbling (so our row click handler doesn't fire)
 
@@ -281,13 +298,13 @@ function (_Component) {
     _asyncToGenerator(
     /*#__PURE__*/
     regeneratorRuntime.mark(function _callee() {
-      var items, isSelectAllChecked, newSelectedItems;
+      var _this$props4, items, onSelectedItemsUpdate, isSelectAllChecked, newSelectedItems;
+
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              // check if the items list is still loading
-              items = _this.props.items;
+              _this$props4 = _this.props, items = _this$props4.items, onSelectedItemsUpdate = _this$props4.onSelectedItemsUpdate;
 
               if (!(items && items[0] && items[0].isLoading)) {
                 _context.next = 3;
@@ -305,7 +322,11 @@ function (_Component) {
                 isSelectAllChecked: !isSelectAllChecked
               });
 
-            case 6:
+              if (onSelectedItemsUpdate) {
+                onSelectedItemsUpdate(newSelectedItems);
+              }
+
+            case 7:
             case "end":
               return _context.stop();
           }
@@ -344,9 +365,7 @@ function (_Component) {
       var initialFoldersPath = this.props.initialFoldersPath;
 
       if (prevInitialFoldersPath !== initialFoldersPath) {
-        this.setState({
-          foldersPath: initialFoldersPath
-        });
+        this.handleFoldersPathUpdated(initialFoldersPath);
       }
     }
   }, {
@@ -367,51 +386,65 @@ function (_Component) {
   }, {
     key: "deselectItems",
     value: function deselectItems() {
+      var onSelectedItemsUpdate = this.props.onSelectedItemsUpdate;
       this.setState({
         selectedItems: {}
       });
+
+      if (onSelectedItemsUpdate) {
+        onSelectedItemsUpdate({});
+      }
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _this$props4 = this.props,
-          actionButtonsProps = _this$props4.actionButtonsProps,
-          breadcrumbProps = _this$props4.breadcrumbProps,
-          cancelButtonProps = _this$props4.cancelButtonProps,
-          chooseButtonProps = _this$props4.chooseButtonProps,
-          chooseButtonText = _this$props4.chooseButtonText,
-          className = _this$props4.className,
-          contentExplorerMode = _this$props4.contentExplorerMode,
-          customInput = _this$props4.customInput,
-          headerActionsAccessory = _this$props4.headerActionsAccessory,
-          onChooseItems = _this$props4.onChooseItems,
-          onMoveItem = _this$props4.onMoveItem,
-          onCopyItem = _this$props4.onCopyItem,
-          onCancelButtonClick = _this$props4.onCancelButtonClick,
-          onCreateNewFolderButtonClick = _this$props4.onCreateNewFolderButtonClick,
-          onSelectedClick = _this$props4.onSelectedClick,
-          showCreateNewFolderButton = _this$props4.showCreateNewFolderButton,
-          isChooseButtonLoading = _this$props4.isChooseButtonLoading,
-          isCopyButtonLoading = _this$props4.isCopyButtonLoading,
-          isCreateNewFolderAllowed = _this$props4.isCreateNewFolderAllowed,
-          isMoveButtonLoading = _this$props4.isMoveButtonLoading,
-          _this$props4$isRespon = _this$props4.isResponsive,
-          isResponsive = _this$props4$isRespon === void 0 ? false : _this$props4$isRespon,
-          isSelectAllAllowed = _this$props4.isSelectAllAllowed,
-          items = _this$props4.items,
-          numItemsPerPage = _this$props4.numItemsPerPage,
-          numTotalItems = _this$props4.numTotalItems,
-          onLoadMoreItems = _this$props4.onLoadMoreItems,
-          itemIconRenderer = _this$props4.itemIconRenderer,
-          itemNameLinkRenderer = _this$props4.itemNameLinkRenderer,
-          itemButtonRenderer = _this$props4.itemButtonRenderer,
-          itemRowRenderer = _this$props4.itemRowRenderer,
-          listWidth = _this$props4.listWidth,
-          listHeight = _this$props4.listHeight,
-          searchInputProps = _this$props4.searchInputProps,
-          rest = _objectWithoutProperties(_this$props4, ["actionButtonsProps", "breadcrumbProps", "cancelButtonProps", "chooseButtonProps", "chooseButtonText", "className", "contentExplorerMode", "customInput", "headerActionsAccessory", "onChooseItems", "onMoveItem", "onCopyItem", "onCancelButtonClick", "onCreateNewFolderButtonClick", "onSelectedClick", "showCreateNewFolderButton", "isChooseButtonLoading", "isCopyButtonLoading", "isCreateNewFolderAllowed", "isMoveButtonLoading", "isResponsive", "isSelectAllAllowed", "items", "numItemsPerPage", "numTotalItems", "onLoadMoreItems", "itemIconRenderer", "itemNameLinkRenderer", "itemButtonRenderer", "itemRowRenderer", "listWidth", "listHeight", "searchInputProps"]);
+      var _this$props5 = this.props,
+          actionButtonsProps = _this$props5.actionButtonsProps,
+          additionalColumns = _this$props5.additionalColumns,
+          _this$props5$isNoSele = _this$props5.isNoSelectionAllowed,
+          isNoSelectionAllowed = _this$props5$isNoSele === void 0 ? false : _this$props5$isNoSele,
+          breadcrumbProps = _this$props5.breadcrumbProps,
+          cancelButtonProps = _this$props5.cancelButtonProps,
+          chooseButtonProps = _this$props5.chooseButtonProps,
+          chooseButtonText = _this$props5.chooseButtonText,
+          className = _this$props5.className,
+          contentExplorerMode = _this$props5.contentExplorerMode,
+          customInput = _this$props5.customInput,
+          hasFolderTreeBreadcrumbs = _this$props5.hasFolderTreeBreadcrumbs,
+          headerActionsAccessory = _this$props5.headerActionsAccessory,
+          onChooseItems = _this$props5.onChooseItems,
+          onMoveItem = _this$props5.onMoveItem,
+          onCopyItem = _this$props5.onCopyItem,
+          onCancelButtonClick = _this$props5.onCancelButtonClick,
+          onCreateNewFolderButtonClick = _this$props5.onCreateNewFolderButtonClick,
+          onSelectedClick = _this$props5.onSelectedClick,
+          onViewSelectedClick = _this$props5.onViewSelectedClick,
+          showCreateNewFolderButton = _this$props5.showCreateNewFolderButton,
+          isChooseButtonLoading = _this$props5.isChooseButtonLoading,
+          isCopyButtonLoading = _this$props5.isCopyButtonLoading,
+          isCreateNewFolderAllowed = _this$props5.isCreateNewFolderAllowed,
+          isMoveButtonLoading = _this$props5.isMoveButtonLoading,
+          _this$props5$isRespon = _this$props5.isResponsive,
+          isResponsive = _this$props5$isRespon === void 0 ? false : _this$props5$isRespon,
+          isSelectAllAllowed = _this$props5.isSelectAllAllowed,
+          items = _this$props5.items,
+          numItemsPerPage = _this$props5.numItemsPerPage,
+          numTotalItems = _this$props5.numTotalItems,
+          onLoadMoreItems = _this$props5.onLoadMoreItems,
+          includeSubfoldersProps = _this$props5.includeSubfoldersProps,
+          itemIconRenderer = _this$props5.itemIconRenderer,
+          itemNameLinkRenderer = _this$props5.itemNameLinkRenderer,
+          itemButtonRenderer = _this$props5.itemButtonRenderer,
+          itemRowHeight = _this$props5.itemRowHeight,
+          itemRowRenderer = _this$props5.itemRowRenderer,
+          listHeaderHeight = _this$props5.listHeaderHeight,
+          listHeaderRenderer = _this$props5.listHeaderRenderer,
+          listWidth = _this$props5.listWidth,
+          listHeight = _this$props5.listHeight,
+          searchInputProps = _this$props5.searchInputProps,
+          rest = _objectWithoutProperties(_this$props5, ["actionButtonsProps", "additionalColumns", "isNoSelectionAllowed", "breadcrumbProps", "cancelButtonProps", "chooseButtonProps", "chooseButtonText", "className", "contentExplorerMode", "customInput", "hasFolderTreeBreadcrumbs", "headerActionsAccessory", "onChooseItems", "onMoveItem", "onCopyItem", "onCancelButtonClick", "onCreateNewFolderButtonClick", "onSelectedClick", "onViewSelectedClick", "showCreateNewFolderButton", "isChooseButtonLoading", "isCopyButtonLoading", "isCreateNewFolderAllowed", "isMoveButtonLoading", "isResponsive", "isSelectAllAllowed", "items", "numItemsPerPage", "numTotalItems", "onLoadMoreItems", "includeSubfoldersProps", "itemIconRenderer", "itemNameLinkRenderer", "itemButtonRenderer", "itemRowHeight", "itemRowRenderer", "listHeaderHeight", "listHeaderRenderer", "listWidth", "listHeight", "searchInputProps"]);
 
       var _this$state2 = this.state,
           isInSearchMode = _this$state2.isInSearchMode,
@@ -420,16 +453,18 @@ function (_Component) {
           isSelectAllChecked = _this$state2.isSelectAllChecked;
       var isViewingSearchResults = isInSearchMode && foldersPath.length === 1;
       var currentFolder = this.getCurrentFolder();
-      var contentExplorerProps = omit(rest, ['initialFoldersPath', 'onEnterFolder', 'onSelectItem', 'onSearchSubmit', 'onExitSearch']);
+      var contentExplorerProps = omit(rest, ['initialFoldersPath', 'onEnterFolder', 'onSelectItem', 'onSearchSubmit', 'onExitSearch', 'initialSelectedItems', 'onFoldersPathUpdate', 'onSelectedItemsUpdate']);
+      var canIncludeSubfolders = !!includeSubfoldersProps;
+      var hasSubheader = canIncludeSubfolders || isSelectAllAllowed;
       var selectedItemsIds = Object.keys(selectedItems);
       var areActionButtonsDisabled; // NOTE: it almost feels like this whole section should be inside the
       // ContentExplorerActionButtons instead. There's a lot of implicit knowledge
       // of what the action buttons are and what they should be doing.
 
       if (contentExplorerMode === ContentExplorerModes.MULTI_SELECT) {
-        // NOTE:o nly expecting to have 1 (choose) button so as long as something
+        // NOTE: only expecting to have 1 (choose) button so as long as something
         // is selected and that item's isActionDisabled is false, we enable the action button
-        areActionButtonsDisabled = selectedItemsIds.length === 0 || selectedItemsIds.length === 1 && selectedItems[selectedItemsIds[0]].isActionDisabled;
+        areActionButtonsDisabled = selectedItemsIds.length === 0 && !isNoSelectionAllowed || selectedItemsIds.length === 1 && selectedItems[selectedItemsIds[0]].isActionDisabled;
       } else if (isViewingSearchResults || contentExplorerMode === ContentExplorerModes.SELECT_FILE) {
         // Buttons are only enabled when an item is selected
         // When viewing search results, there is no "current folder"
@@ -455,20 +490,28 @@ function (_Component) {
           contentExplorerMode: contentExplorerMode,
           customInput: customInput,
           foldersPath: foldersPath,
+          hasFolderTreeBreadcrumbs: hasFolderTreeBreadcrumbs,
           isCreateNewFolderAllowed: isCreateNewFolderAllowed,
           onCreateNewFolderButtonClick: onCreateNewFolderButtonClick,
           onFoldersPathUpdated: this.handleFoldersPathUpdated,
           onEnterFolder: this.enterFolder,
           onExitSearch: this.handleExitSearch,
           onSearchSubmit: this.handleSearchSubmit,
+          numTotalItems: numTotalItems,
           searchInputProps: searchInputProps,
           showCreateNewFolderButton: showCreateNewFolderButton
-        }, headerActionsAccessory), isSelectAllAllowed && React.createElement(ContentExplorerSelectAll, {
-          numTotalItems: numTotalItems,
+        }, headerActionsAccessory), hasSubheader && React.createElement("div", {
+          className: "bdl-ContentExplorer-subheader"
+        }, canIncludeSubfolders && React.createElement(ContentExplorerIncludeSubfolders, includeSubfoldersProps), isSelectAllAllowed && React.createElement(ContentExplorerSelectAll, {
+          handleSelectAllClick: this.handleSelectAllClick,
+          isLabelHidden: canIncludeSubfolders,
           isSelectAllChecked: isSelectAllChecked,
-          handleSelectAllClick: this.handleSelectAllClick
-        }), React.createElement(ItemList, {
+          numTotalItems: numTotalItems
+        })), React.createElement(ItemList, {
+          additionalColumns: additionalColumns,
           contentExplorerMode: contentExplorerMode,
+          headerHeight: listHeaderHeight,
+          headerRenderer: listHeaderRenderer,
           height: listHeight,
           isResponsive: isResponsive,
           itemButtonRenderer: itemButtonRenderer,
@@ -483,12 +526,14 @@ function (_Component) {
           onItemDoubleClick: this.handleItemDoubleClick,
           onItemNameClick: this.handleItemNameClick,
           onLoadMoreItems: onLoadMoreItems,
+          rowHeight: itemRowHeight,
           selectedItems: selectedItems,
           width: listWidth
         }), React.createElement(ContentExplorerActionButtons, {
           actionButtonsProps: actionButtonsProps,
           areButtonsDisabled: areActionButtonsDisabled,
           cancelButtonProps: cancelButtonProps,
+          canIncludeSubfolders: canIncludeSubfolders,
           chooseButtonProps: chooseButtonProps,
           chooseButtonText: chooseButtonText,
           contentExplorerMode: contentExplorerMode,
@@ -497,12 +542,16 @@ function (_Component) {
           isCopyButtonLoading: isCopyButtonLoading,
           isMoveButtonLoading: isMoveButtonLoading,
           isResponsive: isResponsive,
+          isSelectAllAllowed: isSelectAllAllowed,
           onCancelClick: onCancelButtonClick,
           onChooseClick: onChooseItems,
           onCopyClick: onCopyItem,
+          onFoldersPathUpdated: this.handleFoldersPathUpdated,
           onSelectedClick: onSelectedClick,
           onMoveClick: onMoveItem,
-          selectedItems: selectedItems
+          onViewSelectedClick: onViewSelectedClick,
+          selectedItems: selectedItems,
+          isNoSelectionAllowed: isNoSelectionAllowed
         }))
       );
     }
@@ -515,6 +564,15 @@ _defineProperty(ContentExplorer, "propTypes", {
   /** Props for the action buttons container */
   actionButtonsProps: PropTypes.object,
 
+  /**
+   * Extra columns displayed in the folders table after folder name column
+   * Each column has to be a Column element
+   */
+  additionalColumns: PropTypes.arrayOf(PropTypes.element),
+
+  /**  Allow users to choose no selections in MULTI_SELECT mode, defaults to false  */
+  isNoSelectionAllowed: PropTypes.bool,
+
   /** Props for breadcrumbs */
   breadcrumbProps: PropTypes.object,
 
@@ -536,9 +594,15 @@ _defineProperty(ContentExplorer, "propTypes", {
   /** Props that contains the custom search input. Is rendered in header actions */
   customInput: PropTypes.func,
 
+  /** Whether the user can see the breadcrumbs represented with the folder tree button */
+  hasFolderTreeBreadcrumbs: PropTypes.bool,
+
   /** Any extra items in the header to the right of the search input (and new folder button) */
   headerActionsAccessory: PropTypes.node,
 
+  /** Props for the include subfolders toggle */
+  includeSubfoldersProps: PropTypes.object,
+
   /** Initial path of folders. The last folder in the array is the current folder. */
   initialFoldersPath: FoldersPathPropType.isRequired,
 
@@ -556,6 +620,18 @@ _defineProperty(ContentExplorer, "propTypes", {
    */
   onEnterFolder: PropTypes.func.isRequired,
 
+  /** Called when the folders path is updated
+   *
+   * @param {Array} newFoldersPath
+   */
+  onFoldersPathUpdate: PropTypes.func,
+
+  /** Called whenever the selected items list changes
+   *
+   * @param {Object} selectedItems
+   */
+  onSelectedItemsUpdate: PropTypes.func,
+
   /**
    * Called when an item is selected
    *
@@ -574,6 +650,9 @@ _defineProperty(ContentExplorer, "propTypes", {
   /** Called when selected button is clicked */
   onSelectedClick: PropTypes.func,
 
+  /** Called when the number of items selected text is clicked */
+  onViewSelectedClick: PropTypes.func,
+
   /**
    * Called when a destination folder has been selected for moving an item to
    *
@@ -647,9 +726,18 @@ _defineProperty(ContentExplorer, "propTypes", {
   /** Used to render item buttons in the list. Overrides the default buttons. */
   itemButtonRenderer: PropTypes.func,
 
+  /** Height of an item row */
+  itemRowHeight: PropTypes.number,
+
   /** Used to render the row element for items on the list. Allows row customizations such as adding tooltips, etc. */
   itemRowRenderer: PropTypes.func,
 
+  /** Height of the item list header, defaults to 0, which makes header not visible */
+  listHeaderHeight: PropTypes.number,
+
+  /** Used to render the header row on the item list */
+  listHeaderRenderer: PropTypes.func,
+
   /** Width of the item list */
   listWidth: PropTypes.number.isRequired,