@paroicms/front-media-gallery/dist/GalleryItem/GalleryItem.jsx

Basic media gallery react component for Paroi CMS.

import filePlaceholder from "../../assets/images/file-placeholder.jpeg";
import pdfPlaceholder from "../../assets/images/pdf-placeholder.png";
import { openModalDialog, syncOpenModalDialog } from "@paroicms/internal-front-lib";
import { Button } from "primereact/button";
import { Menu } from "primereact/menu";
import { classNames } from "primereact/utils";
import { useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { isImage } from "../helpers/isImageGuard";
import makeConfirmDeleteDialog from "./dialogs/ConfirmDeleteDialog";
import makeViewMediaPropertiesDialog from "./dialogs/MediaPropertiesDialog";
export default function GalleryItem({ media, attachedData, onAction, onDelete, onClick, onReplace, isMobile, getMediaProperties, updateCaption, contentLanguage, }) {
    const { t } = useTranslation();
    const [isMenuOpened, setMenuOpened] = useState(false);
    const menuLeft = useRef(null);
    const updateMediaCaption = updateCaption
        ? async (mediaUid, caption) => {
            await updateCaption(mediaUid, caption);
        }
        : undefined;
    const renderDropdownItems = () => {
        const dropdownItems = [];
        if (onDelete) {
            dropdownItems.push({
                label: t("frontMediaGallery.delete"),
                command: async () => {
                    await openModalDialog(makeConfirmDeleteDialog, {
                        onDelete,
                    });
                },
            });
        }
        if (onReplace) {
            dropdownItems.push({
                label: t("frontMediaGallery.replace"),
                command: onReplace,
            });
        }
        if (getMediaProperties) {
            dropdownItems.push({
                label: t("frontMediaGallery.properties"),
                command: () => {
                    syncOpenModalDialog(makeViewMediaPropertiesDialog, {
                        getMediaProperties,
                        updateCaption: updateMediaCaption,
                        onDelete,
                        mediaUid: media.uid,
                        contentLanguage,
                    });
                },
            });
        }
        return dropdownItems;
    };
    let threeDotsButton;
    if (onReplace) {
        threeDotsButton = (<>
        <Button icon="pi pi-ellipsis-h" className={`Media-dropdown${isMenuOpened ? " opened" : ""}`} onClick={(ev) => menuLeft.current?.toggle(ev)} aria-controls="popup_menu_left" aria-haspopup/>
        <Menu model={renderDropdownItems()} popup ref={menuLeft} id="popup_menu_left" popupAlignment="right" onShow={() => setMenuOpened(true)} onHide={() => setMenuOpened(false)}/>
      </>);
    }
    else if (getMediaProperties) {
        threeDotsButton = (<Button icon="pi pi-ellipsis-h" className="Media-dropdown" onClick={() => syncOpenModalDialog(makeViewMediaPropertiesDialog, {
                getMediaProperties,
                updateCaption: updateMediaCaption,
                onDelete,
                mediaUid: media.uid,
                contentLanguage,
            })}/>);
    }
    return (<div className="Media">
      {threeDotsButton && threeDotsButton}
      {onClick && (<Button className="Media-insertImage" icon="pi pi-arrow-left" size="small" onClick={onClick}/>)}
      <div className={classNames("Media-image", {
            mobile: !!isMobile,
        })}>
        {renderMedia(media)}
      </div>
    </div>);
}
function renderMedia(media) {
    return isImage(media) ? (<img src={media.url} height={media.height} width={media.width} alt="media"/>) : (<img src={/pdf/.test(media.mediaType) ? pdfPlaceholder : filePlaceholder} alt="media"/>);
}