@kwiz/fluentui/dist/helpers/drag-drop/drag-drop-context.js

KWIZ common controls for FluentUI

import { jsx as _jsx } from "react/jsx-runtime";
import { isNullOrUndefined } from "@kwiz/common";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { useStateEX } from "../hooks";
import { DragDropContext, useDragDropContextInternal } from "./drag-drop-context-internal";
import { useDraggable } from "./use-draggable";
import { useDroppable } from "./use-droppable";
/** */
export function useDragDropContext(info) {
    const dragDropContext = useDragDropContextInternal();
    const isDraggable = !isNullOrUndefined(info.dragInfo);
    const isDroppable = !isNullOrUndefined(info.dropInfo);
    const drag = useDraggable(info === null || info === void 0 ? void 0 : info.dragInfo);
    const drop = useDroppable(info === null || info === void 0 ? void 0 : info.dropInfo);
    const expectingDrop = isDroppable && !drag.isDragging && dragDropContext.isDragging
        //check if item being dragged is allowed in this context...
        && info.dropInfo.acceptTypes.indexOf(dragDropContext.dragItem.type) >= 0;
    return {
        dragDropContext,
        drag,
        drop,
        /** an item that this control can handler is being dragged */
        expectingDrop,
        dragDropRef: isDraggable && !isDroppable
            ? drag.dragRef
            : !isDraggable && isDroppable
                ? drop.dropRef
                //both drag and drop allowed
                : expectingDrop ? drop.dropRef : drag.dragRef
    };
}
export function useDragDropContextProvider() {
    const [dragItem, setDragItem] = useStateEX(null);
    //build context
    const ctx = {
        isDragging: !isNullOrUndefined(dragItem),
        dragItem, setDragItem
    };
    return ctx;
}
export const DragDropContextProvider = (props) => {
    const provider = useDragDropContextProvider();
    return _jsx(DragDropContext.Provider, { value: provider, children: _jsx(DndProvider, { backend: HTML5Backend, context: window, children: props.children }) });
};
//# sourceMappingURL=drag-drop-context.js.map