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

Basic media gallery react component for Paroi CMS.

import "../assets/styles/FileDrop.scss";
import { classNames } from "primereact/utils";
import { useRef, useState } from "react";
import { useTranslation } from "react-i18next";
export function FileDrop({ onDropFiles, children, onDraggingChange }) {
    const { t } = useTranslation();
    const [isDragging, setIsDragging] = useState(false);
    // We need a state where change of value is immediate, in order to deduplicate
    // changes in `setDragging`
    const draggingRef = useRef(false);
    function setDragging(val) {
        if (val === draggingRef.current)
            return;
        draggingRef.current = val;
        setIsDragging(val);
        onDraggingChange?.(val);
    }
    function cancelDragEvent(e) {
        e.preventDefault();
        e.stopPropagation();
    }
    function onDragOver(e) {
        cancelDragEvent(e);
        setDragging(true);
    }
    function onDragLeave(e) {
        cancelDragEvent(e);
        const classList = e.target.classList;
        if (classList.contains("FileDrop-overlay")) {
            setDragging(false);
        }
        // skip the event when it is triggered by showing the overlay (on chromium)
    }
    function onDrop(e) {
        cancelDragEvent(e);
        setDragging(false);
        onDropFiles(e.dataTransfer.files);
    }
    return (<div className={classNames("FileDrop")} onDrag={cancelDragEvent} onDragStart={cancelDragEvent} onDragEnd={cancelDragEvent} onDragEnter={cancelDragEvent} onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
      <div className={classNames("FileDrop-overlay", { dragging: isDragging })}>
        {t("frontMediaGallery.dropFilesHere")}
      </div>
      {children}
    </div>);
}