@gravity-ui/uikit/build/cjs/components/lab/FileDropZone/FileDropZone.Provider.js

Gravity UI base styling and components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useFileZoneContext = exports.FileDropZoneProvider = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const hooks_1 = require("../../../hooks/index.js");
const useDropZone_1 = require("../../../hooks/lab/useDropZone/index.js");
const utils_1 = require("./utils.js");
const FileDropZoneContext = React.createContext(null);
const FileDropZoneProvider = ({ accept = [], onUpdate, onUpdateAccepted, onUpdateRejected, title, description, buttonText, icon, errorIcon, disabled, errorMessage, validationState, children, multiple, }) => {
    const [isInvalidDrag, setIsInvalidDrag] = React.useState(false);
    const handleUpdate = React.useCallback((acceptedItems, rejectedItems) => {
        onUpdate?.(acceptedItems, rejectedItems);
        if (acceptedItems.length > 0) {
            onUpdateAccepted?.(acceptedItems);
        }
        if (rejectedItems.length > 0) {
            onUpdateRejected?.(rejectedItems);
        }
    }, [onUpdate, onUpdateAccepted, onUpdateRejected]);
    const getFilesFromItems = React.useCallback((items) => {
        const files = [];
        for (const item of items) {
            const file = item.getAsFile();
            if (!file) {
                continue;
            }
            files.push(file);
        }
        return files;
    }, []);
    const getFileRejections = React.useCallback((items) => {
        const fileRejections = [];
        for (const rejectionObject of items) {
            const { item, reasons } = rejectionObject;
            const file = item.getAsFile();
            if (!file) {
                continue;
            }
            fileRejections.push({ file, reasons });
        }
        return fileRejections;
    }, []);
    const handleDragEnter = React.useCallback((event) => {
        const dataTransfer = event.dataTransfer;
        if (!dataTransfer?.items) {
            return;
        }
        const { accepted } = (0, utils_1.getSeparatedItems)(dataTransfer, {
            accept,
            multiple,
        });
        setIsInvalidDrag(accepted.length < 1);
    }, [accept, multiple]);
    const handleDropEvent = React.useCallback((event) => {
        const dataTransfer = event.dataTransfer;
        setIsInvalidDrag(false);
        if (!dataTransfer?.items) {
            return;
        }
        const { accepted, rejected } = (0, utils_1.getSeparatedItems)(dataTransfer, {
            accept,
            multiple,
        });
        const acceptedItems = getFilesFromItems(accepted);
        const rejectedItems = getFileRejections(rejected);
        if (acceptedItems.length > 0 || rejectedItems.length > 0) {
            handleUpdate(acceptedItems, rejectedItems);
        }
    }, [accept, getFileRejections, getFilesFromItems, handleUpdate, multiple]);
    const { isDraggingOver, getDroppableProps } = (0, useDropZone_1.useDropZone)({
        disabled,
        onDragEnter: handleDragEnter,
        onDrop: handleDropEvent,
    });
    React.useEffect(() => {
        if (!isDraggingOver) {
            setIsInvalidDrag(false);
        }
    }, [isDraggingOver]);
    const handleFileInputUpdate = React.useCallback((files) => {
        handleUpdate(files, []);
    }, [handleUpdate]);
    const { controlProps, triggerProps } = (0, hooks_1.useFileInput)({ onUpdate: handleFileInputUpdate });
    const { onKeyDown } = (0, hooks_1.useActionHandlers)(disabled ? undefined : triggerProps.onClick);
    const contextValue = React.useMemo(() => ({
        accept,
        title,
        description,
        buttonText,
        multiple,
        disabled,
        icon,
        errorIcon,
        errorMessage,
        validationState,
        controlProps,
        triggerProps,
        isDraggingOver,
        isInvalidDrag,
        getDroppableProps,
        onKeyDown,
    }), [
        accept,
        title,
        description,
        buttonText,
        multiple,
        disabled,
        icon,
        errorIcon,
        errorMessage,
        validationState,
        controlProps,
        triggerProps,
        isDraggingOver,
        isInvalidDrag,
        getDroppableProps,
        onKeyDown,
    ]);
    return ((0, jsx_runtime_1.jsx)(FileDropZoneContext.Provider, { value: contextValue, children: children }));
};
exports.FileDropZoneProvider = FileDropZoneProvider;
const useFileZoneContext = () => {
    const contextValue = React.useContext(FileDropZoneContext);
    if (contextValue === null) {
        throw new Error('FileDropZone context not found');
    }
    return contextValue;
};
exports.useFileZoneContext = useFileZoneContext;
//# sourceMappingURL=FileDropZone.Provider.js.map