@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/dist/es2019/tree-item.js

An optional Pragmatic drag and drop package containing react components that provide a visual indication about what the user will achieve when the drop (eg lines)

import React from 'react';
import { DropIndicator as Border } from './border';
import { DropIndicator as Line } from './box';
function getElement({
  instruction,
  isBlocked
}) {
  const indent = `${instruction.currentLevel * instruction.indentPerLevel}px`;
  const appearance = isBlocked ? 'warning' : 'default';
  if (instruction.type === 'reorder-above') {
    return /*#__PURE__*/React.createElement(Line, {
      edge: "top",
      appearance: appearance,
      indent: indent
    });
  }
  if (instruction.type === 'reorder-below') {
    return /*#__PURE__*/React.createElement(Line, {
      edge: "bottom",
      appearance: appearance,
      indent: indent
    });
  }
  if (instruction.type === 'make-child') {
    return /*#__PURE__*/React.createElement(Border, {
      appearance: appearance,
      indent: indent
    });
  }
  if (instruction.type === 'reparent') {
    const reparentIndent = `${instruction.desiredLevel * instruction.indentPerLevel}px`;
    return /*#__PURE__*/React.createElement(Line, {
      edge: "bottom",
      appearance: appearance,
      indent: reparentIndent
    });
  }
  return null;
}
export function DropIndicator({
  instruction
}) {
  if (instruction.type === 'instruction-blocked') {
    return getElement({
      instruction: instruction.desired,
      isBlocked: true
    });
  }
  return getElement({
    instruction,
    isBlocked: false
  });
}