@bigbinary/neeto-folders-frontend 1.1.0 → 1.2.0

package/dist/cjs/hooks.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var useFolderActions = require('../useFolderActions-DCs7hXdW.js');
+var useFolderActions = require('../useFolderActions-BaDwQAdE.js');
 require('@babel/runtime/helpers/defineProperty');
 require('i18next');
 require('@bigbinary/neeto-cist');

package/dist/components.js

@@ -7,21 +7,23 @@ import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import Alert from '@bigbinary/neetoui/Alert';
 import { useTranslation, Trans } from 'react-i18next';
 import { useHistory, Link, NavLink } from 'react-router-dom';
-import { c as useFolderStore, d as useDestroyFolder, a as useFolders, i as isActiveFolder, e as useFetchFolders, f as useCreateFolder, g as useUpdateFolder, h as useReorderFolders, D as DEFAULT_CONFIG, u as useFolder, b as useFolderActions, j as getActiveFolderId } from './useFolderActions-AZ7a_96r.js';
+import { c as useFolderStore, d as useDestroyFolder, a as useFolders, i as isActiveFolder, e as useFetchFolders, f as useCreateFolder, g as useUpdateFolder, h as getActiveFolderId, j as useReorderFolders, D as DEFAULT_CONFIG, u as useFolder, b as useFolderActions } from './useFolderActions-BoLQ9bAf.js';
 import { p as pathToFolder, t as treeToMap, m as measureDepth, a as mapToTree } from './pathUtils-B2uokQlx.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Pane from '@bigbinary/neetoui/Pane';
-import { useMemo, forwardRef, createElement, useState, useEffect, startTransition } from 'react';
-import { Formik, Form } from 'formik';
+import { forwardRef, useMemo, createElement, useState, useEffect, startTransition } from 'react';
+import { useField, Formik, Form } from 'formik';
 import Typography from '@bigbinary/neetoui/Typography';
 import Input from '@bigbinary/neetoui/formik/Input';
-import Select from '@bigbinary/neetoui/formik/Select';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
-import { pipe, values, prop, isEmpty, assoc } from 'ramda';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import Button from '@bigbinary/neetoui/Button';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { ConfigProvider, TreeSelect as TreeSelect$1 } from 'antd';
 import classNames from 'classnames';
+import Down from '@bigbinary/neeto-icons/Down';
+import Label from '@bigbinary/neetoui/Label';
+import { values, isEmpty, assoc, pick } from 'ramda';
+import Button from '@bigbinary/neetoui/Button';
 import { noop, isNotPresent } from '@bigbinary/neeto-cist';
 import Radio from '@bigbinary/neetoui/Radio';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
@@ -37,8 +39,8 @@ import '@tanstack/react-query';
 import './constants.js';
 import 'zustand';
 
-function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FoldersAlerts = function FoldersAlerts(_ref) {
   var config = _ref.config;
   var _useFolderStore = useFolderStore(function (store) {
@@ -101,7 +103,7 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
             }
             return _context.abrupt("return");
           case 9:
-            history.replace(buildUrl(config.folderPath, _objectSpread$9(_objectSpread$9({}, queryParams), {}, {
+            history.replace(buildUrl(config.folderPath, _objectSpread$a(_objectSpread$a({}, queryParams), {}, {
               folderId: parent.sid
             })));
           case 10:
@@ -123,13 +125,125 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
     if (config.customizeAlerts) config.customizeAlerts(type, item, alertProps);
     alertProps.onSubmit = onConfirmDelete;
   }
-  return /*#__PURE__*/jsx(Alert, _objectSpread$9({}, alertProps));
+  return /*#__PURE__*/jsx(Alert, _objectSpread$a({}, alertProps));
+};
+
+var _excluded$4 = ["className", "disabled", "fieldNames", "label", "loading", "name", "placeholder", "required", "showSearch", "size", "treeData"];
+function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TreeSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _fieldNames$label;
+  var className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    fieldNames = _ref.fieldNames,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    name = _ref.name,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showSearch = _ref.showSearch,
+    showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "middle" : _ref$size,
+    treeData = _ref.treeData,
+    otherProps = _objectWithoutProperties(_ref, _excluded$4);
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3),
+    field = _useField2[0],
+    meta = _useField2[1],
+    _useField2$ = _useField2[2],
+    setValue = _useField2$.setValue,
+    setTouched = _useField2$.setTouched;
+  var hasLeafNodes = treeData === null || treeData === void 0 ? void 0 : treeData.some(function (node) {
+    return (node === null || node === void 0 ? void 0 : node.pId) !== null;
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-ui-input__wrapper",
+    children: [label && /*#__PURE__*/jsx(Label, {
+      required: required,
+      children: label
+    }), /*#__PURE__*/jsx(ConfigProvider, {
+      theme: {
+        components: {
+          TreeSelect: {
+            titleHeight: 28
+          }
+        }
+      },
+      children: /*#__PURE__*/jsx(TreeSelect$1, _objectSpread$9(_objectSpread$9({
+        treeDataSimpleMode: true,
+        "data-cy": "nui-select-container-wrapper",
+        dropdownStyle: {
+          zIndex: 100000
+        },
+        name: field.name,
+        popupClassName: "neeto-ui-tree-select-dropdown",
+        suffixIcon: /*#__PURE__*/jsx(Down, {}),
+        treeNodeFilterProp: (_fieldNames$label = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) !== null && _fieldNames$label !== void 0 ? _fieldNames$label : "title",
+        value: field.value || undefined,
+        className: classNames("neeto-ui-tree-select__wrapper", className, {
+          "neeto-ui-tree-select__error": meta.error
+        }),
+        switcherIcon: function switcherIcon(props) {
+          return /*#__PURE__*/jsx("div", _objectSpread$9(_objectSpread$9({}, props), {}, {
+            children: /*#__PURE__*/jsx(Down, {})
+          }));
+        },
+        onBlur: function onBlur() {
+          return setTouched(true);
+        },
+        onChange: function onChange(value) {
+          return setValue(value);
+        }
+      }, _objectSpread$9({
+        disabled: disabled,
+        fieldNames: fieldNames,
+        loading: loading,
+        placeholder: placeholder,
+        ref: ref,
+        showSearch: showSearch,
+        size: size,
+        treeData: treeData
+      }, otherProps)), {}, {
+        dropdownRender: function dropdownRender(menu) {
+          return hasLeafNodes ? menu : /*#__PURE__*/jsx("div", {
+            className: "-mx-5 -ml-6",
+            children: menu
+          });
+        }
+      }))
+    }), meta.error && /*#__PURE__*/jsx("p", {
+      className: "neeto-ui-input__error",
+      children: meta.error
+    })]
+  });
+});
+TreeSelect.displayName = "TreeSelect";
+
+var createFolderOptions = function createFolderOptions(foldersMap, config) {
+  return values(foldersMap).map(function (folder) {
+    var _folder$meta$parent;
+    return {
+      id: folder.id,
+      title: folder.name,
+      value: folder.id,
+      pId: (_folder$meta$parent = folder.meta.parent) === null || _folder$meta$parent === void 0 ? void 0 : _folder$meta$parent.id,
+      disabled: folder.meta.depth >= config.maxDepth
+    };
+  });
 };
 
-var flattenTree = pipe(treeToMap, values);
 var AddEditPane = function AddEditPane(_ref) {
-  var config = _ref.config,
+  var setFocusField = _ref.setFocusField,
+    config = _ref.config,
     onClose = _ref.onClose;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useFolderStore = useFolderStore(function (store) {
       var _store$paneState, _store$paneState2;
       return {
@@ -145,16 +259,23 @@ var AddEditPane = function AddEditPane(_ref) {
     createFolder = _useCreateFolder.mutate;
   var _useUpdateFolder = useUpdateFolder(config),
     updateFolder = _useUpdateFolder.mutateAsync;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   var isEditing = type === "edit" && item;
-  var initialValues = isEditing ? item : {
-    name: "",
-    parentId: null
-  };
-  var folderOptions = useMemo(function () {
-    return flattenTree(folders);
+  var foldersMap = useMemo(function () {
+    return treeToMap(folders, "sid");
   }, [folders]);
+  var folderOptions = useMemo(function () {
+    return createFolderOptions(foldersMap, config);
+  }, [foldersMap]);
+  var activeFolderSid = getActiveFolderId(config);
+  var activeFolder = foldersMap[activeFolderSid];
+  var isValidParent = (activeFolder === null || activeFolder === void 0 ? void 0 : activeFolder.meta.depth) < config.maxDepth;
+  var parentId = isValidParent ? activeFolder.id : null;
+  var initialValues = useMemo(function () {
+    return isEditing ? item : {
+      name: "",
+      parentId: parentId
+    };
+  }, [isEditing, item, parentId]);
   var onSubmitForm = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
       var payload;
@@ -200,31 +321,24 @@ var AddEditPane = function AddEditPane(_ref) {
       })
     }), /*#__PURE__*/jsx(Formik, {
       initialValues: initialValues,
+      enableReinitialize: true,
       onSubmit: onSubmitForm,
-      children: function children(_ref3) {
-        var setFieldValue = _ref3.setFieldValue;
+      children: function children() {
         return /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(Pane.Body, {
             children: /*#__PURE__*/jsxs(Form, {
               className: "w-full space-y-5",
               children: [/*#__PURE__*/jsx(Input, {
                 label: t("folders.name"),
-                name: "name"
+                name: "name",
+                ref: setFocusField
               }), /*#__PURE__*/jsxs("div", {
-                children: [/*#__PURE__*/jsx(Select, {
-                  isClearable: true,
-                  filterOption: function filterOption(_ref4) {
-                    var value = _ref4.value;
-                    return value !== initialValues.id;
-                  },
-                  getOptionLabel: prop("name"),
-                  getOptionValue: prop("id"),
+                children: [/*#__PURE__*/jsx(TreeSelect, {
+                  allowClear: true,
+                  showSearch: true,
                   label: t("createFolder.parentTitle"),
                   name: "parentId",
-                  options: folderOptions,
-                  onChange: function onChange(option) {
-                    return setFieldValue("parentId", option ? option.id : null);
-                  }
+                  treeData: folderOptions
                 }), /*#__PURE__*/jsx(Typography, {
                   style: "nano",
                   children: t("createFolder.parentInfo")
@@ -672,10 +786,17 @@ var FoldersPane = function FoldersPane(_ref) {
     config: config,
     onClose: onClose
   };
-  return /*#__PURE__*/jsxs(Pane, {
+  return /*#__PURE__*/jsx(Pane, {
     onClose: onClose,
     isOpen: !!type,
-    children: [(type === "edit" || type === "add") && /*#__PURE__*/jsx(AddEditPane, _objectSpread$3({}, commonProps)), type === "move" && /*#__PURE__*/jsx(MoveFolderPane, _objectSpread$3({}, commonProps)), type === "reorder" && /*#__PURE__*/jsx(ReorderFoldersPane, _objectSpread$3({}, commonProps))]
+    children: function children(_ref2) {
+      var setFocusField = _ref2.setFocusField;
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [(type === "edit" || type === "add") && /*#__PURE__*/jsx(AddEditPane, _objectSpread$3({}, _objectSpread$3({
+          setFocusField: setFocusField
+        }, commonProps))), type === "move" && /*#__PURE__*/jsx(MoveFolderPane, _objectSpread$3({}, commonProps)), type === "reorder" && /*#__PURE__*/jsx(ReorderFoldersPane, _objectSpread$3({}, commonProps))]
+      });
+    }
   });
 };
 
@@ -777,12 +898,13 @@ var FoldersList = function FoldersList(_ref) {
     configProps = _ref.config,
     onSelect = _ref.onSelect;
   var config = _objectSpread$2(_objectSpread$2({}, DEFAULT_CONFIG), configProps);
-  var params = useQueryParams({
-    toCamelCase: false
-  });
+  var params = useQueryParams();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useFolders = useFolders(config),
+  var fetchParams = pick(["sortBy", "orderBy"], params);
+  var _useFolders = useFolders(_objectSpread$2(_objectSpread$2({}, config), {}, {
+      params: fetchParams
+    })),
     folders = _useFolders.folders;
   var _useFolder = useFolder(config),
     folderId = _useFolder.folderId,