@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
62 lines (61 loc) • 2.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DragDropContext = exports.Droppable = exports.Draggable = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_beautiful_dnd_1 = require("@adaptabletools/react-beautiful-dnd");
Object.defineProperty(exports, "Draggable", { enumerable: true, get: function () { return react_beautiful_dnd_1.Draggable; } });
const react_1 = require("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(react_beautiful_dnd_1.Droppable, { ...props }, (provided, snapshot) => {
provided.placeholder = (React.createElement("div", { key: "placeholder", style: placeholderStyle || {
visibility: 'hidden',
pointerEvents: 'none',
height: 0,
} }));
return children(provided, snapshot);
}));
};
exports.Droppable = Droppable;
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] = (0, react_1.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(react_beautiful_dnd_1.DragDropContext, { ...props, onDragStart: handleDragStart, onDragEnd: handleDragEnd })));
};
exports.DragDropContext = DragDropContext;