@bindu-dashing/dam-solution-v2 5.8.6

package/build/MyDrive/FileMenuOptions.js

@@ -0,0 +1,397 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown } from "antd";
+import { BsThreeDotsVertical } from "react-icons/bs";
+import { IoArchiveOutline, IoDuplicateOutline } from "react-icons/io5";
+import { TbStar, TbStarOff } from "react-icons/tb";
+import { DeleteOutlined, EditOutlined, EyeOutlined, InfoCircleOutlined, UserAddOutlined, } from "@ant-design/icons";
+import { useMemo, useState } from "react";
+import { DriveModes, NotificationStatus, } from "../utilities/constants/interface";
+import { concat, difference, filter, first, get, includes, join, map, } from "lodash";
+import { showNotification } from "../common/notifications";
+import CustomLoader from "../common/loader/CustomLoader";
+import { DownloadOutlined, } from "@ant-design/icons";
+import AddFolder from "./AddFolder";
+import { useMutation, useQueryClient } from "react-query";
+import { archiveFiles, deleteFiles, downloadFiles, duplicateFiles, restoreFiles, unarchiveFiles, } from "../react-query/services/file-services";
+import { ADDED_TO_FAV_MSG, ARCHIVE_OK_TEXT, ARCHIVE_SUCCESS, CREATE_SUCCESS, DELETE_CONFIRMATION_MESSAGE, DELETE_MESSAGE_DESCRIPTION, DELETE_OK_TEXT, DELETE_SUCCESS, INVALID_URL, REMOVED_FROM_FAV_MSG, RESTORE_SUCCESS, SOMETHING_WENT_WRONG, } from "../utilities/constants/messages";
+import { getSelectedFiles, } from "../react-query/hooks/folder-hooks";
+import { generateFoldersQueryKey, invalidateData, QueryKeys, } from "../utilities/constants/queryKeys";
+import { DeleteConfirmationModal } from "../common/CustomElements";
+import { addToFavFolders, removeFromFavFolders, } from "../react-query/services/folder-services";
+import { MdDriveFileMoveOutline, MdOutlineUnarchive } from "react-icons/md";
+import FileDetails from "./fileDetails/FileDetails";
+import MoveToAnotherFolder from "./files/MoveToAnotherFolder";
+import { AllowedFileActions, BulkRestrictedActions, DEFAULT_PAGE, FileActionsList, MyDriveFileActions, SingleFileRestrictedActions, } from "../hocs/appConstants";
+import InviteTeamModal from "../settings/InviteTeamModal";
+import { FETCH_ENTITY_SCREEN } from "../utilities/constants/routes";
+import ManageFile from "./fileDetails/ManageFile";
+import { useDamConfig } from "../hocs/DamConfigContext";
+import { createApiClient } from "../hocs/configureAxios";
+import useAppParams from "../utilities/useAppParams";
+import { AiOutlineHistory } from "react-icons/ai";
+import FileDownloadHistory from "./FileDownloadHistory";
+const TbStarOffIcon = TbStarOff;
+const IoDuplicateOutlineIcon = IoDuplicateOutline;
+const MdDriveFileMoveOutlineIcon = MdDriveFileMoveOutline;
+const IoArchiveOutlineIcon = IoArchiveOutline;
+const MdOutlineUnarchiveIcon = MdOutlineUnarchive;
+const TbStarIcon = TbStar;
+const BsThreeDotsVerticalIcon = BsThreeDotsVertical;
+const AiOutlineHistoryIcon = AiOutlineHistory;
+function FileMenuOptions({ file, folderIds = [], fileIds = [], folder, onCloseSelection, readOnly = false, fileModal = false, }) {
+    const damConfig = useDamConfig();
+    const { rootFolderId, appType, isAdmin } = damConfig;
+    const { folderId, type } = useAppParams();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const queryClient = useQueryClient();
+    const isBulkAction = useMemo(() => !!get(folderIds, "length", 0) || !!get(fileIds, "length", 0), [folderIds, fileIds]);
+    const isMultiSelection = useMemo(() => get(folderIds, "length", 0) + get(fileIds, "length", 0) > DEFAULT_PAGE, [folderIds, fileIds]);
+    const [state, setState] = useState({
+        loading: false,
+        displayUpdateName: false,
+        actionType: "",
+        showConfirmModal: false,
+        showPreviewModal: false,
+        showMoveFolder: false,
+        showShareModal: false,
+        showFileAccess: false,
+        showLogsModal: false,
+    });
+    const { loading, displayUpdateName, showConfirmModal, actionType, showPreviewModal, showMoveFolder, showShareModal, showFileAccess, showLogsModal, } = state;
+    const toggleLogsModal = () => setState((prevState) => (Object.assign(Object.assign({}, prevState), { showLogsModal: !prevState.showLogsModal })));
+    const toggleFileAccess = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showFileAccess: !prevState.showFileAccess })));
+    };
+    const fileLinks = useMemo(() => {
+        return map(fileIds, (id) => `${appType == "reactJs"
+            ? process.env.REACT_APP_MIXDRIVE_SITE_URL
+            : process.env.NEXT_PUBLIC_MIXDRIVE_SITE_URL}` +
+            FETCH_ENTITY_SCREEN.replace(":type", DriveModes.FILE).replace(":id", id));
+    }, [fileIds]);
+    const folderLinks = useMemo(() => {
+        return map(folderIds, (id) => `${appType == "reactJs"
+            ? process.env.REACT_APP_MIXDRIVE_SITE_URL
+            : process.env.NEXT_PUBLIC_MIXDRIVE_SITE_URL}` +
+            FETCH_ENTITY_SCREEN.replace(":type", DriveModes.FOLDERS).replace(":id", id));
+    }, [folderIds]);
+    const link = useMemo(() => {
+        if (get(concat(fileLinks, folderLinks), "length")) {
+            return get(concat(fileLinks, folderLinks), "length") > 1
+                ? join(concat(fileLinks, folderLinks), ", ")
+                : first(concat(fileLinks, folderLinks));
+        }
+        else {
+            return (`${appType == "reactJs"
+                ? process.env.REACT_APP_MIXDRIVE_SITE_URL
+                : process.env.NEXT_PUBLIC_MIXDRIVE_SITE_URL}` +
+                FETCH_ENTITY_SCREEN.replace(":type", DriveModes.FILE).replace(":id", get(file, "_id")));
+        }
+    }, [fileLinks, folderLinks, file]);
+    const toggleShareModal = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showShareModal: !prevState.showShareModal })));
+    };
+    const toggleShowPreviewModal = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showPreviewModal: !prevState.showPreviewModal })));
+    };
+    const toggleShowMoveFolder = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showMoveFolder: !prevState.showMoveFolder })));
+    };
+    const toggleConfirmPopup = (actionType = "") => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { actionType, showConfirmModal: !prevState.showConfirmModal })));
+    };
+    const toggleDisplayUpdateName = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false, displayUpdateName: !prevState.displayUpdateName })));
+    };
+    const onFailure = (message) => {
+        showNotification(message, NotificationStatus.ERROR);
+    };
+    const onDeleteSuccess = (message) => {
+        invalidateData(queryClient, generateFoldersQueryKey(type), folderId ? folderId : rootFolderId);
+        showNotification(message, NotificationStatus.SUCCESS);
+        onCloseSelection === null || onCloseSelection === void 0 ? void 0 : onCloseSelection();
+    };
+    const deleteFileMutation = useMutation({
+        mutationFn: deleteFiles,
+        onSuccess: (response) => {
+            toggleConfirmPopup();
+            onDeleteSuccess(get(response, "data.message", DELETE_SUCCESS));
+        },
+        onError: (error) => {
+            onFailure(get(error, "message", SOMETHING_WENT_WRONG));
+        },
+    });
+    const onDeleteFile = () => {
+        deleteFileMutation.mutate({
+            fileIds: [get(file, "_id")],
+            folderIds: [],
+            api,
+        });
+    };
+    const archiveFileMutation = useMutation({
+        mutationFn: archiveFiles,
+        onSuccess: (response) => {
+            toggleConfirmPopup();
+            onDeleteSuccess(get(response, "data.message", ARCHIVE_SUCCESS));
+        },
+        onError: (error) => {
+            onFailure(get(error, "message", SOMETHING_WENT_WRONG));
+        },
+    });
+    const onArchiveFile = () => {
+        archiveFileMutation.mutate({
+            fileIds: file ? [get(file, "_id")] : fileIds,
+            folderIds,
+            api,
+        });
+    };
+    const favouriteFileMutation = useMutation({
+        mutationFn: addToFavFolders,
+        onSuccess: (response) => {
+            onFavSuccess(get(response, "data.message", ADDED_TO_FAV_MSG));
+        },
+        onError: (error) => {
+            onFailure(get(error, "message", SOMETHING_WENT_WRONG));
+        },
+    });
+    const onFavouriteFile = () => {
+        favouriteFileMutation.mutate({
+            payload: {
+                fileIds: file ? [get(file, "_id")] : fileIds,
+                folderIds,
+            },
+            api,
+        });
+    };
+    const duplicateFileMutation = useMutation({
+        mutationFn: duplicateFiles,
+        onSuccess: (response) => {
+            invalidateData(queryClient, generateFoldersQueryKey(type), folderId ? folderId : rootFolderId);
+            showNotification(get(response, "data.message", CREATE_SUCCESS), NotificationStatus.SUCCESS);
+        },
+        onError: (error) => {
+            onFailure(get(error, "message", SOMETHING_WENT_WRONG));
+        },
+    });
+    const onDuplicateFile = () => {
+        duplicateFileMutation.mutate({
+            fileIds: [get(file, "_id")],
+            api,
+        });
+    };
+    const downloadFileMutation = useMutation({
+        mutationFn: downloadFiles,
+        onSuccess: (response) => {
+            const url = get(response, "data");
+            if (url) {
+                window.open(url, "_blank");
+            }
+            else {
+                onFailure(INVALID_URL);
+            }
+        },
+        onError: (error) => {
+            onFailure(get(error, "message", SOMETHING_WENT_WRONG));
+        },
+    });
+    const onDownloadFile = () => {
+        // downloadFileMutation.mutate({
+        //   fileIds: [get(file, "_id")!],
+        //   folderIds: [],
+        //   api,
+        // });
+        window.open(get(file, "downloadUrl", ""));
+    };
+    const onFavSuccess = (message) => {
+        invalidateData(queryClient, generateFoldersQueryKey(type), folderId ? folderId : rootFolderId);
+        invalidateData(queryClient, QueryKeys.FILE, get(file, "_id"));
+        showNotification(message, NotificationStatus.SUCCESS);
+        onCloseSelection === null || onCloseSelection === void 0 ? void 0 : onCloseSelection();
+    };
+    const removeFavFileMutation = useMutation({
+        mutationFn: removeFromFavFolders,
+        onSuccess: (response) => {
+            onFavSuccess(get(response, "data.message", REMOVED_FROM_FAV_MSG));
+        },
+        onError: (error) => {
+            onFailure(get(error, "message", SOMETHING_WENT_WRONG));
+        },
+    });
+    const onUnStarFile = () => {
+        removeFavFileMutation.mutate({
+            payload: {
+                fileIds: file ? [get(file, "_id")] : fileIds,
+                folderIds,
+            },
+            api,
+        });
+    };
+    const restoreFileMutation = useMutation({
+        mutationFn: restoreFiles,
+        onSuccess: (response) => {
+            onDeleteSuccess(get(response, "data.message", RESTORE_SUCCESS));
+        },
+        onError: (error) => {
+            onFailure(get(error, "message", SOMETHING_WENT_WRONG));
+        },
+    });
+    const onRestoreFile = () => {
+        restoreFileMutation.mutate({
+            fileIds: [get(file, "_id")],
+            folderIds: [],
+            api,
+        });
+    };
+    const unarchiveFileMutation = useMutation({
+        mutationFn: unarchiveFiles,
+        onSuccess: (response) => {
+            onDeleteSuccess(get(response, "data.message", RESTORE_SUCCESS));
+        },
+        onError: (error) => {
+            onFailure(get(error, "message", SOMETHING_WENT_WRONG));
+        },
+    });
+    const onUnArchiveFile = () => {
+        unarchiveFileMutation.mutate({
+            fileIds: file ? [get(file, "_id")] : fileIds,
+            folderIds: folderIds,
+            api,
+        });
+    };
+    const favItems = [
+        {
+            key: FileActionsList.UNSTAR,
+            label: "Unstar",
+            icon: removeFavFileMutation.isLoading ? (_jsx(CustomLoader, {})) : (_jsx(TbStarOffIcon, {})),
+            onClick: () => onUnStarFile(),
+        },
+    ];
+    const shareItem = isAdmin
+        ? [
+            {
+                key: FileActionsList.SHARE,
+                label: "Share",
+                icon: _jsx(UserAddOutlined, {}),
+                onClick: toggleShareModal,
+            },
+        ]
+        : [];
+    const adminItems = isAdmin
+        ? [
+            {
+                key: FileActionsList.RENAME,
+                label: "Rename",
+                icon: _jsx(EditOutlined, {}),
+                onClick: () => toggleDisplayUpdateName(),
+                disabled: isMultiSelection || !isAdmin,
+            },
+            // {
+            //   key: FileActionsList.DUPLICATE,
+            //   label: "Duplicate",
+            //   icon: duplicateFileMutation.isLoading ? (
+            //     <CustomLoader />
+            //   ) : (
+            //     <IoDuplicateOutlineIcon />
+            //   ),
+            //   onClick: () => onDuplicateFile(),
+            //   disabled: isMultiSelection || !isAdmin,
+            // },
+            {
+                key: FileActionsList.DELETE,
+                label: "Delete",
+                icon: deleteFileMutation.isLoading ? (_jsx(CustomLoader, {})) : (_jsx(DeleteOutlined, {})),
+                onClick: () => toggleConfirmPopup("delete"),
+            },
+            {
+                key: FileActionsList.SHOW_DOWNLOADS,
+                label: "Download history",
+                icon: _jsx(AiOutlineHistoryIcon, {}),
+                onClick: toggleLogsModal,
+            },
+        ]
+        : [];
+    const items = [
+        {
+            key: FileActionsList.PREVIEW,
+            label: "View",
+            icon: _jsx(EyeOutlined, {}),
+            onClick: () => toggleShowPreviewModal(),
+            disabled: !!get(folderIds, "length"),
+        },
+        // {
+        //   key: FileActionsList.COPY,
+        //   label: "Copy",
+        //   icon: loading ? <CustomLoader /> : <LinkOutlined />,
+        //   onClick: () => handleCopy(link!),
+        // },
+        {
+            key: FileActionsList.DOWNLOAD,
+            label: "Download",
+            icon: downloadFileMutation.isLoading ? (_jsx(CustomLoader, {})) : (_jsx(DownloadOutlined, {})),
+            onClick: onDownloadFile,
+        },
+        ...adminItems,
+        // {
+        //   key: FileActionsList.MOVE,
+        //   label: "Move",
+        //   icon: <MdDriveFileMoveOutlineIcon />,
+        //   onClick: () => toggleShowMoveFolder(),
+        // },
+        // {
+        //   key: FileActionsList.ARCHIVE,
+        //   label: "Archive",
+        //   icon: <IoArchiveOutlineIcon />,
+        //   onClick: () => toggleConfirmPopup("archive"),
+        // },
+        // {
+        //   key: FileActionsList.UNARCHIVE,
+        //   label: "Unarchive",
+        //   icon: unarchiveFileMutation.isLoading ? (
+        //     <CustomLoader />
+        //   ) : (
+        //     <MdOutlineUnarchiveIcon />
+        //   ),
+        //   onClick: () => onUnArchiveFile(),
+        // },
+        // ...(get(file, "isFavourite") || type === DriveModes.STARRED
+        //   ? favItems
+        //   : ([
+        //       {
+        //         key: FileActionsList.STAR,
+        //         label: "Add to starred",
+        //         icon: favouriteFileMutation.isLoading ? (
+        //           <CustomLoader />
+        //         ) : (
+        //           <TbStarIcon />
+        //         ),
+        //         onClick: () => onFavouriteFile(),
+        //       },
+        //     ] as any)),
+        {
+            key: FileActionsList.FILE_INFO,
+            label: "File information",
+            icon: _jsx(InfoCircleOutlined, {}),
+            disabled: isMultiSelection,
+            onClick: toggleFileAccess,
+        },
+        // {
+        //   key: FileActionsList.RESTORE,
+        //   label: "Restore",
+        //   icon: restoreFileMutation.isLoading ? <CustomLoader /> : <RedoOutlined />,
+        //   onClick: () => onRestoreFile(),
+        // },
+    ];
+    const filterActions = (menuItems, allowedActions = MyDriveFileActions) => filter(menuItems, (item) => includes(fileModal
+        ? difference(allowedActions, SingleFileRestrictedActions)
+        : isBulkAction
+            ? difference(allowedActions, BulkRestrictedActions)
+            : allowedActions, item === null || item === void 0 ? void 0 : item.key));
+    const currentMenuItems = useMemo(() => {
+        return filterActions(items, get(AllowedFileActions, type));
+    }, [type, items, isBulkAction]);
+    return (_jsxs(_Fragment, { children: [_jsx(Dropdown, { menu: { items: currentMenuItems }, trigger: ["click"], disabled: readOnly, children: _jsx(BsThreeDotsVerticalIcon, { size: 20, className: readOnly
+                        ? "md-lib-cursor-not-allowed md-lib-text-disabledBtnColor dark:md-lib-text-darkBorderColor"
+                        : "md-lib-cursor-pointer", onClick: (e) => e.stopPropagation() }) }), displayUpdateName && (!!file || !!folder) && (_jsx(AddFolder, { file: file, open: displayUpdateName, handleCancel: toggleDisplayUpdateName, folder: folder, onCloseSelection: onCloseSelection, fileModal: fileModal })), _jsx(DeleteConfirmationModal, { showDeleteModal: showConfirmModal, toggleDeleteModal: toggleConfirmPopup, icon: actionType === "archive" ? (_jsx(IoArchiveOutlineIcon, {})) : (_jsx(DeleteOutlined, {})), okText: actionType === "archive" ? ARCHIVE_OK_TEXT : DELETE_OK_TEXT, description: isMultiSelection
+                    ? DELETE_CONFIRMATION_MESSAGE.replace(":action", actionType).replace(" :entity", "")
+                    : DELETE_CONFIRMATION_MESSAGE.replace(":action", actionType).replace(":entity", get(file, "name", "this file")), onOk: actionType === "archive" ? onArchiveFile : onDeleteFile, subHeading: actionType === "archive" ? "" : DELETE_MESSAGE_DESCRIPTION, loading: deleteFileMutation.isLoading || archiveFileMutation.isLoading }), showPreviewModal && (_jsx(FileDetails, { open: showPreviewModal, handleClose: toggleShowPreviewModal, file: file, files: getSelectedFiles(queryClient, folderId ? folderId : rootFolderId, generateFoldersQueryKey(type), fileIds), onCloseSelection: onCloseSelection })), showMoveFolder && (_jsx(MoveToAnotherFolder, { open: showMoveFolder, handleCancel: toggleShowMoveFolder, fileIds: [get(file, "_id")], entity: file, onCloseSelection: onCloseSelection })), showShareModal && (_jsx(InviteTeamModal, { open: showShareModal, onClose: toggleShareModal, onFetchInvitations: () => { }, shareModal: true, fileIds: file ? [get(file, "_id")] : fileIds, folderIds: folderIds, inviteType: DriveModes.FILE, file: file })), showFileAccess && (file || folder) && (_jsx(ManageFile, { open: showFileAccess, onClose: toggleFileAccess, file: file ? file : folder })), showLogsModal && (_jsx(FileDownloadHistory, { file: file ? file : folder, open: showLogsModal, onClose: toggleLogsModal }))] }));
+}
+export default FileMenuOptions;

package/build/MyDrive/FilesGridView.d.ts

@@ -0,0 +1,9 @@
+import { FileEntity } from "../utilities/constants/interface";
+declare const FilesGridView: ({ files, handleClick, selectedFileIds, isImagePicker, selectedPickerFile, }: {
+    files: FileEntity[];
+    handleClick: (file: FileEntity) => void;
+    selectedFileIds: string[];
+    isImagePicker?: boolean;
+    selectedPickerFile?: FileEntity;
+}) => JSX.Element;
+export default FilesGridView;

package/build/MyDrive/FilesGridView.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DriveModes, ThumbnailStatus, } from "../utilities/constants/interface";
+import _, { get, includes } from "lodash";
+import { getFileOrFolderIcon } from "../common/folders/getFolderOrFileIcon";
+import FileMenuOptions from "./FileMenuOptions";
+import { GrInProgress } from "react-icons/gr";
+import useAppParams from "../utilities/useAppParams";
+import { UPLOAD_FILE_IN_PROGRESS_WHITE_IMAGE } from "../hocs/appConstants";
+import { Image } from "antd";
+const IconInprogress = GrInProgress;
+const FilesGridView = ({ files, handleClick, selectedFileIds, isImagePicker, selectedPickerFile, }) => {
+    const { type } = useAppParams();
+    return (_jsx("div", { className: "md-lib-grid md-lib-grid-cols-2 md:md-lib-grid-cols-3 xl:md-lib-grid-cols-4 md-lib-gap-x-4 md-lib-gap-y-10 md-lib-relative", children: _.map(files, (file) => {
+            const isSelected = includes(selectedFileIds, get(file, "_id")) ||
+                get(selectedPickerFile, "_id") === get(file, "_id");
+            return (_jsxs("div", { className: `md-lib-rounded-lg md-lib-pt-5 md-lib-h-52 md-lib-cursor-pointer ${isSelected
+                    ? "md-lib-bg-borderColor dark:md-lib-bg-darkSecondaryBg"
+                    : "md-lib-bg-textColorActive dark:md-lib-bg-darkPrimary"} `, onClick: () => handleClick(file), children: [_jsxs("div", { className: "md-lib-flex md-lib-px-5 md-lib-items-center md-lib-justify-between md-lib-h-8", children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2 md-lib-w-[calc(100%-20px)]", children: [getFileOrFolderIcon(get(file, "type"), get(file, "mimetype"), 20), _jsx("div", { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-text-sm md-lib-font-medium md-lib-truncate md-lib-w-[calc(100%-24px)]", title: get(file, "name", "N/A"), children: get(file, "name", "N/A") })] }), !isImagePicker &&
+                                type !== DriveModes.FOLDERS &&
+                                get(file, "fileUploadStatus") !== ThumbnailStatus.PENDING && (_jsx(FileMenuOptions, { file: file }))] }), _jsx("div", { className: "md-lib-mt-2 md-lib-h-28 md-lib-mx-2.5 md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-md md-lib-flex md-lib-justify-center", children: get(file, "fileUploadStatus") === ThumbnailStatus.PENDING ? (
+                        // <IconInprogress className="mt-10 text-[40px] text-imagesColor" />
+                        _jsx(Image, { src: UPLOAD_FILE_IN_PROGRESS_WHITE_IMAGE, width: 100, height: 100 })) : (_jsx("img", { src: get(file, "thumbnailUrl", ""), width: 100, height: 100, alt: get(file, "name", "N/A") })) }), _jsx("div", { children: _jsx("p", { className: "md-lib-text-xs md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-px-5 md-lib-pt-2.5 md-lib-truncate md-lib-max-w-40", title: get(file, "name", "N/A"), children: get(file, "assetName", "N/A") }) })] }, get(file, "_id")));
+        }) }));
+};
+export default FilesGridView;

package/build/MyDrive/FolderGridView.d.ts

@@ -0,0 +1,19 @@
+import { FileEntity, FolderEntity, SortByKeys, SortOrders } from "../utilities/constants/interface";
+declare const FolderGridView: ({ folders, foldersFetching, hasNextPage, fetchNextPage, files, selectedFileIds, selectedFolderIds, setSelectedItems, isImagePicker, setSelectedFile, setParentFolderId, selectedPickerFile, sortBy, sortOrder, setSortOrders, }: {
+    folders: FolderEntity[];
+    foldersFetching: boolean;
+    hasNextPage: boolean;
+    fetchNextPage: () => void;
+    files: FileEntity[];
+    selectedFolderIds: string[];
+    selectedFileIds: string[];
+    setSelectedItems: (values: any) => void;
+    setSelectedFile?: (value: FileEntity) => void;
+    isImagePicker?: boolean;
+    setParentFolderId?: (value: string) => void;
+    selectedPickerFile?: FileEntity;
+    sortBy: SortByKeys;
+    sortOrder: SortOrders;
+    setSortOrders: (newSortBy: SortByKeys, newSortOrder: SortOrders) => void;
+}) => JSX.Element;
+export default FolderGridView;

package/build/MyDrive/FolderGridView.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DriveModes, EntityType, SortByKeys, SortOrders, } from "../utilities/constants/interface";
+import _, { filter, get, includes } from "lodash";
+import { FaFolder, FaSort } from "react-icons/fa";
+import LoadMoreItems from "../common/LoadMoreItems";
+import FolderMenuOptions from "./FolderMenuOptions";
+import { FETCH_ENTITY_SCREEN, SUBFOLDERS_SCREEN, } from "../utilities/constants/routes";
+import FilesGridView from "./FilesGridView";
+import { useRef, useState } from "react";
+import ActionsBar from "./ActionBar";
+import FileDetails from "./fileDetails/FileDetails";
+import useAppNavigate from "../utilities/useAppNavigate";
+import useAppParams from "../utilities/useAppParams";
+import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
+const FaFolderIcon = FaFolder;
+const FaSortIcon = FaSort;
+const FolderGridView = ({ folders, foldersFetching, hasNextPage, fetchNextPage, files, selectedFileIds, selectedFolderIds, setSelectedItems, isImagePicker, setSelectedFile, setParentFolderId, selectedPickerFile, sortBy, sortOrder, setSortOrders, }) => {
+    const navigate = useAppNavigate();
+    const [state, setState] = useState({
+        selectedFile: {},
+        showPreviewModal: false,
+    });
+    const { showPreviewModal, selectedFile } = state;
+    const { type } = useAppParams();
+    const clickTimer = useRef(null);
+    const handleClick = (folder) => {
+        const id = get(folder, "_id");
+        const fileType = get(folder, "type", EntityType.FOLDER);
+        if (isImagePicker) {
+            if (fileType === EntityType.FILE) {
+                setSelectedFile === null || setSelectedFile === void 0 ? void 0 : setSelectedFile(folder);
+            }
+            else {
+                setParentFolderId === null || setParentFolderId === void 0 ? void 0 : setParentFolderId(id);
+            }
+        }
+        else if (type === DriveModes.FOLDERS) {
+            navigate(FETCH_ENTITY_SCREEN.replace(":id", id).replace(":type", fileType));
+        }
+        else {
+            if (clickTimer.current) {
+                clearTimeout(clickTimer.current);
+                clickTimer.current = null;
+                if (fileType === EntityType.FOLDER) {
+                    navigate(SUBFOLDERS_SCREEN.replace(":folderId", id));
+                }
+                if (fileType === EntityType.FILE && type !== DriveModes.TRASH) {
+                    setState((prevState) => (Object.assign(Object.assign({}, prevState), { selectedFile: folder, showPreviewModal: true })));
+                }
+                return;
+            }
+            clickTimer.current = setTimeout(() => {
+                if (fileType === EntityType.FILE) {
+                    const alreadySelected = includes(selectedFileIds, id);
+                    setSelectedItems({
+                        fileIds: alreadySelected
+                            ? filter(selectedFileIds, (fid) => fid !== id)
+                            : [...selectedFileIds, id],
+                    });
+                }
+                else {
+                    const alreadySelected = includes(selectedFolderIds, id);
+                    setSelectedItems({
+                        folderIds: alreadySelected
+                            ? filter(selectedFolderIds, (fid) => fid !== id)
+                            : [...selectedFolderIds, id],
+                    });
+                }
+                clickTimer.current = null;
+            }, 250);
+        }
+    };
+    return (_jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-gap-y-10", children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-6", children: [_jsx("div", { className: "md-lib-flex md-lib-gap-2 ", onClick: () => setSortOrders(SortByKeys.NAME, sortOrder === SortOrders.ASCEND
+                            ? SortOrders.DESCEND
+                            : SortOrders.ASCEND), children: _jsxs("div", { className: "md-lib-flex md-lib-gap-2 md-lib-items-center md-lib-font-medium md-lib-text-textColor dark:md-lib-text-darkTextColor hover:md-lib-bg-secondaryHoverColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-cursor-pointer", children: ["Name", sortBy === SortByKeys.NAME &&
+                                    (sortOrder === SortOrders.ASCEND ? (_jsx(ArrowUpOutlined, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-w-4 md-lib-h-4" })) : (_jsx(ArrowDownOutlined, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-w-4 md-lib-h-4" }))), sortBy !== SortByKeys.NAME && (_jsx(FaSortIcon, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-w-4 md-lib-h-4" }))] }) }), _jsx("div", { className: "md-lib-flex md-lib-gap-2", onClick: () => setSortOrders(SortByKeys.UPDATED_AT, sortOrder === SortOrders.ASCEND
+                            ? SortOrders.DESCEND
+                            : SortOrders.ASCEND), children: _jsxs("div", { className: "md-lib-flex md-lib-gap-2 md-lib-items-center md-lib-font-medium md-lib-text-textColor dark:md-lib-text-darkTextColor hover:md-lib-bg-secondaryHoverColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-cursor-pointer", children: ["Modified At", sortBy === SortByKeys.UPDATED_AT &&
+                                    (sortOrder === SortOrders.ASCEND ? (_jsx(ArrowUpOutlined, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-w-4 md-lib-h-4" })) : (_jsx(ArrowDownOutlined, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-w-4 md-lib-h-4" }))), sortBy !== SortByKeys.UPDATED_AT && (_jsx(FaSortIcon, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-w-4 md-lib-h-4" }))] }) }), _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2 md-lib-font-medium md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-text-sm md-lib-w-[100px] ", children: ["File size", _jsxs("span", { className: "md-lib-cursor-pointer", onClick: () => setSortOrders(SortByKeys.SIZE, sortOrder === SortOrders.ASCEND
+                                    ? SortOrders.DESCEND
+                                    : SortOrders.ASCEND), children: [sortBy === SortByKeys.SIZE &&
+                                        (sortOrder === SortOrders.ASCEND ? (_jsx(ArrowUpOutlined, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-w-4 md-lib-h-4" })) : (_jsx(ArrowDownOutlined, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-w-4 md-lib-h-4" }))), sortBy !== SortByKeys.SIZE && (_jsx(FaSortIcon, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-w-4 md-lib-h-4" }))] })] })] }), _jsx("div", { className: "md-lib-grid md-lib-grid-cols-2 md:md-lib-grid-cols-3 xl:md-lib-grid-cols-4 2xl:md-lib-grid-cols-5 md-lib-gap-x-4 md-lib-gap-y-10", children: _.map(folders, (folder) => {
+                    const isSelected = includes(selectedFolderIds, get(folder, "_id")) ||
+                        get(selectedPickerFile, "_id") === get(folder, "_id");
+                    return (_jsxs("div", { className: `md-lib-border md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-rounded-lg md-lib-px-5 md-lib-h-16 md-lib-flex md-lib-items-center md-lib-justify-between md-lib-cursor-pointer ${isSelected ? "md-lib-bg-borderColor dark:md-lib-bg-darkSecondaryBg" : ""}`, onClick: () => handleClick(folder), children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-2 md-lib-w-[calc(100%-20px)]", children: [_jsxs("div", { children: [" ", _jsx(FaFolderIcon, { className: "md-lib-text-primaryColor", size: 32 })] }), _jsx("p", { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-truncate", title: get(folder, "name", "N/A"), children: get(folder, "name") })] }), !isImagePicker && type !== DriveModes.FOLDERS && (_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(FolderMenuOptions, { folder: folder }) }))] }, get(folder, "_id")));
+                }) }), _jsx(FilesGridView, { files: files, handleClick: handleClick, selectedFileIds: selectedFileIds, isImagePicker: isImagePicker, selectedPickerFile: selectedPickerFile }), _jsx(LoadMoreItems, { hasNextPage: hasNextPage, isItemsFetching: foldersFetching, fetchNextPage: fetchNextPage }), (!!get(selectedFileIds, "length") ||
+                !!get(selectedFolderIds, "length")) && (_jsx(ActionsBar, { fileIds: selectedFileIds, folderIds: selectedFolderIds, onCloseSelection: () => setSelectedItems({ fileIds: [], folderIds: [] }) })), showPreviewModal && (_jsx(FileDetails, { open: showPreviewModal, handleClose: () => {
+                    setState((prevState) => (Object.assign(Object.assign({}, prevState), { showPreviewModal: false, selectedFile: {} })));
+                }, file: selectedFile }))] }));
+};
+export default FolderGridView;

package/build/MyDrive/FolderListView.d.ts

@@ -0,0 +1,25 @@
+import { AssetTemplateEntity, FileEntity, FolderEntity, SortByKeys, SortOrders } from "../utilities/constants/interface";
+declare const FolderListView: ({ folders, foldersFetching, hasNextPage, fetchNextPage, selectedFileIds, selectedFolderIds, setSelectedItems, isImagePicker, setSelectedFile, setParentFolderId, selectedPickerFile, location, assets, sortByKey, sortOrder, setSortOrders, onSearch, searchKey, searchValue, metadataKey, metadataValue, }: {
+    folders: FolderEntity[] | FileEntity[];
+    foldersFetching: boolean;
+    hasNextPage: boolean;
+    fetchNextPage: () => void;
+    selectedFolderIds: string[];
+    selectedFileIds: string[];
+    setSelectedItems: (values: any) => void;
+    setSelectedFile?: (value: FileEntity) => void;
+    isImagePicker?: boolean;
+    setParentFolderId?: (value: string) => void;
+    selectedPickerFile?: FileEntity;
+    location: string;
+    assets: AssetTemplateEntity[];
+    sortByKey: SortByKeys;
+    sortOrder: SortOrders;
+    setSortOrders: (newSortBy: SortByKeys, newSortOrder: SortOrders) => void;
+    onSearch: (filters: Record<string, any>) => void;
+    searchKey: string;
+    searchValue: string;
+    metadataKey: string;
+    metadataValue: string;
+}) => JSX.Element;
+export default FolderListView;