@bigbinary/neeto-folders-frontend 2.0.36 → 2.0.38
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/dist/.ready +1 -0
- package/dist/cjs/components.js +90 -121
- package/dist/cjs/components.js.map +1 -1
- package/dist/cjs/hooks.js +1 -1
- package/dist/cjs/utils.js +1 -1
- package/dist/cjs/v2/components.js +1855 -0
- package/dist/cjs/v2/components.js.map +1 -0
- package/dist/components.js +87 -118
- package/dist/components.js.map +1 -1
- package/dist/hooks.js +1 -1
- package/dist/{index-BrWMXN6M.js → index-BkzhP3-H.js} +2 -2
- package/dist/index-BkzhP3-H.js.map +1 -0
- package/dist/{index-KIfzNbYI.js → index-Dn0REquw.js} +2 -2
- package/dist/index-Dn0REquw.js.map +1 -0
- package/dist/inject-css-Bkrn7lFS.js +77 -0
- package/dist/inject-css-Bkrn7lFS.js.map +1 -0
- package/dist/inject-css-D3Ee0dJK.js +82 -0
- package/dist/inject-css-D3Ee0dJK.js.map +1 -0
- package/dist/internal-DKHdgJas.js.map +1 -1
- package/dist/internal-DUPKoXC_.js.map +1 -1
- package/dist/{useFolderActions-DBZKRr8d.js → useFolderActions-CkUK_Tj3.js} +6 -5
- package/dist/useFolderActions-CkUK_Tj3.js.map +1 -0
- package/dist/{useFolderActions-4NdTAEfb.js → useFolderActions-D7U62Qea.js} +5 -4
- package/dist/useFolderActions-D7U62Qea.js.map +1 -0
- package/dist/utils.js +1 -1
- package/dist/v2/components.js +1846 -0
- package/dist/v2/components.js.map +1 -0
- package/package.json +35 -29
- package/dist/index-BrWMXN6M.js.map +0 -1
- package/dist/index-KIfzNbYI.js.map +0 -1
- package/dist/useFolderActions-4NdTAEfb.js.map +0 -1
- package/dist/useFolderActions-DBZKRr8d.js.map +0 -1
|
@@ -0,0 +1,1846 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
3
|
+
import { shallow } from 'zustand/shallow';
|
|
4
|
+
import { Alert, Sheet, Spinner, Typography, RadioGroup, Button, Toastr, Checkbox } from '@bigbinary/neeto-atoms';
|
|
5
|
+
import { useQueryClient } from '@tanstack/react-query';
|
|
6
|
+
import { useQueryParams, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
|
|
7
|
+
import { buildUrl, showThumbsUpToastr } from '@bigbinary/neeto-commons-frontend/v2/utils';
|
|
8
|
+
import { Trans } from 'react-i18next';
|
|
9
|
+
import { useHistory, Link, NavLink } from 'react-router-dom';
|
|
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-CkUK_Tj3.js';
|
|
11
|
+
import { u as useTranslation, R as REORDER_TREE_INDENT_WIDTH, c as closestCenter, n } from '../inject-css-Bkrn7lFS.js';
|
|
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-BkzhP3-H.js';
|
|
14
|
+
import { a as isActiveFolder, g as getActiveFolderId, t as toastApiError, i as isArray, m as mapObj } from '../internal-DUPKoXC_.js';
|
|
15
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
16
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
17
|
+
import React, { createElement, useMemo, forwardRef, useState, useEffect, useId, useRef, startTransition } from 'react';
|
|
18
|
+
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
|
|
19
|
+
import _regeneratorRuntime from '@babel/runtime/regenerator';
|
|
20
|
+
import { Textarea, Switch, Input, Form, ActionBlock } from '@bigbinary/neeto-atoms/formik';
|
|
21
|
+
import { t } from 'i18next';
|
|
22
|
+
import { object, string } from 'yup';
|
|
23
|
+
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
24
|
+
import useHotkeys from '@bigbinary/neeto-hotkeys';
|
|
25
|
+
import { hyphenate, isNotPresent, noop, isNotEmpty } from '@bigbinary/neeto-cist';
|
|
26
|
+
import { isEmpty, assoc } from 'ramda';
|
|
27
|
+
import classNames from 'classnames';
|
|
28
|
+
import { useDraggable, useDroppable, DndContext, DragOverlay, useSensors, useSensor, PointerSensor } from '@dnd-kit/core';
|
|
29
|
+
import { GripVertical, Lock, Plus } from 'lucide-react';
|
|
30
|
+
import { createPortal } from 'react-dom';
|
|
31
|
+
import { snapCenterToCursor } from '@dnd-kit/modifiers';
|
|
32
|
+
import MoreDropdown from '@bigbinary/neeto-molecules/v2/MoreDropdown';
|
|
33
|
+
import { useQueryParams as useQueryParams$1 } from '@bigbinary/neeto-commons-frontend/react-utils';
|
|
34
|
+
import { buildUrl as buildUrl$1 } from '@bigbinary/neeto-commons-frontend/utils';
|
|
35
|
+
import Tree from '@bigbinary/neetoui/Tree';
|
|
36
|
+
import Typography$1 from '@bigbinary/neetoui/Typography';
|
|
37
|
+
import { useFormikContext } from 'formik';
|
|
38
|
+
import NUITreeSelect from '@bigbinary/neetoui/formik/TreeSelect';
|
|
39
|
+
import 'zustand';
|
|
40
|
+
import '@bigbinary/neetoui/Toastr';
|
|
41
|
+
|
|
42
|
+
function ownKeys$k(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; }
|
|
43
|
+
function _objectSpread$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
44
|
+
var FoldersAlerts = function FoldersAlerts(_ref) {
|
|
45
|
+
var config = _ref.config;
|
|
46
|
+
var _useFolderStore = useFolderStore(function (store) {
|
|
47
|
+
return {
|
|
48
|
+
setFolderState: store["setFolderState"]
|
|
49
|
+
};
|
|
50
|
+
}, shallow),
|
|
51
|
+
setFolderState = _useFolderStore.setFolderState;
|
|
52
|
+
var queryParams = useQueryParams({
|
|
53
|
+
toCamelCase: false
|
|
54
|
+
});
|
|
55
|
+
var queryClient = useQueryClient();
|
|
56
|
+
var history = useHistory();
|
|
57
|
+
var _useTranslation = useTranslation(config),
|
|
58
|
+
t = _useTranslation.t;
|
|
59
|
+
var _useFolderStore2 = useFolderStore(function (store) {
|
|
60
|
+
var _store$alertState, _store$alertState2;
|
|
61
|
+
return {
|
|
62
|
+
type: (_store$alertState = store["alertState"]) === null || _store$alertState === void 0 ? void 0 : _store$alertState["type"],
|
|
63
|
+
item: (_store$alertState2 = store["alertState"]) === null || _store$alertState2 === void 0 ? void 0 : _store$alertState2["item"]
|
|
64
|
+
};
|
|
65
|
+
}, shallow),
|
|
66
|
+
type = _useFolderStore2.type,
|
|
67
|
+
item = _useFolderStore2.item;
|
|
68
|
+
var _useDestroyFolder = useDestroyFolder(config),
|
|
69
|
+
destroyFolder = _useDestroyFolder.mutateAsync,
|
|
70
|
+
isPending = _useDestroyFolder.isPending;
|
|
71
|
+
var _useFolders = useFolders(config),
|
|
72
|
+
folders = _useFolders.folders;
|
|
73
|
+
var onClose = function onClose() {
|
|
74
|
+
return setFolderState({
|
|
75
|
+
alertState: null
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
var alertProps = {
|
|
79
|
+
isOpen: !!type,
|
|
80
|
+
isSubmitting: isPending,
|
|
81
|
+
onClose: onClose
|
|
82
|
+
};
|
|
83
|
+
var onConfirmDelete = function onConfirmDelete() {
|
|
84
|
+
var onSuccess = function onSuccess() {
|
|
85
|
+
var _config$onUpdateSucce;
|
|
86
|
+
var isActive = isActiveFolder(config, item.sid);
|
|
87
|
+
// Invalidates items and folder details. Refetch only if not active folder.
|
|
88
|
+
var invalidationKeys = [].concat(_toConsumableArray(config.invalidationKeys), [[QUERY_KEYS.FOLDERS, config.type, QUERY_KEYS.DETAILS]]);
|
|
89
|
+
invalidationKeys.forEach(function (queryKey) {
|
|
90
|
+
queryClient.invalidateQueries({
|
|
91
|
+
refetchType: isActive ? "none" : "active",
|
|
92
|
+
queryKey: queryKey
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
if (isActive && folders) {
|
|
96
|
+
var path = pathToFolder(folders, item.id);
|
|
97
|
+
var parent = path[path.length - 2];
|
|
98
|
+
var redirectUrl = parent ? buildUrl(config.folderPath, _objectSpread$k(_objectSpread$k({}, queryParams), {}, {
|
|
99
|
+
folderId: parent.sid
|
|
100
|
+
})) : "/";
|
|
101
|
+
history.replace(redirectUrl);
|
|
102
|
+
}
|
|
103
|
+
(_config$onUpdateSucce = config.onUpdateSuccess) === null || _config$onUpdateSucce === void 0 || _config$onUpdateSucce.call(config);
|
|
104
|
+
};
|
|
105
|
+
destroyFolder(item.id, {
|
|
106
|
+
onSuccess: onSuccess,
|
|
107
|
+
onSettled: onClose
|
|
108
|
+
});
|
|
109
|
+
};
|
|
110
|
+
if (type === "delete") {
|
|
111
|
+
alertProps.title = t("deleteFolder.title");
|
|
112
|
+
alertProps.message = /*#__PURE__*/jsx(Trans, {
|
|
113
|
+
i18nKey: "deleteFolder.info",
|
|
114
|
+
values: item
|
|
115
|
+
});
|
|
116
|
+
if (config.customizeAlerts) config.customizeAlerts(type, item, alertProps);
|
|
117
|
+
alertProps.onSubmit = onConfirmDelete;
|
|
118
|
+
}
|
|
119
|
+
return /*#__PURE__*/jsx(Alert, _objectSpread$k({}, alertProps));
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
var FORM_VALIDATION_SCHEMA = object().shape({
|
|
123
|
+
name: string().required(t("errors.blank", {
|
|
124
|
+
entity: t("common.name")
|
|
125
|
+
}))
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
var _excluded$7 = ["type"];
|
|
129
|
+
function ownKeys$j(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; }
|
|
130
|
+
function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
131
|
+
var typeComponentMap = {
|
|
132
|
+
string: Input,
|
|
133
|
+
"boolean": Switch,
|
|
134
|
+
textarea: Textarea
|
|
135
|
+
};
|
|
136
|
+
var ExtraAttributes = function ExtraAttributes(_ref) {
|
|
137
|
+
var attributes = _ref.attributes;
|
|
138
|
+
if (!Array.isArray(attributes)) return null;
|
|
139
|
+
return attributes.map(function (_ref2) {
|
|
140
|
+
var type = _ref2.type,
|
|
141
|
+
rest = _objectWithoutProperties(_ref2, _excluded$7);
|
|
142
|
+
var Component = typeComponentMap[type];
|
|
143
|
+
if (!Component) return null;
|
|
144
|
+
return /*#__PURE__*/createElement(Component, _objectSpread$j(_objectSpread$j({}, rest), {}, {
|
|
145
|
+
key: rest.name
|
|
146
|
+
}));
|
|
147
|
+
});
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
var createInitialValues = function createInitialValues(defaults, extraAttrs) {
|
|
151
|
+
var values = {
|
|
152
|
+
name: "",
|
|
153
|
+
parentId: defaults.parentId || null
|
|
154
|
+
};
|
|
155
|
+
extraAttrs === null || extraAttrs === void 0 || extraAttrs.forEach(function (_ref) {
|
|
156
|
+
var name = _ref.name,
|
|
157
|
+
defaultValue = _ref.defaultValue;
|
|
158
|
+
values[name] = defaultValue;
|
|
159
|
+
});
|
|
160
|
+
return values;
|
|
161
|
+
};
|
|
162
|
+
var createPayload = function createPayload(values, extraAttrs) {
|
|
163
|
+
var payload = {
|
|
164
|
+
name: values.name,
|
|
165
|
+
parentId: values.parentId || ""
|
|
166
|
+
};
|
|
167
|
+
extraAttrs === null || extraAttrs === void 0 || extraAttrs.forEach(function (_ref2) {
|
|
168
|
+
var name = _ref2.name;
|
|
169
|
+
payload[name] = values[name];
|
|
170
|
+
});
|
|
171
|
+
return payload;
|
|
172
|
+
};
|
|
173
|
+
var filterExtraAttributes = function filterExtraAttributes(attributes, isEditing) {
|
|
174
|
+
if (!attributes || !Array.isArray(attributes)) return [];
|
|
175
|
+
return attributes.filter(function (attribute) {
|
|
176
|
+
if (isEditing) {
|
|
177
|
+
return attribute.isEditAttribute !== false;
|
|
178
|
+
}
|
|
179
|
+
return attribute.isCreateAttribute !== false;
|
|
180
|
+
});
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
var AddEditPane = function AddEditPane(_ref) {
|
|
184
|
+
var _config$addEditValida;
|
|
185
|
+
var setFocusField = _ref.setFocusField,
|
|
186
|
+
config = _ref.config,
|
|
187
|
+
onClose = _ref.onClose,
|
|
188
|
+
folderSid = _ref.folderSid;
|
|
189
|
+
var _useTranslation = useTranslation(config),
|
|
190
|
+
t = _useTranslation.t;
|
|
191
|
+
var _useFolderStore = useFolderStore(function (store) {
|
|
192
|
+
var _store$paneState, _store$paneState2;
|
|
193
|
+
return {
|
|
194
|
+
type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"],
|
|
195
|
+
item: (_store$paneState2 = store["paneState"]) === null || _store$paneState2 === void 0 ? void 0 : _store$paneState2["item"]
|
|
196
|
+
};
|
|
197
|
+
}, shallow),
|
|
198
|
+
type = _useFolderStore.type,
|
|
199
|
+
item = _useFolderStore.item;
|
|
200
|
+
var _useFolderStore2 = useFolderStore(function (store) {
|
|
201
|
+
return {
|
|
202
|
+
setFolderState: store["setFolderState"]
|
|
203
|
+
};
|
|
204
|
+
}, shallow),
|
|
205
|
+
setFolderState = _useFolderStore2.setFolderState;
|
|
206
|
+
var _useFetchFolders = useFetchFolders(config),
|
|
207
|
+
isFetching = _useFetchFolders.isFetching;
|
|
208
|
+
var _useCreateFolder = useCreateFolder(config),
|
|
209
|
+
createFolder = _useCreateFolder.mutate;
|
|
210
|
+
var _useUpdateFolder = useUpdateFolder(config),
|
|
211
|
+
updateFolder = _useUpdateFolder.mutateAsync;
|
|
212
|
+
var isEditing = type === "edit" && item;
|
|
213
|
+
var activeFolderSid = folderSid || getActiveFolderId(config);
|
|
214
|
+
var extraAttributes = config.extraAttributes;
|
|
215
|
+
var filteredExtraAttributes = useMemo(function () {
|
|
216
|
+
return filterExtraAttributes(extraAttributes, isEditing);
|
|
217
|
+
}, [extraAttributes, isEditing]);
|
|
218
|
+
var handleError = function handleError(setStatus, error) {
|
|
219
|
+
var response = error.response;
|
|
220
|
+
if (response && response.data && response.data.errors) {
|
|
221
|
+
setStatus(response.data.errors);
|
|
222
|
+
}
|
|
223
|
+
};
|
|
224
|
+
var onSubmitForm = /*#__PURE__*/function () {
|
|
225
|
+
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values, _ref2) {
|
|
226
|
+
var setStatus, payload, reactQueryOptions, config;
|
|
227
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
228
|
+
while (1) switch (_context.prev = _context.next) {
|
|
229
|
+
case 0:
|
|
230
|
+
setStatus = _ref2.setStatus;
|
|
231
|
+
payload = createPayload(values, filteredExtraAttributes);
|
|
232
|
+
reactQueryOptions = {
|
|
233
|
+
onSuccess: function onSuccess(_ref4) {
|
|
234
|
+
var id = _ref4.id,
|
|
235
|
+
sid = _ref4.sid;
|
|
236
|
+
if (isEditing && sid !== item.sid) {
|
|
237
|
+
var newPath = window.location.pathname.replace(activeFolderSid, sid);
|
|
238
|
+
window.location.href = newPath;
|
|
239
|
+
} else if (!isEditing) {
|
|
240
|
+
setFolderState({
|
|
241
|
+
lastCreatedFolderId: id
|
|
242
|
+
});
|
|
243
|
+
}
|
|
244
|
+
showThumbsUpToastr();
|
|
245
|
+
onClose();
|
|
246
|
+
},
|
|
247
|
+
onError: function onError(error) {
|
|
248
|
+
return handleError(setStatus, error);
|
|
249
|
+
}
|
|
250
|
+
};
|
|
251
|
+
config = {
|
|
252
|
+
showToastr: false
|
|
253
|
+
};
|
|
254
|
+
if (!isEditing) {
|
|
255
|
+
_context.next = 9;
|
|
256
|
+
break;
|
|
257
|
+
}
|
|
258
|
+
_context.next = 7;
|
|
259
|
+
return updateFolder({
|
|
260
|
+
id: item.id,
|
|
261
|
+
payload: payload,
|
|
262
|
+
config: config,
|
|
263
|
+
initialSlug: item.sid
|
|
264
|
+
}, reactQueryOptions);
|
|
265
|
+
case 7:
|
|
266
|
+
_context.next = 11;
|
|
267
|
+
break;
|
|
268
|
+
case 9:
|
|
269
|
+
_context.next = 11;
|
|
270
|
+
return createFolder({
|
|
271
|
+
payload: payload,
|
|
272
|
+
config: config
|
|
273
|
+
}, reactQueryOptions);
|
|
274
|
+
case 11:
|
|
275
|
+
case "end":
|
|
276
|
+
return _context.stop();
|
|
277
|
+
}
|
|
278
|
+
}, _callee);
|
|
279
|
+
}));
|
|
280
|
+
return function onSubmitForm(_x, _x2) {
|
|
281
|
+
return _ref3.apply(this, arguments);
|
|
282
|
+
};
|
|
283
|
+
}();
|
|
284
|
+
var initialValues = useMemo(function () {
|
|
285
|
+
return isEditing ? item : createInitialValues({}, filteredExtraAttributes);
|
|
286
|
+
}, [isEditing, item, filteredExtraAttributes]);
|
|
287
|
+
if (isFetching) {
|
|
288
|
+
return /*#__PURE__*/jsx(Sheet.Body, {
|
|
289
|
+
className: "flex items-center justify-center",
|
|
290
|
+
children: /*#__PURE__*/jsx(Spinner, {})
|
|
291
|
+
});
|
|
292
|
+
}
|
|
293
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
294
|
+
children: [/*#__PURE__*/jsx(Sheet.Header, {
|
|
295
|
+
children: /*#__PURE__*/jsx(Sheet.Title, {
|
|
296
|
+
children: isEditing ? t("folders.edit") : t("folders.add")
|
|
297
|
+
})
|
|
298
|
+
}), /*#__PURE__*/jsx(Form, {
|
|
299
|
+
className: "flex flex-grow flex-col",
|
|
300
|
+
formikProps: {
|
|
301
|
+
initialValues: initialValues,
|
|
302
|
+
enableReinitialize: true,
|
|
303
|
+
validationSchema: ((_config$addEditValida = config.addEditValidationSchema) === null || _config$addEditValida === void 0 ? void 0 : _config$addEditValida.call(config, isEditing)) || FORM_VALIDATION_SCHEMA,
|
|
304
|
+
onSubmit: onSubmitForm
|
|
305
|
+
},
|
|
306
|
+
children: function children(_ref5) {
|
|
307
|
+
var dirty = _ref5.dirty;
|
|
308
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
309
|
+
children: [/*#__PURE__*/jsx(Sheet.Body, {
|
|
310
|
+
className: "pb-6",
|
|
311
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
312
|
+
className: "w-full space-y-5",
|
|
313
|
+
children: [/*#__PURE__*/jsx(Input, {
|
|
314
|
+
required: true,
|
|
315
|
+
label: t("folders.name"),
|
|
316
|
+
name: "name",
|
|
317
|
+
ref: setFocusField
|
|
318
|
+
}), /*#__PURE__*/jsx(ExtraAttributes, {
|
|
319
|
+
attributes: filteredExtraAttributes
|
|
320
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
321
|
+
children: [/*#__PURE__*/jsx(TreeSelect, {
|
|
322
|
+
config: config,
|
|
323
|
+
allowClear: true,
|
|
324
|
+
showSearch: true,
|
|
325
|
+
initialValue: folderSid,
|
|
326
|
+
label: t("createFolder.parentTitle"),
|
|
327
|
+
name: "parentId"
|
|
328
|
+
}), /*#__PURE__*/jsx(Typography, {
|
|
329
|
+
className: "mt-1",
|
|
330
|
+
variant: "body3",
|
|
331
|
+
children: t("createFolder.parentInfo")
|
|
332
|
+
})]
|
|
333
|
+
})]
|
|
334
|
+
})
|
|
335
|
+
}), /*#__PURE__*/jsx(Sheet.Footer, {
|
|
336
|
+
children: /*#__PURE__*/jsx(ActionBlock, {
|
|
337
|
+
cancelButtonProps: {
|
|
338
|
+
onClick: onClose
|
|
339
|
+
},
|
|
340
|
+
submitButtonProps: {
|
|
341
|
+
disabled: !dirty
|
|
342
|
+
}
|
|
343
|
+
})
|
|
344
|
+
})]
|
|
345
|
+
});
|
|
346
|
+
}
|
|
347
|
+
})]
|
|
348
|
+
});
|
|
349
|
+
};
|
|
350
|
+
|
|
351
|
+
var _excluded$6 = ["icon", "itemLabel", "folder", "folderLabel", "depth", "hideTreeIndent", "className", "onClick"];
|
|
352
|
+
function ownKeys$i(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; }
|
|
353
|
+
function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
354
|
+
var Node$2 = function Node(_ref, ref) {
|
|
355
|
+
var _folder$children$leng, _folder$children;
|
|
356
|
+
var _ref$icon = _ref.icon,
|
|
357
|
+
icon = _ref$icon === void 0 ? null : _ref$icon,
|
|
358
|
+
itemLabel = _ref.itemLabel,
|
|
359
|
+
folder = _ref.folder,
|
|
360
|
+
folderLabel = _ref.folderLabel,
|
|
361
|
+
depth = _ref.depth,
|
|
362
|
+
_ref$hideTreeIndent = _ref.hideTreeIndent,
|
|
363
|
+
hideTreeIndent = _ref$hideTreeIndent === void 0 ? false : _ref$hideTreeIndent,
|
|
364
|
+
className = _ref.className,
|
|
365
|
+
onClick = _ref.onClick,
|
|
366
|
+
rest = _objectWithoutProperties(_ref, _excluded$6);
|
|
367
|
+
var metaInfo = [];
|
|
368
|
+
var childCount = (_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;
|
|
369
|
+
childCount > 0 && metaInfo.push("".concat(childCount, " ").concat(folderLabel).toLowerCase());
|
|
370
|
+
folder.itemCount > 0 && metaInfo.push("".concat(folder.itemCount, " ").concat(itemLabel).toLowerCase());
|
|
371
|
+
return /*#__PURE__*/jsxs("div", {
|
|
372
|
+
className: "flex w-full min-w-0",
|
|
373
|
+
children: [!hideTreeIndent && Array.from({
|
|
374
|
+
length: depth + 1
|
|
375
|
+
}).map(function (_, index) {
|
|
376
|
+
return /*#__PURE__*/jsx("span", {
|
|
377
|
+
className: "neeto-ui-border-gray-400 relative h-full flex-shrink-0 border-s",
|
|
378
|
+
style: {
|
|
379
|
+
width: REORDER_TREE_INDENT_WIDTH,
|
|
380
|
+
insetInlineStart: Math.round(REORDER_TREE_INDENT_WIDTH / 2)
|
|
381
|
+
},
|
|
382
|
+
children: index === depth && /*#__PURE__*/jsx("span", {
|
|
383
|
+
"aria-hidden": true,
|
|
384
|
+
className: "neeto-ui-border-gray-400 absolute border-t",
|
|
385
|
+
style: {
|
|
386
|
+
insetInlineStart: 0,
|
|
387
|
+
top: "50%",
|
|
388
|
+
width: Math.round(REORDER_TREE_INDENT_WIDTH / 2)
|
|
389
|
+
}
|
|
390
|
+
})
|
|
391
|
+
}, index);
|
|
392
|
+
}), /*#__PURE__*/jsxs("div", _objectSpread$i(_objectSpread$i({}, _objectSpread$i(_objectSpread$i({}, rest), {}, {
|
|
393
|
+
onClick: onClick,
|
|
394
|
+
ref: ref
|
|
395
|
+
})), {}, {
|
|
396
|
+
"data-testid": "".concat(hyphenate(folder.name), "-folder-node"),
|
|
397
|
+
className: classNames("relative my-1 flex cursor-pointer items-center px-2 py-1", className),
|
|
398
|
+
children: [icon, /*#__PURE__*/jsxs("div", {
|
|
399
|
+
className: "ms-2 flex items-baseline gap-2",
|
|
400
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
401
|
+
variant: "body1",
|
|
402
|
+
weight: "medium",
|
|
403
|
+
children: folder.name
|
|
404
|
+
}), metaInfo.length > 0 && /*#__PURE__*/jsx(Typography, {
|
|
405
|
+
className: "neeto-ui-text-gray-500",
|
|
406
|
+
variant: "body3",
|
|
407
|
+
weight: "normal",
|
|
408
|
+
children: metaInfo.join(" . ")
|
|
409
|
+
})]
|
|
410
|
+
})]
|
|
411
|
+
}))]
|
|
412
|
+
});
|
|
413
|
+
};
|
|
414
|
+
var Node$1 = /*#__PURE__*/forwardRef(Node$2);
|
|
415
|
+
|
|
416
|
+
var _excluded$5 = ["folder", "item", "depth", "maxDepth", "disabled", "config"];
|
|
417
|
+
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; }
|
|
418
|
+
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; }
|
|
419
|
+
var _SelectableNode = function SelectableNode(_ref) {
|
|
420
|
+
var _folder$children$leng, _folder$children;
|
|
421
|
+
var folder = _ref.folder,
|
|
422
|
+
item = _ref.item,
|
|
423
|
+
_ref$depth = _ref.depth,
|
|
424
|
+
depth = _ref$depth === void 0 ? 0 : _ref$depth,
|
|
425
|
+
maxDepth = _ref.maxDepth,
|
|
426
|
+
disabled = _ref.disabled,
|
|
427
|
+
config = _ref.config,
|
|
428
|
+
rest = _objectWithoutProperties(_ref, _excluded$5);
|
|
429
|
+
var selection = rest.selection,
|
|
430
|
+
onSelect = rest.onSelect;
|
|
431
|
+
var _useTranslation = useTranslation(config),
|
|
432
|
+
t = _useTranslation.t;
|
|
433
|
+
var isDisabled = disabled || (item === null || item === void 0 ? void 0 : item.id) === folder.id || depth >= maxDepth;
|
|
434
|
+
var itemLabel = config.labels[folder.itemCount > 1 ? "items" : "item"];
|
|
435
|
+
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"];
|
|
436
|
+
var renderChildren = function renderChildren() {
|
|
437
|
+
if (isNotPresent(folder.children)) return null;
|
|
438
|
+
return folder.children.map(function (child) {
|
|
439
|
+
return /*#__PURE__*/createElement(_SelectableNode, _objectSpread$h(_objectSpread$h({}, _objectSpread$h(_objectSpread$h({}, rest), {}, {
|
|
440
|
+
config: config,
|
|
441
|
+
item: item,
|
|
442
|
+
maxDepth: maxDepth
|
|
443
|
+
})), {}, {
|
|
444
|
+
depth: depth + 1,
|
|
445
|
+
disabled: isDisabled,
|
|
446
|
+
folder: child,
|
|
447
|
+
key: child.id
|
|
448
|
+
}));
|
|
449
|
+
});
|
|
450
|
+
};
|
|
451
|
+
return /*#__PURE__*/jsxs("div", {
|
|
452
|
+
"aria-disabled": isDisabled,
|
|
453
|
+
title: isDisabled ? t("moveToFolder.notAllowed") : undefined,
|
|
454
|
+
className: classNames("flex flex-col w-full min-w-0", {
|
|
455
|
+
"opacity-60": isDisabled
|
|
456
|
+
}),
|
|
457
|
+
children: [/*#__PURE__*/jsx(Node$1, _objectSpread$h(_objectSpread$h({}, _objectSpread$h(_objectSpread$h({}, rest), {}, {
|
|
458
|
+
depth: depth,
|
|
459
|
+
folder: folder,
|
|
460
|
+
folderLabel: folderLabel,
|
|
461
|
+
itemLabel: itemLabel
|
|
462
|
+
})), {}, {
|
|
463
|
+
icon: /*#__PURE__*/jsx(RadioGroup.Item, {
|
|
464
|
+
readOnly: true,
|
|
465
|
+
checked: selection === folder.id,
|
|
466
|
+
className: "neeto-ui-radio__container",
|
|
467
|
+
"data-testid": "".concat(hyphenate(folder.name), "-folder-option"),
|
|
468
|
+
name: "move-folder-option"
|
|
469
|
+
}),
|
|
470
|
+
onClick: isDisabled ? noop : function () {
|
|
471
|
+
return onSelect(folder);
|
|
472
|
+
}
|
|
473
|
+
})), renderChildren()]
|
|
474
|
+
});
|
|
475
|
+
};
|
|
476
|
+
|
|
477
|
+
function ownKeys$g(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; }
|
|
478
|
+
function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
479
|
+
var createTree = function createTree(folders, isRootEnabled) {
|
|
480
|
+
return isRootEnabled ? [{
|
|
481
|
+
name: "/",
|
|
482
|
+
id: null,
|
|
483
|
+
children: folders
|
|
484
|
+
}] : folders;
|
|
485
|
+
};
|
|
486
|
+
var PaneBody = function PaneBody(_ref) {
|
|
487
|
+
var _ref$isRootEnabled = _ref.isRootEnabled,
|
|
488
|
+
isRootEnabled = _ref$isRootEnabled === void 0 ? true : _ref$isRootEnabled,
|
|
489
|
+
item = _ref.item,
|
|
490
|
+
config = _ref.config,
|
|
491
|
+
submitButtonProps = _ref.submitButtonProps,
|
|
492
|
+
cancelButtonProps = _ref.cancelButtonProps,
|
|
493
|
+
removeButtonProps = _ref.removeButtonProps,
|
|
494
|
+
onSubmit = _ref.onSubmit,
|
|
495
|
+
onClose = _ref.onClose,
|
|
496
|
+
onRemove = _ref.onRemove,
|
|
497
|
+
parentId = _ref.parentId;
|
|
498
|
+
var parent = (item === null || item === void 0 ? void 0 : item.parentId) || parentId || null;
|
|
499
|
+
var _useState = useState(parent),
|
|
500
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
501
|
+
selection = _useState2[0],
|
|
502
|
+
setSelection = _useState2[1];
|
|
503
|
+
var _useFolderStore = useFolderStore(function (store) {
|
|
504
|
+
return {
|
|
505
|
+
setFolderState: store["setFolderState"]
|
|
506
|
+
};
|
|
507
|
+
}, shallow),
|
|
508
|
+
setFolderState = _useFolderStore.setFolderState;
|
|
509
|
+
var _useFetchFolders = useFetchFolders(config),
|
|
510
|
+
_useFetchFolders$data = _useFetchFolders.data,
|
|
511
|
+
folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data,
|
|
512
|
+
isFetching = _useFetchFolders.isFetching;
|
|
513
|
+
var _useTranslation = useTranslation(config),
|
|
514
|
+
t = _useTranslation.t;
|
|
515
|
+
var _useFolderStore2 = useFolderStore(function (store) {
|
|
516
|
+
var _store$paneState;
|
|
517
|
+
return {
|
|
518
|
+
type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"]
|
|
519
|
+
};
|
|
520
|
+
}, shallow),
|
|
521
|
+
type = _useFolderStore2.type;
|
|
522
|
+
var tree = useMemo(function () {
|
|
523
|
+
return createTree(folders, isRootEnabled);
|
|
524
|
+
}, [folders, isRootEnabled]);
|
|
525
|
+
var maxDepth = Number.POSITIVE_INFINITY;
|
|
526
|
+
if (item) {
|
|
527
|
+
// If item is a folder, measure the current depth from current folder to longest leaf.
|
|
528
|
+
var foldersMap = treeToMap(folders);
|
|
529
|
+
var folder = foldersMap[item.id];
|
|
530
|
+
if (folder) {
|
|
531
|
+
var folderDepth = measureDepth(folder) + 1; // +1 for own depth;
|
|
532
|
+
maxDepth = config.maxDepth - folderDepth;
|
|
533
|
+
if (isRootEnabled) maxDepth += 1; // +1 for root folder.
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
var onAddFolder = function onAddFolder() {
|
|
537
|
+
setFolderState({
|
|
538
|
+
paneState: {
|
|
539
|
+
type: "add",
|
|
540
|
+
item: null
|
|
541
|
+
}
|
|
542
|
+
});
|
|
543
|
+
};
|
|
544
|
+
var _useFolderStore3 = useFolderStore(function (store) {
|
|
545
|
+
var _store$lastCreatedFol;
|
|
546
|
+
return {
|
|
547
|
+
lastCreatedFolderId: (_store$lastCreatedFol = store["lastCreatedFolderId"]) === null || _store$lastCreatedFol === void 0 ? void 0 : _store$lastCreatedFol["lastCreatedFolderId"]
|
|
548
|
+
};
|
|
549
|
+
}, shallow),
|
|
550
|
+
lastCreatedFolderId = _useFolderStore3.lastCreatedFolderId;
|
|
551
|
+
useEffect(function () {
|
|
552
|
+
if (lastCreatedFolderId == null) return;
|
|
553
|
+
setSelection(lastCreatedFolderId);
|
|
554
|
+
setFolderState({
|
|
555
|
+
lastCreatedFolderId: null
|
|
556
|
+
});
|
|
557
|
+
}, [lastCreatedFolderId]);
|
|
558
|
+
useHotkeys(["command+enter", "enter"], function () {
|
|
559
|
+
return onSubmit(selection);
|
|
560
|
+
}, {
|
|
561
|
+
mode: "global",
|
|
562
|
+
enabled: !!type
|
|
563
|
+
});
|
|
564
|
+
if (isFetching) {
|
|
565
|
+
return /*#__PURE__*/jsx(Sheet.Body, {
|
|
566
|
+
className: "flex items-center justify-center",
|
|
567
|
+
children: /*#__PURE__*/jsx(Spinner, {})
|
|
568
|
+
});
|
|
569
|
+
}
|
|
570
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
571
|
+
children: [/*#__PURE__*/jsxs(Sheet.Header, {
|
|
572
|
+
className: "flex items-center justify-between",
|
|
573
|
+
children: [/*#__PURE__*/jsx(Sheet.Title, {
|
|
574
|
+
children: t("moveToFolder.title")
|
|
575
|
+
}), /*#__PURE__*/jsx(Button, {
|
|
576
|
+
className: "me-2",
|
|
577
|
+
"data-testid": "add-new-folder-button",
|
|
578
|
+
label: t("folders.add"),
|
|
579
|
+
variant: "link",
|
|
580
|
+
onClick: onAddFolder
|
|
581
|
+
})]
|
|
582
|
+
}), /*#__PURE__*/jsx(Sheet.Body, {
|
|
583
|
+
className: "pb-6",
|
|
584
|
+
children: tree.map(function (folder) {
|
|
585
|
+
return /*#__PURE__*/createElement(_SelectableNode, {
|
|
586
|
+
config: config,
|
|
587
|
+
folder: folder,
|
|
588
|
+
item: item,
|
|
589
|
+
maxDepth: maxDepth,
|
|
590
|
+
selection: selection,
|
|
591
|
+
disabled: (item === null || item === void 0 ? void 0 : item.id) === folder.id || maxDepth <= 0,
|
|
592
|
+
key: folder.id,
|
|
593
|
+
onSelect: function onSelect(folder) {
|
|
594
|
+
return setSelection(folder.id);
|
|
595
|
+
}
|
|
596
|
+
});
|
|
597
|
+
})
|
|
598
|
+
}), /*#__PURE__*/jsxs(Sheet.Footer, {
|
|
599
|
+
className: "space-x-2",
|
|
600
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
601
|
+
className: "flex flex-1 space-x-2",
|
|
602
|
+
children: [/*#__PURE__*/jsx(Button, _objectSpread$g(_objectSpread$g({
|
|
603
|
+
label: t("common.save"),
|
|
604
|
+
variant: "default",
|
|
605
|
+
onClick: function onClick() {
|
|
606
|
+
return onSubmit(selection);
|
|
607
|
+
}
|
|
608
|
+
}, submitButtonProps), {}, {
|
|
609
|
+
"data-testid": "save-changes-button",
|
|
610
|
+
disabled: selection === parent || (submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.disabled)
|
|
611
|
+
})), /*#__PURE__*/jsx(Button, _objectSpread$g(_objectSpread$g({
|
|
612
|
+
label: t("common.cancel"),
|
|
613
|
+
variant: "ghost",
|
|
614
|
+
onClick: onClose
|
|
615
|
+
}, cancelButtonProps), {}, {
|
|
616
|
+
"data-testid": "cancel-button"
|
|
617
|
+
}))]
|
|
618
|
+
}), onRemove && /*#__PURE__*/jsx(Button, _objectSpread$g(_objectSpread$g({
|
|
619
|
+
label: t("moveToFolder.remove"),
|
|
620
|
+
variant: "outline",
|
|
621
|
+
onClick: onRemove
|
|
622
|
+
}, removeButtonProps), {}, {
|
|
623
|
+
"data-testid": "remove-from-folder-button"
|
|
624
|
+
}))]
|
|
625
|
+
})]
|
|
626
|
+
});
|
|
627
|
+
};
|
|
628
|
+
|
|
629
|
+
var MoveFolderPane = function MoveFolderPane(_ref) {
|
|
630
|
+
var config = _ref.config,
|
|
631
|
+
onClose = _ref.onClose;
|
|
632
|
+
var _useFolderStore = useFolderStore(function (store) {
|
|
633
|
+
var _store$paneState;
|
|
634
|
+
return {
|
|
635
|
+
item: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["item"]
|
|
636
|
+
};
|
|
637
|
+
}, shallow),
|
|
638
|
+
item = _useFolderStore.item;
|
|
639
|
+
var _useUpdateFolder = useUpdateFolder(config),
|
|
640
|
+
isPending = _useUpdateFolder.isPending,
|
|
641
|
+
updateFolder = _useUpdateFolder.mutate;
|
|
642
|
+
var onSaveSelection = function onSaveSelection(parentId) {
|
|
643
|
+
var payload = {
|
|
644
|
+
id: item.id,
|
|
645
|
+
parentId: parentId
|
|
646
|
+
};
|
|
647
|
+
updateFolder({
|
|
648
|
+
id: item.id,
|
|
649
|
+
payload: payload,
|
|
650
|
+
config: {
|
|
651
|
+
showToastr: false
|
|
652
|
+
}
|
|
653
|
+
}, {
|
|
654
|
+
onSuccess: function onSuccess() {
|
|
655
|
+
var _config$onUpdateSucce;
|
|
656
|
+
onClose();
|
|
657
|
+
(_config$onUpdateSucce = config.onUpdateSuccess) === null || _config$onUpdateSucce === void 0 || _config$onUpdateSucce.call(config);
|
|
658
|
+
},
|
|
659
|
+
onError: toastApiError
|
|
660
|
+
});
|
|
661
|
+
};
|
|
662
|
+
return /*#__PURE__*/jsx(PaneBody, {
|
|
663
|
+
config: config,
|
|
664
|
+
item: item,
|
|
665
|
+
onClose: onClose,
|
|
666
|
+
submitButtonProps: {
|
|
667
|
+
loading: isPending,
|
|
668
|
+
disabled: isPending
|
|
669
|
+
},
|
|
670
|
+
onSubmit: onSaveSelection
|
|
671
|
+
});
|
|
672
|
+
};
|
|
673
|
+
|
|
674
|
+
var _excluded$4 = ["folder", "depth", "config", "folderLabel", "itemLabel"];
|
|
675
|
+
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; }
|
|
676
|
+
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; }
|
|
677
|
+
var _DraggableNode$1 = function DraggableNode(_ref) {
|
|
678
|
+
var folder = _ref.folder,
|
|
679
|
+
_ref$depth = _ref.depth,
|
|
680
|
+
depth = _ref$depth === void 0 ? 0 : _ref$depth,
|
|
681
|
+
config = _ref.config,
|
|
682
|
+
folderLabel = _ref.folderLabel,
|
|
683
|
+
itemLabel = _ref.itemLabel,
|
|
684
|
+
rest = _objectWithoutProperties(_ref, _excluded$4);
|
|
685
|
+
var _useDraggable = useDraggable({
|
|
686
|
+
id: "draggable-item--".concat(folder.id),
|
|
687
|
+
data: folder,
|
|
688
|
+
disabled: depth <= 0
|
|
689
|
+
}),
|
|
690
|
+
isDragging = _useDraggable.isDragging,
|
|
691
|
+
attributes = _useDraggable.attributes,
|
|
692
|
+
listeners = _useDraggable.listeners,
|
|
693
|
+
setDraggableRef = _useDraggable.setNodeRef;
|
|
694
|
+
var _useDroppable = useDroppable({
|
|
695
|
+
id: "droppable-item--".concat(folder.id),
|
|
696
|
+
data: folder,
|
|
697
|
+
disabled: isDragging
|
|
698
|
+
}),
|
|
699
|
+
isOver = _useDroppable.isOver,
|
|
700
|
+
setDroppableRef = _useDroppable.setNodeRef;
|
|
701
|
+
var renderChildren = function renderChildren() {
|
|
702
|
+
if (isNotPresent(folder.children) || isDragging) return null;
|
|
703
|
+
return folder.children.map(function (child) {
|
|
704
|
+
var _child$children$lengt, _child$children;
|
|
705
|
+
return /*#__PURE__*/createElement(_DraggableNode$1, _objectSpread$f(_objectSpread$f({}, _objectSpread$f(_objectSpread$f({}, rest), {}, {
|
|
706
|
+
config: config
|
|
707
|
+
})), {}, {
|
|
708
|
+
depth: depth + 1,
|
|
709
|
+
folder: child,
|
|
710
|
+
itemLabel: config.labels[(child === null || child === void 0 ? void 0 : child.itemCount) > 1 ? "items" : "item"],
|
|
711
|
+
key: child.id,
|
|
712
|
+
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"]
|
|
713
|
+
}));
|
|
714
|
+
});
|
|
715
|
+
};
|
|
716
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
717
|
+
children: [/*#__PURE__*/jsx(Node$1, _objectSpread$f(_objectSpread$f(_objectSpread$f({}, rest), {}, {
|
|
718
|
+
className: classNames({
|
|
719
|
+
"neeto-ui-rounded-lg hover:neeto-ui-bg-gray-100 w-full min-w-0 cursor-move transition-colors": true,
|
|
720
|
+
"neeto-ui-bg-gray-100 opacity-50": isDragging,
|
|
721
|
+
"neeto-ui-border-primary-500 border": isOver,
|
|
722
|
+
"border border-transparent": !isOver
|
|
723
|
+
})
|
|
724
|
+
}, _objectSpread$f(_objectSpread$f(_objectSpread$f({
|
|
725
|
+
depth: depth,
|
|
726
|
+
folder: folder
|
|
727
|
+
}, attributes), listeners), {}, {
|
|
728
|
+
folderLabel: folderLabel,
|
|
729
|
+
itemLabel: itemLabel
|
|
730
|
+
})), {}, {
|
|
731
|
+
ref: function ref(_ref2) {
|
|
732
|
+
setDroppableRef(_ref2);
|
|
733
|
+
setDraggableRef(_ref2);
|
|
734
|
+
}
|
|
735
|
+
})), renderChildren()]
|
|
736
|
+
});
|
|
737
|
+
};
|
|
738
|
+
|
|
739
|
+
function ownKeys$e(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; }
|
|
740
|
+
function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
741
|
+
var RearrangeFoldersPane = function RearrangeFoldersPane(_ref) {
|
|
742
|
+
var _tree$children$length, _tree$children, _dragItem$children$le, _dragItem$children;
|
|
743
|
+
var config = _ref.config,
|
|
744
|
+
onClose = _ref.onClose;
|
|
745
|
+
var _useState = useState(null),
|
|
746
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
747
|
+
dragItem = _useState2[0],
|
|
748
|
+
setDragItem = _useState2[1];
|
|
749
|
+
var _useState3 = useState({}),
|
|
750
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
751
|
+
changes = _useState4[0],
|
|
752
|
+
setChanges = _useState4[1];
|
|
753
|
+
var _useTranslation = useTranslation(config),
|
|
754
|
+
t = _useTranslation.t;
|
|
755
|
+
var _useFetchFolders = useFetchFolders(config),
|
|
756
|
+
folders = _useFetchFolders.data,
|
|
757
|
+
isFetching = _useFetchFolders.isFetching;
|
|
758
|
+
var _useReorderFolders = useReorderFolders(config),
|
|
759
|
+
reorderFolders = _useReorderFolders.mutate;
|
|
760
|
+
var _useFolderStore = useFolderStore(function (store) {
|
|
761
|
+
var _store$paneState;
|
|
762
|
+
return {
|
|
763
|
+
type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"]
|
|
764
|
+
};
|
|
765
|
+
}, shallow),
|
|
766
|
+
type = _useFolderStore.type;
|
|
767
|
+
var _useStateWithDependen = useStateWithDependency(function () {
|
|
768
|
+
return {
|
|
769
|
+
name: "/",
|
|
770
|
+
id: null,
|
|
771
|
+
children: folders
|
|
772
|
+
};
|
|
773
|
+
}, [folders]),
|
|
774
|
+
_useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
|
|
775
|
+
tree = _useStateWithDependen2[0],
|
|
776
|
+
setTree = _useStateWithDependen2[1];
|
|
777
|
+
var onDragEnd = function onDragEnd(_ref2) {
|
|
778
|
+
var _activeFolder$meta$pa;
|
|
779
|
+
var active = _ref2.active,
|
|
780
|
+
over = _ref2.over;
|
|
781
|
+
setDragItem(null);
|
|
782
|
+
if (!over) return;
|
|
783
|
+
var foldersMap = treeToMap(tree);
|
|
784
|
+
var activeFolder = foldersMap[active.data.current.id];
|
|
785
|
+
var overFolder = foldersMap[over.data.current.id];
|
|
786
|
+
|
|
787
|
+
// Check moving inside same directory
|
|
788
|
+
if (((_activeFolder$meta$pa = activeFolder.meta.parent) === null || _activeFolder$meta$pa === void 0 ? void 0 : _activeFolder$meta$pa.id) === overFolder.id) return;
|
|
789
|
+
|
|
790
|
+
// Check moving to a folder with depth greater than the allowed limit.
|
|
791
|
+
// maxDepth + 1 due to extra root node added for the tree
|
|
792
|
+
var activeDepth = measureDepth(activeFolder);
|
|
793
|
+
var overDepth = overFolder.meta.depth;
|
|
794
|
+
if (activeDepth + overDepth >= config.maxDepth + 1) {
|
|
795
|
+
Toastr.error(t("moveToFolder.depthExceeded", {
|
|
796
|
+
maxDepth: config.maxDepth
|
|
797
|
+
}));
|
|
798
|
+
return;
|
|
799
|
+
}
|
|
800
|
+
activeFolder.meta.parent = overFolder;
|
|
801
|
+
var newTree = mapToTree(foldersMap);
|
|
802
|
+
setTree(newTree);
|
|
803
|
+
setChanges(assoc(activeFolder.id, overFolder.id));
|
|
804
|
+
};
|
|
805
|
+
var onSubmit = function onSubmit() {
|
|
806
|
+
var payload = {
|
|
807
|
+
changes: changes
|
|
808
|
+
};
|
|
809
|
+
reorderFolders(payload, {
|
|
810
|
+
onSuccess: function onSuccess() {
|
|
811
|
+
var _config$onUpdateSucce;
|
|
812
|
+
onClose();
|
|
813
|
+
(_config$onUpdateSucce = config.onUpdateSuccess) === null || _config$onUpdateSucce === void 0 || _config$onUpdateSucce.call(config);
|
|
814
|
+
}
|
|
815
|
+
});
|
|
816
|
+
};
|
|
817
|
+
useHotkeys(["command+enter", "enter"], onSubmit, {
|
|
818
|
+
mode: "global",
|
|
819
|
+
enabled: !!type
|
|
820
|
+
});
|
|
821
|
+
var nodeProps = {
|
|
822
|
+
icon: /*#__PURE__*/jsx(GripVertical, {
|
|
823
|
+
className: "neeto-ui-text-gray-500 relative -start-[0.3125rem] flex-shrink-0"
|
|
824
|
+
})
|
|
825
|
+
};
|
|
826
|
+
if (isFetching) {
|
|
827
|
+
return /*#__PURE__*/jsx(Sheet.Body, {
|
|
828
|
+
className: "flex items-center justify-center",
|
|
829
|
+
children: /*#__PURE__*/jsx(Spinner, {})
|
|
830
|
+
});
|
|
831
|
+
}
|
|
832
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
833
|
+
children: [/*#__PURE__*/jsx(Sheet.Header, {
|
|
834
|
+
children: /*#__PURE__*/jsx(Sheet.Title, {
|
|
835
|
+
children: t("reorderFolder.title")
|
|
836
|
+
})
|
|
837
|
+
}), /*#__PURE__*/jsxs(DndContext, {
|
|
838
|
+
onDragEnd: onDragEnd,
|
|
839
|
+
onDragStart: function onDragStart(_ref3) {
|
|
840
|
+
var active = _ref3.active;
|
|
841
|
+
return setDragItem(active.data.current);
|
|
842
|
+
},
|
|
843
|
+
children: [/*#__PURE__*/jsx(Sheet.Body, {
|
|
844
|
+
className: "pb-6",
|
|
845
|
+
children: /*#__PURE__*/createElement(_DraggableNode$1, _objectSpread$e(_objectSpread$e({}, _objectSpread$e(_objectSpread$e({}, nodeProps), {}, {
|
|
846
|
+
config: config
|
|
847
|
+
})), {}, {
|
|
848
|
+
folder: tree,
|
|
849
|
+
itemLabel: config.labels[(tree === null || tree === void 0 ? void 0 : tree.itemCount) > 1 ? "items" : "item"],
|
|
850
|
+
key: tree.id,
|
|
851
|
+
folderLabel: config.labels[((_tree$children$length = tree === null || tree === void 0 || (_tree$children = tree.children) === null || _tree$children === void 0 ? void 0 : _tree$children.length) !== null && _tree$children$length !== void 0 ? _tree$children$length : 0) > 1 ? "folders" : "folder"]
|
|
852
|
+
}))
|
|
853
|
+
}), /*#__PURE__*/jsxs(Sheet.Footer, {
|
|
854
|
+
className: "gap-2",
|
|
855
|
+
children: [/*#__PURE__*/jsx(Button, {
|
|
856
|
+
disabled: isEmpty(changes),
|
|
857
|
+
label: t("common.save"),
|
|
858
|
+
variant: "default",
|
|
859
|
+
onClick: onSubmit
|
|
860
|
+
}), /*#__PURE__*/jsx(Button, {
|
|
861
|
+
label: t("common.cancel"),
|
|
862
|
+
variant: "ghost",
|
|
863
|
+
onClick: onClose
|
|
864
|
+
})]
|
|
865
|
+
}), /*#__PURE__*/createPortal(/*#__PURE__*/jsx(DragOverlay, {
|
|
866
|
+
zIndex: 99999,
|
|
867
|
+
children: dragItem && /*#__PURE__*/jsx(Node$1, _objectSpread$e(_objectSpread$e({
|
|
868
|
+
hideTreeIndent: true
|
|
869
|
+
}, nodeProps), {}, {
|
|
870
|
+
className: "neeto-ui-bg-gray-200",
|
|
871
|
+
depth: 0,
|
|
872
|
+
folder: dragItem,
|
|
873
|
+
folderLabel: config.labels[((_dragItem$children$le = dragItem === null || dragItem === void 0 || (_dragItem$children = dragItem.children) === null || _dragItem$children === void 0 ? void 0 : _dragItem$children.length) !== null && _dragItem$children$le !== void 0 ? _dragItem$children$le : 0) > 1 ? "folders" : "folder"],
|
|
874
|
+
itemLabel: config.labels[(dragItem === null || dragItem === void 0 ? void 0 : dragItem.itemCount) > 1 ? "items" : "item"]
|
|
875
|
+
}))
|
|
876
|
+
}), document.body)]
|
|
877
|
+
})]
|
|
878
|
+
});
|
|
879
|
+
};
|
|
880
|
+
|
|
881
|
+
var PlaceholderNode = function PlaceholderNode(_ref) {
|
|
882
|
+
var folder = _ref.folder,
|
|
883
|
+
dragState = _ref.dragState;
|
|
884
|
+
var overItem = dragState.overItem;
|
|
885
|
+
var id = useId();
|
|
886
|
+
var isOver = id === (overItem === null || overItem === void 0 ? void 0 : overItem.id);
|
|
887
|
+
var depth = folder.meta.depth + 1;
|
|
888
|
+
var meta = {
|
|
889
|
+
parent: folder,
|
|
890
|
+
index: -1,
|
|
891
|
+
depth: depth
|
|
892
|
+
};
|
|
893
|
+
var _useDroppable = useDroppable({
|
|
894
|
+
id: "droppable-placeholder--".concat(folder.name),
|
|
895
|
+
data: {
|
|
896
|
+
id: id,
|
|
897
|
+
meta: meta
|
|
898
|
+
}
|
|
899
|
+
}),
|
|
900
|
+
setDroppableRef = _useDroppable.setNodeRef;
|
|
901
|
+
return /*#__PURE__*/jsxs("div", {
|
|
902
|
+
className: "flex w-full",
|
|
903
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
904
|
+
style: {
|
|
905
|
+
width: REORDER_TREE_INDENT_WIDTH * (depth + 1)
|
|
906
|
+
}
|
|
907
|
+
}), /*#__PURE__*/jsx("div", {
|
|
908
|
+
ref: setDroppableRef,
|
|
909
|
+
className: classNames({
|
|
910
|
+
"min-w-0 flex-1 transition-colors": true,
|
|
911
|
+
"neeto-ui-border-primary-500 border-b-2": isOver
|
|
912
|
+
})
|
|
913
|
+
})]
|
|
914
|
+
});
|
|
915
|
+
};
|
|
916
|
+
|
|
917
|
+
var _excluded$3 = ["folder", "config", "dragState", "folderLabel", "itemLabel"];
|
|
918
|
+
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; }
|
|
919
|
+
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; }
|
|
920
|
+
var _DraggableNode = function DraggableNode(_ref) {
|
|
921
|
+
var _overItem$meta$parent;
|
|
922
|
+
var folder = _ref.folder,
|
|
923
|
+
config = _ref.config,
|
|
924
|
+
dragState = _ref.dragState,
|
|
925
|
+
folderLabel = _ref.folderLabel,
|
|
926
|
+
itemLabel = _ref.itemLabel,
|
|
927
|
+
rest = _objectWithoutProperties(_ref, _excluded$3);
|
|
928
|
+
var overItem = dragState.overItem;
|
|
929
|
+
var isOverItem = folder.id === (overItem === null || overItem === void 0 ? void 0 : overItem.id);
|
|
930
|
+
var isOverParent = folder.id === (overItem === null || overItem === void 0 || (_overItem$meta$parent = overItem.meta.parent) === null || _overItem$meta$parent === void 0 ? void 0 : _overItem$meta$parent.id);
|
|
931
|
+
var isRoot = folder.meta.depth <= 0;
|
|
932
|
+
var _useDraggable = useDraggable({
|
|
933
|
+
id: "draggable-item--".concat(folder.id),
|
|
934
|
+
data: folder,
|
|
935
|
+
disabled: isRoot
|
|
936
|
+
}),
|
|
937
|
+
isDragging = _useDraggable.isDragging,
|
|
938
|
+
attributes = _useDraggable.attributes,
|
|
939
|
+
listeners = _useDraggable.listeners,
|
|
940
|
+
setDraggableRef = _useDraggable.setNodeRef;
|
|
941
|
+
var _useDroppable = useDroppable({
|
|
942
|
+
id: "droppable-item--".concat(folder.id),
|
|
943
|
+
data: folder,
|
|
944
|
+
disabled: isRoot || isDragging
|
|
945
|
+
}),
|
|
946
|
+
setDroppableRef = _useDroppable.setNodeRef;
|
|
947
|
+
var renderChildren = function renderChildren() {
|
|
948
|
+
if (isDragging) return null;
|
|
949
|
+
return /*#__PURE__*/jsxs(React.Fragment, {
|
|
950
|
+
children: [/*#__PURE__*/jsx(PlaceholderNode, {
|
|
951
|
+
dragState: dragState,
|
|
952
|
+
folder: folder
|
|
953
|
+
}), isArray(folder.children) && folder.children.map(function (child) {
|
|
954
|
+
var _child$children$lengt, _child$children;
|
|
955
|
+
return /*#__PURE__*/createElement(_DraggableNode, _objectSpread$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, rest), {}, {
|
|
956
|
+
config: config,
|
|
957
|
+
dragState: dragState
|
|
958
|
+
})), {}, {
|
|
959
|
+
depth: child.meta.depth,
|
|
960
|
+
folder: child,
|
|
961
|
+
itemLabel: config.labels[(child === null || child === void 0 ? void 0 : child.itemCount) > 1 ? "items" : "item"],
|
|
962
|
+
key: child.id,
|
|
963
|
+
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"]
|
|
964
|
+
}));
|
|
965
|
+
})]
|
|
966
|
+
}, "".concat(folder.id, "--container"));
|
|
967
|
+
};
|
|
968
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
969
|
+
children: [/*#__PURE__*/jsx(Node$1, _objectSpread$d(_objectSpread$d({
|
|
970
|
+
depth: folder.meta.depth
|
|
971
|
+
}, _objectSpread$d(_objectSpread$d(_objectSpread$d(_objectSpread$d({}, rest), {}, {
|
|
972
|
+
folder: folder
|
|
973
|
+
}, attributes), listeners), {}, {
|
|
974
|
+
folderLabel: folderLabel,
|
|
975
|
+
itemLabel: itemLabel
|
|
976
|
+
})), {}, {
|
|
977
|
+
className: classNames({
|
|
978
|
+
"hover:neeto-ui-bg-gray-100 w-full cursor-move transition-colors": true,
|
|
979
|
+
"neeto-ui-bg-gray-100 opacity-50": isDragging,
|
|
980
|
+
"neeto-ui-bg-primary-50": isOverParent,
|
|
981
|
+
"neeto-ui-border-primary-500 border-b-2": isOverItem
|
|
982
|
+
}),
|
|
983
|
+
ref: function ref(_ref2) {
|
|
984
|
+
setDroppableRef(_ref2);
|
|
985
|
+
setDraggableRef(_ref2);
|
|
986
|
+
}
|
|
987
|
+
})), renderChildren()]
|
|
988
|
+
});
|
|
989
|
+
};
|
|
990
|
+
|
|
991
|
+
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; }
|
|
992
|
+
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), true).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; }
|
|
993
|
+
var initialDragState = {
|
|
994
|
+
activeItem: null,
|
|
995
|
+
overItem: null
|
|
996
|
+
};
|
|
997
|
+
var sensorConfig$1 = {
|
|
998
|
+
activationConstraint: {
|
|
999
|
+
distance: 8
|
|
1000
|
+
}
|
|
1001
|
+
};
|
|
1002
|
+
var measuringConfig = {
|
|
1003
|
+
droppable: {
|
|
1004
|
+
frequency: 500
|
|
1005
|
+
}
|
|
1006
|
+
};
|
|
1007
|
+
|
|
1008
|
+
// Reorder with support for position adjustment
|
|
1009
|
+
var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
|
|
1010
|
+
var _tree$children$length, _tree$children, _dragState$activeItem, _dragState$activeItem2, _dragState$activeItem3;
|
|
1011
|
+
var config = _ref.config,
|
|
1012
|
+
onClose = _ref.onClose;
|
|
1013
|
+
var _useState = useState(initialDragState),
|
|
1014
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1015
|
+
dragState = _useState2[0],
|
|
1016
|
+
setDragState = _useState2[1];
|
|
1017
|
+
var _useState3 = useState({}),
|
|
1018
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
1019
|
+
changes = _useState4[0],
|
|
1020
|
+
setChanges = _useState4[1];
|
|
1021
|
+
var _useTranslation = useTranslation(config),
|
|
1022
|
+
t = _useTranslation.t;
|
|
1023
|
+
var _useFetchFolders = useFetchFolders(config),
|
|
1024
|
+
folders = _useFetchFolders.data,
|
|
1025
|
+
isFetching = _useFetchFolders.isFetching;
|
|
1026
|
+
var _useReorderFolders = useReorderFolders(config),
|
|
1027
|
+
reorderFolders = _useReorderFolders.mutate;
|
|
1028
|
+
var sensors = useSensors(useSensor(PointerSensor, sensorConfig$1));
|
|
1029
|
+
var _useFolderStore = useFolderStore(function (store) {
|
|
1030
|
+
var _store$paneState;
|
|
1031
|
+
return {
|
|
1032
|
+
type: (_store$paneState = store["paneState"]) === null || _store$paneState === void 0 ? void 0 : _store$paneState["type"]
|
|
1033
|
+
};
|
|
1034
|
+
}, shallow),
|
|
1035
|
+
type = _useFolderStore.type;
|
|
1036
|
+
var _useStateWithDependen = useStateWithDependency(function () {
|
|
1037
|
+
return {
|
|
1038
|
+
name: "/",
|
|
1039
|
+
id: null,
|
|
1040
|
+
children: folders
|
|
1041
|
+
};
|
|
1042
|
+
}, [folders]),
|
|
1043
|
+
_useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
|
|
1044
|
+
baseTree = _useStateWithDependen2[0],
|
|
1045
|
+
setBaseTree = _useStateWithDependen2[1];
|
|
1046
|
+
|
|
1047
|
+
// Decorates tree with meta info. Can be optimized when needed.
|
|
1048
|
+
var tree = useMemo(function () {
|
|
1049
|
+
return mapToSortedTree(treeToMap(baseTree));
|
|
1050
|
+
}, [baseTree]);
|
|
1051
|
+
var onDragEnd = function onDragEnd(_ref2) {
|
|
1052
|
+
var active = _ref2.active,
|
|
1053
|
+
over = _ref2.over;
|
|
1054
|
+
setDragState(initialDragState);
|
|
1055
|
+
if (!over) return;
|
|
1056
|
+
var foldersMap = treeToMap(tree);
|
|
1057
|
+
var activeFolder = foldersMap[active.data.current.id];
|
|
1058
|
+
var targetFolder = foldersMap[over.data.current.meta.parent.id];
|
|
1059
|
+
var targetIndex = over.data.current.meta.index + 1; // `index` starts from -1 with placeholder
|
|
1060
|
+
|
|
1061
|
+
// Guards: Check moving inside invalid directories.
|
|
1062
|
+
if (!targetFolder || activeFolder.id === targetFolder.id) return;
|
|
1063
|
+
if (activeFolder.meta.parent.id === targetFolder.id && activeFolder.meta.index === targetIndex) {
|
|
1064
|
+
return;
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
// Check moving to a folder with depth greater than the allowed limit.
|
|
1068
|
+
// maxDepth + 1 due to extra root node added for the tree
|
|
1069
|
+
var srcDepth = measureDepth(activeFolder);
|
|
1070
|
+
var dstDepth = targetFolder.meta.depth;
|
|
1071
|
+
if (srcDepth + dstDepth >= config.maxDepth + 1) {
|
|
1072
|
+
Toastr.error(t("moveToFolder.depthExceeded", {
|
|
1073
|
+
maxDepth: config.maxDepth
|
|
1074
|
+
}));
|
|
1075
|
+
return;
|
|
1076
|
+
}
|
|
1077
|
+
activeFolder.meta.parent = targetFolder;
|
|
1078
|
+
activeFolder.meta.__index = targetIndex;
|
|
1079
|
+
var newTree = mapToSortedTree(foldersMap);
|
|
1080
|
+
setBaseTree(newTree);
|
|
1081
|
+
setChanges(assoc(activeFolder.id, {
|
|
1082
|
+
parentId: targetFolder.id,
|
|
1083
|
+
index: targetIndex
|
|
1084
|
+
}));
|
|
1085
|
+
};
|
|
1086
|
+
var onSubmit = function onSubmit() {
|
|
1087
|
+
var payload = {
|
|
1088
|
+
changes: changes
|
|
1089
|
+
};
|
|
1090
|
+
reorderFolders(payload, {
|
|
1091
|
+
onSuccess: function onSuccess() {
|
|
1092
|
+
var _config$onUpdateSucce;
|
|
1093
|
+
onClose();
|
|
1094
|
+
(_config$onUpdateSucce = config.onUpdateSuccess) === null || _config$onUpdateSucce === void 0 || _config$onUpdateSucce.call(config);
|
|
1095
|
+
}
|
|
1096
|
+
});
|
|
1097
|
+
};
|
|
1098
|
+
useHotkeys(["command+enter", "enter"], onSubmit, {
|
|
1099
|
+
mode: "global",
|
|
1100
|
+
enabled: !!type
|
|
1101
|
+
});
|
|
1102
|
+
var nodeProps = {
|
|
1103
|
+
icon: /*#__PURE__*/jsx(GripVertical, {
|
|
1104
|
+
className: "neeto-ui-text-gray-500 relative -start-[0.3125rem] flex-shrink-0"
|
|
1105
|
+
})
|
|
1106
|
+
};
|
|
1107
|
+
if (isFetching) {
|
|
1108
|
+
return /*#__PURE__*/jsx(Sheet.Body, {
|
|
1109
|
+
className: "flex items-center justify-center",
|
|
1110
|
+
children: /*#__PURE__*/jsx(Spinner, {})
|
|
1111
|
+
});
|
|
1112
|
+
}
|
|
1113
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
1114
|
+
children: [/*#__PURE__*/jsx(Sheet.Header, {
|
|
1115
|
+
children: /*#__PURE__*/jsx(Sheet.Title, {
|
|
1116
|
+
children: t("reorderFolder.title")
|
|
1117
|
+
})
|
|
1118
|
+
}), /*#__PURE__*/jsxs(DndContext, {
|
|
1119
|
+
onDragEnd: onDragEnd,
|
|
1120
|
+
sensors: sensors,
|
|
1121
|
+
collisionDetection: closestCenter(dragState),
|
|
1122
|
+
measuring: measuringConfig,
|
|
1123
|
+
onDragOver: function onDragOver(_ref3) {
|
|
1124
|
+
var over = _ref3.over;
|
|
1125
|
+
setDragState(assoc("overItem", over === null || over === void 0 ? void 0 : over.data.current));
|
|
1126
|
+
},
|
|
1127
|
+
onDragStart: function onDragStart(_ref4) {
|
|
1128
|
+
var active = _ref4.active;
|
|
1129
|
+
setDragState(assoc("activeItem", active.data.current));
|
|
1130
|
+
},
|
|
1131
|
+
children: [/*#__PURE__*/jsx(Sheet.Body, {
|
|
1132
|
+
className: "pb-6",
|
|
1133
|
+
children: /*#__PURE__*/createElement(_DraggableNode, _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({}, nodeProps), {}, {
|
|
1134
|
+
config: config,
|
|
1135
|
+
dragState: dragState
|
|
1136
|
+
})), {}, {
|
|
1137
|
+
folder: tree,
|
|
1138
|
+
itemLabel: config.labels[(tree === null || tree === void 0 ? void 0 : tree.itemCount) > 1 ? "items" : "item"],
|
|
1139
|
+
key: tree.id,
|
|
1140
|
+
folderLabel: config.labels[((_tree$children$length = tree === null || tree === void 0 || (_tree$children = tree.children) === null || _tree$children === void 0 ? void 0 : _tree$children.length) !== null && _tree$children$length !== void 0 ? _tree$children$length : 0) > 1 ? "folders" : "folder"]
|
|
1141
|
+
}))
|
|
1142
|
+
}), /*#__PURE__*/jsxs(Sheet.Footer, {
|
|
1143
|
+
className: "gap-2",
|
|
1144
|
+
children: [/*#__PURE__*/jsx(Button, {
|
|
1145
|
+
disabled: isEmpty(changes),
|
|
1146
|
+
label: t("common.save"),
|
|
1147
|
+
variant: "default",
|
|
1148
|
+
onClick: onSubmit
|
|
1149
|
+
}), /*#__PURE__*/jsx(Button, {
|
|
1150
|
+
label: t("common.cancel"),
|
|
1151
|
+
variant: "ghost",
|
|
1152
|
+
onClick: onClose
|
|
1153
|
+
})]
|
|
1154
|
+
}), /*#__PURE__*/createPortal(/*#__PURE__*/jsx(DragOverlay, {
|
|
1155
|
+
zIndex: 99999,
|
|
1156
|
+
children: dragState && /*#__PURE__*/jsx(Node$1, _objectSpread$c(_objectSpread$c({
|
|
1157
|
+
hideTreeIndent: true
|
|
1158
|
+
}, nodeProps), {}, {
|
|
1159
|
+
className: "neeto-ui-bg-gray-200 ps-4 pe-12",
|
|
1160
|
+
depth: 0,
|
|
1161
|
+
folder: dragState.activeItem,
|
|
1162
|
+
folderLabel: config.labels[((_dragState$activeItem = (_dragState$activeItem2 = dragState.activeItem) === null || _dragState$activeItem2 === void 0 || (_dragState$activeItem2 = _dragState$activeItem2.children) === null || _dragState$activeItem2 === void 0 ? void 0 : _dragState$activeItem2.length) !== null && _dragState$activeItem !== void 0 ? _dragState$activeItem : 0) > 1 ? "folders" : "folder"],
|
|
1163
|
+
itemLabel: config.labels[((_dragState$activeItem3 = dragState.activeItem) === null || _dragState$activeItem3 === void 0 ? void 0 : _dragState$activeItem3.itemCount) > 1 ? "items" : "item"]
|
|
1164
|
+
}))
|
|
1165
|
+
}), document.body)]
|
|
1166
|
+
})]
|
|
1167
|
+
});
|
|
1168
|
+
};
|
|
1169
|
+
|
|
1170
|
+
var _excluded$2 = ["type"];
|
|
1171
|
+
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; }
|
|
1172
|
+
function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1173
|
+
var FoldersPane = function FoldersPane(_ref) {
|
|
1174
|
+
var configProps = _ref.config;
|
|
1175
|
+
var config = _objectSpread$b(_objectSpread$b({}, DEFAULT_CONFIG), configProps);
|
|
1176
|
+
var setFocusField = useRef(null);
|
|
1177
|
+
var _useFolderStore = useFolderStore(function (store) {
|
|
1178
|
+
return {
|
|
1179
|
+
paneState: store["paneState"],
|
|
1180
|
+
setFolderState: store["setFolderState"]
|
|
1181
|
+
};
|
|
1182
|
+
}, shallow),
|
|
1183
|
+
paneState = _useFolderStore.paneState,
|
|
1184
|
+
setFolderState = _useFolderStore.setFolderState;
|
|
1185
|
+
var _ref2 = paneState || {},
|
|
1186
|
+
type = _ref2.type,
|
|
1187
|
+
rest = _objectWithoutProperties(_ref2, _excluded$2);
|
|
1188
|
+
var onClose = function onClose() {
|
|
1189
|
+
return setFolderState({
|
|
1190
|
+
paneState: null
|
|
1191
|
+
});
|
|
1192
|
+
};
|
|
1193
|
+
var commonProps = _objectSpread$b({
|
|
1194
|
+
config: config,
|
|
1195
|
+
onClose: onClose
|
|
1196
|
+
}, rest);
|
|
1197
|
+
var ReorderPaneComponent = config.reorderMode === "reorder" ? ReorderFoldersPane : RearrangeFoldersPane;
|
|
1198
|
+
return /*#__PURE__*/jsxs(Sheet, {
|
|
1199
|
+
onClose: onClose,
|
|
1200
|
+
initialFocusRef: setFocusField,
|
|
1201
|
+
isOpen: !!type,
|
|
1202
|
+
children: [(type === "edit" || type === "add") && /*#__PURE__*/jsx(AddEditPane, _objectSpread$b({}, _objectSpread$b({
|
|
1203
|
+
setFocusField: setFocusField
|
|
1204
|
+
}, commonProps))), type === "move" && /*#__PURE__*/jsx(MoveFolderPane, _objectSpread$b({}, commonProps)), type === "reorder" && /*#__PURE__*/jsx(ReorderPaneComponent, _objectSpread$b({}, commonProps))]
|
|
1205
|
+
});
|
|
1206
|
+
};
|
|
1207
|
+
|
|
1208
|
+
var FoldersContext = function FoldersContext(_ref) {
|
|
1209
|
+
var config = _ref.config,
|
|
1210
|
+
children = _ref.children;
|
|
1211
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
1212
|
+
children: [children, /*#__PURE__*/jsx(FoldersPane, {
|
|
1213
|
+
config: config
|
|
1214
|
+
}), /*#__PURE__*/jsx(FoldersAlerts, {
|
|
1215
|
+
config: config
|
|
1216
|
+
})]
|
|
1217
|
+
});
|
|
1218
|
+
};
|
|
1219
|
+
|
|
1220
|
+
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; }
|
|
1221
|
+
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), true).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; }
|
|
1222
|
+
var FolderTile = function FolderTile(_ref) {
|
|
1223
|
+
var _folder$children$leng, _folder$children, _folder$children$leng2, _folder$children2;
|
|
1224
|
+
var _ref$isPreview = _ref.isPreview,
|
|
1225
|
+
isPreview = _ref$isPreview === void 0 ? false : _ref$isPreview,
|
|
1226
|
+
isSelected = _ref.isSelected,
|
|
1227
|
+
link = _ref.link,
|
|
1228
|
+
folder = _ref.folder,
|
|
1229
|
+
actions = _ref.actions,
|
|
1230
|
+
config = _ref.config,
|
|
1231
|
+
onSelect = _ref.onSelect;
|
|
1232
|
+
var _useTranslation = useTranslation(config),
|
|
1233
|
+
t = _useTranslation.t;
|
|
1234
|
+
var droppable = useDroppable({
|
|
1235
|
+
id: "droppable-item--".concat(folder.id),
|
|
1236
|
+
data: folder,
|
|
1237
|
+
disabled: isPreview
|
|
1238
|
+
});
|
|
1239
|
+
var draggable = useDraggable({
|
|
1240
|
+
id: "draggable-item--".concat(folder.id),
|
|
1241
|
+
data: _objectSpread$a(_objectSpread$a({}, folder), {}, {
|
|
1242
|
+
type: DEFAULT_CONFIG.type
|
|
1243
|
+
}),
|
|
1244
|
+
disabled: isPreview
|
|
1245
|
+
});
|
|
1246
|
+
var actionCallback = function actionCallback(callback) {
|
|
1247
|
+
return function (event) {
|
|
1248
|
+
event.preventDefault();
|
|
1249
|
+
callback(folder);
|
|
1250
|
+
};
|
|
1251
|
+
};
|
|
1252
|
+
var menuItems = [{
|
|
1253
|
+
key: "edit",
|
|
1254
|
+
label: t("common.edit"),
|
|
1255
|
+
onClick: actionCallback(actions.onEdit)
|
|
1256
|
+
}, {
|
|
1257
|
+
key: "move",
|
|
1258
|
+
label: t("common.moveToFolder"),
|
|
1259
|
+
onClick: actionCallback(actions.onMove)
|
|
1260
|
+
}, {
|
|
1261
|
+
key: "delete",
|
|
1262
|
+
label: t("common.delete"),
|
|
1263
|
+
onClick: actionCallback(actions.onDelete)
|
|
1264
|
+
}];
|
|
1265
|
+
var metaInfo = [];
|
|
1266
|
+
var childCount = (_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;
|
|
1267
|
+
var itemLabel = config.labels[folder.itemCount > 1 ? "items" : "item"];
|
|
1268
|
+
var folderLabel = config.labels[((_folder$children$leng2 = (_folder$children2 = folder.children) === null || _folder$children2 === void 0 ? void 0 : _folder$children2.length) !== null && _folder$children$leng2 !== void 0 ? _folder$children$leng2 : 0) > 1 ? "folders" : "folder"];
|
|
1269
|
+
childCount > 0 && metaInfo.push("".concat(childCount, " ").concat(folderLabel).toLowerCase());
|
|
1270
|
+
metaInfo.push("".concat(folder.itemCount || 0, " ").concat(itemLabel).toLowerCase());
|
|
1271
|
+
return /*#__PURE__*/jsxs(Link, _objectSpread$a(_objectSpread$a(_objectSpread$a(_objectSpread$a(_objectSpread$a({
|
|
1272
|
+
"data-testid": "".concat(hyphenate(folder.name), "-folder-tile"),
|
|
1273
|
+
to: link,
|
|
1274
|
+
className: classNames("neeto-ui-bg-gray-50 neeto-ui-border-gray-200 neeto-ui-rounded-md hover:neeto-ui-border-primary-500 relative flex max-w-full items-start gap-2 border-2 p-3 transition-colors ease-in", {
|
|
1275
|
+
"neeto-ui-bg-primary-100": droppable.isOver,
|
|
1276
|
+
"opacity-50": draggable.isDragging,
|
|
1277
|
+
"scale-75": isPreview
|
|
1278
|
+
})
|
|
1279
|
+
}, droppable.attributes), droppable.listeners), draggable.attributes), draggable.listeners), {}, {
|
|
1280
|
+
ref: function ref(_ref2) {
|
|
1281
|
+
droppable.setNodeRef(_ref2);
|
|
1282
|
+
draggable.setNodeRef(_ref2);
|
|
1283
|
+
},
|
|
1284
|
+
children: [/*#__PURE__*/jsx(Checkbox, {
|
|
1285
|
+
checked: isSelected,
|
|
1286
|
+
className: "m-0 flex-shrink-0 flex-grow-0 pt-0.5",
|
|
1287
|
+
name: folder.id,
|
|
1288
|
+
onCheckedChange: function onCheckedChange(checked) {
|
|
1289
|
+
return onSelect(folder, checked);
|
|
1290
|
+
},
|
|
1291
|
+
onClick: function onClick(event) {
|
|
1292
|
+
return event.stopPropagation();
|
|
1293
|
+
}
|
|
1294
|
+
}), /*#__PURE__*/jsxs("span", {
|
|
1295
|
+
className: "flex min-w-0 flex-grow flex-col gap-2",
|
|
1296
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
1297
|
+
className: "-mt-0.5 line-clamp-2 break-words pe-8",
|
|
1298
|
+
"data-testid": "folder-name",
|
|
1299
|
+
title: folder.name,
|
|
1300
|
+
variant: "body1",
|
|
1301
|
+
weight: "medium",
|
|
1302
|
+
children: folder.name
|
|
1303
|
+
}), /*#__PURE__*/jsx(Typography, {
|
|
1304
|
+
className: "neeto-ui-text-gray-600",
|
|
1305
|
+
variant: "body3",
|
|
1306
|
+
children: metaInfo.join(" . ")
|
|
1307
|
+
})]
|
|
1308
|
+
}), /*#__PURE__*/jsx(MoreDropdown, {
|
|
1309
|
+
menuItems: menuItems,
|
|
1310
|
+
dropdownButtonProps: {
|
|
1311
|
+
className: "absolute end-2 top-2"
|
|
1312
|
+
},
|
|
1313
|
+
dropdownProps: {
|
|
1314
|
+
onClick: function onClick(event) {
|
|
1315
|
+
return event.preventDefault();
|
|
1316
|
+
}
|
|
1317
|
+
}
|
|
1318
|
+
})]
|
|
1319
|
+
}));
|
|
1320
|
+
};
|
|
1321
|
+
|
|
1322
|
+
var sensorConfig = {
|
|
1323
|
+
activationConstraint: {
|
|
1324
|
+
distance: 8
|
|
1325
|
+
}
|
|
1326
|
+
};
|
|
1327
|
+
var FoldersDnd = function FoldersDnd(_ref) {
|
|
1328
|
+
var config = _ref.config,
|
|
1329
|
+
children = _ref.children,
|
|
1330
|
+
onDropItem = _ref.onDrop,
|
|
1331
|
+
renderItemOverlay = _ref.renderOverlay;
|
|
1332
|
+
var _useState = useState(null),
|
|
1333
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1334
|
+
dragItem = _useState2[0],
|
|
1335
|
+
setDragItem = _useState2[1];
|
|
1336
|
+
var _useUpdateFolder = useUpdateFolder(config),
|
|
1337
|
+
updateFolder = _useUpdateFolder.mutate;
|
|
1338
|
+
var sensors = useSensors(useSensor(PointerSensor, sensorConfig));
|
|
1339
|
+
var onDropFolder = function onDropFolder(folder, parent) {
|
|
1340
|
+
if (!folder || !parent || folder.id === parent.id) return;
|
|
1341
|
+
updateFolder({
|
|
1342
|
+
id: folder.id,
|
|
1343
|
+
payload: {
|
|
1344
|
+
id: folder.id,
|
|
1345
|
+
parentId: parent.id
|
|
1346
|
+
},
|
|
1347
|
+
initialSlug: folder.sid,
|
|
1348
|
+
config: {
|
|
1349
|
+
showToastr: false
|
|
1350
|
+
}
|
|
1351
|
+
}, {
|
|
1352
|
+
onError: toastApiError
|
|
1353
|
+
});
|
|
1354
|
+
};
|
|
1355
|
+
var handleDragStart = function handleDragStart(_ref2) {
|
|
1356
|
+
var active = _ref2.active;
|
|
1357
|
+
setDragItem(active.data.current);
|
|
1358
|
+
};
|
|
1359
|
+
var handleDragEnd = function handleDragEnd(_ref3) {
|
|
1360
|
+
var active = _ref3.active,
|
|
1361
|
+
over = _ref3.over;
|
|
1362
|
+
setDragItem(null);
|
|
1363
|
+
if (!active || !over) return;
|
|
1364
|
+
if (active.data.current.type === DEFAULT_CONFIG.type) {
|
|
1365
|
+
onDropFolder(active.data.current, over.data.current);
|
|
1366
|
+
} else onDropItem(active.data.current, over.data.current);
|
|
1367
|
+
};
|
|
1368
|
+
var renderFolderOverlay = function renderFolderOverlay(dragItem) {
|
|
1369
|
+
return /*#__PURE__*/jsx(FolderTile, {
|
|
1370
|
+
config: config,
|
|
1371
|
+
isPreview: true,
|
|
1372
|
+
actions: {},
|
|
1373
|
+
folder: dragItem,
|
|
1374
|
+
onSelect: noop
|
|
1375
|
+
});
|
|
1376
|
+
};
|
|
1377
|
+
return /*#__PURE__*/jsxs(DndContext, {
|
|
1378
|
+
sensors: sensors,
|
|
1379
|
+
onDragEnd: handleDragEnd,
|
|
1380
|
+
onDragStart: handleDragStart,
|
|
1381
|
+
children: [children, /*#__PURE__*/jsx(DragOverlay, {
|
|
1382
|
+
dropAnimation: null,
|
|
1383
|
+
modifiers: [snapCenterToCursor],
|
|
1384
|
+
children: dragItem && (dragItem.type !== DEFAULT_CONFIG.type ? renderItemOverlay(dragItem) : renderFolderOverlay(dragItem))
|
|
1385
|
+
})]
|
|
1386
|
+
});
|
|
1387
|
+
};
|
|
1388
|
+
|
|
1389
|
+
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; }
|
|
1390
|
+
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), true).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; }
|
|
1391
|
+
var FoldersList = function FoldersList(_ref) {
|
|
1392
|
+
var _ref$selection = _ref.selection,
|
|
1393
|
+
selection = _ref$selection === void 0 ? [] : _ref$selection,
|
|
1394
|
+
configProps = _ref.config,
|
|
1395
|
+
onSelect = _ref.onSelect;
|
|
1396
|
+
var config = _objectSpread$9(_objectSpread$9({}, DEFAULT_CONFIG), configProps);
|
|
1397
|
+
var params = useQueryParams();
|
|
1398
|
+
var _useTranslation = useTranslation(config),
|
|
1399
|
+
t = _useTranslation.t;
|
|
1400
|
+
var _useFolders = useFolders(config),
|
|
1401
|
+
folders = _useFolders.folders;
|
|
1402
|
+
var _useFolder = useFolder(config),
|
|
1403
|
+
folderId = _useFolder.folderId,
|
|
1404
|
+
folder = _useFolder.folder;
|
|
1405
|
+
var actions = useFolderActions(config);
|
|
1406
|
+
var subFolders = folderId ? folder === null || folder === void 0 ? void 0 : folder.children : folders;
|
|
1407
|
+
if (isNotPresent(subFolders) || !Array.isArray(subFolders)) return null;
|
|
1408
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
1409
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
1410
|
+
className: "my-3",
|
|
1411
|
+
variant: "h4",
|
|
1412
|
+
children: t("folders.title")
|
|
1413
|
+
}), /*#__PURE__*/jsx("div", {
|
|
1414
|
+
className: "neeto-folders-grid-view-wrapper mb-10 grid w-full gap-4",
|
|
1415
|
+
"data-testid": "folders-list",
|
|
1416
|
+
children: subFolders.map(function (folder) {
|
|
1417
|
+
return /*#__PURE__*/createElement(FolderTile, {
|
|
1418
|
+
actions: actions,
|
|
1419
|
+
config: config,
|
|
1420
|
+
folder: folder,
|
|
1421
|
+
onSelect: onSelect,
|
|
1422
|
+
isSelected: selection.includes(folder.id),
|
|
1423
|
+
key: folder.id,
|
|
1424
|
+
link: buildUrl(config.folderPath, _objectSpread$9(_objectSpread$9({}, params), {}, {
|
|
1425
|
+
folderId: folder.sid
|
|
1426
|
+
}))
|
|
1427
|
+
});
|
|
1428
|
+
})
|
|
1429
|
+
})]
|
|
1430
|
+
});
|
|
1431
|
+
};
|
|
1432
|
+
|
|
1433
|
+
function ownKeys$8(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; }
|
|
1434
|
+
function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1435
|
+
var DraggableWrapper = function DraggableWrapper(_ref) {
|
|
1436
|
+
var data = _ref.data,
|
|
1437
|
+
_ref$id = _ref.id,
|
|
1438
|
+
id = _ref$id === void 0 ? data.id : _ref$id,
|
|
1439
|
+
children = _ref.children;
|
|
1440
|
+
var draggable = useDraggable({
|
|
1441
|
+
id: "folders-list-draggable-item--".concat(id),
|
|
1442
|
+
data: data
|
|
1443
|
+
});
|
|
1444
|
+
return /*#__PURE__*/jsx("div", _objectSpread$8(_objectSpread$8(_objectSpread$8({
|
|
1445
|
+
className: classNames({
|
|
1446
|
+
"opacity-50": draggable.isDragging
|
|
1447
|
+
})
|
|
1448
|
+
}, draggable.attributes), draggable.listeners), {}, {
|
|
1449
|
+
ref: draggable.setNodeRef,
|
|
1450
|
+
children: children
|
|
1451
|
+
}));
|
|
1452
|
+
};
|
|
1453
|
+
|
|
1454
|
+
var _excluded$1 = ["isOpen", "onClose"];
|
|
1455
|
+
function ownKeys$7(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; }
|
|
1456
|
+
function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1457
|
+
var MoveToFolderPane = function MoveToFolderPane(_ref) {
|
|
1458
|
+
var isOpen = _ref.isOpen,
|
|
1459
|
+
onClose = _ref.onClose,
|
|
1460
|
+
rest = _objectWithoutProperties(_ref, _excluded$1);
|
|
1461
|
+
return /*#__PURE__*/jsx(Sheet, {
|
|
1462
|
+
isOpen: isOpen,
|
|
1463
|
+
onClose: onClose,
|
|
1464
|
+
children: /*#__PURE__*/jsx(PaneBody, _objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
|
|
1465
|
+
onClose: onClose
|
|
1466
|
+
})))
|
|
1467
|
+
});
|
|
1468
|
+
};
|
|
1469
|
+
|
|
1470
|
+
function ownKeys$6(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; }
|
|
1471
|
+
function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1472
|
+
var FolderIcon = function FolderIcon(props) {
|
|
1473
|
+
return /*#__PURE__*/jsx("svg", _objectSpread$6(_objectSpread$6({
|
|
1474
|
+
fill: "none",
|
|
1475
|
+
height: props.size,
|
|
1476
|
+
viewBox: "0 0 16 16",
|
|
1477
|
+
width: props.size,
|
|
1478
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1479
|
+
}, props), {}, {
|
|
1480
|
+
children: /*#__PURE__*/jsx("path", {
|
|
1481
|
+
d: "M3.202 12.798h9.6c.882 0 1.6-.717 1.6-1.6v-6c0-.882-.718-1.6-1.6-1.6H9.069a.8.8 0 0 1-.48-.16l-.96-.72a1.6 1.6 0 0 0-.96-.32H3.202c-.883 0-1.6.718-1.6 1.6v7.2c0 .883.717 1.6 1.6 1.6",
|
|
1482
|
+
fill: "currentColor"
|
|
1483
|
+
})
|
|
1484
|
+
}));
|
|
1485
|
+
};
|
|
1486
|
+
|
|
1487
|
+
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; }
|
|
1488
|
+
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), true).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; }
|
|
1489
|
+
var FolderIconOpen = function FolderIconOpen(props) {
|
|
1490
|
+
return /*#__PURE__*/jsx("svg", _objectSpread$5(_objectSpread$5({
|
|
1491
|
+
fill: "none",
|
|
1492
|
+
height: props.size,
|
|
1493
|
+
viewBox: "0 0 16 16",
|
|
1494
|
+
width: props.size,
|
|
1495
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1496
|
+
}, props), {}, {
|
|
1497
|
+
children: /*#__PURE__*/jsx("path", {
|
|
1498
|
+
d: "m2.2 7.24-.59 1.765V4c0-.882.717-1.6 1.6-1.6h3.467c.345 0 .682.113.96.32l.96.72c.137.105.307.16.48.16h2.932c.883 0 1.6.718 1.6 1.6v.4H4.474c-1.032 0-1.95.66-2.277 1.64zm10.544 5.56h-9.47c-.82 0-1.397-.802-1.137-1.58l1.2-3.6c.162-.49.622-.82 1.137-.82h9.47c.82 0 1.398.803 1.138 1.58l-1.2 3.6c-.163.49-.623.82-1.138.82",
|
|
1499
|
+
fill: "currentColor"
|
|
1500
|
+
})
|
|
1501
|
+
}));
|
|
1502
|
+
};
|
|
1503
|
+
|
|
1504
|
+
var Node = function Node(_ref) {
|
|
1505
|
+
var _isActive = _ref.isActive,
|
|
1506
|
+
isExpanded = _ref.isExpanded,
|
|
1507
|
+
node = _ref.node,
|
|
1508
|
+
link = _ref.link,
|
|
1509
|
+
config = _ref.config;
|
|
1510
|
+
var _useTranslation = useTranslation(),
|
|
1511
|
+
t = _useTranslation.t;
|
|
1512
|
+
var isPrivate = node.isPrivate,
|
|
1513
|
+
name = node.name,
|
|
1514
|
+
_node$isFolder = node.isFolder,
|
|
1515
|
+
isFolder = _node$isFolder === void 0 ? true : _node$isFolder;
|
|
1516
|
+
var _ref2 = isFolder ? config.folderActions : config.itemActions,
|
|
1517
|
+
_ref2$getMoreActions = _ref2.getMoreActions,
|
|
1518
|
+
getMoreActions = _ref2$getMoreActions === void 0 ? noop : _ref2$getMoreActions,
|
|
1519
|
+
_ref2$getAddActions = _ref2.getAddActions,
|
|
1520
|
+
getAddActions = _ref2$getAddActions === void 0 ? noop : _ref2$getAddActions;
|
|
1521
|
+
var moreActions = getMoreActions(node) || [];
|
|
1522
|
+
var addActions = getAddActions(node) || [];
|
|
1523
|
+
var hasMoreActions = isNotEmpty(moreActions);
|
|
1524
|
+
var hasAddActions = isNotEmpty(addActions);
|
|
1525
|
+
var hasAnyActions = hasMoreActions || hasAddActions;
|
|
1526
|
+
return /*#__PURE__*/jsx(NavLink, {
|
|
1527
|
+
activeClassName: "active",
|
|
1528
|
+
className: "neeto-sidebar-folders-tree__folder-node",
|
|
1529
|
+
isActive: function isActive() {
|
|
1530
|
+
return _isActive;
|
|
1531
|
+
},
|
|
1532
|
+
to: link,
|
|
1533
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
1534
|
+
className: "flex items-center justify-between w-full group relative",
|
|
1535
|
+
"data-testid": "".concat(hyphenate(name), "-").concat(isFolder ? "folder" : "item", "-sublink"),
|
|
1536
|
+
title: "",
|
|
1537
|
+
children: [isFolder && (isExpanded ? /*#__PURE__*/jsx(FolderIconOpen, {
|
|
1538
|
+
className: "flex-shrink-0 me-1",
|
|
1539
|
+
size: 16
|
|
1540
|
+
}) : /*#__PURE__*/jsx(FolderIcon, {
|
|
1541
|
+
className: "flex-shrink-0 me-1",
|
|
1542
|
+
size: 16
|
|
1543
|
+
})), /*#__PURE__*/jsxs("div", {
|
|
1544
|
+
className: "flex items-center min-w-0 flex-1",
|
|
1545
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
1546
|
+
as: "span",
|
|
1547
|
+
className: "line-clamp-1 block truncate ps-0.5",
|
|
1548
|
+
title: name,
|
|
1549
|
+
variant: "body2",
|
|
1550
|
+
children: name
|
|
1551
|
+
}), isPrivate && /*#__PURE__*/jsx("span", {
|
|
1552
|
+
title: t("common.private"),
|
|
1553
|
+
children: /*#__PURE__*/jsx(Lock, {
|
|
1554
|
+
className: "flex-shrink-0 ms-1",
|
|
1555
|
+
size: 16
|
|
1556
|
+
})
|
|
1557
|
+
})]
|
|
1558
|
+
}), hasAnyActions && /*#__PURE__*/jsxs("div", {
|
|
1559
|
+
className: "flex items-center gap-0.5 py-0.5 absolute end-0 top-0 h-full neeto-sidebar-folders-tree__folder-node-actions neeto-ui-rounded-md ps-2",
|
|
1560
|
+
onClick: function onClick(e) {
|
|
1561
|
+
e.preventDefault();
|
|
1562
|
+
e.stopPropagation();
|
|
1563
|
+
},
|
|
1564
|
+
children: [hasAddActions && /*#__PURE__*/jsx(MoreDropdown, {
|
|
1565
|
+
menuItems: addActions,
|
|
1566
|
+
dropdownButtonProps: {
|
|
1567
|
+
icon: Plus,
|
|
1568
|
+
size: "icon",
|
|
1569
|
+
tooltipProps: {
|
|
1570
|
+
content: "Add",
|
|
1571
|
+
position: "top"
|
|
1572
|
+
},
|
|
1573
|
+
className: "opacity-0 group-hover:opacity-100 transition-opacity neeto-sidebar-folders-tree__action-button size-5"
|
|
1574
|
+
}
|
|
1575
|
+
}), hasMoreActions && /*#__PURE__*/jsx(MoreDropdown, {
|
|
1576
|
+
menuItems: moreActions,
|
|
1577
|
+
dropdownButtonProps: {
|
|
1578
|
+
size: "icon",
|
|
1579
|
+
className: "opacity-0 group-hover:opacity-100 transition-opacity neeto-sidebar-folders-tree__action-button size-5"
|
|
1580
|
+
}
|
|
1581
|
+
})]
|
|
1582
|
+
})]
|
|
1583
|
+
})
|
|
1584
|
+
});
|
|
1585
|
+
};
|
|
1586
|
+
|
|
1587
|
+
function ownKeys$4(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; }
|
|
1588
|
+
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1589
|
+
var DownIcon = function DownIcon(props) {
|
|
1590
|
+
return /*#__PURE__*/jsx("svg", _objectSpread$4(_objectSpread$4({
|
|
1591
|
+
fill: "none",
|
|
1592
|
+
height: "6",
|
|
1593
|
+
viewBox: "0 0 6 6",
|
|
1594
|
+
width: "6",
|
|
1595
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1596
|
+
}, props), {}, {
|
|
1597
|
+
children: /*#__PURE__*/jsx("path", {
|
|
1598
|
+
d: "M3.803 5.475a.35.35 0 0 1-.606 0l-2.425-4.2A.35.35 0 0 1 1.075.75h4.85a.35.35 0 0 1 .303.525z",
|
|
1599
|
+
fill: "currentColor"
|
|
1600
|
+
})
|
|
1601
|
+
}));
|
|
1602
|
+
};
|
|
1603
|
+
|
|
1604
|
+
function ownKeys$3(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; }
|
|
1605
|
+
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1606
|
+
var RightIcon = function RightIcon(props) {
|
|
1607
|
+
return /*#__PURE__*/jsx("svg", _objectSpread$3(_objectSpread$3({
|
|
1608
|
+
fill: "none",
|
|
1609
|
+
height: "6",
|
|
1610
|
+
viewBox: "0 0 6 6",
|
|
1611
|
+
width: "6",
|
|
1612
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
1613
|
+
}, props), {}, {
|
|
1614
|
+
children: /*#__PURE__*/jsx("path", {
|
|
1615
|
+
d: "M5.475 2.697a.35.35 0 0 1 0 .606l-4.2 2.425a.35.35 0 0 1-.525-.303V.575a.35.35 0 0 1 .525-.303z",
|
|
1616
|
+
fill: "currentColor"
|
|
1617
|
+
})
|
|
1618
|
+
}));
|
|
1619
|
+
};
|
|
1620
|
+
|
|
1621
|
+
var SwitcherIcon = function SwitcherIcon(_ref) {
|
|
1622
|
+
var expanded = _ref.expanded;
|
|
1623
|
+
return expanded ? /*#__PURE__*/jsx(DownIcon, {
|
|
1624
|
+
className: "neeto-ui-relative",
|
|
1625
|
+
size: 16
|
|
1626
|
+
}) : /*#__PURE__*/jsx(RightIcon, {
|
|
1627
|
+
className: "neeto-ui-relative",
|
|
1628
|
+
size: 16
|
|
1629
|
+
});
|
|
1630
|
+
};
|
|
1631
|
+
|
|
1632
|
+
function ownKeys$2(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; }
|
|
1633
|
+
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1634
|
+
var splitItemsByFolder = function splitItemsByFolder(items) {
|
|
1635
|
+
return items.reduce(function (acc, item) {
|
|
1636
|
+
var value = _objectSpread$2(_objectSpread$2({}, item), {}, {
|
|
1637
|
+
isFolder: false,
|
|
1638
|
+
isLeaf: true
|
|
1639
|
+
});
|
|
1640
|
+
if (item.folderId) {
|
|
1641
|
+
if (!acc.itemsByFolderId[item.folderId]) {
|
|
1642
|
+
acc.itemsByFolderId[item.folderId] = [];
|
|
1643
|
+
}
|
|
1644
|
+
acc.itemsByFolderId[item.folderId].push(_objectSpread$2({}, value));
|
|
1645
|
+
} else {
|
|
1646
|
+
acc.rootItems.push(value);
|
|
1647
|
+
}
|
|
1648
|
+
return acc;
|
|
1649
|
+
}, {
|
|
1650
|
+
itemsByFolderId: {},
|
|
1651
|
+
rootItems: []
|
|
1652
|
+
});
|
|
1653
|
+
};
|
|
1654
|
+
var _appendItemsToFolders = function appendItemsToFolders(folders, itemsByFolderId) {
|
|
1655
|
+
return folders.map(function (folder) {
|
|
1656
|
+
return _objectSpread$2(_objectSpread$2({}, folder), {}, {
|
|
1657
|
+
isFolder: true,
|
|
1658
|
+
isLeaf: false,
|
|
1659
|
+
children: [].concat(_toConsumableArray(_appendItemsToFolders(folder.children || [], itemsByFolderId)), _toConsumableArray(itemsByFolderId[folder.id] || []))
|
|
1660
|
+
});
|
|
1661
|
+
});
|
|
1662
|
+
};
|
|
1663
|
+
var buildTreeWithItems = function buildTreeWithItems(folders, _ref) {
|
|
1664
|
+
var items = _ref.items;
|
|
1665
|
+
if (!items || !folders) return folders;
|
|
1666
|
+
var _splitItemsByFolder = splitItemsByFolder(items),
|
|
1667
|
+
itemsByFolderId = _splitItemsByFolder.itemsByFolderId,
|
|
1668
|
+
rootItems = _splitItemsByFolder.rootItems;
|
|
1669
|
+
var foldersWithItems = _appendItemsToFolders(folders, itemsByFolderId);
|
|
1670
|
+
return [].concat(_toConsumableArray(foldersWithItems), _toConsumableArray(rootItems));
|
|
1671
|
+
};
|
|
1672
|
+
|
|
1673
|
+
function ownKeys$1(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; }
|
|
1674
|
+
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1675
|
+
var FoldersTree = function FoldersTree(_ref) {
|
|
1676
|
+
var configProps = _ref.config;
|
|
1677
|
+
var config = _objectSpread$1(_objectSpread$1({}, DEFAULT_CONFIG), configProps);
|
|
1678
|
+
var _useState = useState(new Set()),
|
|
1679
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1680
|
+
expandedKeysSet = _useState2[0],
|
|
1681
|
+
setExpandedKeysSet = _useState2[1];
|
|
1682
|
+
var expandedKeys = Array.from(expandedKeysSet);
|
|
1683
|
+
var _useTranslation = useTranslation(config),
|
|
1684
|
+
t = _useTranslation.t;
|
|
1685
|
+
var params = useQueryParams$1({
|
|
1686
|
+
toCamelCase: false
|
|
1687
|
+
});
|
|
1688
|
+
var activeFolderSid = getActiveFolderId(config);
|
|
1689
|
+
var _useFetchFolders = useFetchFolders(config),
|
|
1690
|
+
folders = _useFetchFolders.data;
|
|
1691
|
+
var treeData = useMemo(function () {
|
|
1692
|
+
return buildTreeWithItems(folders, config);
|
|
1693
|
+
}, [folders, config.items]);
|
|
1694
|
+
var updateExpandedKeys = function updateExpandedKeys() {
|
|
1695
|
+
var _activeFolder$meta;
|
|
1696
|
+
if (!treeData) return;
|
|
1697
|
+
// When active folder changes from external sources, update expanded keys to auto expand tree.
|
|
1698
|
+
var updatedExpandedKeys = new Set(expandedKeysSet);
|
|
1699
|
+
var map = treeToMap(treeData, "sid");
|
|
1700
|
+
var activeFolder = map[activeFolderSid];
|
|
1701
|
+
var parentSid = activeFolder === null || activeFolder === void 0 || (_activeFolder$meta = activeFolder.meta) === null || _activeFolder$meta === void 0 || (_activeFolder$meta = _activeFolder$meta.parent) === null || _activeFolder$meta === void 0 ? void 0 : _activeFolder$meta.sid;
|
|
1702
|
+
if (parentSid && !expandedKeysSet.has(parentSid)) {
|
|
1703
|
+
updatedExpandedKeys.add(parentSid);
|
|
1704
|
+
}
|
|
1705
|
+
};
|
|
1706
|
+
var handleExpand = function handleExpand(keys, _ref2) {
|
|
1707
|
+
var expanded = _ref2.expanded,
|
|
1708
|
+
node = _ref2.node;
|
|
1709
|
+
var keysSet = new Set(keys);
|
|
1710
|
+
if (!expanded) {
|
|
1711
|
+
var _removeChildKeys = function removeChildKeys() {
|
|
1712
|
+
var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
1713
|
+
children.forEach(function (child) {
|
|
1714
|
+
keysSet["delete"](child.sid);
|
|
1715
|
+
_removeChildKeys(child.children);
|
|
1716
|
+
});
|
|
1717
|
+
};
|
|
1718
|
+
_removeChildKeys(node.children);
|
|
1719
|
+
}
|
|
1720
|
+
setExpandedKeysSet(keysSet);
|
|
1721
|
+
};
|
|
1722
|
+
useEffect(function () {
|
|
1723
|
+
// Non urgent update.
|
|
1724
|
+
startTransition(updateExpandedKeys);
|
|
1725
|
+
}, [activeFolderSid, treeData]);
|
|
1726
|
+
if (isNotPresent(treeData)) {
|
|
1727
|
+
return /*#__PURE__*/jsx(Typography$1, {
|
|
1728
|
+
className: "w-full text-center",
|
|
1729
|
+
style: "body2",
|
|
1730
|
+
weight: "semibold",
|
|
1731
|
+
children: t("folders.noFolders")
|
|
1732
|
+
});
|
|
1733
|
+
}
|
|
1734
|
+
return /*#__PURE__*/jsx(Tree, {
|
|
1735
|
+
expandedKeys: expandedKeys,
|
|
1736
|
+
treeData: treeData,
|
|
1737
|
+
autoExpandParent: true,
|
|
1738
|
+
blockNode: true,
|
|
1739
|
+
className: "neeto-sidebar-folders-tree",
|
|
1740
|
+
componentToken: {
|
|
1741
|
+
titleHeight: 24,
|
|
1742
|
+
indentSize: 20
|
|
1743
|
+
},
|
|
1744
|
+
fieldNames: {
|
|
1745
|
+
key: "sid"
|
|
1746
|
+
},
|
|
1747
|
+
selectedKeys: [activeFolderSid],
|
|
1748
|
+
showLine: false,
|
|
1749
|
+
switcherIcon: SwitcherIcon,
|
|
1750
|
+
titleRender: function titleRender(node) {
|
|
1751
|
+
return /*#__PURE__*/jsx(Node, {
|
|
1752
|
+
config: config,
|
|
1753
|
+
node: node,
|
|
1754
|
+
isActive: node.sid === activeFolderSid,
|
|
1755
|
+
isExpanded: expandedKeysSet.has(node.sid),
|
|
1756
|
+
link: node.link || buildUrl$1(config.folderPath, _objectSpread$1(_objectSpread$1({}, params), {}, {
|
|
1757
|
+
folderId: node.sid
|
|
1758
|
+
}))
|
|
1759
|
+
});
|
|
1760
|
+
},
|
|
1761
|
+
onExpand: handleExpand
|
|
1762
|
+
});
|
|
1763
|
+
};
|
|
1764
|
+
|
|
1765
|
+
var createFolderOptions = function createFolderOptions(foldersMap, config) {
|
|
1766
|
+
return mapObj(foldersMap, function (folder) {
|
|
1767
|
+
var _folder$meta$parent;
|
|
1768
|
+
return {
|
|
1769
|
+
id: folder.id,
|
|
1770
|
+
label: folder.name,
|
|
1771
|
+
value: folder.id,
|
|
1772
|
+
pId: (_folder$meta$parent = folder.meta.parent) === null || _folder$meta$parent === void 0 ? void 0 : _folder$meta$parent.id
|
|
1773
|
+
};
|
|
1774
|
+
}, function (folder) {
|
|
1775
|
+
return folder.meta.depth < config.maxDepth;
|
|
1776
|
+
});
|
|
1777
|
+
};
|
|
1778
|
+
|
|
1779
|
+
var _excluded = ["label", "name", "placeholder", "disabled", "loading", "required", "showSearch", "size", "fieldNames", "config", "initialValue"];
|
|
1780
|
+
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; }
|
|
1781
|
+
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; }
|
|
1782
|
+
var TreeSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
1783
|
+
var _fieldNames$label;
|
|
1784
|
+
var _ref$label = _ref.label,
|
|
1785
|
+
label = _ref$label === void 0 ? "" : _ref$label,
|
|
1786
|
+
name = _ref.name,
|
|
1787
|
+
_ref$placeholder = _ref.placeholder,
|
|
1788
|
+
placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
|
|
1789
|
+
_ref$disabled = _ref.disabled,
|
|
1790
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
1791
|
+
_ref$loading = _ref.loading,
|
|
1792
|
+
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
1793
|
+
_ref$required = _ref.required,
|
|
1794
|
+
required = _ref$required === void 0 ? false : _ref$required,
|
|
1795
|
+
_ref$showSearch = _ref.showSearch,
|
|
1796
|
+
showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
|
|
1797
|
+
_ref$size = _ref.size,
|
|
1798
|
+
size = _ref$size === void 0 ? "middle" : _ref$size,
|
|
1799
|
+
fieldNames = _ref.fieldNames,
|
|
1800
|
+
config = _ref.config,
|
|
1801
|
+
initialValue = _ref.initialValue,
|
|
1802
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
1803
|
+
var _useFetchFolders = useFetchFolders(config),
|
|
1804
|
+
folders = _useFetchFolders.data;
|
|
1805
|
+
var _useFormikContext = useFormikContext(),
|
|
1806
|
+
values = _useFormikContext.values,
|
|
1807
|
+
setFieldValue = _useFormikContext.setFieldValue;
|
|
1808
|
+
var foldersMap = useMemo(function () {
|
|
1809
|
+
return folders ? treeToMap(folders, "sid") : null;
|
|
1810
|
+
}, [folders]);
|
|
1811
|
+
var activeFolderSid = initialValue || getActiveFolderId(config);
|
|
1812
|
+
var activeFolder = foldersMap[activeFolderSid];
|
|
1813
|
+
var isValidParent = (activeFolder === null || activeFolder === void 0 ? void 0 : activeFolder.meta.depth) < config.maxDepth;
|
|
1814
|
+
var parentId = isValidParent ? activeFolder.id : null;
|
|
1815
|
+
useEffect(function () {
|
|
1816
|
+
if (values.name !== "") return;
|
|
1817
|
+
setFieldValue(name, parentId);
|
|
1818
|
+
}, [parentId, name]);
|
|
1819
|
+
var folderOptions = useMemo(function () {
|
|
1820
|
+
return createFolderOptions(foldersMap, config);
|
|
1821
|
+
}, [foldersMap]);
|
|
1822
|
+
return /*#__PURE__*/jsx(NUITreeSelect, _objectSpread({
|
|
1823
|
+
treeDataSimpleMode: true,
|
|
1824
|
+
"data-testid": "nui-select-container-wrapper",
|
|
1825
|
+
treeData: folderOptions,
|
|
1826
|
+
treeNodeFilterProp: (_fieldNames$label = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) !== null && _fieldNames$label !== void 0 ? _fieldNames$label : "title"
|
|
1827
|
+
}, _objectSpread({
|
|
1828
|
+
disabled: disabled,
|
|
1829
|
+
fieldNames: fieldNames,
|
|
1830
|
+
label: label,
|
|
1831
|
+
loading: loading,
|
|
1832
|
+
name: name,
|
|
1833
|
+
placeholder: placeholder,
|
|
1834
|
+
ref: ref,
|
|
1835
|
+
required: required,
|
|
1836
|
+
showSearch: showSearch,
|
|
1837
|
+
size: size
|
|
1838
|
+
}, otherProps)));
|
|
1839
|
+
});
|
|
1840
|
+
TreeSelect.displayName = "TreeSelect";
|
|
1841
|
+
|
|
1842
|
+
var css = ".neeto-sidebar-folders-tree__folder-node{color:inherit!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper{min-width:0;padding-inline:2px!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:rgb(var(--neeto-ui-gray-100));color:rgb(var(--neeto-ui-accent-800))!important;font-weight:500}.neeto-sidebar-folders-tree.ant-tree .ant-tree-switcher{margin-inline-end:0}.neeto-sidebar-folders-tree.ant-tree .ant-tree-switcher .ant-tree-switcher-icon{position:relative}.neeto-folders-grid-view-wrapper{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper:hover .neeto-sidebar-folders-tree__folder-node-actions{background-image:linear-gradient(90deg,rgba(var(--neeto-ui-gray-100),.5) 0,rgba(var(--neeto-ui-gray-100),1) 25%)}.neeto-sidebar-folders-tree.ant-tree .ant-tree-treenode{margin-bottom:6px}.neeto-sidebar-folders-tree.ant-tree .ant-tree-treenode:before{height:6px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy92Mi9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBRUUsV0FBQSxDQURBLDRCQUVGLENBRUEsMkZBRUUsOENBQUEsQ0FEQSwrQ0FBQSxDQUVBLGVBQ0YsQ0FFQSx3REFDRSxtQkFDRixDQUVBLGdGQUNFLGlCQUNGLENBRUEsaUNBQ0UseURBQ0YsQ0FFQSwySEFDRSxnSEFDRixDQUVBLHdEQUNFLGlCQUNGLENBRUEsK0RBQ0UsVUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZV9fZm9sZGVyLW5vZGUge1xuICBjb2xvcjogaW5oZXJpdCAhaW1wb3J0YW50O1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWUgLmFudC10cmVlLW5vZGUtY29udGVudC13cmFwcGVyIHtcbiAgcGFkZGluZy1pbmxpbmU6IDJweCAhaW1wb3J0YW50O1xuICBtaW4td2lkdGg6IDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtbm9kZS1jb250ZW50LXdyYXBwZXIuYW50LXRyZWUtbm9kZS1zZWxlY3RlZCB7XG4gIGNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktYWNjZW50LTgwMCkpICFpbXBvcnRhbnQ7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTEwMCkpO1xuICBmb250LXdlaWdodDogNTAwO1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWUgLmFudC10cmVlLXN3aXRjaGVyIHtcbiAgbWFyZ2luLWlubGluZS1lbmQ6IDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtc3dpdGNoZXIgLmFudC10cmVlLXN3aXRjaGVyLWljb24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5uZWV0by1mb2xkZXJzLWdyaWQtdmlldy13cmFwcGVyIHtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maWxsLCBtaW5tYXgoMjU2cHgsIDFmcikpO1xufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWUgLmFudC10cmVlLW5vZGUtY29udGVudC13cmFwcGVyOmhvdmVyIC5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZV9fZm9sZGVyLW5vZGUtYWN0aW9ucyB7XG4gIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCg5MGRlZywgcmdiYSh2YXIoLS1uZWV0by11aS1ncmF5LTEwMCksIC41KSAwLCByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktMTAwKSwgMSkgMjUlKTtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS10cmVlbm9kZSB7XG4gIG1hcmdpbi1ib3R0b206IDZweDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS10cmVlbm9kZTo6YmVmb3JlIHtcbiAgaGVpZ2h0OiA2cHg7XG59XG4iXX0= */";
|
|
1843
|
+
n(css,{});
|
|
1844
|
+
|
|
1845
|
+
export { AddEditPane, DraggableWrapper, FoldersContext, FoldersDnd, FoldersList, FoldersTree, MoveToFolderPane, TreeSelect };
|
|
1846
|
+
//# sourceMappingURL=components.js.map
|