@bigbinary/neeto-folders-frontend 2.0.20 → 2.0.21

package/README.md

@@ -153,7 +153,9 @@ certain properties such as params as necessary.
     destroy: noop,
     bulkUpdate: noop,
     bulkDestroy: noop,
-  }
+  },
+  folderActions: { getMoreActions: (node) => [...], getAddActions: (node) => [...] },
+  itemActions: { getMoreActions: (node) => [...], getAddActions: (node) => [...] }
 }
 ```
 

package/dist/cjs/components.js

@@ -9,7 +9,7 @@ var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
 var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
 var reactRouterDom = require('react-router-dom');
-var useFolderActions = require('../useFolderActions-bZjr1L8D.js');
+var useFolderActions = require('../useFolderActions-DDxiCAwt.js');
 var constants = require('./constants.js');
 var utils = require('../index-Bkom-uV7.js');
 var internal = require('../internal-xADvDa75.js');
@@ -43,6 +43,7 @@ var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var Tree = require('@bigbinary/neetoui/Tree');
 var Lock = require('@bigbinary/neeto-icons/Lock');
+var Plus = require('@bigbinary/neeto-icons/Plus');
 var antd = require('antd');
 var formik = require('formik');
 var Down = require('@bigbinary/neeto-icons/Down');
@@ -364,7 +365,7 @@ var REORDER_TREE_INDENT_WIDTH = 30;
 var _excluded$5 = ["icon", "itemLabel", "folder", "folderLabel", "depth", "className", "onClick"];
 function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Node = function Node(_ref, ref) {
+var Node$1 = function Node(_ref, ref) {
   var _folder$children$leng, _folder$children;
   var _ref$icon = _ref.icon,
     icon = _ref$icon === void 0 ? null : _ref$icon,
@@ -415,7 +416,7 @@ var Node = function Node(_ref, ref) {
     }))]
   });
 };
-var Node$1 = /*#__PURE__*/React.forwardRef(Node);
+var Node$2 = /*#__PURE__*/React.forwardRef(Node$1);
 
 var _excluded$4 = ["folder", "item", "depth", "maxDepth", "disabled", "config"];
 function ownKeys$b(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; }
@@ -458,7 +459,7 @@ var _SelectableNode = function SelectableNode(_ref) {
       "opacity-60": isDisabled
     }),
     title: isDisabled ? t("moveToFolder.notAllowed") : undefined,
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$b(_objectSpread$b({}, _objectSpread$b(_objectSpread$b({}, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$b(_objectSpread$b({}, _objectSpread$b(_objectSpread$b({}, rest), {}, {
       depth: depth,
       folder: folder,
       folderLabel: folderLabel,
@@ -688,7 +689,7 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
     });
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$9(_objectSpread$9(_objectSpread$9({}, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$9(_objectSpread$9(_objectSpread$9({}, rest), {}, {
       className: classNames({
         "neeto-ui-rounded-lg hover:neeto-ui-bg-gray-100 w-full min-w-0 cursor-move transition-colors": true,
         "neeto-ui-bg-gray-100 opacity-50": isDragging,
@@ -839,7 +840,7 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
         })]
       }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
         zIndex: 99999,
-        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$8(_objectSpread$8({}, nodeProps), {}, {
+        children: dragItem && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$8(_objectSpread$8({}, nodeProps), {}, {
           className: "neeto-ui-bg-gray-200",
           depth: 0,
           folder: dragItem,
@@ -994,7 +995,7 @@ var _DraggableNode = function DraggableNode(_ref) {
     }, "".concat(folder.id, "--container"));
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$7(_objectSpread$7({
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$7(_objectSpread$7({
       depth: folder.meta.depth
     }, _objectSpread$7(_objectSpread$7(_objectSpread$7(_objectSpread$7({}, rest), {}, {
       folder: folder
@@ -1182,7 +1183,7 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
         })]
       }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(core.DragOverlay, {
         zIndex: 99999,
-        children: dragState && /*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
+        children: dragState && /*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$6(_objectSpread$6({}, nodeProps), {}, {
           className: "neeto-ui-bg-gray-200 pl-4 pr-12",
           depth: 0,
           folder: dragState.activeItem,
@@ -1386,14 +1387,27 @@ var MoveToFolderPane = function MoveToFolderPane(_ref) {
   });
 };
 
-var FolderNode = function FolderNode(_ref) {
+var Node = function Node(_ref) {
   var _isActive = _ref.isActive,
-    folder = _ref.folder,
-    link = _ref.link;
+    node = _ref.node,
+    link = _ref.link,
+    config = _ref.config;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var isPrivate = folder.isPrivate,
-    name = folder.name;
+  var isPrivate = node.isPrivate,
+    name = node.name,
+    _node$isFolder = node.isFolder,
+    isFolder = _node$isFolder === void 0 ? true : _node$isFolder;
+  var _ref2 = isFolder ? config.folderActions : config.itemActions,
+    _ref2$getMoreActions = _ref2.getMoreActions,
+    getMoreActions = _ref2$getMoreActions === void 0 ? neetoCist.noop : _ref2$getMoreActions,
+    _ref2$getAddActions = _ref2.getAddActions,
+    getAddActions = _ref2$getAddActions === void 0 ? neetoCist.noop : _ref2$getAddActions;
+  var moreActions = getMoreActions(node) || [];
+  var addActions = getAddActions(node) || [];
+  var hasMoreActions = neetoCist.isNotEmpty(moreActions);
+  var hasAddActions = neetoCist.isNotEmpty(addActions);
+  var hasAnyActions = hasMoreActions || hasAddActions;
   return /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.NavLink, {
     activeClassName: "active",
     className: "neeto-sidebar-folders-tree__folder-node",
@@ -1402,20 +1416,48 @@ var FolderNode = function FolderNode(_ref) {
     },
     to: link,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex items-center",
-      "data-cy": "".concat(neetoCist.hyphenate(name), "-folder-sublink"),
-      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-        className: "line-clamp-1 block truncate",
-        component: "span",
-        style: "body2",
-        title: name,
-        children: name
-      }), isPrivate && /*#__PURE__*/jsxRuntime.jsx("span", {
-        title: t("common.private"),
-        children: /*#__PURE__*/jsxRuntime.jsx(Lock, {
-          className: "flex-shrink-0",
-          size: 20
-        })
+      className: "flex items-center justify-between w-full group",
+      "data-cy": "".concat(neetoCist.hyphenate(name), "-").concat(isFolder ? "folder" : "item", "-sublink"),
+      title: "",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center min-w-0 flex-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+          className: "line-clamp-1 block truncate",
+          component: "span",
+          style: "body2",
+          title: name,
+          children: name
+        }), isPrivate && /*#__PURE__*/jsxRuntime.jsx("span", {
+          title: t("common.private"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Lock, {
+            className: "flex-shrink-0 ml-1",
+            size: 16
+          })
+        })]
+      }), hasAnyActions && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity",
+        onClick: function onClick(e) {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        children: [hasAddActions && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+          dropdownProps: {
+            icon: Plus
+          },
+          menuItems: addActions,
+          dropdownButtonProps: {
+            size: "small",
+            tooltipProps: {
+              content: "Add",
+              position: "top"
+            }
+          }
+        }), hasMoreActions && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+          dropdownButtonProps: {
+            size: "small"
+          },
+          menuItems: moreActions
+        })]
       })]
     })
   });
@@ -1541,8 +1583,9 @@ var FoldersTree = function FoldersTree(_ref) {
     },
     selectedKeys: [activeFolderSid],
     titleRender: function titleRender(node) {
-      return /*#__PURE__*/jsxRuntime.jsx(FolderNode, {
-        folder: node,
+      return /*#__PURE__*/jsxRuntime.jsx(Node, {
+        config: config,
+        node: node,
         isActive: node.sid === activeFolderSid,
         link: node.link || utils$1.buildUrl(config.folderPath, _objectSpread$1(_objectSpread$1({}, params), {}, {
           folderId: node.sid