@bigbinary/neeto-molecules 1.9.1 → 1.9.3

package/dist/CustomDomainDashboard.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import React__default, { forwardRef, useRef, useState } from 'react';
+import React__default, { forwardRef, useMemo, useRef, useState } from 'react';
 import { isNotPresent, isNotEmpty, noop, snakeToCamelCase } from '@bigbinary/neeto-cist';
 import useDebounce from '@bigbinary/neeto-commons-frontend/react-utils/useDebounce';
 import { Typography, Button, Alert, Dropdown as Dropdown$1, Tooltip, Tag, Callout, Input, Pane, Label, Table, NoData } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
 import classnames from 'classnames';
-import { not, mergeRight } from 'ramda';
+import { pluck, not, mergeRight } from 'ramda';
 import { Column, Download, Filter, MenuHorizontal, MenuVertical, Info, Check } from '@bigbinary/neeto-icons';
-import ManageColumns from '@bigbinary/neeto-molecules/Columns';
+import ManageColumns, { useHiddenColumns } from '@bigbinary/neeto-molecules/Columns';
 import { Filters } from '@bigbinary/neeto-filters-frontend';
 import { PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
@@ -1452,18 +1452,48 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var _excluded$4 = ["buttonProps"];
+var _excluded$4 = ["buttonProps", "columnData", "localStorageKey", "fixedColumns"];
 function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Columns = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$buttonProps = _ref.buttonProps,
     buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
+    columnData = _ref.columnData,
+    localStorageKey = _ref.localStorageKey,
+    fixedColumns = _ref.fixedColumns,
     props = _objectWithoutProperties(_ref, _excluded$4);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var columnDataIndex = useMemo(function () {
+    return pluck("dataIndex", (columnData || []).filter(function (column) {
+      return !(fixedColumns !== null && fixedColumns !== void 0 && fixedColumns.includes(column.dataIndex));
+    }));
+  }, [columnData, fixedColumns]);
+  var _useHiddenColumns = useHiddenColumns(localStorageKey),
+    hideColumn = _useHiddenColumns.hideColumn,
+    showColumn = _useHiddenColumns.showColumn;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-molecules-subheader__columns"
   }, /*#__PURE__*/React__default.createElement(ManageColumns, _extends$1({
+    isSearchable: true,
+    className: "neeto-ui-dropdown--manage-columns",
+    actionBlock: /*#__PURE__*/React__default.createElement("div", {
+      className: "grid grid-cols-2 gap-2 px-4 py-3"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      className: "col-span-1 justify-center",
+      label: "Hide all",
+      style: "secondary",
+      onClick: function onClick() {
+        return hideColumn(columnDataIndex);
+      }
+    }), /*#__PURE__*/React__default.createElement(Button, {
+      className: "col-span-1 justify-center",
+      label: "Show all",
+      style: "secondary",
+      onClick: function onClick() {
+        return showColumn(columnDataIndex);
+      }
+    })),
     buttonProps: _objectSpread$5({
       icon: Column,
       label: null,
@@ -1474,7 +1504,10 @@ var Columns = /*#__PURE__*/forwardRef(function (_ref, ref) {
       "data-testid": "columns-button",
       "data-cy": "columns-dropdown-button"
     }, buttonProps)
-  }, _objectSpread$5(_objectSpread$5({}, props), {}, {
+  }, _objectSpread$5(_objectSpread$5({
+    columnData: columnData,
+    localStorageKey: localStorageKey
+  }, props), {}, {
     ref: ref
   }))));
 });
@@ -1542,7 +1575,7 @@ var RightBlock = function RightBlock(_ref) {
   }, downloadButtonProps && /*#__PURE__*/React__default.createElement(DownloadButton, downloadButtonProps), columnsButtonProps && /*#__PURE__*/React__default.createElement(Columns, columnsButtonProps), filterProps && /*#__PURE__*/React__default.createElement(FilterButton, filterProps));
 };
 
-var css$1 = ":root{--neeto-molecules-sub-header-height:37px;--neeto-molecules-sub-header-bottom-margin:20px}.neeto-molecules-subheader{align-items:center;background-color:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;flex-shrink:0;gap:16px;justify-content:space-between;margin-bottom:20px;margin-bottom:var(--neeto-molecules-sub-header-bottom-margin);min-height:37px;min-height:var(--neeto-molecules-sub-header-height);width:100%}@media screen and (max-width:768px){.neeto-molecules-subheader{flex-wrap:wrap}}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper{display:flex;flex-grow:1}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-molecules-subheader__left{align-items:center;display:flex;flex-direction:row;justify-content:flex-start}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-molecules-subheader__left .neeto-molecules-input__prefix{color:rgb(var(--neeto-ui-gray-400))}@media screen and (max-width:360px){.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-molecules-subheader__left h4{font-size:14px}}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-ui-btn{flex-shrink:0}.neeto-molecules-subheader .neeto-molecules-subheader__right{align-items:center;display:flex;flex-direction:row;gap:12px;justify-content:flex-end}@media screen and (max-width:768px){.neeto-molecules-subheader .neeto-molecules-subheader__right{margin-left:auto}}.neeto-molecules-subheader .neeto-molecules-subheader__right-actions{align-items:center;display:flex;flex-direction:row;gap:8px;justify-content:flex-end}.neeto-molecules-subheader .neeto-molecules-subheader__right-actions>:not([hidden])~:not([hidden]){border-left:thin solid rgb(var(--neeto-ui-gray-300));padding-left:8px}.neeto-molecules-subheader__download{position:relative}.neeto-molecules-subheader__download-count{align-items:center;background-color:rgb(var(--neeto-ui-primary-500));border-radius:var(--neeto-ui-rounded-full);color:rgb(var(--neeto-ui-white));display:inline-flex;font-size:10px;justify-content:center;min-height:16px;min-width:16px;position:absolute;right:-2px;text-align:center;top:-2px;z-index:1}.neeto-molecules-subheader__columns .neeto-ui-dropdown__popup{max-height:calc(100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height) - 57px);max-height:calc(100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height) - var(--neeto-molecules-sub-header-height) - var(--neeto-molecules-sub-header-bottom-margin))}";
+var css$1 = ":root{--neeto-molecules-sub-header-height:37px;--neeto-molecules-sub-header-bottom-margin:20px}.neeto-molecules-subheader{align-items:center;background-color:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;flex-shrink:0;gap:16px;justify-content:space-between;margin-bottom:20px;margin-bottom:var(--neeto-molecules-sub-header-bottom-margin);min-height:37px;min-height:var(--neeto-molecules-sub-header-height);width:100%}@media screen and (max-width:768px){.neeto-molecules-subheader{flex-wrap:wrap}}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper{display:flex;flex-grow:1}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-molecules-subheader__left{align-items:center;display:flex;flex-direction:row;justify-content:flex-start}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-molecules-subheader__left .neeto-molecules-input__prefix{color:rgb(var(--neeto-ui-gray-400))}@media screen and (max-width:360px){.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-molecules-subheader__left h4{font-size:14px}}.neeto-molecules-subheader .neeto-molecules-subheader__left-wrapper .neeto-ui-btn{flex-shrink:0}.neeto-molecules-subheader .neeto-molecules-subheader__right{align-items:center;display:flex;flex-direction:row;gap:12px;justify-content:flex-end}@media screen and (max-width:768px){.neeto-molecules-subheader .neeto-molecules-subheader__right{margin-left:auto}}.neeto-molecules-subheader .neeto-molecules-subheader__right-actions{align-items:center;display:flex;flex-direction:row;gap:8px;justify-content:flex-end}.neeto-molecules-subheader .neeto-molecules-subheader__right-actions>:not([hidden])~:not([hidden]){border-left:thin solid rgb(var(--neeto-ui-gray-300));padding-left:8px}.neeto-molecules-subheader__download{position:relative}.neeto-molecules-subheader__download-count{align-items:center;background-color:rgb(var(--neeto-ui-primary-500));border-radius:var(--neeto-ui-rounded-full);color:rgb(var(--neeto-ui-white));display:inline-flex;font-size:10px;justify-content:center;min-height:16px;min-width:16px;position:absolute;right:-2px;text-align:center;top:-2px;z-index:1}.neeto-molecules-subheader__columns .neeto-ui-dropdown__popup{max-height:calc(100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height) - 57px);max-height:calc(100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height) - var(--neeto-molecules-sub-header-height) - var(--neeto-molecules-sub-header-bottom-margin));min-width:320px}";
 n(css$1,{});
 
 var SubHeader = function SubHeader(_ref) {