@bindu-dashing/dam-solution-v2 5.8.6

package/build/MyDrive/fileDetails/FileDetails.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import FileDetailsHeader from "./FileHeader";
+import FileViewer from "./FileViewer";
+import { get, nth } from "lodash";
+import { useFile } from "../../react-query/services/file-services";
+import Loader from "../../common/loader/loader";
+import { createApiClient } from "../../hocs/configureAxios";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import useAppParams from "../../utilities/useAppParams";
+const FileDetails = ({ open, handleClose, file, files, onCloseSelection, }) => {
+    const { id } = useAppParams();
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [state, setState] = useState({
+        visible: false,
+        currentIndex: 0,
+        currentFileId: get(file, "_id"),
+    });
+    const { visible, currentIndex, currentFileId } = state;
+    const { data: fileData, isFetching, refetch } = useFile(api, currentFileId);
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return null;
+    }
+    const prevFileId = useRef();
+    useEffect(() => {
+        const prevFileState = prevFileId.current;
+        const shouldRefetch = prevFileState !== currentFileId;
+        if (shouldRefetch) {
+            refetch();
+        }
+        prevFileId.current = currentFileId;
+    }, [currentFileId]);
+    const currentFile = useMemo(() => {
+        if (id) {
+            return file;
+        }
+        else {
+            return file ? fileData : nth(files, currentIndex);
+        }
+    }, [files, currentIndex, file, fileData, isFetching, id]);
+    const handlePrevious = () => {
+        if (files && currentIndex > 0) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentIndex: prevState.currentIndex - 1 })));
+        }
+        else {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentFileId: get(currentFile, "prevFileId") || "" })));
+        }
+    };
+    const handleNext = () => {
+        if (files && currentIndex < get(files, "length", 0) - 1) {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentIndex: prevState.currentIndex + 1 })));
+        }
+        else {
+            setState((prevState) => (Object.assign(Object.assign({}, prevState), { currentFileId: get(currentFile, "nextFileId") || "" })));
+        }
+    };
+    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 = (_jsxs("div", { className: `md-lib-fixed md-lib-inset-0 md-lib-z-[1000] 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(FileDetailsHeader, { handleClose: handleClose, file: currentFile, onCloseSelection: onCloseSelection }), isFetching ? (_jsx(Loader, {})) : (_jsx(FileViewer, { file: currentFile, hasPrev: (!!files && currentIndex > 0) || !!get(currentFile, "prevFileId"), hasNext: (!!files && currentIndex < get(files, "length") - 1) ||
+                    !!get(currentFile, "nextFileId"), onPrev: handlePrevious, onNext: handleNext, handleClose: handleClose }))] }));
+    return ReactDOM.createPortal(modalContent, document.body);
+};
+export default FileDetails;

package/build/MyDrive/fileDetails/FileHeader.d.ts

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

package/build/MyDrive/fileDetails/FileHeader.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "antd";
+import { IoIosClose } from "react-icons/io";
+import { BsDownload } from "react-icons/bs";
+import { DriveModes, NotificationStatus, } from "../../utilities/constants/interface";
+import { get } from "lodash";
+import { showNotification } from "../../common/notifications";
+import { INVALID_URL } from "../../utilities/constants/messages";
+import FileMenuOptions from "../FileMenuOptions";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import useAppParams from "../../utilities/useAppParams";
+const IoIosCloseIcon = IoIosClose;
+const BsDownloadIcon = BsDownload;
+const FileDetailsHeader = ({ handleClose, file, onCloseSelection, }) => {
+    const damConfig = useDamConfig();
+    const { isAdmin } = damConfig;
+    const { id, type } = useAppParams();
+    return (_jsxs("div", { className: "md-lib-bg-white dark:md-lib-bg-darkPrimaryHoverColor md-lib-py-3 md-lib-px-5 md-lib-border-b md-lib-border-borderColor dark:md-lib-border-darkBorderColor 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: [!id && type !== DriveModes.FILE && (_jsx(IoIosCloseIcon, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-cursor-pointer", size: 24, onClick: handleClose })), !!file && (_jsx("h4", { className: "md-lib-font-semibold md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-text-base md-lib-truncate md-lib-max-w-[calc(100vw-180px)]", title: get(file, "name", "N/A"), children: get(file, "name", "N/A") }))] }), !!file && (_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-4", children: [_jsx(FileMenuOptions, { file: file, onCloseSelection: onCloseSelection, fileModal: true }), _jsx(Button, { size: "large", className: "md-lib-bg-secondaryColor dark:md-lib-bg-darkSecondaryColor hover:md-lib-bg-secondaryHoverColor dark:hover:md-lib-bg-darkSecondaryColor md-lib-border-none", onClick: () => {
+                            const url = get(file, "downloadUrl");
+                            if (!url)
+                                showNotification(INVALID_URL, NotificationStatus.ERROR);
+                            window.open(url, "_blank");
+                        }, children: _jsx(BsDownloadIcon, { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor", size: 24 }) })] }))] }));
+};
+export default FileDetailsHeader;

package/build/MyDrive/fileDetails/FileViewer.d.ts

@@ -0,0 +1,10 @@
+import { FileEntity } from "../../utilities/constants/interface";
+declare const FileViewer: ({ file, onNext, onPrev, hasNext, hasPrev, handleClose, }: {
+    file: FileEntity;
+    hasPrev: boolean;
+    hasNext: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+    handleClose?: () => void;
+}) => JSX.Element;
+export default FileViewer;

package/build/MyDrive/fileDetails/FileViewer.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Layout } from "antd";
+import { useState } from "react";
+import { BsArrowLeftSquare, BsArrowRightSquare } from "react-icons/bs";
+import PreviewDetails from "./Previewdetails";
+import MapFile from "../files/MapFile";
+const { Content, Sider } = Layout;
+const BsArrowLeftSquareIcon = BsArrowLeftSquare;
+const BsArrowRightSquareIcon = BsArrowRightSquare;
+const FileViewer = ({ file, onNext, onPrev, hasNext, hasPrev, handleClose, }) => {
+    const [collapsed, setCollapsed] = useState(true);
+    const items = [
+    // {
+    //   key: "1",
+    //   label: "Comments",
+    //   children: <Comments file={file} />,
+    // },
+    // {
+    //   key: "2",
+    //   label: "Metadata",
+    //   children: <Metadata file={file} />,
+    // },
+    // {
+    //   key: "3",
+    //   label: "Compliance",
+    //   children: <Compliance />,
+    // },
+    ];
+    return (_jsx(Layout, { children: _jsxs(Content, { className: "md-lib-grid md-lib-grid-cols-3 md-lib-gap-2", children: [_jsx("div", { className: "md-lib-col-span-1 md:md-lib-col-span-2 md-lib-imageBg md-lib-bg-cover md-lib-bg-center md-lib-min-h-full md-lib-flex md-lib-items-center md-lib-justify-center md-lib-relative md-lib-bg-textColorActive dark:md-lib-bg-darkSecondaryColor", children: _jsx(PreviewDetails, { file: file, hasNext: hasNext, hasPrev: hasPrev, onNext: onNext, onPrev: onPrev }) }), _jsx(MapFile, { fromUpload: false, filesList: file ? [file] : [], handleCancel: handleClose })] }) }));
+};
+export default FileViewer;

package/build/MyDrive/fileDetails/ImageOptions.d.ts

@@ -0,0 +1,2 @@
+declare const ImageOptions: ({ zoom, setZoom, zoomOptions, file }: any) => JSX.Element;
+export default ImageOptions;

package/build/MyDrive/fileDetails/ImageOptions.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AiOutlineInfoCircle, AiOutlineZoomIn, AiOutlineZoomOut, AiOutlineEdit, } from "react-icons/ai";
+import { FiChevronDown } from "react-icons/fi";
+import { useState } from "react";
+import { PiCameraRotate } from "react-icons/pi";
+import { MdOutlineCrop } from "react-icons/md";
+import { Dropdown, Popover, } from "antd";
+import EditImageModal from "../ImageEditor/EditImageModal";
+import ManageFile from "./ManageFile";
+import { FileInfoContent } from "../../common/CustomElements";
+const AiOutlineInfoCircleIcon = AiOutlineInfoCircle;
+const AiOutlineZoomOutIcon = AiOutlineZoomOut;
+const FiChevronDownIcon = FiChevronDown;
+const AiOutlineZoomInIcon = AiOutlineZoomIn;
+const PiCameraRotateIcon = PiCameraRotate;
+const MdOutlineCropIcon = MdOutlineCrop;
+const AiOutlineEditIcon = AiOutlineEdit;
+const ImageOptions = ({ zoom, setZoom, zoomOptions, file }) => {
+    const [state, setState] = useState({
+        showEditModal: false,
+        showFileAccess: false,
+    });
+    const { showEditModal, showFileAccess } = state;
+    const toggleFileAccess = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showFileAccess: !prevState.showFileAccess })));
+    };
+    const toggleEditModal = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showEditModal: !prevState.showEditModal })));
+    };
+    const zoomMenuItems = zoomOptions.map((value) => ({
+        key: value,
+        label: value,
+    }));
+    const handleZoomChange = ({ key }) => {
+        setZoom(key);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "md-lib-bottom-10 md-lib-absolute md-lib-left-1/2 -md-lib-translate-x-1/2 md-lib-bg-white dark:md-lib-bg-darkPrimary md-lib-rounded-xl md-lib-shadow-md md-lib-px-4 md-lib-py-2 md-lib-flex md-lib-items-center md-lib-gap-4 md-lib-border md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-z-50", children: [_jsx(Popover, { content: _jsx(FileInfoContent, { file: file }), title: "File Info", placement: "top", children: _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg", onClick: toggleFileAccess, children: _jsx(AiOutlineInfoCircleIcon, { className: "md-lib-text-[20px]" }) }) }), _jsx("div", { className: "md-lib-w-[1px] md-lib-h-5 md-lib-bg-borderColor dark:md-lib-bg-darkBorderColor" }), _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg", onClick: () => setZoom((prev) => `${parseInt(prev) - 5}%`), disabled: zoom === "10%", children: _jsx(AiOutlineZoomOutIcon, { className: "md-lib-text-[20px]" }) }), _jsx(Dropdown, { menu: {
+                            items: zoomMenuItems,
+                            onClick: handleZoomChange,
+                            selectable: true,
+                            selectedKeys: [zoom],
+                        }, trigger: ["click"], placement: "top", children: _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-1 md-lib-px-3 md-lib-py-1 md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-md md-lib-cursor-pointer md-lib-text-sm md-lib-text-textColor dark:md-lib-text-darkTextColor", children: [zoom, _jsx(FiChevronDownIcon, { className: "md-lib-text-[16px]" })] }) }), _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg", onClick: () => setZoom((prev) => `${parseInt(prev) + 5}%`), disabled: zoom === "150%", children: _jsx(AiOutlineZoomInIcon, { className: "md-lib-text-[20px]" }) }), _jsx("div", { className: "md-lib-w-[1px] md-lib-h-5 md-lib-bg-borderColor dark:md-lib-bg-darkBorderColor" }), _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg md-lib-hidden md:md-lib-block", children: _jsx(PiCameraRotateIcon, { className: "md-lib-text-[20px]" }) }), _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg md-lib-hidden md:md-lib-block", onClick: toggleEditModal, children: _jsx(MdOutlineCropIcon, { className: "md-lib-text-[20px]" }) }), _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg md-lib-hidden md:md-lib-block", onClick: toggleEditModal, children: _jsx(AiOutlineEditIcon, { className: "md-lib-text-[20px]" }) })] }), showEditModal && (_jsx(EditImageModal, { open: showEditModal, handleClose: toggleEditModal, file: file })), showFileAccess && (_jsx(ManageFile, { open: showFileAccess, onClose: toggleFileAccess, file: file }))] }));
+};
+export default ImageOptions;

package/build/MyDrive/fileDetails/ImageViewer.d.ts

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

package/build/MyDrive/fileDetails/ImageViewer.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { get } from "lodash";
+import ImageOptions from "./ImageOptions";
+import { useState } from "react";
+import { SAMPLE_IMAGE_URL } from "../../utilities/constants/imageUrls";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+const ImageViewer = ({ file }) => {
+    const damConfig = useDamConfig();
+    const { isAdmin } = damConfig;
+    const [zoom, setZoom] = useState("100");
+    const zoomOptions = ["10", "25", "50", "75", "100"];
+    const imgWidth = 750 * (parseInt(zoom) / 100);
+    // const imgHeight = 333 * (parseInt(zoom) / 100);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "md-lib-relative md-lib-flex md-lib-justify-center md-lib-items-center md-lib-h-[calc(100vh-65px)] md-lib-w-full md-lib-overflow-x-auto", children: _jsx("img", { src: get(file, "s3Url", SAMPLE_IMAGE_URL), alt: "", width: imgWidth, height: "auto" }) }), isAdmin && (_jsx(ImageOptions, { zoom: zoom, setZoom: setZoom, zoomOptions: zoomOptions, file: file }))] }));
+};
+export default ImageViewer;

package/build/MyDrive/fileDetails/ManageFile.d.ts

@@ -0,0 +1,7 @@
+import { FileEntity, FolderEntity } from "../../utilities/constants/interface";
+declare function ManageFile({ onClose, open, file, }: {
+    onClose: () => void;
+    open: boolean;
+    file: FileEntity & FolderEntity;
+}): JSX.Element;
+export default ManageFile;

package/build/MyDrive/fileDetails/ManageFile.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Divider, Drawer } from "antd";
+import { capitalize, get, slice } from "lodash";
+import { DriveModes, EntityType, } from "../../utilities/constants/interface";
+import { useMemo, useState } from "react";
+import { getReadableFileType } from "../../hocs/helpers";
+import moment from "moment-timezone";
+import { APP_DATE_TIME_FORMAT, LOCAL_TIMEZONE } from "../../hocs/appConstants";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import InviteTeamModal from "../../settings/InviteTeamModal";
+function ManageFile({ onClose, open, file, }) {
+    const [state, setState] = useState({ showShareFile: false });
+    const { showShareFile } = state;
+    const toggleShareFile = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showShareFile: !prevState.showShareFile })));
+    };
+    const damConfig = useDamConfig();
+    const { user, isAdmin } = damConfig;
+    const userId = get(user, "_id");
+    const displayedUsers = useMemo(() => slice(get(file, "users", []), 0, 5), [file]);
+    const extraUsers = useMemo(() => get(file, "users.length") > 5 ? slice(get(file, "users", []), 5) : [], [file]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Drawer, { title: `${capitalize(get(file, "type", EntityType.FOLDER))} Details`, onClose: onClose, open: open, width: 440, children: [_jsxs("div", { children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Download Permission" }), _jsx("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor", children: "Viewers can download" })] }), _jsx(Divider, { className: "md-lib-border-secondaryHoverColor" }), _jsxs("h5", { className: "md-lib-text-base md-lib-font-semibold md-lib-text-textColor dark:md-lib-text-darkTextColor md-lib-mb-5", children: [capitalize(get(file, "type", EntityType.FOLDER)), " Details"] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Type" }), _jsx("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor", children: get(file, "type") === EntityType.FILE
+                                    ? getReadableFileType(file)
+                                    : capitalize(get(file, "type", EntityType.FOLDER)) })] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Id" }), _jsx("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor", children: get(file, "_id") })] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Owner" }), _jsx("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor md-lib-truncate", title: get(file, "createdBy.name", "Unknown"), children: get(file, "createdBy.name") })] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Modified" }), _jsx("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor", children: moment
+                                    .utc(get(file, "updatedAt"))
+                                    .tz(LOCAL_TIMEZONE)
+                                    .format(APP_DATE_TIME_FORMAT) })] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Opened" }), _jsxs("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor", children: [moment().format(APP_DATE_TIME_FORMAT), " by me"] })] }), _jsxs("div", { className: "md-lib-mb-5", children: [_jsx("p", { className: "md-lib-text-xs md-lib-text-secondaryTextColor dark:md-lib-text-text-darkTextColor md-lib-mb-1", children: "Created" }), _jsxs("p", { className: "md-lib-py-3 md-lib-px-4 md-lib-text-base md-lib-rounded-lg md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor md-lib-truncate", title: get(file, "createdBy.name", "Unknown"), children: [moment
+                                        .utc(get(file, "createdAt"))
+                                        .tz(LOCAL_TIMEZONE)
+                                        .format(APP_DATE_TIME_FORMAT), " ", "by", " ", get(file, "createdBy._id") === userId
+                                        ? "me"
+                                        : get(file, "createdBy.name")] })] })] }), showShareFile && (_jsx(InviteTeamModal, { open: showShareFile, onClose: toggleShareFile, onFetchInvitations: () => { }, shareModal: true, fileIds: get(file, "type") === EntityType.FILE ? [get(file, "_id")] : [], folderIds: get(file, "type") !== EntityType.FILE ? [get(file, "_id")] : [], inviteType: DriveModes.FILE, file: file }))] }));
+}
+export default ManageFile;

package/build/MyDrive/fileDetails/MetaForm.d.ts

@@ -0,0 +1,15 @@
+import type { FormInstance } from "antd";
+import { BrandUserEntity, MetaDataFieldEntity } from "../../utilities/constants/interface";
+export declare const buildInitialValues: (formData: Record<string, any>, metaFields: MetaDataFieldEntity[], isEditMode: boolean) => {
+    [x: string]: any;
+};
+export declare const getFormItem: (item: MetaDataFieldEntity, fromDefaultValue: boolean, userOptions?: BrandUserEntity[]) => JSX.Element | null;
+declare const MetaForm: ({ metaFields, metaData, form, isEditMode, }: {
+    metaFields: MetaDataFieldEntity[];
+    metaData: {
+        [key: string]: any;
+    };
+    form: FormInstance;
+    isEditMode: boolean;
+}) => JSX.Element;
+export default MetaForm;

package/build/MyDrive/fileDetails/MetaForm.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { Form, Input, InputNumber, DatePicker, Select, Checkbox, Radio, } from "antd";
+import { find, first, get, includes, isArray, isNumber, map, mapValues, nth, } from "lodash";
+import dayjs from "dayjs";
+import { InputSupportedTypes, InputTypes, } from "../../utilities/constants/interface";
+import { INVALID_URL } from "../../utilities/constants/messages";
+import { useQueryClient } from "react-query";
+import { getCurrentBrandUsers } from "../../react-query/hooks/brand-hooks";
+import { getUserAvatar } from "../../settings/getUserAvatar";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+const { RangePicker } = DatePicker;
+export const buildInitialValues = (formData, metaFields, isEditMode) => {
+    const dataWithDefaultValues = metaFields.reduce((acc, field) => {
+        const id = get(field, "_id");
+        const defaultValue = get(field, "defaultValue");
+        if (defaultValue) {
+            acc[id] = defaultValue;
+        }
+        return acc;
+    }, {});
+    return mapValues(isEditMode ? formData : dataWithDefaultValues, (value, key) => {
+        const field = find(metaFields, { _id: key });
+        if (!field)
+            return value;
+        const defaultName = get(field, "defaultName");
+        const inputTypeSettings = get(field, "inputTypeSettings", {});
+        const allowMultiple = get(inputTypeSettings, `${InputSupportedTypes.ALLOW_MULTIPLE}`, false);
+        switch (defaultName) {
+            case InputTypes.DATE:
+                return value ? dayjs(value) : undefined;
+            case InputTypes.DATE_RANGE:
+                return isArray(value) && get(value, "length") === 2
+                    ? [dayjs(first(value)), dayjs(nth(value, 1))]
+                    : undefined;
+            case InputTypes.SELECT:
+                return allowMultiple ? value || [] : value !== null && value !== void 0 ? value : undefined;
+            case InputTypes.CHECKBOX:
+                return value || [];
+            default:
+                return value;
+        }
+    });
+};
+export const getFormItem = (item, fromDefaultValue, userOptions) => {
+    const name = get(item, "_id");
+    const label = get(item, "name");
+    const placeholder = get(item, "placeholder", "");
+    const defaultName = get(item, "defaultName");
+    const settings = get(item, "inputTypeSettings", {});
+    const options = get(item, "options", []);
+    const itemName = fromDefaultValue ? name : ["metadata", name];
+    const rules = fromDefaultValue
+        ? [...get(item, "additionalRules", [])]
+        : [];
+    if (get(item, "isMandatory")) {
+        rules.push({
+            required: true,
+            message: `${label} is required.`,
+        });
+    }
+    // NUMERIC_VALUE
+    if (get(settings, "NUMERIC_VALUE", null) === false) {
+        rules.push({
+            pattern: /^[^0-9]*$/,
+            message: "Numbers are not allowed.",
+        });
+    }
+    // SPECIAL_CHARACTERS
+    if (get(settings, "SPECIAL_CHARACTERS", null) === false) {
+        rules.push({
+            pattern: /^[a-zA-Z0-9\s]*$/,
+            message: "Special characters are not allowed.",
+        });
+    }
+    // CHARACTER_LIMIT
+    if (get(settings, "CHARACTER_LIMIT.allow", null) === true) {
+        const min = get(settings, "CHARACTER_LIMIT.minValue");
+        const max = get(settings, "CHARACTER_LIMIT.maxValue");
+        let message = "";
+        const hasMin = isNumber(min);
+        const hasMax = isNumber(max);
+        if (hasMin && hasMax) {
+            message = `Must be between ${min} and ${max} characters.`;
+        }
+        else if (hasMin && !hasMax) {
+            message = `Minimum ${min} characters required.`;
+        }
+        else if (!hasMin && hasMax) {
+            message = `Maximum ${max} characters allowed.`;
+        }
+        rules.push(Object.assign(Object.assign(Object.assign({}, (hasMin ? { min } : {})), (hasMax ? { max } : {})), { message }));
+    }
+    // REGEX
+    if (get(settings, "REGEX.allow") && get(settings, "REGEX.value")) {
+        const rawRegex = get(settings, "REGEX.value", "/.*/");
+        try {
+            const regex = new RegExp(rawRegex.replace(/\//g, ""));
+            rules.push({
+                pattern: regex,
+                message: `Must match pattern ${rawRegex}`,
+            });
+        }
+        catch (err) {
+            console.warn("Invalid regex: ", rawRegex);
+        }
+    }
+    // VALUE_RANGE
+    if (defaultName === InputTypes.NUMBERS &&
+        get(settings, "VALUE_RANGE.allow")) {
+        const min = get(settings, "VALUE_RANGE.minValue");
+        const max = get(settings, "VALUE_RANGE.maxValue");
+        const hasMin = isNumber(min);
+        const hasMax = isNumber(max);
+        let message = "";
+        if (hasMin && hasMax) {
+            message = `Must be between ${min} and ${max}.`;
+        }
+        else if (hasMin && !hasMax) {
+            message = `Minimum value is ${min}.`;
+        }
+        else if (!hasMin && hasMax) {
+            message = `Maximum value is ${max}.`;
+        }
+        rules.push(Object.assign(Object.assign(Object.assign({ type: "number" }, (hasMin ? { min } : {})), (hasMax ? { max } : {})), { message }));
+    }
+    switch (defaultName) {
+        case InputTypes.TEXT:
+            return (_jsx(Form.Item, { name: itemName, label: label, rules: rules, children: _jsx(Input, { placeholder: placeholder }) }, name));
+        case InputTypes.PARAGRAPH:
+            return (_jsx(Form.Item, { name: itemName, label: label, rules: rules, children: _jsx(Input.TextArea, { rows: 4, placeholder: placeholder }) }, name));
+        case InputTypes.DATE_RANGE:
+            return (_jsx(Form.Item, { name: itemName, label: label, rules: rules, children: _jsx(RangePicker, { showTime: !!get(settings, `${InputSupportedTypes.ALLOW_TIME}.allow`), style: { width: "100%" }, placeholder: ["Start", "End"], placement: "bottomLeft" }) }, name));
+        case InputTypes.LINK:
+            rules.push({
+                type: "url",
+                message: INVALID_URL,
+            });
+            return (_jsx(Form.Item, { name: itemName, label: label, rules: rules, children: _jsx(Input, { placeholder: placeholder }) }, name));
+        case InputTypes.CHECKBOX:
+            return (_jsx(Form.Item, { name: itemName, label: label, children: _jsx(Checkbox.Group, { options: map(options, (opt) => ({
+                        label: get(opt, "label"),
+                        value: get(opt, "value"),
+                    })) }) }, name));
+        case InputTypes.NUMBERS:
+            return (_jsx(Form.Item, { name: itemName, label: label, rules: rules, children: _jsx(InputNumber, { style: { width: "100%" }, placeholder: placeholder }) }, name));
+        case InputTypes.DATE:
+            return (_jsx(Form.Item, { name: itemName, label: label, rules: rules, children: _jsx(DatePicker, { showTime: !!get(settings, `${InputSupportedTypes.ALLOW_TIME}.allow`), style: { width: "100%" }, placeholder: placeholder }) }, name));
+        case InputTypes.PERSON:
+            return (_jsx(Form.Item, { name: itemName, label: label, rules: rules, children: _jsx(Select, { mode: get(settings, InputSupportedTypes.ALLOW_MULTIPLE)
+                        ? "multiple"
+                        : undefined, allowClear: !!get(settings, InputSupportedTypes.ALLOW_CLEAR), showSearch: !!get(settings, InputSupportedTypes.SEARCHABLE), filterOption: (inputValue, option) => {
+                        const name = get(option, "name") || "";
+                        const email = get(option, "email") || "";
+                        if (includes(name.toLowerCase(), inputValue.toLowerCase()) ||
+                            includes(email.toLowerCase(), inputValue.toLowerCase())) {
+                            return true;
+                        }
+                        return false;
+                    }, placeholder: placeholder, options: userOptions, optionFilterProp: "children" }) }, name));
+        case InputTypes.TEAM:
+        case InputTypes.SELECT:
+            return (_jsx(Form.Item, { name: itemName, label: label, rules: rules, children: _jsx(Select, { mode: get(settings, InputSupportedTypes.ALLOW_MULTIPLE)
+                        ? "multiple"
+                        : undefined, allowClear: !!get(settings, InputSupportedTypes.ALLOW_CLEAR), showSearch: !!get(settings, InputSupportedTypes.SEARCHABLE), filterOption: (input, option) => { var _a; return ((_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf(input.toLowerCase())) >= 0; }, placeholder: placeholder, options: map(options, (opt) => ({
+                        label: get(opt, "label"),
+                        value: get(opt, "value"),
+                    })) }) }, name));
+        case InputTypes.RADIO:
+            return (_jsx(Form.Item, { name: itemName, label: label, children: _jsx(Radio.Group, { options: map(options, (opt) => ({
+                        label: get(opt, "label"),
+                        value: get(opt, "value"),
+                    })) }) }, name));
+        default:
+            return null;
+    }
+};
+const MetaForm = ({ metaFields, metaData, form, isEditMode, }) => {
+    const damConfig = useDamConfig();
+    const { brand, teams } = damConfig;
+    const brandId = get(brand, "_id");
+    const queryClient = useQueryClient();
+    const brandUsers = getCurrentBrandUsers(queryClient, brandId);
+    useEffect(() => {
+        const formData = {
+            metadata: buildInitialValues(metaData, metaFields, isEditMode),
+        };
+        form.setFieldsValue(formData);
+    }, [metaData, metaFields]);
+    const userOptions = useMemo(() => {
+        return map(brandUsers, (user) => getUserAvatar(user));
+    }, [brandUsers, brandId]);
+    return (_jsx(_Fragment, { children: metaFields.map((item) => getFormItem(item, false, userOptions)) }));
+};
+export default MetaForm;

package/build/MyDrive/fileDetails/Metadata.d.ts

@@ -0,0 +1,8 @@
+import { FormInstance } from "antd";
+import { AssetTemplateEntity, FileEntity } from "../../utilities/constants/interface";
+declare const Metadata: ({ file, asset, form, }: {
+    file?: FileEntity;
+    asset: AssetTemplateEntity;
+    form: FormInstance;
+}) => JSX.Element;
+export default Metadata;

package/build/MyDrive/fileDetails/Metadata.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { get, isEmpty } from "lodash";
+import Loader from "../../common/loader/loader";
+import MetaForm from "./MetaForm";
+import { useDamConfig } from "../../hocs/DamConfigContext";
+import { createApiClient } from "../../hocs/configureAxios";
+import { META_DATA_EMPTY_URL } from "../../utilities/constants/imageUrls";
+const Metadata = ({ file, asset, form, }) => {
+    const damConfig = useDamConfig();
+    const api = useMemo(() => createApiClient(damConfig), [damConfig]);
+    const [state, setState] = useState({
+        assetsLoading: false,
+        assets: [],
+        loading: false,
+        templateLoading: false,
+    });
+    const { templateLoading } = state;
+    // useEffect(() => {
+    //   if (assetId) {
+    //     fetchTemplate();
+    //   }
+    // }, [assetId]);
+    // const fetchTemplate = async () => {
+    //   setState((prevState) => ({ ...prevState, templateLoading: true }));
+    //   try {
+    //     const response = await api.get(
+    //       `${FETCH_ASSET_URL.replace(":assetId", assetId)}`
+    //     );
+    //     setState((prevState) => ({
+    //       ...prevState,
+    //       assetTemplate: get(response, "data", {}),
+    //       templateLoading: false,
+    //     }));
+    //     setMetaFields(get(response, "data.metadataFields", []));
+    //   } catch (error) {
+    //     setState((prevState) => ({
+    //       ...prevState,
+    //       assetTemplate: {},
+    //       templateLoading: false,
+    //     }));
+    //     showNotification(
+    //       get(error, "message", SOMETHING_WENT_WRONG),
+    //       NotificationStatus.ERROR
+    //     );
+    //   }
+    // };
+    const metaFields = useMemo(() => get(asset, "metadataFields", []), [asset]);
+    const metaData = useMemo(() => get(file, "metadata", {}), [file]);
+    return (_jsx("div", { className: "", children: templateLoading ? (_jsx(Loader, {})) : (_jsx(_Fragment, { children: isEmpty(metaFields) ? (_jsxs("div", { className: `md-lib-flex md-lib-flex-col md-lib-items-center md-lib-justify-center md-lib-min-h-[calc(100vh-127px)]`, children: [_jsx("img", { src: META_DATA_EMPTY_URL, alt: "No comments", width: 182, height: 114 }), _jsx("p", { className: "md-lib-pt-3 md-lib-font-semibold md-lib-text-textColor dark:md-lib-text-darkTextColor", children: "No metadata has been added yet" })] })) : (_jsx(MetaForm, { metaFields: metaFields, metaData: metaData, form: form, isEditMode: (file === null || file === void 0 ? void 0 : file._id) ? true : false })) })) }));
+};
+export default Metadata;

package/build/MyDrive/fileDetails/PdfOptions.d.ts

@@ -0,0 +1,9 @@
+import { FileEntity, FolderEntity } from "../../utilities/constants/interface";
+declare const PdfOptions: ({ zoom, setZoom, currentPage, totalPages, file, }: {
+    zoom: number;
+    setZoom: (z: number) => void;
+    currentPage: number;
+    totalPages: number;
+    file: FileEntity & FolderEntity;
+}) => JSX.Element;
+export default PdfOptions;

package/build/MyDrive/fileDetails/PdfOptions.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AiOutlineInfoCircle, AiOutlineZoomIn, AiOutlineZoomOut, } from "react-icons/ai";
+import { FiChevronDown } from "react-icons/fi";
+import { Dropdown, Popover } from "antd";
+import { FileInfoContent } from "../../common/CustomElements";
+import ManageFile from "./ManageFile";
+const AiOutlineInfoCircleIcon = AiOutlineInfoCircle;
+const AiOutlineZoomOutIcon = AiOutlineZoomOut;
+const FiChevronDownIcon = FiChevronDown;
+const AiOutlineZoomInIcon = AiOutlineZoomIn;
+const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1.0];
+const PdfOptions = ({ zoom, setZoom, currentPage, totalPages, file, }) => {
+    const [state, setState] = useState({
+        showFileAccess: false,
+    });
+    const { showFileAccess } = state;
+    const handleZoomChange = ({ key }) => {
+        setZoom(parseFloat(key));
+    };
+    const items = zoomLevels.map((z) => ({
+        key: z.toString(),
+        label: `${Math.round(z * 100)}%`,
+    }));
+    const toggleFileAccess = () => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { showFileAccess: !prevState.showFileAccess })));
+    };
+    return (_jsxs("div", { className: "md-lib-fixed md-lib-bottom-10 md-lib-left-1/2 -md-lib-translate-x-1/2 md-lib-bg-white dark:md-lib-bg-darkPrimary md-lib-rounded-xl md-lib-shadow-md md-lib-px-4 md-lib-py-2 md-lib-flex md-lib-items-center md-lib-gap-4 md-lib-border md-lib-border-borderColor dark:md-lib-border-darkBorderColor md-lib-z-50", children: [_jsx(Popover, { content: _jsx(FileInfoContent, { file: file }), title: "File Info", placement: "top", children: _jsx("button", { className: "md-lib-p-2 hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg", onClick: toggleFileAccess, children: _jsx(AiOutlineInfoCircleIcon, { className: "md-lib-text-[20px]" }) }) }), _jsx("p", { className: "md-lib-h-10 md-lib-w-10 md-lib-flex md-lib-items-center md-lib-justify-center md-lib-text-base md-lib-text-secondaryTextColor dark:md-lib-text-darkSecondaryTextColor md-lib-border-borderColor md-lib-border md-lib-rounded-lg", children: currentPage + 1 }), _jsx("p", { className: "md-lib-text-textColor dark:md-lib-text-darkTextColor", children: "/" }), _jsx("p", { className: "md-lib-h-10 md-lib-w-10 md-lib-flex md-lib-items-center md-lib-justify-center md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg", children: totalPages }), _jsx("div", { className: "md-lib-w-[1px] md-lib-h-5 md-lib-bg-borderColor dark:md-lib-bg-darkBorderColor" }), _jsx("button", { className: "md-lib-h-10 md-lib-w-10 md-lib-flex md-lib-items-center md-lib-justify-center hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg", onClick: () => setZoom(Math.max(0.5, zoom - 0.1)), disabled: zoom <= 0.1, children: _jsx(AiOutlineZoomOutIcon, { className: "md-lib-text-[20px]" }) }), _jsx(Dropdown, { menu: {
+                    items: items,
+                    onClick: handleZoomChange,
+                    selectable: true,
+                    selectedKeys: [`${Math.round(zoom * 100)}%`],
+                }, trigger: ["click"], placement: "top", children: _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-1 md-lib-px-3 md-lib-py-1 md-lib-bg-secondaryColor dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-md md-lib-cursor-pointer md-lib-text-sm md-lib-text-textColor dark:md-lib-text-darkTextColor", children: [`${Math.round(zoom * 100)}%`, _jsx(FiChevronDownIcon, { className: "md-lib-text-[16px]" })] }) }), _jsx("button", { className: "md-lib-h-10 md-lib-w-10 md-lib-flex md-lib-items-center md-lib-justify-center hover:md-lib-bg-secondaryColor hover:dark:md-lib-bg-darkPrimaryHoverColor md-lib-rounded-lg", onClick: () => setZoom(Math.min(1.5, zoom + 0.1)), disabled: zoom >= 1.5, children: _jsx(AiOutlineZoomInIcon, { className: "md-lib-text-[20px]" }) }), showFileAccess && (_jsx(ManageFile, { file: file, onClose: toggleFileAccess, open: showFileAccess }))] }));
+};
+export default PdfOptions;

package/build/MyDrive/fileDetails/PdfViewer.d.ts

@@ -0,0 +1,8 @@
+import "@react-pdf-viewer/core/lib/styles/index.css";
+import "@react-pdf-viewer/zoom/lib/styles/index.css";
+import { FileEntity } from "../../utilities/constants/interface";
+declare const PDFViewer: ({ fileUrl, file, }: {
+    fileUrl: string;
+    file: FileEntity;
+}) => JSX.Element;
+export default PDFViewer;