@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration
Version:
An optional Pragmatic drag and drop package that enables rapid migration from react-beautiful-dnd to Pragmatic drag and drop
76 lines (73 loc) • 3.46 kB
JavaScript
;
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.VirtualPlaceholder = VirtualPlaceholder;
var _react = _interopRequireWildcard(require("react"));
var _internalContext = require("../drag-drop-context/internal-context");
var _rbdInvariant = require("../drag-drop-context/rbd-invariant");
var _data = require("../draggable/data");
var _placeholder = require("../draggable/placeholder");
var _useDropTargetForDraggable = require("../hooks/use-drop-target-for-draggable");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
* The virtual placeholder exists specifically for virtual lists,
* to ensure that the injected placeholder is correctly positioned.
*
* Standard placeholders are rendered as siblings, and do not need explicit
* positioning.
*
* Because virtual placeholders are injected through a portal, they need to be
* absolutely positioned so that they cover the gap left by the dragging item.
*
* This placeholder is important because it acts as the drop target for the
* dragging item.
*/
function VirtualPlaceholder(_ref) {
var draggableId = _ref.draggableId,
droppableId = _ref.droppableId,
type = _ref.type,
direction = _ref.direction,
isDropDisabled = _ref.isDropDisabled;
var ref = (0, _react.useRef)(null);
var _useDragDropContext = (0, _internalContext.useDragDropContext)(),
contextId = _useDragDropContext.contextId,
getDragState = _useDragDropContext.getDragState;
var dragState = getDragState();
(0, _rbdInvariant.rbdInvariant)(dragState.isDragging, 'The virtual placeholder should only be rendered during a drag');
var getIndex = (0, _react.useCallback)(function () {
return dragState.sourceLocation.index;
}, [dragState.sourceLocation.index]);
var data = (0, _data.useDraggableData)({
draggableId: draggableId,
droppableId: droppableId,
getIndex: getIndex,
contextId: contextId,
type: type
});
/**
* This sets up the drop target for the dragging item.
*/
(0, _useDropTargetForDraggable.useDropTargetForDraggable)({
elementRef: ref,
data: data,
direction: direction,
contextId: contextId,
isDropDisabled: isDropDisabled,
type: type
});
var style = (0, _react.useMemo)(function () {
return {
position: 'absolute',
top: dragState.draggableInitialOffsetInSourceDroppable.top,
left: dragState.draggableInitialOffsetInSourceDroppable.left,
margin: 0
};
}, [dragState.draggableInitialOffsetInSourceDroppable.left, dragState.draggableInitialOffsetInSourceDroppable.top]);
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
return /*#__PURE__*/_react.default.createElement(_placeholder.Placeholder, {
ref: ref,
style: style
});
}