UNPKG

@atlaskit/pragmatic-drag-and-drop-react-drop-indicator

Version:

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)

46 lines (44 loc) 1.07 kB
import React from 'react'; // exporting the type for consumption ease import { DropIndicator as Border } from './border'; import { DropIndicator as Line } from './box'; const axisLookup = { vertical: { start: 'top', end: 'bottom' }, horizontal: { start: 'left', end: 'right' } }; export function DropIndicator({ instruction, lineGap, lineType }) { const appearance = instruction.blocked ? 'warning' : 'default'; const axis = axisLookup[instruction.axis]; if (instruction.operation === 'combine') { return /*#__PURE__*/React.createElement(Border, { appearance: appearance }); } if (instruction.operation === 'reorder-before') { return /*#__PURE__*/React.createElement(Line, { edge: axis.start, appearance: appearance, gap: lineGap, type: lineType }); } if (instruction.operation === 'reorder-after') { return /*#__PURE__*/React.createElement(Line, { edge: axis.end, appearance: appearance, gap: lineGap, type: lineType }); } return null; }