@adaptabletools/adaptable/src/components/dnd/index.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import * as React from 'react';
import { DragDropContext as DDContext, Draggable, Droppable as DNDDroppable, } from '@adaptabletools/react-beautiful-dnd';
import { useState } from 'react';
/**
 * We're doing all this because the placeholder is not correctly displayed in react-beautiful-dnd
 * with React 19.
 * So we make sure it properly occupies the space of the dragged item, so the
 * container won't flicker when we're dragging an item (as the drag item receives
 * position: fixed while dragging, so content does not have the initial height anymore, therefore,
 * the placeholder is included, with the computed height of the dragging element)
 */
const Droppable = (props) => {
    const children = props.children;
    const { placeholderStyle } = React.useContext(AdaptableDDContext);
    return (React.createElement(DNDDroppable, { ...props }, (provided, snapshot) => {
        provided.placeholder = (React.createElement("div", { key: "placeholder", style: placeholderStyle || {
                visibility: 'hidden',
                pointerEvents: 'none',
                height: 0,
            } }));
        return children(provided, snapshot);
    }));
};
const queryAttr = 'data-rbd-draggable-id';
const AdaptableDDContext = React.createContext({
    placeholderStyle: null,
});
const DragDropContext = (props) => {
    const getDraggedDom = (draggableId) => {
        const domQuery = `[${queryAttr}='${draggableId}']`;
        const draggedDOM = document.querySelector(domQuery);
        return draggedDOM;
    };
    const [placeholderStyle, setPlaceholderStyle] = useState(null);
    const handleDragStart = (initial, provided) => {
        props.onDragStart?.(initial, provided);
        const draggedDOM = getDraggedDom(initial.draggableId);
        if (!draggedDOM) {
            return;
        }
        const { clientHeight, clientWidth } = draggedDOM;
        const computedStyle = window.getComputedStyle(draggedDOM);
        setPlaceholderStyle({
            height: clientHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom),
            width: clientWidth,
        });
    };
    const handleDragEnd = (result, provided) => {
        props.onDragEnd?.(result, provided);
        setPlaceholderStyle(null);
    };
    return (React.createElement(AdaptableDDContext.Provider, { value: { placeholderStyle } },
        React.createElement(DDContext, { ...props, onDragStart: handleDragStart, onDragEnd: handleDragEnd })));
};
export { Draggable, Droppable, DragDropContext };