@carbon/ibm-products 2.0.0-rc.7 → 2.0.0-rc.9

package/es/components/Datagrid/utils/DatagridActions.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /**
  * Copyright IBM Corp. 2020, 2022
@@ -6,9 +6,9 @@ import _extends from "@babel/runtime/helpers/extends";
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
-import { DataTable, Button } from '@carbon/react';
-import { Download, Filter, Add, Restart } from '@carbon/react/icons';
+import React, { useLayoutEffect, useState } from 'react';
+import { DataTable, Button, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalHeader, ModalFooter, Dropdown } from '@carbon/react';
+import { Download, Filter, Add, Restart, ChevronDown } from '@carbon/react/icons';
 import { action } from '@storybook/addon-actions';
 import { pkg } from '../../../settings';
 import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
@@ -39,23 +39,42 @@ export var DatagridActions = function DatagridActions(datagridState) {
   var searchForAColumn = 'Search';
   var isNothingSelected = selectedFlatRows.length === 0;
   var style = {
-    'button:nth-child(1) > span:nth-child(1)': {
+    'button:nthChild(1) > span:nthChild(1)': {
       bottom: '-37px'
     }
   };
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      modalOpen = _useState2[0],
+      setModalOpen = _useState2[1];
+
+  var _useState3 = useState(window.innerWidth),
+      _useState4 = _slicedToArray(_useState3, 2),
+      size = _useState4[0],
+      setSize = _useState4[1];
+
+  useLayoutEffect(function () {
+    function updateSize() {
+      setSize(window.innerWidth);
+    }
+
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
+  var mobileToolbar = size < 672 ? true : false;
+  var items = ['Option 1', 'Option 2', 'Option 3'];
   return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/React.createElement(TableToolbarContent, {
     size: "sm"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !mobileToolbar ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: style
   }, /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Download, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: Download,
     iconDescription: 'Download CSV',
     onClick: downloadCsv
   })), /*#__PURE__*/React.createElement("div", {
@@ -64,11 +83,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Filter, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: Filter,
     iconDescription: 'Left panel',
     onClick: leftPanelClick
   })), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
@@ -76,30 +91,49 @@ export var DatagridActions = function DatagridActions(datagridState) {
     className: "".concat(blockClass, "__toolbar-divider")
   }, /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Add, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: Add,
     iconDescription: 'Action'
   }, "Ghost button")), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
     style: style
-  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null))) : /*#__PURE__*/React.createElement(OverflowMenu, {
+    ariaLabel: "Tools",
+    size: "md",
+    flipped: true
+  }, /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Filter",
+    hasDivider: true,
+    requireTitle: true,
+    onClick: function onClick() {
+      return setModalOpen(true);
+    }
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Export",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Settings",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Import items",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Create",
+    hasDivider: true,
+    requireTitle: true
+  }))) : !mobileToolbar ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Filter, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: Filter,
     iconDescription: 'Left panel',
     onClick: leftPanelClick
   }), /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
-    size: "lg",
+    size: "xl",
     id: "columnSearch",
     persistent: true,
-    placeholder: searchForAColumn,
+    placeHolderText: searchForAColumn,
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
@@ -109,11 +143,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Restart, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: Restart,
     iconDescription: 'Refresh',
     onClick: refreshColumns
   })), /*#__PURE__*/React.createElement("div", {
@@ -122,23 +152,14 @@ export var DatagridActions = function DatagridActions(datagridState) {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Download, _extends({
-        size: 16
-      }, props));
-    },
+    renderIcon: Download,
     iconDescription: 'Download CSV',
     onClick: downloadCsv
   })), CustomizeColumnsButton && /*#__PURE__*/React.createElement("div", {
     style: style
   }, /*#__PURE__*/React.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/React.createElement(ButtonMenu, {
-    menuAriaLabel: "Primary action button menu",
     label: "Primary button",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Add, _extends({
-        size: 16
-      }, props));
-    }
+    renderIcon: Add
   }, /*#__PURE__*/React.createElement(ButtonMenuItem, {
     itemText: "Option 1",
     onClick: action("Click on ButtonMenu Option 1")
@@ -148,5 +169,68 @@ export var DatagridActions = function DatagridActions(datagridState) {
   }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
     itemText: "Option 3",
     onClick: action("Click on ButtonMenu Option 3")
-  })))));
+  })))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
+    size: "xl",
+    id: "columnSearch",
+    persistent: true,
+    placeHolderText: searchForAColumn,
+    onChange: function onChange(e) {
+      return setGlobalFilter(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(OverflowMenu, {
+    ariaLabel: "Tools",
+    size: "lg",
+    flipped: true,
+    renderIcon: ChevronDown,
+    className: "".concat(blockClass, "__toolbar-menu__trigger"),
+    menuOptionsClass: "".concat(blockClass, "__toolbar-options")
+  }, /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Filter",
+    hasDivider: true,
+    requireTitle: true,
+    onClick: function onClick() {
+      return setModalOpen(true);
+    }
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Export",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Settings",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Import items",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: "Create",
+    hasDivider: true,
+    requireTitle: true
+  })), modalOpen && /*#__PURE__*/React.createElement(ComposedModal, {
+    size: "lg",
+    open: modalOpen && modalOpen,
+    onClose: function onClose() {
+      return setModalOpen(false);
+    },
+    className: "".concat(blockClass, "__mobile-toolbar-modal")
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement("h4", null, "Filters")), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter1"
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter2"
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter3"
+  })), /*#__PURE__*/React.createElement(ModalFooter, {
+    primaryButtonText: "Apply",
+    secondaryButtonText: "Cancel"
+  }))));
 };