@primer/react
Version:
An implementation of GitHub's Primer Design System using React
35 lines (30 loc) • 1.81 kB
JavaScript
const DATA_DRAGGING_ATTR = 'data-dragging';
/** Apply visual feedback and performance optimizations during drag */
function setDraggingStyles({
handle,
pane,
contentWrapper
}) {
// Handle visual feedback (must be inline for instant response)
// Use CSS variable to control ::before pseudo-element background color.
// This avoids cascade conflicts between inline styles and pseudo-element backgrounds.
handle === null || handle === void 0 ? void 0 : handle.style.setProperty('--draggable-handle--bg-color', 'var(--bgColor-accent-emphasis)');
handle === null || handle === void 0 ? void 0 : handle.style.setProperty('--draggable-handle--drag-opacity', '1');
handle === null || handle === void 0 ? void 0 : handle.style.setProperty('--draggable-handle--transition', 'none');
// Set attribute for CSS containment (O(1) direct selector, not descendant)
pane === null || pane === void 0 ? void 0 : pane.setAttribute(DATA_DRAGGING_ATTR, 'true');
contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.setAttribute(DATA_DRAGGING_ATTR, 'true');
}
/** Remove drag styles and restore normal state */
function removeDraggingStyles({
handle,
pane,
contentWrapper
}) {
handle === null || handle === void 0 ? void 0 : handle.style.removeProperty('--draggable-handle--bg-color');
handle === null || handle === void 0 ? void 0 : handle.style.removeProperty('--draggable-handle--drag-opacity');
handle === null || handle === void 0 ? void 0 : handle.style.removeProperty('--draggable-handle--transition');
pane === null || pane === void 0 ? void 0 : pane.removeAttribute(DATA_DRAGGING_ATTR);
contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.removeAttribute(DATA_DRAGGING_ATTR);
}
export { removeDraggingStyles, setDraggingStyles };