@anji-dashing/dam-solution-v2 5.8.173

package/build/MyDrive/FolderTree.js

@@ -0,0 +1,479 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Dropdown, Grid, Input, Select, Tooltip, Tree } from "antd";
+import { useEffect, useMemo, useState, useRef } from "react";
+import { get, map, isArray, isObject, cloneDeep, first, sortBy, } from "lodash";
+import { FaAngleLeft, FaAngleRight } from "react-icons/fa";
+import { deleteFolders, } from "../react-query/services/folder-services";
+import { generateFoldersQueryKey, invalidateData, } from "../utilities/constants/queryKeys";
+import { createApiClient } from "../hocs/configureAxios";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { AiOutlineSortDescending } from "react-icons/ai";
+import { AiOutlineSortAscending } from "react-icons/ai";
+import CustomLoader from "../common/loader/CustomLoader";
+import { useMutation, useQueryClient } from "react-query";
+import { DeleteOutlined, EditOutlined, MoreOutlined } from "@ant-design/icons";
+import { DeleteConfirmationModal } from "../common/CustomElements";
+import { DELETE_CONFIRMATION_MESSAGE, DELETE_OK_TEXT, DELETE_SUCCESS, SOMETHING_WENT_WRONG, } from "../utilities/constants/messages";
+import { NotificationStatus, } from "../utilities/constants/interface";
+import { showNotification } from "../common/notifications";
+import { useParams } from "react-router-dom";
+import AddFolder from "./AddFolder";
+import { FETCH_FOLDER_URL, SORT_FOLDERS_URL, } from "../utilities/constants/apiUrls";
+import { RiDraggable } from "react-icons/ri";
+import { FaShuffle } from "react-icons/fa6";
+import { IoIosSearch } from "react-icons/io";
+const { DirectoryTree } = Tree;
+const { Option } = Select;
+const FaAngleLeftbtn = FaAngleLeft;
+const FaAngleRightbtn = FaAngleRight;
+const RiDraggablebtn = RiDraggable;
+const AiOutlineSortDescendingbtn = AiOutlineSortDescending;
+const AiOutlineSortAscendingbtn = AiOutlineSortAscending;
+const GrSortIcon = FaShuffle;
+const IoIosSearchIcon = IoIosSearch;
+// ✅ Helper to insert children into the correct folder recursively
+const insertSubfolders = (tree, parentId, childrenToInsert) => {
+    console.log('## insertSubfolders', tree, parentId, childrenToInsert);
+    const newTree = map(tree, (node) => {
+        if (node._id === parentId) {
+            return Object.assign(Object.assign({}, node), { children: childrenToInsert });
+        }
+        if (isArray(node.children)) {
+            return Object.assign(Object.assign({}, node), { children: insertSubfolders(node.children, parentId, childrenToInsert) });
+        }
+        return node;
+    });
+    console.log('## newTree', newTree);
+    return newTree;
+};
+const sortFoldersRecursively = (folders, sortByField, // ✅ which field to sort
+order = "asc") => {
+    if (!folders)
+        return [];
+    const sorted = sortBy(folders, (f) => {
+        var _a, _b;
+        if (sortByField === "name") {
+            return (_b = (_a = f.name) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        if (sortByField === "createdAt") {
+            return new Date(f.createdAt).getTime();
+        }
+        return f.name; // fallback
+    });
+    const result = order === "desc" ? [...sorted].reverse() : sorted;
+    return result.map((f) => (Object.assign(Object.assign({}, f), { children: isArray(f.children)
+            ? sortFoldersRecursively(f.children, sortByField, order)
+            : f.children })));
+};
+// ✅ Helper to insert children into the correct folder recursively
+const insertSubfoldersRecursively = (tree) => {
+    const newTree = map(tree, (node) => {
+        if (isArray(node.children)) {
+            return Object.assign(Object.assign({}, node), { children: insertSubfoldersRecursively(node.children) });
+        }
+        return node;
+    });
+    return newTree;
+};
+function FolderTree({ currentRootId, expandedKeys, selectedKeys, handleExpand, setSelectedKeys, folders, setFolders, setExpandedKeys, setGlobalSearch, globalSearch, }) {
+    const { folderId, id, type } = useParams();
+    const damConfig = useDamConfig();
+    const { rootFolderId } = damConfig;
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const { useBreakpoint } = Grid;
+    const [collapse, setCollapse] = useState(false);
+    const screens = useBreakpoint();
+    const queryClient = useQueryClient();
+    const [state, setState] = useState({
+        showConfirmationModal: false,
+        showEditModal: false,
+        selectedFolder: {},
+        loading: false,
+        isSorting: false,
+        enableDrag: false,
+        sortMode: "name",
+        sortOrder: "asc",
+        tempFolders: [],
+        parentFolder: {},
+        globalSearchValue: "",
+    });
+    const { showConfirmationModal, showEditModal, selectedFolder, loading, isSorting, enableDrag, sortMode, sortOrder, tempFolders, parentFolder, globalSearchValue, } = state;
+    // Fetch children for a specific folder and insert them into the tree (same logic as fetchFolders)
+    const fetchFolderChildren = (folderId) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { loading: true });
+            });
+            const response = yield api.get(`${FETCH_FOLDER_URL.replace(":folderId", folderId)}?isPagination=false&includeFiles=false&includeSubFoldersCount=true&fetchMainFolders=true&globalSearch=`);
+            const newFolders = get(response, "data.folders", []);
+            // Simply use the same logic as fetchFolders - sort and insert recursively
+            const sorted = sortFoldersRecursively(newFolders, "name", sortOrder);
+            const newChildren = insertSubfoldersRecursively(sorted);
+            console.log('## Fetching children for folder:', folderId, 'New children:', newChildren);
+            // Insert the fetched children into the clicked folder in the tree
+            setFolders((prevFolders) => {
+                return insertSubfolders(prevFolders, folderId, newChildren);
+            });
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { loading: false });
+            });
+        }
+        catch (error) {
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { loading: false });
+            });
+        }
+    });
+    const fetchFolders = (fid) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { loading: true });
+            });
+            const response = yield api.get(`${FETCH_FOLDER_URL.replace(":folderId", fid)}?isPagination=false&includeFiles=false&includeSubFoldersCount=true&fetchMainFolders=true&globalSearch=${fid == rootFolderId ? globalSearch : ""}`);
+            const newFolders = get(response, "data.folders", []);
+            const folderInfo = get(response, "data.folder", {});
+            console.log('## newFolders', response, newFolders, fid, rootFolderId, globalSearch);
+            if (fid === rootFolderId) {
+                setFolders(sortFoldersRecursively(newFolders, "name", sortOrder));
+            }
+            else {
+                // Simply use folder info from API response and newFolders as children
+                const sorted = sortFoldersRecursively(newFolders, "name", sortOrder);
+                console.log('## Folder info:', folderInfo, 'New children:', insertSubfoldersRecursively(sorted));
+                const newChildren = insertSubfoldersRecursively(sorted);
+                setFolders([Object.assign(Object.assign({}, folderInfo), { children: newChildren })]);
+            }
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { parentFolder: get(response, "data.folder", {}), loading: false, globalSearchValue: globalSearch || "" });
+            });
+        }
+        catch (error) {
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { loading: false });
+            });
+        }
+    });
+    // Helper to check if a folder exists in the current tree
+    const folderExistsInTree = (folderId, tree) => {
+        for (const folder of tree) {
+            if (folder._id === folderId) {
+                return true;
+            }
+            if (isArray(folder.children)) {
+                if (folderExistsInTree(folderId, folder.children)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    const findPathToFolder = (folderId, tree, path = []) => {
+        for (const folder of tree) {
+            const currentPath = [...path, folder._id];
+            if (folder._id === folderId) {
+                return currentPath;
+            }
+            if (isArray(folder.children)) {
+                const found = findPathToFolder(folderId, folder.children, currentPath);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    };
+    // ✅ Load on mount & when currentRootId changes
+    // Use ref to track previous currentRootId to prevent unnecessary fetches
+    const prevCurrentRootIdRef = useRef(null);
+    useEffect(() => {
+        if (currentRootId && currentRootId !== prevCurrentRootIdRef.current) {
+            console.log('## FolderTree useEffect - currentRootId changed from', prevCurrentRootIdRef.current, 'to', currentRootId, 'rootFolderId:', rootFolderId);
+            // If the folder is already in the tree, don't replace the entire tree
+            // Just fetch its children if needed
+            if (folders.length > 0 && folderExistsInTree(currentRootId, folders)) {
+                console.log('## Folder already in tree, fetching children only');
+                // Check if folder already has children loaded
+                const findFolder = (tree, id) => {
+                    for (const folder of tree) {
+                        if (folder._id === id)
+                            return folder;
+                        if (isArray(folder.children)) {
+                            const found = findFolder(folder.children, id);
+                            if (found)
+                                return found;
+                        }
+                    }
+                    return null;
+                };
+                const existingFolder = findFolder(folders, currentRootId);
+                if (!existingFolder || !isArray(existingFolder.children) || existingFolder.children.length === 0) {
+                    fetchFolderChildren(currentRootId);
+                }
+                const pathToFolder = findPathToFolder(currentRootId, folders);
+                if (pathToFolder && pathToFolder.length > 0) {
+                    const parentPath = pathToFolder.slice(0, -1);
+                    if (parentPath.length > 0) {
+                        const currentExpanded = isArray(expandedKeys) ? expandedKeys : [expandedKeys].filter(Boolean);
+                        const newExpanded = [...new Set([...currentExpanded, ...parentPath])];
+                        setExpandedKeys(newExpanded);
+                        console.log('## Expanding path to folder:', parentPath);
+                    }
+                }
+                prevCurrentRootIdRef.current = currentRootId;
+            }
+            else {
+                if (currentRootId === rootFolderId || folders.length === 0) {
+                    prevCurrentRootIdRef.current = currentRootId;
+                    fetchFolders(currentRootId);
+                }
+                else {
+                    console.log('## Folder not in tree but tree has content - keeping existing tree structure');
+                    prevCurrentRootIdRef.current = currentRootId;
+                }
+            }
+        }
+        else if (globalSearch !== globalSearchValue && currentRootId === rootFolderId) {
+            // Only refetch on global search change if we're on root folder
+            console.log('## FolderTree useEffect - globalSearch changed, refetching root folder');
+            fetchFolders(currentRootId);
+        }
+    }, [currentRootId, globalSearch]);
+    // ✅ Handle sort dropdown
+    const handleSortChange = (value) => {
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { sortMode: value });
+        });
+        if (value === "custom") {
+            const customSorted = sortBy(folders, (f) => { var _a; return (_a = f.sortOrder) !== null && _a !== void 0 ? _a : 0; });
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { tempFolders: cloneDeep(customSorted) });
+            });
+        }
+        else {
+            setFolders((prev) => sortFoldersRecursively([...prev], value, sortOrder));
+        }
+    };
+    const handleSortOrderChange = (value) => {
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { sortOrder: value });
+        });
+        setFolders((prev) => sortFoldersRecursively([...prev], sortMode, value));
+    };
+    const toggleEnableDrag = () => {
+        setState((prev) => (Object.assign(Object.assign({}, prev), { enableDrag: true })));
+    };
+    const toggleEditModal = (folder = {}) => setState((prev) => (Object.assign(Object.assign({}, prev), { selectedFolder: folder, showEditModal: !prev.showEditModal })));
+    const toggleDeleteModal = (folder = {}) => setState((prev) => (Object.assign(Object.assign({}, prev), { selectedFolder: folder, showConfirmationModal: !prev.showConfirmationModal })));
+    const getFoldersTree = (folders = []) => {
+        console.log('## folders', folders);
+        const transform = (tree = []) => map(tree, (folder) => {
+            const key = get(folder, "_id", "");
+            const name = get(folder, "name", "");
+            const menuItems = [
+                {
+                    key: "rename",
+                    icon: _jsx(EditOutlined, {}),
+                    label: "Rename",
+                    onClick: (e) => {
+                        e.domEvent.stopPropagation();
+                        toggleEditModal(folder);
+                    },
+                },
+                {
+                    key: "delete",
+                    icon: _jsx(DeleteOutlined, {}),
+                    danger: true,
+                    label: "Delete",
+                    onClick: (e) => {
+                        e.domEvent.stopPropagation();
+                        toggleDeleteModal(folder);
+                    },
+                },
+            ];
+            const title = (_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-justify-between md-lib-h-[33px]", children: [sortMode === "custom" && enableDrag && _jsx(RiDraggablebtn, {}), _jsx(Tooltip, { title: name, children: _jsx("span", { className: "md-lib-truncate md-lib-max-w-[180px] md-lib-cursor-pointer md-lib-ml-2", children: name }) }), _jsx(Dropdown, { menu: { items: menuItems }, trigger: ["click"], children: _jsx(MoreOutlined, { className: "md-lib-cursor-pointer md-lib-ml-1 md-lib-mt-[3px]", onClick: (e) => {
+                                e.stopPropagation(); // prevent folder select
+                            } }) })] }));
+            let children = null;
+            const rawChildren = get(folder, "children");
+            if (isArray(rawChildren)) {
+                children = transform(rawChildren);
+            }
+            else if (isObject(rawChildren)) {
+                children = transform([rawChildren]);
+            }
+            return { key, title, children };
+        });
+        return transform(folders);
+    };
+    const toggleMenu = () => {
+        setCollapse(!collapse);
+    };
+    const tree = useMemo(() => {
+        return map(get(parentFolder, "tree", []), (item) => get(item, "_id")).filter((item) => {
+            return get(item, "_id") !== rootFolderId;
+        });
+    }, [parentFolder]);
+    // Wrapper for handleExpand that also fetches children when a folder is expanded
+    const handleExpandWithFetch = (keys) => {
+        handleExpand(keys);
+        const newExpanded = map(keys, (k) => k.toString());
+        const currentExpanded = isArray(expandedKeys) ? expandedKeys : [expandedKeys].filter(Boolean);
+        const newlyExpanded = newExpanded.filter(id => !currentExpanded.includes(id));
+        // Fetch children for newly expanded folders using the same simple logic
+        newlyExpanded.forEach(expandedId => {
+            if (expandedId !== rootFolderId && expandedId !== currentRootId) {
+                fetchFolderChildren(expandedId);
+            }
+        });
+    };
+    const handleSelect = (keys) => {
+        // console.log("keys", keys);
+        const selected = map(keys, (k) => k.toString());
+        // console.log("selected", selected);
+        setSelectedKeys(selected);
+        if (get(selected, "length") > 0) {
+            const selectedId = selected[get(selected, "length", 0) - 1];
+            console.log('## selectedId', selectedId);
+            // If the selected folder is not the root folder, fetch its children
+            if (selectedId !== rootFolderId && selectedId !== currentRootId) {
+                fetchFolderChildren(selectedId);
+            }
+        }
+    };
+    useEffect(() => {
+        // console.log(tree);
+        setExpandedKeys(tree);
+    }, [tree]);
+    // console.log("tree", tree, selectedKeys, treeData);
+    const onDeleteSuccess = (message, deletedId) => {
+        setFolders((prevFolders) => {
+            const removeFolderRecursively = (folders) => {
+                return folders
+                    .map((f) => {
+                    // recurse into children first
+                    const updatedChildren = Array.isArray(f.children)
+                        ? removeFolderRecursively(f.children)
+                        : f.children;
+                    return Object.assign(Object.assign({}, f), { children: updatedChildren });
+                })
+                    .filter((f) => f._id !== deletedId); // filter AFTER recursion
+            };
+            return removeFolderRecursively(prevFolders);
+        });
+        invalidateData(queryClient, generateFoldersQueryKey(type), folderId ? folderId : id ? id : rootFolderId);
+        if (deletedId === folderId || deletedId === id) {
+            // Navigate to root folder using state instead of URL
+            setSelectedKeys(rootFolderId);
+        }
+        showNotification(message, NotificationStatus.SUCCESS);
+    };
+    const onFailure = (message) => {
+        showNotification(message, NotificationStatus.ERROR);
+    };
+    useEffect(() => {
+        if (!folderId || folderId === rootFolderId) {
+            setSelectedKeys([]);
+            setExpandedKeys([]);
+        }
+    }, [folderId]);
+    const deleteFolderMutation = useMutation({
+        mutationFn: deleteFolders,
+        onSuccess: (response, variables) => {
+            toggleDeleteModal();
+            onDeleteSuccess(get(response, "data.message", DELETE_SUCCESS), first(get(variables, "folderIds", [])));
+        },
+        onError: (error) => {
+            onFailure(get(error, "message", SOMETHING_WENT_WRONG));
+        },
+    });
+    const onDeleteFolder = () => {
+        deleteFolderMutation.mutate({
+            folderIds: [get(selectedFolder, "_id")],
+            api,
+        });
+    };
+    // ✅ Drag & drop for parent only
+    const onDrop = (info) => {
+        const dragKey = info.dragNode.key;
+        const dropKey = info.node.key;
+        const newData = [...tempFolders];
+        const dragIndex = newData.findIndex((f) => f._id === dragKey);
+        const dropIndex = newData.findIndex((f) => f._id === dropKey);
+        if (dragIndex === -1 || dropIndex === -1)
+            return;
+        const dragged = newData[dragIndex];
+        newData.splice(dragIndex, 1);
+        newData.splice(dropIndex, 0, dragged);
+        // console.log("sorted data", newData);
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { tempFolders: newData });
+        });
+    };
+    // ✅ Save custom order
+    const handleSave = () => __awaiter(this, void 0, void 0, function* () {
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { isSorting: true });
+        });
+        try {
+            const response = yield api.put(SORT_FOLDERS_URL, {
+                folders: tempFolders.map((f, i) => ({
+                    folderId: f._id,
+                    sortOrder: i + 1,
+                })),
+            });
+            setFolders(tempFolders.map((f, i) => (Object.assign(Object.assign({}, f), { sortOrder: i + 1 }))));
+            if (response) {
+                showNotification(get(response, "data.message", ""), NotificationStatus.SUCCESS);
+            }
+        }
+        catch (e) {
+            console.error(e);
+            if (e === null || e === void 0 ? void 0 : e.message) {
+                showNotification(e === null || e === void 0 ? void 0 : e.message, NotificationStatus.ERROR);
+            }
+        }
+        finally {
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { isSorting: false, enableDrag: false });
+            });
+        }
+    });
+    const handleCancel = () => {
+        setState((prevState) => {
+            const customSorted = sortBy(folders, (f) => { var _a; return (_a = f.sortOrder) !== null && _a !== void 0 ? _a : 0; });
+            return Object.assign(Object.assign({}, prevState), { tempFolders: cloneDeep(customSorted), sortMode: "custom", enableDrag: false });
+        });
+    };
+    console.log('## folders in FolderTree', tempFolders, folders);
+    return (_jsxs(_Fragment, { children: [!screens.md && collapse && (_jsxs("div", { className: `md-lib-bg-textColorActive dark:md-lib-bg-darkSecondaryColor md-lib-p-1 md-lib-rounded md-lib-absolute md-lib-top-16 md-lib-left-1`, children: [" ", _jsx(FaAngleRightbtn, { size: 24, className: "md-lib-text-textColor dark:md-lib-text-darkTextColor", onClick: toggleMenu })] })), _jsxs("div", { className: `md-lib-border-r md-lib-inline-table md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-px-2 md-lib-pt-1 md-lib-max-h-[calc(100%-76px)] md-lib-overflow-x-auto ${!screens.md &&
+                    "md-lib-absolute md-lib-left-0 md-lib-z-30 md-lib-h-full"} ${!screens.md && collapse && "!-md-lib-left-full"}`, children: [!screens.md && !collapse && (_jsxs("div", { className: `md-lib-bg-textColorActive dark:md-lib-bg-darkSecondaryColor md-lib-p-1 md-lib-rounded md-lib-absolute md-lib-top-1 md-lib-right-1 md-lib-z-50`, children: [" ", _jsx(FaAngleLeftbtn, { size: 24, className: "md-lib-text-textColor dark:md-lib-text-darkTextColor", onClick: toggleMenu })] })), _jsx("div", { className: "md-lib-mb-2", children: _jsx(Input, { placeholder: "Search files (min. 2 characters required)", onChange: (e) => setState((prevState) => {
+                                return Object.assign(Object.assign({}, prevState), { globalSearchValue: e.target.value });
+                            }), value: globalSearchValue, prefix: _jsx(IoIosSearchIcon, {}), onPressEnter: () => {
+                                if (globalSearchValue.length >= 2 || !globalSearchValue) {
+                                    setGlobalSearch(globalSearchValue);
+                                    // Navigate to root folder using state instead of URL
+                                    setSelectedKeys(rootFolderId);
+                                }
+                            } }) }), !enableDrag && (_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor md-lib-mb-1 md-lib-font-400", children: "Sort By:" })), _jsxs("div", { className: "md-lib-flex md-lib-justify-between md-lib-items-center md-lib-mb-3 md-lib-gap-2", children: [!enableDrag && (_jsxs(Select, { value: sortMode, onChange: handleSortChange, style: { width: 200 }, children: [_jsx(Option, { value: "name", children: "Name" }), _jsx(Option, { value: "createdAt", children: "Created At" }), _jsx(Option, { value: "custom", children: "Custom Order" })] })), sortMode !== "custom" && (_jsx(Tooltip, { title: sortOrder === "desc" ? "Ascending" : "Descending", children: _jsx(Button, { onClick: () => {
+                                        if (sortOrder === "desc") {
+                                            handleSortOrderChange("asc");
+                                        }
+                                        else {
+                                            handleSortOrderChange("desc");
+                                        }
+                                    }, icon: sortOrder == "desc" ? (_jsx(AiOutlineSortAscendingbtn, { className: "md-lib-cursor-pointer" })) : (_jsx(AiOutlineSortDescendingbtn, { className: "md-lib-cursor-pointer" })) }) })), sortMode === "custom" && !enableDrag && !globalSearch && (_jsx(Tooltip, { title: "Enable Drag", children: _jsx(Button, { icon: _jsx(GrSortIcon, {}), onClick: toggleEnableDrag }) })), enableDrag && (_jsxs("div", { className: "md-lib-flex md-lib-gap-2 md-lib-ml-2", children: [_jsx(Button, { type: "primary", onClick: handleSave, loading: isSorting, children: "Save" }), _jsx(Button, { onClick: handleCancel, children: "Cancel" })] })), loading && _jsx(CustomLoader, {})] }), _jsx("div", { style: { height: "calc(100% - 228px)", overflow: "auto", }, children: _jsx(DirectoryTree, { treeData: getFoldersTree(sortMode === "custom" ? tempFolders : folders), draggable: {
+                                icon: true,
+                                nodeDraggable: (node) => sortMode === "custom" && enableDrag ? !(node === null || node === void 0 ? void 0 : node.parentId) : false,
+                            }, onDrop: sortMode === "custom" && enableDrag ? onDrop : undefined, blockNode: true, showIcon: false, selectable: !enableDrag, selectedKeys: isArray(selectedKeys) ? selectedKeys : [selectedKeys], expandedKeys: expandedKeys, onSelect: handleSelect, onExpand: handleExpandWithFetch }) })] }), showConfirmationModal && (_jsx(DeleteConfirmationModal, { showDeleteModal: showConfirmationModal, toggleDeleteModal: toggleDeleteModal, okText: DELETE_OK_TEXT, description: DELETE_CONFIRMATION_MESSAGE.replace(":action", "delete").replace(":entity", get(selectedFolder, "name", "this folder")), onOk: onDeleteFolder, loading: loading })), showEditModal && (_jsx(AddFolder, { open: showEditModal, handleCancel: toggleEditModal, folder: selectedFolder }))] }));
+}
+export default FolderTree;

package/build/MyDrive/ImageEditor/EditImage.d.ts

@@ -0,0 +1,6 @@
+import { FileEntity } from "../../utilities/constants/interface";
+declare const ImageEditorComponent: ({ file, handleClose, }: {
+    file: FileEntity;
+    handleClose: () => void;
+}) => JSX.Element;
+export default ImageEditorComponent;

package/build/MyDrive/ImageEditor/EditImage.js

@@ -0,0 +1,97 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { GoArrowLeft } from "react-icons/go";
+import { PiFloppyDisk } from "react-icons/pi";
+import TuiImageEditor from "./TuiImageEditor";
+import { useMemo, useRef, useState } from "react";
+import { NotificationStatus, } from "../../utilities/constants/interface";
+import { get } from "lodash";
+import CustomButton from "../../common/Button";
+import { showNotification } from "../../common/notifications";
+import { FILE_UPLOAD_ERROR, SOMETHING_WENT_WRONG, UPDATE_SUCCESS, } from "../../utilities/constants/messages";
+import { SAVE_EDITED_FILE_THUMBNAIL_URL, SAVE_EDITED_FILE_URL, } from "../../utilities/constants/apiUrls";
+import axios from "axios";
+import { generateFoldersQueryKey, invalidateData, QueryKeys, } from "../../utilities/constants/queryKeys";
+import { useQueryClient } from "react-query";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import { createApiClient } from "../../hocs/configureAxios";
+import useAppParams from "../../utilities/useAppParams";
+const GoArrowLeftIcon = GoArrowLeft;
+const PiFloppyDiskIcon = PiFloppyDisk;
+const ImageEditorComponent = ({ file, handleClose, }) => {
+    const queryClient = useQueryClient();
+    const damConfig = useDamConfig();
+    const { rootFolderId } = damConfig;
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const { type, folderId } = useAppParams();
+    const [state, setState] = useState({
+        loading: false,
+    });
+    const { loading } = state;
+    const editorRef = useRef(null);
+    const handleSave = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const editedFile = yield ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getEditedFile());
+        if (editedFile) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
+            try {
+                const response = yield api.put(SAVE_EDITED_FILE_URL, {
+                    path: get(file, "s3Path"),
+                });
+                const url = get(response, "data");
+                if (url) {
+                    try {
+                        const response = yield axios.put(url, editedFile, {
+                            headers: {
+                                "Content-Type": get(editedFile, "mimetype"),
+                                "Access-Control-Allow-Origin": "*",
+                            },
+                        });
+                        if (get(response, "status") === 200) {
+                            try {
+                                const result = yield api.put(SAVE_EDITED_FILE_THUMBNAIL_URL.replace(":fileId", get(file, "_id")), {});
+                                invalidateData(queryClient, generateFoldersQueryKey(type), folderId ? folderId : rootFolderId);
+                                invalidateData(queryClient, QueryKeys.FILE, get(file, "_id"));
+                                showNotification(UPDATE_SUCCESS, NotificationStatus.SUCCESS);
+                                handleClose();
+                            }
+                            catch (error) {
+                                showNotification(get(error, "message", FILE_UPLOAD_ERROR), NotificationStatus.ERROR);
+                            }
+                            finally {
+                                setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
+                            }
+                        }
+                    }
+                    catch (error) {
+                        showNotification(get(error, "message", FILE_UPLOAD_ERROR), NotificationStatus.ERROR);
+                    }
+                    finally {
+                        setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
+                    }
+                }
+                else {
+                    showNotification(FILE_UPLOAD_ERROR, NotificationStatus.ERROR);
+                }
+            }
+            catch (error) {
+                showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+                setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false })));
+            }
+        }
+        else {
+            showNotification("Error while saving image", NotificationStatus.ERROR);
+        }
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "md-lib-bg-darkPrimaryBg md-lib-py-3 md-lib-px-5 md-lib-flex md-lib-justify-between md-lib-items-center", children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-5", children: [_jsx(GoArrowLeftIcon, { className: "md-lib-text-darkTextColor", size: 24, onClick: handleClose }), _jsx("h4", { className: "md-lib-font-semibold md-lib-text-darkTextColor md-lib-text-base md-lib-truncate md-lib-w-96", title: get(file, "name", "N/A"), children: get(file, "name", "N/A") })] }), _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-4", children: [_jsx(CustomButton, { size: "large", onClick: handleClose, label: "Cancel", type: "default", className: "md-lib-bg-secondaryColor md-lib-hover:bg-secondaryHoverColor md-lib-border-none" }), _jsx(CustomButton, { size: "large", type: "primary", icon: _jsx(PiFloppyDiskIcon, { size: 24 }), onClick: handleSave, label: "Save", loading: loading })] })] }), _jsx(TuiImageEditor, { ref: editorRef, file: file, path: get(file, "s3Path") })] }));
+};
+export default ImageEditorComponent;

package/build/MyDrive/ImageEditor/EditImageModal.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FileEntity } from "../../utilities/constants/interface";
+declare const EditImageModal: ({ open, handleClose, file, }: {
+    handleClose: () => void;
+    open: boolean;
+    file: FileEntity;
+}) => React.ReactPortal | null;
+export default EditImageModal;

package/build/MyDrive/ImageEditor/EditImageModal.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import ImageEditorComponent from "./EditImage";
+import useAppParams from "../../utilities/useAppParams";
+const EditImageModal = ({ open, handleClose, file, }) => {
+    const { id } = useAppParams();
+    const [state, setState] = useState({
+        visible: false,
+    });
+    const { visible } = state;
+    useEffect(() => {
+        if (open) {
+            setTimeout(() => setState((prevState) => (Object.assign(Object.assign({}, prevState), { visible: true }))), 10);
+        }
+        else {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { visible: false })));
+        }
+    }, [open]);
+    if (!open && !visible)
+        return null;
+    const modalContent = (_jsx("div", { className: `md-lib-fixed md-lib-inset-0 md-lib-z-[1001] md-lib-w-screen md-lib-h-screen md-lib-bg-white dark:md-lib-bg-darkPrimary md-lib-text-black dark:md-lib-text-white md-lib-overflow-auto md-lib-transform md-lib-transition-all md-lib-duration-300 md-lib-ease-in-out ${open && visible
+            ? "md-lib-opacity-100 md-lib-translate-y-0"
+            : "md-lib-opacity-0 md-lib-translate-y-4"}`, onTransitionEnd: () => {
+            if (!open)
+                setState((prevState) => (Object.assign(Object.assign({}, prevState), { visible: false })));
+        }, children: _jsx(ImageEditorComponent, { file: file, handleClose: handleClose }) }));
+    return ReactDOM.createPortal(modalContent, document.body);
+};
+export default EditImageModal;

package/build/MyDrive/ImageEditor/TuiImageEditor.d.ts

@@ -0,0 +1,10 @@
+import { FileEntity } from "../../utilities/constants/interface";
+import React from "react";
+import "tui-image-editor/dist/tui-image-editor.css";
+declare const TuiImageEditor: React.ForwardRefExoticComponent<{
+    file: FileEntity;
+    path: string;
+} & React.RefAttributes<{
+    getEditedFile: () => Promise<File | null>;
+}>>;
+export default TuiImageEditor;