@gravity-ui/uikit/build/cjs/hooks/lab/useDropZone/useDropZone.js

Gravity UI base styling and components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDropZone = useDropZone;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const constants_1 = require("./constants.js");
function useDropZone({ disabled, ref, onDragEnter, onDragOver, onDragLeave, onDrop, }) {
    const [isDraggingOver, setIsDraggingOver] = React.useState(false);
    const nestingCounterRef = React.useRef(0);
    const handleDragEnterNative = React.useCallback((event) => {
        if (disabled) {
            return;
        }
        nestingCounterRef.current++;
        const dataTransfer = event.dataTransfer;
        if (dataTransfer) {
            dataTransfer.dropEffect = constants_1.DROP_ZONE_BASE_ATTRIBUTES['aria-dropeffect'];
        }
        setIsDraggingOver(true);
        onDragEnter?.(event);
    }, [disabled, onDragEnter]);
    const handleDragEnter = React.useCallback((event) => {
        handleDragEnterNative(event.nativeEvent);
    }, [handleDragEnterNative]);
    const handleDragOverNative = React.useCallback((event) => {
        if (disabled) {
            return;
        }
        const dataTransfer = event.dataTransfer;
        if (dataTransfer) {
            dataTransfer.dropEffect = constants_1.DROP_ZONE_BASE_ATTRIBUTES['aria-dropeffect'];
        }
        event.preventDefault();
        onDragOver?.(event);
    }, [disabled, onDragOver]);
    const handleDragOver = React.useCallback((event) => {
        handleDragOverNative(event.nativeEvent);
    }, [handleDragOverNative]);
    const handleDragLeaveNative = React.useCallback((event) => {
        nestingCounterRef.current = Math.max(nestingCounterRef.current - 1, 0);
        if (nestingCounterRef.current === 0) {
            setIsDraggingOver(false);
        }
        if (disabled) {
            return;
        }
        onDragLeave?.(event);
    }, [disabled, onDragLeave]);
    const handleDragLeave = React.useCallback((event) => {
        handleDragLeaveNative(event.nativeEvent);
    }, [handleDragLeaveNative]);
    const handleDropNative = React.useCallback((event) => {
        setIsDraggingOver(false);
        nestingCounterRef.current = 0;
        if (disabled) {
            return;
        }
        event.preventDefault();
        onDrop?.(event);
    }, [disabled, onDrop]);
    const handleDrop = React.useCallback((event) => {
        handleDropNative(event.nativeEvent);
    }, [handleDropNative]);
    React.useEffect(() => {
        const dropZoneElement = ref?.current;
        if (!dropZoneElement) {
            return undefined;
        }
        dropZoneElement.addEventListener('dragenter', handleDragEnterNative);
        dropZoneElement.addEventListener('dragover', handleDragOverNative);
        dropZoneElement.addEventListener('dragleave', handleDragLeaveNative);
        dropZoneElement.addEventListener('drop', handleDropNative);
        for (const [attribute, value] of Object.entries(constants_1.DROP_ZONE_BASE_ATTRIBUTES)) {
            dropZoneElement.setAttribute(attribute, value.toString());
        }
        return () => {
            dropZoneElement.removeEventListener('dragenter', handleDragEnterNative);
            dropZoneElement.removeEventListener('dragover', handleDragOverNative);
            dropZoneElement.removeEventListener('dragleave', handleDragLeaveNative);
            dropZoneElement.removeEventListener('drop', handleDropNative);
        };
    }, [handleDragEnterNative, handleDragLeaveNative, handleDragOverNative, handleDropNative, ref]);
    const droppableProps = React.useMemo(() => ({
        ...constants_1.DROP_ZONE_BASE_ATTRIBUTES,
        onDragEnter: handleDragEnter,
        onDragOver: handleDragOver,
        onDragLeave: handleDragLeave,
        onDrop: handleDrop,
    }), [handleDragEnter, handleDragOver, handleDragLeave, handleDrop]);
    const getDroppableProps = React.useCallback(() => droppableProps, [droppableProps]);
    if (ref) {
        return {
            isDraggingOver,
        };
    }
    return {
        isDraggingOver,
        getDroppableProps,
    };
}
//# sourceMappingURL=useDropZone.js.map