RocketChat/Rocket.Chat

import type { DragEvent } from 'react';
import type React from 'react';
import { useCallback, useMemo, useState } from 'react';

const hasFilesToUpload = (dataTransfer: DataTransfer): boolean => dataTransfer.types.includes('Files');

const hasURLToUpload = (dataTransfer: DataTransfer): boolean =>
    dataTransfer.types.includes('text/uri-list') && dataTransfer.types.includes('text/html');

export const useDropTarget = (): {
    triggerProps: {
        onDragEnter: (event: React.DragEvent<Element>) => void;
    };
    overlayProps: {
        visible: boolean;
        onDismiss: () => void;
    };
} => {
    const [visible, setVisible] = useState(false);

    const onDragEnter = useCallback((event: DragEvent) => {
        event.stopPropagation();

        if (!hasFilesToUpload(event.dataTransfer) && !hasURLToUpload(event.dataTransfer)) {
            return;
        }

        setVisible(true);
    }, []);

    const onDismiss = useCallback(() => {
        setVisible(false);
    }, []);

    const triggerProps = useMemo(() => ({ onDragEnter }), [onDragEnter]);
    const overlayProps = useMemo(() => ({ visible, onDismiss }), [visible, onDismiss]);

    return {
        triggerProps,
        overlayProps,
    };
};