@bigbinary/neeto-folders-frontend 2.0.49-beta1 → 2.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/javascript/src/translations/en.json +2 -0
- package/dist/.ready +1 -1
- package/dist/cjs/components.js +94 -40
- package/dist/cjs/components.js.map +1 -1
- package/dist/cjs/utils.js +1 -1
- package/dist/cjs/v2/components.js +88 -43
- package/dist/cjs/v2/components.js.map +1 -1
- package/dist/components.js +95 -41
- package/dist/components.js.map +1 -1
- package/dist/{index-BfobK2xL.js → index-BXvkr7vp.js} +2 -2
- package/dist/{index-BfobK2xL.js.map → index-BXvkr7vp.js.map} +1 -1
- package/dist/{index-BuO0HoGs.js → index-DCIRHXw_.js} +2 -1
- package/dist/{index-BuO0HoGs.js.map → index-DCIRHXw_.js.map} +1 -1
- package/dist/utils.js +1 -1
- package/dist/v2/components.js +90 -45
- package/dist/v2/components.js.map +1 -1
- package/package.json +9 -9
- package/types.d.ts +1 -0
package/dist/components.js
CHANGED
|
@@ -10,7 +10,7 @@ import { useHistory, Link, NavLink } from 'react-router-dom';
|
|
|
10
10
|
import { c as useFolderStore, d as useDestroyFolder, b as useFolders, e as useFetchFolders, f as useCreateFolder, g as useUpdateFolder, h as useReorderFolders, D as DEFAULT_CONFIG, u as useFolder, a as useFolderActions } from './useFolderActions-DCKQrv0G.js';
|
|
11
11
|
import { u as useTranslation, R as REORDER_TREE_INDENT_WIDTH, c as closestCenter, n } from './inject-css-Bkrn7lFS.js';
|
|
12
12
|
import { QUERY_KEYS } from './constants.js';
|
|
13
|
-
import { p as pathToFolder, t as treeToMap, m as measureDepth, a as mapToTree, b as mapToSortedTree } from './index-
|
|
13
|
+
import { p as pathToFolder, t as treeToMap, m as measureDepth, a as mapToTree, b as mapToSortedTree, _ as _walkTree } from './index-BXvkr7vp.js';
|
|
14
14
|
import { a as isActiveFolder, g as getActiveFolderId, t as toastApiError, i as isArray, m as mapObj } from './internal-UIifJzTd.js';
|
|
15
15
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
16
16
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
@@ -18,6 +18,7 @@ import Pane from '@bigbinary/neetoui/Pane';
|
|
|
18
18
|
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
|
|
19
19
|
import _regeneratorRuntime from '@babel/runtime/regenerator';
|
|
20
20
|
import React, { createElement, useMemo, forwardRef, useState, useEffect, useId, startTransition } from 'react';
|
|
21
|
+
import Toastr from '@bigbinary/neetoui/Toastr';
|
|
21
22
|
import Typography from '@bigbinary/neetoui/Typography';
|
|
22
23
|
import Spinner from '@bigbinary/neetoui/Spinner';
|
|
23
24
|
import Input from '@bigbinary/neetoui/formik/Input';
|
|
@@ -28,15 +29,15 @@ import { object, string } from 'yup';
|
|
|
28
29
|
import Switch from '@bigbinary/neetoui/formik/Switch';
|
|
29
30
|
import Textarea from '@bigbinary/neetoui/formik/Textarea';
|
|
30
31
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
32
|
+
import { hyphenate, isNotPresent, noop, isNotEmpty, findById } from '@bigbinary/neeto-cist';
|
|
31
33
|
import useHotkeys from '@bigbinary/neeto-hotkeys';
|
|
32
34
|
import Button from '@bigbinary/neetoui/Button';
|
|
33
|
-
import
|
|
34
|
-
import { isEmpty, assoc } from 'ramda';
|
|
35
|
+
import Callout from '@bigbinary/neetoui/Callout';
|
|
36
|
+
import { pluck, isEmpty, assoc } from 'ramda';
|
|
35
37
|
import classNames from 'classnames';
|
|
36
38
|
import Radio from '@bigbinary/neetoui/Radio';
|
|
37
39
|
import { useDraggable, useDroppable, DndContext, DragOverlay, useSensors, useSensor, PointerSensor } from '@dnd-kit/core';
|
|
38
40
|
import Reorder from '@bigbinary/neeto-icons/Reorder';
|
|
39
|
-
import Toastr from '@bigbinary/neetoui/Toastr';
|
|
40
41
|
import { createPortal } from 'react-dom';
|
|
41
42
|
import { snapCenterToCursor } from '@dnd-kit/modifiers';
|
|
42
43
|
import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
|
|
@@ -229,6 +230,7 @@ var AddEditPane = function AddEditPane(_ref) {
|
|
|
229
230
|
var response = error.response;
|
|
230
231
|
if (response && response.data && response.data.errors) {
|
|
231
232
|
setStatus(response.data.errors);
|
|
233
|
+
if (response.data.errors.base) Toastr.error(response.data.errors.base[0]);
|
|
232
234
|
}
|
|
233
235
|
};
|
|
234
236
|
var onSubmitForm = /*#__PURE__*/function () {
|
|
@@ -333,6 +335,7 @@ var AddEditPane = function AddEditPane(_ref) {
|
|
|
333
335
|
config: config,
|
|
334
336
|
allowClear: true,
|
|
335
337
|
showSearch: true,
|
|
338
|
+
excludedFolderId: isEditing ? item.id : null,
|
|
336
339
|
initialValue: folderSid,
|
|
337
340
|
label: t("createFolder.parentTitle"),
|
|
338
341
|
name: "parentId"
|
|
@@ -426,13 +429,14 @@ var Node$2 = function Node(_ref, ref) {
|
|
|
426
429
|
};
|
|
427
430
|
var Node$1 = /*#__PURE__*/forwardRef(Node$2);
|
|
428
431
|
|
|
429
|
-
var _excluded$5 = ["folder", "
|
|
432
|
+
var _excluded$5 = ["folder", "movedIds", "depth", "maxDepth", "disabled", "config"];
|
|
430
433
|
function ownKeys$h(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; }
|
|
431
434
|
function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
432
435
|
var _SelectableNode = function SelectableNode(_ref) {
|
|
433
436
|
var _folder$children$leng, _folder$children;
|
|
434
437
|
var folder = _ref.folder,
|
|
435
|
-
|
|
438
|
+
_ref$movedIds = _ref.movedIds,
|
|
439
|
+
movedIds = _ref$movedIds === void 0 ? [] : _ref$movedIds,
|
|
436
440
|
_ref$depth = _ref.depth,
|
|
437
441
|
depth = _ref$depth === void 0 ? 0 : _ref$depth,
|
|
438
442
|
maxDepth = _ref.maxDepth,
|
|
@@ -443,7 +447,11 @@ var _SelectableNode = function SelectableNode(_ref) {
|
|
|
443
447
|
onSelect = rest.onSelect;
|
|
444
448
|
var _useTranslation = useTranslation(config),
|
|
445
449
|
t = _useTranslation.t;
|
|
446
|
-
var
|
|
450
|
+
var isDepthExceeded = depth >= maxDepth;
|
|
451
|
+
var isDisabled = disabled || movedIds.includes(folder.id) || isDepthExceeded;
|
|
452
|
+
var disabledTitle = isDepthExceeded ? t("moveToFolder.depthExceeded", {
|
|
453
|
+
maxDepth: config.maxDepth
|
|
454
|
+
}) : t("moveToFolder.notAllowed");
|
|
447
455
|
var itemLabel = config.labels[folder.itemCount > 1 ? "items" : "item"];
|
|
448
456
|
var folderLabel = config.labels[((_folder$children$leng = (_folder$children = folder.children) === null || _folder$children === void 0 ? void 0 : _folder$children.length) !== null && _folder$children$leng !== void 0 ? _folder$children$leng : 0) > 1 ? "folders" : "folder"];
|
|
449
457
|
var renderChildren = function renderChildren() {
|
|
@@ -451,8 +459,8 @@ var _SelectableNode = function SelectableNode(_ref) {
|
|
|
451
459
|
return folder.children.map(function (child) {
|
|
452
460
|
return /*#__PURE__*/createElement(_SelectableNode, _objectSpread$h(_objectSpread$h({}, _objectSpread$h(_objectSpread$h({}, rest), {}, {
|
|
453
461
|
config: config,
|
|
454
|
-
|
|
455
|
-
|
|
462
|
+
maxDepth: maxDepth,
|
|
463
|
+
movedIds: movedIds
|
|
456
464
|
})), {}, {
|
|
457
465
|
depth: depth + 1,
|
|
458
466
|
disabled: isDisabled,
|
|
@@ -463,7 +471,7 @@ var _SelectableNode = function SelectableNode(_ref) {
|
|
|
463
471
|
};
|
|
464
472
|
return /*#__PURE__*/jsxs("div", {
|
|
465
473
|
"aria-disabled": isDisabled,
|
|
466
|
-
title: isDisabled ?
|
|
474
|
+
title: isDisabled ? disabledTitle : undefined,
|
|
467
475
|
className: classNames("flex flex-col w-full min-w-0", {
|
|
468
476
|
"opacity-60": isDisabled
|
|
469
477
|
}),
|
|
@@ -500,6 +508,7 @@ var PaneBody = function PaneBody(_ref) {
|
|
|
500
508
|
var _ref$isRootEnabled = _ref.isRootEnabled,
|
|
501
509
|
isRootEnabled = _ref$isRootEnabled === void 0 ? true : _ref$isRootEnabled,
|
|
502
510
|
item = _ref.item,
|
|
511
|
+
items = _ref.items,
|
|
503
512
|
config = _ref.config,
|
|
504
513
|
submitButtonProps = _ref.submitButtonProps,
|
|
505
514
|
cancelButtonProps = _ref.cancelButtonProps,
|
|
@@ -535,15 +544,28 @@ var PaneBody = function PaneBody(_ref) {
|
|
|
535
544
|
var tree = useMemo(function () {
|
|
536
545
|
return createTree(folders, isRootEnabled);
|
|
537
546
|
}, [folders, isRootEnabled]);
|
|
547
|
+
var movedItems = items !== null && items !== void 0 ? items : item ? [item] : [];
|
|
548
|
+
var movedIds = pluck("id", movedItems);
|
|
538
549
|
var maxDepth = Number.POSITIVE_INFINITY;
|
|
539
|
-
|
|
540
|
-
|
|
550
|
+
var nestingWarning = null;
|
|
551
|
+
if (isNotEmpty(movedItems)) {
|
|
552
|
+
// For moved folders, measure the depth from the tallest folder to its longest leaf.
|
|
541
553
|
var foldersMap = treeToMap(folders);
|
|
542
|
-
var
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
554
|
+
var movedFolders = movedIds.map(function (id) {
|
|
555
|
+
return foldersMap[id];
|
|
556
|
+
}).filter(Boolean);
|
|
557
|
+
if (isNotEmpty(movedFolders)) {
|
|
558
|
+
var subtreeHeight = Math.max.apply(Math, _toConsumableArray(movedFolders.map(measureDepth)));
|
|
559
|
+
maxDepth = config.maxDepth - (subtreeHeight + 1); // +1 for own depth;
|
|
546
560
|
if (isRootEnabled) maxDepth += 1; // +1 for root folder.
|
|
561
|
+
|
|
562
|
+
if (subtreeHeight > 0) {
|
|
563
|
+
nestingWarning = t("moveToFolder.nestingRestricted", {
|
|
564
|
+
count: movedFolders.length,
|
|
565
|
+
name: movedFolders[0].name,
|
|
566
|
+
maxDepth: config.maxDepth
|
|
567
|
+
});
|
|
568
|
+
}
|
|
547
569
|
}
|
|
548
570
|
}
|
|
549
571
|
var onAddFolder = function onAddFolder() {
|
|
@@ -593,22 +615,25 @@ var PaneBody = function PaneBody(_ref) {
|
|
|
593
615
|
style: "link",
|
|
594
616
|
onClick: onAddFolder
|
|
595
617
|
})]
|
|
596
|
-
}), /*#__PURE__*/
|
|
618
|
+
}), /*#__PURE__*/jsxs(Pane.Body, {
|
|
597
619
|
className: "pb-6",
|
|
598
|
-
children:
|
|
620
|
+
children: [nestingWarning && /*#__PURE__*/jsx(Callout, {
|
|
621
|
+
className: "mb-4",
|
|
622
|
+
style: "warning",
|
|
623
|
+
children: nestingWarning
|
|
624
|
+
}), tree.map(function (folder) {
|
|
599
625
|
return /*#__PURE__*/createElement(_SelectableNode, {
|
|
600
626
|
config: config,
|
|
601
627
|
folder: folder,
|
|
602
|
-
item: item,
|
|
603
628
|
maxDepth: maxDepth,
|
|
629
|
+
movedIds: movedIds,
|
|
604
630
|
selection: selection,
|
|
605
|
-
disabled: (item === null || item === void 0 ? void 0 : item.id) === folder.id || maxDepth <= 0,
|
|
606
631
|
key: folder.id,
|
|
607
632
|
onSelect: function onSelect(folder) {
|
|
608
633
|
return setSelection(folder.id);
|
|
609
634
|
}
|
|
610
635
|
});
|
|
611
|
-
})
|
|
636
|
+
})]
|
|
612
637
|
}), /*#__PURE__*/jsxs(Pane.Footer, {
|
|
613
638
|
className: "space-x-2",
|
|
614
639
|
children: [/*#__PURE__*/jsxs("div", {
|
|
@@ -685,7 +710,7 @@ var MoveFolderPane = function MoveFolderPane(_ref) {
|
|
|
685
710
|
});
|
|
686
711
|
};
|
|
687
712
|
|
|
688
|
-
var _excluded$4 = ["folder", "depth", "config", "folderLabel", "itemLabel"];
|
|
713
|
+
var _excluded$4 = ["folder", "depth", "config", "folderLabel", "itemLabel", "isAncestorDragging"];
|
|
689
714
|
function ownKeys$f(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; }
|
|
690
715
|
function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
691
716
|
var _DraggableNode$1 = function DraggableNode(_ref) {
|
|
@@ -695,6 +720,8 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
|
|
|
695
720
|
config = _ref.config,
|
|
696
721
|
folderLabel = _ref.folderLabel,
|
|
697
722
|
itemLabel = _ref.itemLabel,
|
|
723
|
+
_ref$isAncestorDraggi = _ref.isAncestorDragging,
|
|
724
|
+
isAncestorDragging = _ref$isAncestorDraggi === void 0 ? false : _ref$isAncestorDraggi,
|
|
698
725
|
rest = _objectWithoutProperties(_ref, _excluded$4);
|
|
699
726
|
var _useDraggable = useDraggable({
|
|
700
727
|
id: "draggable-item--".concat(folder.id),
|
|
@@ -705,15 +732,18 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
|
|
|
705
732
|
attributes = _useDraggable.attributes,
|
|
706
733
|
listeners = _useDraggable.listeners,
|
|
707
734
|
setDraggableRef = _useDraggable.setNodeRef;
|
|
735
|
+
var isInDraggedSubtree = isDragging || isAncestorDragging;
|
|
708
736
|
var _useDroppable = useDroppable({
|
|
709
737
|
id: "droppable-item--".concat(folder.id),
|
|
710
738
|
data: folder,
|
|
711
|
-
disabled:
|
|
739
|
+
disabled: isInDraggedSubtree
|
|
712
740
|
}),
|
|
713
741
|
isOver = _useDroppable.isOver,
|
|
714
742
|
setDroppableRef = _useDroppable.setNodeRef;
|
|
743
|
+
|
|
744
|
+
// Children stay rendered while dragging so the list height, and its scroll, don't shift under the drag overlay.
|
|
715
745
|
var renderChildren = function renderChildren() {
|
|
716
|
-
if (isNotPresent(folder.children)
|
|
746
|
+
if (isNotPresent(folder.children)) return null;
|
|
717
747
|
return folder.children.map(function (child) {
|
|
718
748
|
var _child$children$lengt, _child$children;
|
|
719
749
|
return /*#__PURE__*/createElement(_DraggableNode$1, _objectSpread$f(_objectSpread$f({}, _objectSpread$f(_objectSpread$f({}, rest), {}, {
|
|
@@ -721,6 +751,7 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
|
|
|
721
751
|
})), {}, {
|
|
722
752
|
depth: depth + 1,
|
|
723
753
|
folder: child,
|
|
754
|
+
isAncestorDragging: isInDraggedSubtree,
|
|
724
755
|
itemLabel: config.labels[(child === null || child === void 0 ? void 0 : child.itemCount) > 1 ? "items" : "item"],
|
|
725
756
|
key: child.id,
|
|
726
757
|
folderLabel: config.labels[((_child$children$lengt = child === null || child === void 0 || (_child$children = child.children) === null || _child$children === void 0 ? void 0 : _child$children.length) !== null && _child$children$lengt !== void 0 ? _child$children$lengt : 0) > 1 ? "folders" : "folder"]
|
|
@@ -731,7 +762,7 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
|
|
|
731
762
|
children: [/*#__PURE__*/jsx(Node$1, _objectSpread$f(_objectSpread$f(_objectSpread$f({}, rest), {}, {
|
|
732
763
|
className: classNames({
|
|
733
764
|
"neeto-ui-rounded-lg hover:neeto-ui-bg-gray-100 w-full min-w-0 cursor-move transition-colors": true,
|
|
734
|
-
"neeto-ui-bg-gray-100 opacity-50":
|
|
765
|
+
"neeto-ui-bg-gray-100 opacity-50": isInDraggedSubtree,
|
|
735
766
|
"neeto-ui-border-primary-500 border": isOver,
|
|
736
767
|
"border border-transparent": !isOver
|
|
737
768
|
})
|
|
@@ -802,10 +833,11 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
|
|
|
802
833
|
if (((_activeFolder$meta$pa = activeFolder.meta.parent) === null || _activeFolder$meta$pa === void 0 ? void 0 : _activeFolder$meta$pa.id) === overFolder.id) return;
|
|
803
834
|
|
|
804
835
|
// Check moving to a folder with depth greater than the allowed limit.
|
|
805
|
-
//
|
|
836
|
+
// The extra root node puts top-level folders at depth 1, so the deepest moved
|
|
837
|
+
// folder lands at level (target depth + subtree height + 1).
|
|
806
838
|
var activeDepth = measureDepth(activeFolder);
|
|
807
839
|
var overDepth = overFolder.meta.depth;
|
|
808
|
-
if (activeDepth + overDepth >= config.maxDepth
|
|
840
|
+
if (activeDepth + overDepth >= config.maxDepth) {
|
|
809
841
|
Toastr.error(t("moveToFolder.depthExceeded", {
|
|
810
842
|
maxDepth: config.maxDepth
|
|
811
843
|
}));
|
|
@@ -895,7 +927,9 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
|
|
|
895
927
|
|
|
896
928
|
var PlaceholderNode = function PlaceholderNode(_ref) {
|
|
897
929
|
var folder = _ref.folder,
|
|
898
|
-
dragState = _ref.dragState
|
|
930
|
+
dragState = _ref.dragState,
|
|
931
|
+
_ref$disabled = _ref.disabled,
|
|
932
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
899
933
|
var overItem = dragState.overItem;
|
|
900
934
|
var id = useId();
|
|
901
935
|
var isOver = id === (overItem === null || overItem === void 0 ? void 0 : overItem.id);
|
|
@@ -910,7 +944,8 @@ var PlaceholderNode = function PlaceholderNode(_ref) {
|
|
|
910
944
|
data: {
|
|
911
945
|
id: id,
|
|
912
946
|
meta: meta
|
|
913
|
-
}
|
|
947
|
+
},
|
|
948
|
+
disabled: disabled
|
|
914
949
|
}),
|
|
915
950
|
setDroppableRef = _useDroppable.setNodeRef;
|
|
916
951
|
return /*#__PURE__*/jsxs("div", {
|
|
@@ -929,7 +964,7 @@ var PlaceholderNode = function PlaceholderNode(_ref) {
|
|
|
929
964
|
});
|
|
930
965
|
};
|
|
931
966
|
|
|
932
|
-
var _excluded$3 = ["folder", "config", "dragState", "folderLabel", "itemLabel"];
|
|
967
|
+
var _excluded$3 = ["folder", "config", "dragState", "folderLabel", "itemLabel", "isAncestorDragging"];
|
|
933
968
|
function ownKeys$d(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; }
|
|
934
969
|
function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
935
970
|
var _DraggableNode = function DraggableNode(_ref) {
|
|
@@ -939,6 +974,8 @@ var _DraggableNode = function DraggableNode(_ref) {
|
|
|
939
974
|
dragState = _ref.dragState,
|
|
940
975
|
folderLabel = _ref.folderLabel,
|
|
941
976
|
itemLabel = _ref.itemLabel,
|
|
977
|
+
_ref$isAncestorDraggi = _ref.isAncestorDragging,
|
|
978
|
+
isAncestorDragging = _ref$isAncestorDraggi === void 0 ? false : _ref$isAncestorDraggi,
|
|
942
979
|
rest = _objectWithoutProperties(_ref, _excluded$3);
|
|
943
980
|
var overItem = dragState.overItem;
|
|
944
981
|
var isOverItem = folder.id === (overItem === null || overItem === void 0 ? void 0 : overItem.id);
|
|
@@ -953,18 +990,21 @@ var _DraggableNode = function DraggableNode(_ref) {
|
|
|
953
990
|
attributes = _useDraggable.attributes,
|
|
954
991
|
listeners = _useDraggable.listeners,
|
|
955
992
|
setDraggableRef = _useDraggable.setNodeRef;
|
|
993
|
+
var isInDraggedSubtree = isDragging || isAncestorDragging;
|
|
956
994
|
var _useDroppable = useDroppable({
|
|
957
995
|
id: "droppable-item--".concat(folder.id),
|
|
958
996
|
data: folder,
|
|
959
|
-
disabled: isRoot ||
|
|
997
|
+
disabled: isRoot || isInDraggedSubtree
|
|
960
998
|
}),
|
|
961
999
|
setDroppableRef = _useDroppable.setNodeRef;
|
|
1000
|
+
|
|
1001
|
+
// Children stay rendered while dragging so the list height, and its scroll, don't shift under the drag overlay.
|
|
962
1002
|
var renderChildren = function renderChildren() {
|
|
963
|
-
if (isDragging) return null;
|
|
964
1003
|
return /*#__PURE__*/jsxs(React.Fragment, {
|
|
965
1004
|
children: [/*#__PURE__*/jsx(PlaceholderNode, {
|
|
966
1005
|
dragState: dragState,
|
|
967
|
-
folder: folder
|
|
1006
|
+
folder: folder,
|
|
1007
|
+
disabled: isInDraggedSubtree
|
|
968
1008
|
}), isArray(folder.children) && folder.children.map(function (child) {
|
|
969
1009
|
var _child$children$lengt, _child$children;
|
|
970
1010
|
return /*#__PURE__*/createElement(_DraggableNode, _objectSpread$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, rest), {}, {
|
|
@@ -973,6 +1013,7 @@ var _DraggableNode = function DraggableNode(_ref) {
|
|
|
973
1013
|
})), {}, {
|
|
974
1014
|
depth: child.meta.depth,
|
|
975
1015
|
folder: child,
|
|
1016
|
+
isAncestorDragging: isInDraggedSubtree,
|
|
976
1017
|
itemLabel: config.labels[(child === null || child === void 0 ? void 0 : child.itemCount) > 1 ? "items" : "item"],
|
|
977
1018
|
key: child.id,
|
|
978
1019
|
folderLabel: config.labels[((_child$children$lengt = child === null || child === void 0 || (_child$children = child.children) === null || _child$children === void 0 ? void 0 : _child$children.length) !== null && _child$children$lengt !== void 0 ? _child$children$lengt : 0) > 1 ? "folders" : "folder"]
|
|
@@ -991,7 +1032,7 @@ var _DraggableNode = function DraggableNode(_ref) {
|
|
|
991
1032
|
})), {}, {
|
|
992
1033
|
className: classNames({
|
|
993
1034
|
"hover:neeto-ui-bg-gray-100 w-full cursor-move transition-colors": true,
|
|
994
|
-
"neeto-ui-bg-gray-100 opacity-50":
|
|
1035
|
+
"neeto-ui-bg-gray-100 opacity-50": isInDraggedSubtree,
|
|
995
1036
|
"neeto-ui-bg-primary-50": isOverParent,
|
|
996
1037
|
"neeto-ui-border-primary-500 border-b-2": isOverItem
|
|
997
1038
|
}),
|
|
@@ -1080,10 +1121,11 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
|
|
|
1080
1121
|
}
|
|
1081
1122
|
|
|
1082
1123
|
// Check moving to a folder with depth greater than the allowed limit.
|
|
1083
|
-
//
|
|
1124
|
+
// The extra root node puts top-level folders at depth 1, so the deepest moved
|
|
1125
|
+
// folder lands at level (target depth + subtree height + 1).
|
|
1084
1126
|
var srcDepth = measureDepth(activeFolder);
|
|
1085
1127
|
var dstDepth = targetFolder.meta.depth;
|
|
1086
|
-
if (srcDepth + dstDepth >= config.maxDepth
|
|
1128
|
+
if (srcDepth + dstDepth >= config.maxDepth) {
|
|
1087
1129
|
Toastr.error(t("moveToFolder.depthExceeded", {
|
|
1088
1130
|
maxDepth: config.maxDepth
|
|
1089
1131
|
}));
|
|
@@ -1784,7 +1826,17 @@ var FoldersTree = function FoldersTree(_ref) {
|
|
|
1784
1826
|
});
|
|
1785
1827
|
};
|
|
1786
1828
|
|
|
1787
|
-
var
|
|
1829
|
+
var subtreeIds = function subtreeIds(foldersMap, folderId) {
|
|
1830
|
+
var ids = new Set();
|
|
1831
|
+
_walkTree(findById(folderId, Object.values(foldersMap !== null && foldersMap !== void 0 ? foldersMap : {})), function (_ref) {
|
|
1832
|
+
var id = _ref.id;
|
|
1833
|
+
return ids.add(id);
|
|
1834
|
+
});
|
|
1835
|
+
return ids;
|
|
1836
|
+
};
|
|
1837
|
+
var createFolderOptions = function createFolderOptions(foldersMap, maxDepth) {
|
|
1838
|
+
var excludedFolderId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
1839
|
+
var excludedIds = subtreeIds(foldersMap, excludedFolderId);
|
|
1788
1840
|
return mapObj(foldersMap, function (folder) {
|
|
1789
1841
|
var _folder$meta$parent;
|
|
1790
1842
|
return {
|
|
@@ -1794,11 +1846,11 @@ var createFolderOptions = function createFolderOptions(foldersMap, config) {
|
|
|
1794
1846
|
pId: (_folder$meta$parent = folder.meta.parent) === null || _folder$meta$parent === void 0 ? void 0 : _folder$meta$parent.id
|
|
1795
1847
|
};
|
|
1796
1848
|
}, function (folder) {
|
|
1797
|
-
return folder.meta.depth <
|
|
1849
|
+
return folder.meta.depth < maxDepth && !excludedIds.has(folder.id);
|
|
1798
1850
|
});
|
|
1799
1851
|
};
|
|
1800
1852
|
|
|
1801
|
-
var _excluded = ["label", "name", "placeholder", "disabled", "loading", "required", "showSearch", "size", "fieldNames", "config", "initialValue"];
|
|
1853
|
+
var _excluded = ["label", "name", "placeholder", "disabled", "loading", "required", "showSearch", "size", "fieldNames", "config", "initialValue", "excludedFolderId"];
|
|
1802
1854
|
function ownKeys(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; }
|
|
1803
1855
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1804
1856
|
var TreeSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
@@ -1821,6 +1873,8 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
1821
1873
|
fieldNames = _ref.fieldNames,
|
|
1822
1874
|
config = _ref.config,
|
|
1823
1875
|
initialValue = _ref.initialValue,
|
|
1876
|
+
_ref$excludedFolderId = _ref.excludedFolderId,
|
|
1877
|
+
excludedFolderId = _ref$excludedFolderId === void 0 ? null : _ref$excludedFolderId,
|
|
1824
1878
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
1825
1879
|
var _useFetchFolders = useFetchFolders(config),
|
|
1826
1880
|
folders = _useFetchFolders.data;
|
|
@@ -1839,8 +1893,8 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
1839
1893
|
setFieldValue(name, parentId);
|
|
1840
1894
|
}, [parentId, name]);
|
|
1841
1895
|
var folderOptions = useMemo(function () {
|
|
1842
|
-
return createFolderOptions(foldersMap, config);
|
|
1843
|
-
}, [foldersMap]);
|
|
1896
|
+
return createFolderOptions(foldersMap, config.maxDepth, excludedFolderId);
|
|
1897
|
+
}, [foldersMap, config.maxDepth, excludedFolderId]);
|
|
1844
1898
|
return /*#__PURE__*/jsx(NUITreeSelect, _objectSpread({
|
|
1845
1899
|
treeDataSimpleMode: true,
|
|
1846
1900
|
"data-testid": "nui-select-container-wrapper",
|