@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)
45 lines (43 loc) • 1.12 kB
JavaScript
import React from 'react';
// exporting the type for consumption ease
import { DropIndicator as Border } from './border';
import { DropIndicator as Line } from './box';
var axisLookup = {
vertical: {
start: 'top',
end: 'bottom'
},
horizontal: {
start: 'left',
end: 'right'
}
};
export function DropIndicator(_ref) {
var instruction = _ref.instruction,
lineGap = _ref.lineGap,
lineType = _ref.lineType;
var appearance = instruction.blocked ? 'warning' : 'default';
var 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;
}