@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/dist/es2019/drag-drop-context/hooks/use-style-marshal.js

An optional Pragmatic drag and drop package that enables rapid migration from react-beautiful-dnd to Pragmatic drag and drop

/**
 * This is a vastly simplified version of the style marshal in `react-beautiful-dnd`.
 *
 * Most of the styles have been removed, as they are not required for native dragging.
 * They were only required in `react-beautiful-dnd` because it emulated dragging.
 */

// eslint-disable-next-line import/no-extraneous-dependencies

import { useLayoutEffect } from '../../hooks/use-isomorphic-layout-effect';
import { attributes } from '../../utils/attributes';

/**
 * Used to uniquely identify the style element.
 */
const styleContextIdAttribute = 'data-rbd-style-context-id';

/**
 * Returns the CSS string for the rule with the given selector and style
 * declarations.
 */
function getRuleString({
  selector,
  styles
}) {
  const concatString = Object.entries(styles).map(([property, value]) => `${property}: ${value};`).join(' ');
  return `${selector} { ${concatString} }`;
}

/**
 * Returns the rule string for drag handle styles.
 */
export function getDragHandleRuleString(contextId) {
  const selector = `[${attributes.dragHandle.contextId}="${contextId}"]`;
  const styles = {
    /**
     * Indicates the element is draggable.
     *
     * Although this is always applied, it will not be visible during drags
     * because the browser will override the cursor.
     */
    cursor: 'grab',
    /**
     * Improves the UX when dragging links on iOS.
     *
     * Without this a preview of the link will open. Although it is still
     * draggable, it is inconsistent with `react-beautiful-dnd`.
     */
    '-webkit-touch-callout': 'none'
  };
  return getRuleString({
    selector,
    styles
  });
}
function createStyleEl({
  contextId,
  nonce
}) {
  const el = document.createElement('style');
  if (nonce) {
    el.setAttribute('nonce', nonce);
  }
  el.setAttribute(styleContextIdAttribute, contextId);
  document.head.appendChild(el);
  return el;
}
function createStyleManager({
  contextId,
  nonce
}) {
  const el = createStyleEl({
    contextId,
    nonce
  });

  /**
   * Inject the style content.
   */
  el.textContent = getDragHandleRuleString(contextId);
  return function cleanup() {
    el.remove();
  };
}
export default function useStyleMarshal({
  contextId,
  nonce
}) {
  useLayoutEffect(() => {
    return createStyleManager({
      contextId,
      nonce
    });
  }, [contextId, nonce]);
}