@bigbinary/neeto-folders-frontend 2.0.48 → 2.0.49-beta2
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 +16 -16
- package/types.d.ts +1 -0
|
@@ -30,6 +30,8 @@
|
|
|
30
30
|
},
|
|
31
31
|
"moveToFolder": {
|
|
32
32
|
"depthExceeded": "Cannot move to this {{ folder }}. Maximum {{maxDepth}} nested {{ folders }} are allowed.",
|
|
33
|
+
"nestingRestricted_one": "{{name, anyCase}} has nested {{ folders }}, so it can't be moved anywhere that would take it beyond {{maxDepth}} levels of nesting.",
|
|
34
|
+
"nestingRestricted_other": "Some of the selected {{ folders }} have nested {{ folders }}, so they can't be moved anywhere that would take them beyond {{maxDepth}} levels of nesting.",
|
|
33
35
|
"notAllowed": "You cannot move to this {{ folder }}.",
|
|
34
36
|
"remove": "Remove from {{ folder }}",
|
|
35
37
|
"title": "Move to {{ folder }}"
|
package/dist/.ready
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Built at 2026-10-
|
|
1
|
+
Built at 2026-10-23T13:59:45.772Z
|
package/dist/cjs/components.js
CHANGED
|
@@ -12,7 +12,7 @@ var reactRouterDom = require('react-router-dom');
|
|
|
12
12
|
var useFolderActions = require('../useFolderActions-DImaQ3gr.js');
|
|
13
13
|
var injectCss = require('../inject-css-D3Ee0dJK.js');
|
|
14
14
|
var constants = require('./constants.js');
|
|
15
|
-
var utils = require('../index-
|
|
15
|
+
var utils = require('../index-DCIRHXw_.js');
|
|
16
16
|
var internal = require('../internal-DAkDv0P1.js');
|
|
17
17
|
var jsxRuntime = require('react/jsx-runtime');
|
|
18
18
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
@@ -20,6 +20,7 @@ var Pane = require('@bigbinary/neetoui/Pane');
|
|
|
20
20
|
var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
|
|
21
21
|
var _regeneratorRuntime = require('@babel/runtime/regenerator');
|
|
22
22
|
var React = require('react');
|
|
23
|
+
var Toastr = require('@bigbinary/neetoui/Toastr');
|
|
23
24
|
var Typography = require('@bigbinary/neetoui/Typography');
|
|
24
25
|
var Spinner = require('@bigbinary/neetoui/Spinner');
|
|
25
26
|
var Input = require('@bigbinary/neetoui/formik/Input');
|
|
@@ -30,15 +31,15 @@ var yup = require('yup');
|
|
|
30
31
|
var Switch = require('@bigbinary/neetoui/formik/Switch');
|
|
31
32
|
var Textarea = require('@bigbinary/neetoui/formik/Textarea');
|
|
32
33
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
34
|
+
var neetoCist = require('@bigbinary/neeto-cist');
|
|
33
35
|
var useHotkeys = require('@bigbinary/neeto-hotkeys');
|
|
34
36
|
var Button = require('@bigbinary/neetoui/Button');
|
|
35
|
-
var
|
|
37
|
+
var Callout = require('@bigbinary/neetoui/Callout');
|
|
36
38
|
var ramda = require('ramda');
|
|
37
39
|
var classNames = require('classnames');
|
|
38
40
|
var Radio = require('@bigbinary/neetoui/Radio');
|
|
39
41
|
var core = require('@dnd-kit/core');
|
|
40
42
|
var Reorder = require('@bigbinary/neeto-icons/Reorder');
|
|
41
|
-
var Toastr = require('@bigbinary/neetoui/Toastr');
|
|
42
43
|
var reactDom = require('react-dom');
|
|
43
44
|
var modifiers = require('@dnd-kit/modifiers');
|
|
44
45
|
var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
|
|
@@ -231,6 +232,7 @@ var AddEditPane = function AddEditPane(_ref) {
|
|
|
231
232
|
var response = error.response;
|
|
232
233
|
if (response && response.data && response.data.errors) {
|
|
233
234
|
setStatus(response.data.errors);
|
|
235
|
+
if (response.data.errors.base) Toastr.error(response.data.errors.base[0]);
|
|
234
236
|
}
|
|
235
237
|
};
|
|
236
238
|
var onSubmitForm = /*#__PURE__*/function () {
|
|
@@ -335,6 +337,7 @@ var AddEditPane = function AddEditPane(_ref) {
|
|
|
335
337
|
config: config,
|
|
336
338
|
allowClear: true,
|
|
337
339
|
showSearch: true,
|
|
340
|
+
excludedFolderId: isEditing ? item.id : null,
|
|
338
341
|
initialValue: folderSid,
|
|
339
342
|
label: t("createFolder.parentTitle"),
|
|
340
343
|
name: "parentId"
|
|
@@ -428,13 +431,14 @@ var Node$1 = function Node(_ref, ref) {
|
|
|
428
431
|
};
|
|
429
432
|
var Node$2 = /*#__PURE__*/React.forwardRef(Node$1);
|
|
430
433
|
|
|
431
|
-
var _excluded$5 = ["folder", "
|
|
434
|
+
var _excluded$5 = ["folder", "movedIds", "depth", "maxDepth", "disabled", "config"];
|
|
432
435
|
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; }
|
|
433
436
|
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; }
|
|
434
437
|
var _SelectableNode = function SelectableNode(_ref) {
|
|
435
438
|
var _folder$children$leng, _folder$children;
|
|
436
439
|
var folder = _ref.folder,
|
|
437
|
-
|
|
440
|
+
_ref$movedIds = _ref.movedIds,
|
|
441
|
+
movedIds = _ref$movedIds === void 0 ? [] : _ref$movedIds,
|
|
438
442
|
_ref$depth = _ref.depth,
|
|
439
443
|
depth = _ref$depth === void 0 ? 0 : _ref$depth,
|
|
440
444
|
maxDepth = _ref.maxDepth,
|
|
@@ -445,7 +449,11 @@ var _SelectableNode = function SelectableNode(_ref) {
|
|
|
445
449
|
onSelect = rest.onSelect;
|
|
446
450
|
var _useTranslation = injectCss.useTranslation(config),
|
|
447
451
|
t = _useTranslation.t;
|
|
448
|
-
var
|
|
452
|
+
var isDepthExceeded = depth >= maxDepth;
|
|
453
|
+
var isDisabled = disabled || movedIds.includes(folder.id) || isDepthExceeded;
|
|
454
|
+
var disabledTitle = isDepthExceeded ? t("moveToFolder.depthExceeded", {
|
|
455
|
+
maxDepth: config.maxDepth
|
|
456
|
+
}) : t("moveToFolder.notAllowed");
|
|
449
457
|
var itemLabel = config.labels[folder.itemCount > 1 ? "items" : "item"];
|
|
450
458
|
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"];
|
|
451
459
|
var renderChildren = function renderChildren() {
|
|
@@ -453,8 +461,8 @@ var _SelectableNode = function SelectableNode(_ref) {
|
|
|
453
461
|
return folder.children.map(function (child) {
|
|
454
462
|
return /*#__PURE__*/React.createElement(_SelectableNode, _objectSpread$h(_objectSpread$h({}, _objectSpread$h(_objectSpread$h({}, rest), {}, {
|
|
455
463
|
config: config,
|
|
456
|
-
|
|
457
|
-
|
|
464
|
+
maxDepth: maxDepth,
|
|
465
|
+
movedIds: movedIds
|
|
458
466
|
})), {}, {
|
|
459
467
|
depth: depth + 1,
|
|
460
468
|
disabled: isDisabled,
|
|
@@ -465,7 +473,7 @@ var _SelectableNode = function SelectableNode(_ref) {
|
|
|
465
473
|
};
|
|
466
474
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
467
475
|
"aria-disabled": isDisabled,
|
|
468
|
-
title: isDisabled ?
|
|
476
|
+
title: isDisabled ? disabledTitle : undefined,
|
|
469
477
|
className: classNames("flex flex-col w-full min-w-0", {
|
|
470
478
|
"opacity-60": isDisabled
|
|
471
479
|
}),
|
|
@@ -502,6 +510,7 @@ var PaneBody = function PaneBody(_ref) {
|
|
|
502
510
|
var _ref$isRootEnabled = _ref.isRootEnabled,
|
|
503
511
|
isRootEnabled = _ref$isRootEnabled === void 0 ? true : _ref$isRootEnabled,
|
|
504
512
|
item = _ref.item,
|
|
513
|
+
items = _ref.items,
|
|
505
514
|
config = _ref.config,
|
|
506
515
|
submitButtonProps = _ref.submitButtonProps,
|
|
507
516
|
cancelButtonProps = _ref.cancelButtonProps,
|
|
@@ -537,15 +546,28 @@ var PaneBody = function PaneBody(_ref) {
|
|
|
537
546
|
var tree = React.useMemo(function () {
|
|
538
547
|
return createTree(folders, isRootEnabled);
|
|
539
548
|
}, [folders, isRootEnabled]);
|
|
549
|
+
var movedItems = items !== null && items !== void 0 ? items : item ? [item] : [];
|
|
550
|
+
var movedIds = ramda.pluck("id", movedItems);
|
|
540
551
|
var maxDepth = Number.POSITIVE_INFINITY;
|
|
541
|
-
|
|
542
|
-
|
|
552
|
+
var nestingWarning = null;
|
|
553
|
+
if (neetoCist.isNotEmpty(movedItems)) {
|
|
554
|
+
// For moved folders, measure the depth from the tallest folder to its longest leaf.
|
|
543
555
|
var foldersMap = utils.treeToMap(folders);
|
|
544
|
-
var
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
556
|
+
var movedFolders = movedIds.map(function (id) {
|
|
557
|
+
return foldersMap[id];
|
|
558
|
+
}).filter(Boolean);
|
|
559
|
+
if (neetoCist.isNotEmpty(movedFolders)) {
|
|
560
|
+
var subtreeHeight = Math.max.apply(Math, _toConsumableArray(movedFolders.map(utils.measureDepth)));
|
|
561
|
+
maxDepth = config.maxDepth - (subtreeHeight + 1); // +1 for own depth;
|
|
548
562
|
if (isRootEnabled) maxDepth += 1; // +1 for root folder.
|
|
563
|
+
|
|
564
|
+
if (subtreeHeight > 0) {
|
|
565
|
+
nestingWarning = t("moveToFolder.nestingRestricted", {
|
|
566
|
+
count: movedFolders.length,
|
|
567
|
+
name: movedFolders[0].name,
|
|
568
|
+
maxDepth: config.maxDepth
|
|
569
|
+
});
|
|
570
|
+
}
|
|
549
571
|
}
|
|
550
572
|
}
|
|
551
573
|
var onAddFolder = function onAddFolder() {
|
|
@@ -595,22 +617,25 @@ var PaneBody = function PaneBody(_ref) {
|
|
|
595
617
|
style: "link",
|
|
596
618
|
onClick: onAddFolder
|
|
597
619
|
})]
|
|
598
|
-
}), /*#__PURE__*/jsxRuntime.
|
|
620
|
+
}), /*#__PURE__*/jsxRuntime.jsxs(Pane.Body, {
|
|
599
621
|
className: "pb-6",
|
|
600
|
-
children:
|
|
622
|
+
children: [nestingWarning && /*#__PURE__*/jsxRuntime.jsx(Callout, {
|
|
623
|
+
className: "mb-4",
|
|
624
|
+
style: "warning",
|
|
625
|
+
children: nestingWarning
|
|
626
|
+
}), tree.map(function (folder) {
|
|
601
627
|
return /*#__PURE__*/React.createElement(_SelectableNode, {
|
|
602
628
|
config: config,
|
|
603
629
|
folder: folder,
|
|
604
|
-
item: item,
|
|
605
630
|
maxDepth: maxDepth,
|
|
631
|
+
movedIds: movedIds,
|
|
606
632
|
selection: selection,
|
|
607
|
-
disabled: (item === null || item === void 0 ? void 0 : item.id) === folder.id || maxDepth <= 0,
|
|
608
633
|
key: folder.id,
|
|
609
634
|
onSelect: function onSelect(folder) {
|
|
610
635
|
return setSelection(folder.id);
|
|
611
636
|
}
|
|
612
637
|
});
|
|
613
|
-
})
|
|
638
|
+
})]
|
|
614
639
|
}), /*#__PURE__*/jsxRuntime.jsxs(Pane.Footer, {
|
|
615
640
|
className: "space-x-2",
|
|
616
641
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
@@ -687,7 +712,7 @@ var MoveFolderPane = function MoveFolderPane(_ref) {
|
|
|
687
712
|
});
|
|
688
713
|
};
|
|
689
714
|
|
|
690
|
-
var _excluded$4 = ["folder", "depth", "config", "folderLabel", "itemLabel"];
|
|
715
|
+
var _excluded$4 = ["folder", "depth", "config", "folderLabel", "itemLabel", "isAncestorDragging"];
|
|
691
716
|
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; }
|
|
692
717
|
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; }
|
|
693
718
|
var _DraggableNode$1 = function DraggableNode(_ref) {
|
|
@@ -697,6 +722,8 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
|
|
|
697
722
|
config = _ref.config,
|
|
698
723
|
folderLabel = _ref.folderLabel,
|
|
699
724
|
itemLabel = _ref.itemLabel,
|
|
725
|
+
_ref$isAncestorDraggi = _ref.isAncestorDragging,
|
|
726
|
+
isAncestorDragging = _ref$isAncestorDraggi === void 0 ? false : _ref$isAncestorDraggi,
|
|
700
727
|
rest = _objectWithoutProperties(_ref, _excluded$4);
|
|
701
728
|
var _useDraggable = core.useDraggable({
|
|
702
729
|
id: "draggable-item--".concat(folder.id),
|
|
@@ -707,15 +734,18 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
|
|
|
707
734
|
attributes = _useDraggable.attributes,
|
|
708
735
|
listeners = _useDraggable.listeners,
|
|
709
736
|
setDraggableRef = _useDraggable.setNodeRef;
|
|
737
|
+
var isInDraggedSubtree = isDragging || isAncestorDragging;
|
|
710
738
|
var _useDroppable = core.useDroppable({
|
|
711
739
|
id: "droppable-item--".concat(folder.id),
|
|
712
740
|
data: folder,
|
|
713
|
-
disabled:
|
|
741
|
+
disabled: isInDraggedSubtree
|
|
714
742
|
}),
|
|
715
743
|
isOver = _useDroppable.isOver,
|
|
716
744
|
setDroppableRef = _useDroppable.setNodeRef;
|
|
745
|
+
|
|
746
|
+
// Children stay rendered while dragging so the list height, and its scroll, don't shift under the drag overlay.
|
|
717
747
|
var renderChildren = function renderChildren() {
|
|
718
|
-
if (neetoCist.isNotPresent(folder.children)
|
|
748
|
+
if (neetoCist.isNotPresent(folder.children)) return null;
|
|
719
749
|
return folder.children.map(function (child) {
|
|
720
750
|
var _child$children$lengt, _child$children;
|
|
721
751
|
return /*#__PURE__*/React.createElement(_DraggableNode$1, _objectSpread$f(_objectSpread$f({}, _objectSpread$f(_objectSpread$f({}, rest), {}, {
|
|
@@ -723,6 +753,7 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
|
|
|
723
753
|
})), {}, {
|
|
724
754
|
depth: depth + 1,
|
|
725
755
|
folder: child,
|
|
756
|
+
isAncestorDragging: isInDraggedSubtree,
|
|
726
757
|
itemLabel: config.labels[(child === null || child === void 0 ? void 0 : child.itemCount) > 1 ? "items" : "item"],
|
|
727
758
|
key: child.id,
|
|
728
759
|
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"]
|
|
@@ -733,7 +764,7 @@ var _DraggableNode$1 = function DraggableNode(_ref) {
|
|
|
733
764
|
children: [/*#__PURE__*/jsxRuntime.jsx(Node$2, _objectSpread$f(_objectSpread$f(_objectSpread$f({}, rest), {}, {
|
|
734
765
|
className: classNames({
|
|
735
766
|
"neeto-ui-rounded-lg hover:neeto-ui-bg-gray-100 w-full min-w-0 cursor-move transition-colors": true,
|
|
736
|
-
"neeto-ui-bg-gray-100 opacity-50":
|
|
767
|
+
"neeto-ui-bg-gray-100 opacity-50": isInDraggedSubtree,
|
|
737
768
|
"neeto-ui-border-primary-500 border": isOver,
|
|
738
769
|
"border border-transparent": !isOver
|
|
739
770
|
})
|
|
@@ -804,10 +835,11 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
|
|
|
804
835
|
if (((_activeFolder$meta$pa = activeFolder.meta.parent) === null || _activeFolder$meta$pa === void 0 ? void 0 : _activeFolder$meta$pa.id) === overFolder.id) return;
|
|
805
836
|
|
|
806
837
|
// Check moving to a folder with depth greater than the allowed limit.
|
|
807
|
-
//
|
|
838
|
+
// The extra root node puts top-level folders at depth 1, so the deepest moved
|
|
839
|
+
// folder lands at level (target depth + subtree height + 1).
|
|
808
840
|
var activeDepth = utils.measureDepth(activeFolder);
|
|
809
841
|
var overDepth = overFolder.meta.depth;
|
|
810
|
-
if (activeDepth + overDepth >= config.maxDepth
|
|
842
|
+
if (activeDepth + overDepth >= config.maxDepth) {
|
|
811
843
|
Toastr.error(t("moveToFolder.depthExceeded", {
|
|
812
844
|
maxDepth: config.maxDepth
|
|
813
845
|
}));
|
|
@@ -897,7 +929,9 @@ var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
|
|
|
897
929
|
|
|
898
930
|
var PlaceholderNode = function PlaceholderNode(_ref) {
|
|
899
931
|
var folder = _ref.folder,
|
|
900
|
-
dragState = _ref.dragState
|
|
932
|
+
dragState = _ref.dragState,
|
|
933
|
+
_ref$disabled = _ref.disabled,
|
|
934
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
901
935
|
var overItem = dragState.overItem;
|
|
902
936
|
var id = React.useId();
|
|
903
937
|
var isOver = id === (overItem === null || overItem === void 0 ? void 0 : overItem.id);
|
|
@@ -912,7 +946,8 @@ var PlaceholderNode = function PlaceholderNode(_ref) {
|
|
|
912
946
|
data: {
|
|
913
947
|
id: id,
|
|
914
948
|
meta: meta
|
|
915
|
-
}
|
|
949
|
+
},
|
|
950
|
+
disabled: disabled
|
|
916
951
|
}),
|
|
917
952
|
setDroppableRef = _useDroppable.setNodeRef;
|
|
918
953
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
@@ -931,7 +966,7 @@ var PlaceholderNode = function PlaceholderNode(_ref) {
|
|
|
931
966
|
});
|
|
932
967
|
};
|
|
933
968
|
|
|
934
|
-
var _excluded$3 = ["folder", "config", "dragState", "folderLabel", "itemLabel"];
|
|
969
|
+
var _excluded$3 = ["folder", "config", "dragState", "folderLabel", "itemLabel", "isAncestorDragging"];
|
|
935
970
|
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; }
|
|
936
971
|
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; }
|
|
937
972
|
var _DraggableNode = function DraggableNode(_ref) {
|
|
@@ -941,6 +976,8 @@ var _DraggableNode = function DraggableNode(_ref) {
|
|
|
941
976
|
dragState = _ref.dragState,
|
|
942
977
|
folderLabel = _ref.folderLabel,
|
|
943
978
|
itemLabel = _ref.itemLabel,
|
|
979
|
+
_ref$isAncestorDraggi = _ref.isAncestorDragging,
|
|
980
|
+
isAncestorDragging = _ref$isAncestorDraggi === void 0 ? false : _ref$isAncestorDraggi,
|
|
944
981
|
rest = _objectWithoutProperties(_ref, _excluded$3);
|
|
945
982
|
var overItem = dragState.overItem;
|
|
946
983
|
var isOverItem = folder.id === (overItem === null || overItem === void 0 ? void 0 : overItem.id);
|
|
@@ -955,18 +992,21 @@ var _DraggableNode = function DraggableNode(_ref) {
|
|
|
955
992
|
attributes = _useDraggable.attributes,
|
|
956
993
|
listeners = _useDraggable.listeners,
|
|
957
994
|
setDraggableRef = _useDraggable.setNodeRef;
|
|
995
|
+
var isInDraggedSubtree = isDragging || isAncestorDragging;
|
|
958
996
|
var _useDroppable = core.useDroppable({
|
|
959
997
|
id: "droppable-item--".concat(folder.id),
|
|
960
998
|
data: folder,
|
|
961
|
-
disabled: isRoot ||
|
|
999
|
+
disabled: isRoot || isInDraggedSubtree
|
|
962
1000
|
}),
|
|
963
1001
|
setDroppableRef = _useDroppable.setNodeRef;
|
|
1002
|
+
|
|
1003
|
+
// Children stay rendered while dragging so the list height, and its scroll, don't shift under the drag overlay.
|
|
964
1004
|
var renderChildren = function renderChildren() {
|
|
965
|
-
if (isDragging) return null;
|
|
966
1005
|
return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
|
|
967
1006
|
children: [/*#__PURE__*/jsxRuntime.jsx(PlaceholderNode, {
|
|
968
1007
|
dragState: dragState,
|
|
969
|
-
folder: folder
|
|
1008
|
+
folder: folder,
|
|
1009
|
+
disabled: isInDraggedSubtree
|
|
970
1010
|
}), internal.isArray(folder.children) && folder.children.map(function (child) {
|
|
971
1011
|
var _child$children$lengt, _child$children;
|
|
972
1012
|
return /*#__PURE__*/React.createElement(_DraggableNode, _objectSpread$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, rest), {}, {
|
|
@@ -975,6 +1015,7 @@ var _DraggableNode = function DraggableNode(_ref) {
|
|
|
975
1015
|
})), {}, {
|
|
976
1016
|
depth: child.meta.depth,
|
|
977
1017
|
folder: child,
|
|
1018
|
+
isAncestorDragging: isInDraggedSubtree,
|
|
978
1019
|
itemLabel: config.labels[(child === null || child === void 0 ? void 0 : child.itemCount) > 1 ? "items" : "item"],
|
|
979
1020
|
key: child.id,
|
|
980
1021
|
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"]
|
|
@@ -993,7 +1034,7 @@ var _DraggableNode = function DraggableNode(_ref) {
|
|
|
993
1034
|
})), {}, {
|
|
994
1035
|
className: classNames({
|
|
995
1036
|
"hover:neeto-ui-bg-gray-100 w-full cursor-move transition-colors": true,
|
|
996
|
-
"neeto-ui-bg-gray-100 opacity-50":
|
|
1037
|
+
"neeto-ui-bg-gray-100 opacity-50": isInDraggedSubtree,
|
|
997
1038
|
"neeto-ui-bg-primary-50": isOverParent,
|
|
998
1039
|
"neeto-ui-border-primary-500 border-b-2": isOverItem
|
|
999
1040
|
}),
|
|
@@ -1082,10 +1123,11 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
|
|
|
1082
1123
|
}
|
|
1083
1124
|
|
|
1084
1125
|
// Check moving to a folder with depth greater than the allowed limit.
|
|
1085
|
-
//
|
|
1126
|
+
// The extra root node puts top-level folders at depth 1, so the deepest moved
|
|
1127
|
+
// folder lands at level (target depth + subtree height + 1).
|
|
1086
1128
|
var srcDepth = utils.measureDepth(activeFolder);
|
|
1087
1129
|
var dstDepth = targetFolder.meta.depth;
|
|
1088
|
-
if (srcDepth + dstDepth >= config.maxDepth
|
|
1130
|
+
if (srcDepth + dstDepth >= config.maxDepth) {
|
|
1089
1131
|
Toastr.error(t("moveToFolder.depthExceeded", {
|
|
1090
1132
|
maxDepth: config.maxDepth
|
|
1091
1133
|
}));
|
|
@@ -1786,7 +1828,17 @@ var FoldersTree = function FoldersTree(_ref) {
|
|
|
1786
1828
|
});
|
|
1787
1829
|
};
|
|
1788
1830
|
|
|
1789
|
-
var
|
|
1831
|
+
var subtreeIds = function subtreeIds(foldersMap, folderId) {
|
|
1832
|
+
var ids = new Set();
|
|
1833
|
+
utils._walkTree(neetoCist.findById(folderId, Object.values(foldersMap !== null && foldersMap !== void 0 ? foldersMap : {})), function (_ref) {
|
|
1834
|
+
var id = _ref.id;
|
|
1835
|
+
return ids.add(id);
|
|
1836
|
+
});
|
|
1837
|
+
return ids;
|
|
1838
|
+
};
|
|
1839
|
+
var createFolderOptions = function createFolderOptions(foldersMap, maxDepth) {
|
|
1840
|
+
var excludedFolderId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
1841
|
+
var excludedIds = subtreeIds(foldersMap, excludedFolderId);
|
|
1790
1842
|
return internal.mapObj(foldersMap, function (folder) {
|
|
1791
1843
|
var _folder$meta$parent;
|
|
1792
1844
|
return {
|
|
@@ -1796,11 +1848,11 @@ var createFolderOptions = function createFolderOptions(foldersMap, config) {
|
|
|
1796
1848
|
pId: (_folder$meta$parent = folder.meta.parent) === null || _folder$meta$parent === void 0 ? void 0 : _folder$meta$parent.id
|
|
1797
1849
|
};
|
|
1798
1850
|
}, function (folder) {
|
|
1799
|
-
return folder.meta.depth <
|
|
1851
|
+
return folder.meta.depth < maxDepth && !excludedIds.has(folder.id);
|
|
1800
1852
|
});
|
|
1801
1853
|
};
|
|
1802
1854
|
|
|
1803
|
-
var _excluded = ["label", "name", "placeholder", "disabled", "loading", "required", "showSearch", "size", "fieldNames", "config", "initialValue"];
|
|
1855
|
+
var _excluded = ["label", "name", "placeholder", "disabled", "loading", "required", "showSearch", "size", "fieldNames", "config", "initialValue", "excludedFolderId"];
|
|
1804
1856
|
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; }
|
|
1805
1857
|
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; }
|
|
1806
1858
|
var TreeSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
@@ -1823,6 +1875,8 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
1823
1875
|
fieldNames = _ref.fieldNames,
|
|
1824
1876
|
config = _ref.config,
|
|
1825
1877
|
initialValue = _ref.initialValue,
|
|
1878
|
+
_ref$excludedFolderId = _ref.excludedFolderId,
|
|
1879
|
+
excludedFolderId = _ref$excludedFolderId === void 0 ? null : _ref$excludedFolderId,
|
|
1826
1880
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
1827
1881
|
var _useFetchFolders = useFolderActions.useFetchFolders(config),
|
|
1828
1882
|
folders = _useFetchFolders.data;
|
|
@@ -1841,8 +1895,8 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
1841
1895
|
setFieldValue(name, parentId);
|
|
1842
1896
|
}, [parentId, name]);
|
|
1843
1897
|
var folderOptions = React.useMemo(function () {
|
|
1844
|
-
return createFolderOptions(foldersMap, config);
|
|
1845
|
-
}, [foldersMap]);
|
|
1898
|
+
return createFolderOptions(foldersMap, config.maxDepth, excludedFolderId);
|
|
1899
|
+
}, [foldersMap, config.maxDepth, excludedFolderId]);
|
|
1846
1900
|
return /*#__PURE__*/jsxRuntime.jsx(NUITreeSelect, _objectSpread({
|
|
1847
1901
|
treeDataSimpleMode: true,
|
|
1848
1902
|
"data-testid": "nui-select-container-wrapper",
|