@bindu-dashing/dam-solution-v2 5.8.6

package/build/MyDrive/FolderTree.js

@@ -0,0 +1,342 @@
+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 } 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 { MY_DRIVE_SCREEN, SUBFOLDERS_SCREEN, } from "../utilities/constants/routes";
+import useAppNavigate from "../utilities/useAppNavigate";
+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) => {
+    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;
+    });
+    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 })));
+};
+function FolderTree({ currentRootId, expandedKeys, selectedKeys, handleExpand, setSelectedKeys, folders, setFolders, setExpandedKeys, setGlobalSearch, globalSearch, }) {
+    const { folderId, id, type } = useParams();
+    const damConfig = useDamConfig();
+    const { rootFolderId } = damConfig;
+    const navigate = useAppNavigate();
+    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;
+    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", []);
+            if (fid === rootFolderId) {
+                setFolders(sortFoldersRecursively(newFolders, "name", sortOrder));
+            }
+            else {
+                setFolders((prev) => {
+                    const cloned = cloneDeep(prev);
+                    const sorted = sortFoldersRecursively(newFolders, "name", sortOrder);
+                    return insertSubfolders(cloned, fid, sorted);
+                });
+            }
+            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 });
+            });
+        }
+    });
+    // ✅ Load on mount & when currentRootId changes
+    useEffect(() => {
+        if (currentRootId) {
+            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 = []) => {
+        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]);
+    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];
+            navigate(SUBFOLDERS_SCREEN.replace(":folderId", 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(MY_DRIVE_SCREEN);
+        }
+        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 });
+        });
+    };
+    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(MY_DRIVE_SCREEN);
+                                }
+                            } }) }), !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(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: handleExpand })] }), 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;

package/build/MyDrive/ImageEditor/TuiImageEditor.js

@@ -0,0 +1,99 @@
+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 } from "react/jsx-runtime";
+import { get } from "lodash";
+import { useEffect, useRef, forwardRef, useImperativeHandle, useMemo, useState, } from "react";
+import ImageEditor from "tui-image-editor";
+import "tui-image-editor/dist/tui-image-editor.css";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import { createApiClient } from "../../hocs/configureAxios";
+import { GET_BASE64_USING_PATH_URL } from "../../utilities/constants/apiUrls";
+const TuiImageEditor = forwardRef(({ file, path }, ref) => {
+    const editorRef = useRef(null);
+    const editorInstance = useRef(null);
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [base64, setBase64] = useState("");
+    useEffect(() => {
+        if (path) {
+            getBase64();
+        }
+    }, [path]);
+    const getBase64 = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const response = yield api.get(`${GET_BASE64_USING_PATH_URL}?key=${path}`);
+            // console.log(response);
+            const base64 = get(response, "base64", "");
+            const mimeType = get(response, "contentType", "image/png");
+            setBase64(`data:${mimeType};base64,${base64}`);
+        }
+        catch (err) {
+            console.log("Error while fetching file base64", err);
+        }
+    });
+    useEffect(() => {
+        if (!editorRef.current)
+            return;
+        editorInstance.current = new ImageEditor(editorRef.current, {
+            includeUI: {
+                loadImage: {
+                    path: base64,
+                    name: get(file, "name", "N/A"),
+                },
+                theme: {
+                    "loadButton.display": "none",
+                },
+                menu: [
+                    "crop",
+                    "flip",
+                    "rotate",
+                    "draw",
+                    "shape",
+                    "icon",
+                    "text",
+                    "mask",
+                    "filter",
+                ],
+                initMenu: "filter",
+                uiSize: {
+                    width: "100%",
+                    height: "700px",
+                },
+                menuBarPosition: "bottom",
+            },
+            cssMaxWidth: 700,
+            cssMaxHeight: 500,
+            selectionStyle: {
+                cornerSize: 20,
+                rotatingPointOffset: 70,
+            },
+        });
+        return () => {
+            var _a, _b;
+            (_b = (_a = editorInstance.current) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+    }, [base64]);
+    useImperativeHandle(ref, () => ({
+        getEditedFile() {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (!editorInstance.current)
+                    return null;
+                const dataURL = editorInstance.current.toDataURL();
+                const blob = yield (yield fetch(dataURL)).blob();
+                return new File([blob], get(file, "name", "edited-image.png"), {
+                    type: get(file, "mimetype", blob.type),
+                });
+            });
+        },
+    }));
+    return (_jsx("div", { className: "md-lib-w-full", children: _jsx("div", { ref: editorRef, className: "mb-4" }) }));
+});
+TuiImageEditor.displayName = "TuiImageEditor";
+export default TuiImageEditor;

package/build/MyDrive/ImagePickerBreadCrumbList.d.ts

@@ -0,0 +1,8 @@
+import { FolderEntity } from "../utilities/constants/interface";
+declare function ImagePickerBreadCrumbList({ folder, parentFolderId, setParentFolderId, pickerFolderId, }: {
+    folder: FolderEntity;
+    parentFolderId?: string;
+    setParentFolderId?: (id: string) => void;
+    pickerFolderId?: string;
+}): JSX.Element;
+export default ImagePickerBreadCrumbList;

package/build/MyDrive/ImagePickerBreadCrumbList.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumb, Tooltip } from "antd";
+import { findIndex, get, last, map, slice } from "lodash";
+import { useMemo } from "react";
+import { FaChevronRight } from "react-icons/fa";
+import { useDamConfig } from "../hocs/DamConfigContext";
+const FaChevronRightIcon = FaChevronRight;
+function ImagePickerBreadCrumbList({ folder, parentFolderId, setParentFolderId, pickerFolderId, }) {
+    const damConfig = useDamConfig();
+    const { rootFolderId } = damConfig;
+    const tree = useMemo(() => {
+        const fullTree = get(folder, "tree", []);
+        if (pickerFolderId) {
+            const pickerIndex = findIndex(fullTree, (item) => get(item, "_id") === pickerFolderId);
+            const parentIndex = findIndex(fullTree, (item) => get(item, "_id") === parentFolderId);
+            if (pickerIndex !== -1) {
+                const end = parentIndex !== -1 ? parentIndex + 1 : get(fullTree, "length");
+                return slice(fullTree, pickerIndex, end);
+            }
+        }
+        return fullTree;
+    }, [folder, pickerFolderId, parentFolderId]);
+    return (_jsx(Breadcrumb, { className: "md-lib-font-semibold md-lib-text-[22px] md-lib-truncate", separator: _jsx(FaChevronRightIcon, { className: "md-lib-mt-2" }), children: map(tree, (item) => {
+            const treeId = get(item, "_id");
+            const name = get(item, "name", "N/A");
+            const isLast = treeId === get(last(tree), "_id");
+            const handleClick = () => {
+                if (pickerFolderId && setParentFolderId && !isLast) {
+                    setParentFolderId(treeId);
+                }
+            };
+            return (_jsx(Breadcrumb.Item, { onClick: handleClick, className: "md-lib-h-auto md-lib-cursor-pointer", children: _jsx(Tooltip, { title: name, children: _jsx("p", { className: "md-lib-max-w-28 md-lib-truncate md-lib-font-semibold md-lib-text-[22px]", children: name }) }) }, treeId));
+        }) }));
+}
+export default ImagePickerBreadCrumbList;

package/build/MyDrive/ImagePickerDrive.d.ts

@@ -0,0 +1 @@
+export default function ImagePickerDrive(): JSX.Element;