@react-md/utils/es/useDropzone.js

General utils for react-md.

var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
import { useCallback, useState } from "react";
/**
 * This hook can be used to implement simple drag-and-drop behavior for file
 * uploads or special styles while dragging an element over a part of a page.
 *
 * @example
 * Simple File
 * ```ts
 * const style: CSSProperties = {
 *   border: '1px solid blue',
 * };
 *
 * function Example(): ReactElement {
 *   const { onDrop } = useFileUpload()
 *   const [isOver, handlers] = useDropzone({
 *     onDrop: (event) => {
 *       // normally use the `onDrop` behavior from `useFileUpload` to upload
 *       // files:
 *       // onDrop(event);
 *     }
 *   });
 *
 *   return (
 *     <div {...handlers} style={isOver ? style : {}}>
 *       Drag and drop some files!
 *       {isOver && <UploadSVGIcon />}
 *     </div>
 *   );
 * }
 * ```
 *
 * @see {@link useFileUpload} for a more complex example
 * @param options - The {@link DropzoneHandlers} that can be merged with the
 * default functionality.
 * @returns the {@link DropzoneHookReturnValue}
 * @remarks \@since 2.9.0
 */
export function useDropzone(options) {
    var propOnDragEnter = options.onDragEnter, propOnDragOver = options.onDragOver, propOnDragLeave = options.onDragLeave, propOnDrop = options.onDrop;
    var _a = __read(useState(false), 2), isOver = _a[0], setOver = _a[1];
    var onDragOver = useCallback(function (event) {
        propOnDragOver === null || propOnDragOver === void 0 ? void 0 : propOnDragOver(event);
        event.preventDefault();
        event.stopPropagation();
        setOver(true);
    }, [propOnDragOver]);
    var onDragEnter = useCallback(function (event) {
        propOnDragEnter === null || propOnDragEnter === void 0 ? void 0 : propOnDragEnter(event);
        event.preventDefault();
        event.stopPropagation();
        setOver(true);
    }, [propOnDragEnter]);
    var onDrop = useCallback(function (event) {
        propOnDrop === null || propOnDrop === void 0 ? void 0 : propOnDrop(event);
        event.preventDefault();
        event.stopPropagation();
        setOver(false);
    }, [propOnDrop]);
    var onDragLeave = useCallback(function (event) {
        propOnDragLeave === null || propOnDragLeave === void 0 ? void 0 : propOnDragLeave(event);
        event.preventDefault();
        event.stopPropagation();
        if (!event.target ||
            event.currentTarget === event.target ||
            !event.currentTarget.contains(event.target)) {
            setOver(false);
        }
    }, [propOnDragLeave]);
    return [
        isOver,
        {
            onDragOver: onDragOver,
            onDragEnter: onDragEnter,
            onDrop: onDrop,
            onDragLeave: onDragLeave,
        },
    ];
}
//# sourceMappingURL=useDropzone.js.map