49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
import { jsx } from 'react/jsx-runtime';
|
|
import 'react';
|
|
import { Box } from '@strapi/design-system';
|
|
import { useDragLayer } from 'react-dnd';
|
|
|
|
function getStyle(initialOffset, currentOffset, mouseOffset) {
|
|
if (!initialOffset || !currentOffset || !mouseOffset) {
|
|
return {
|
|
display: 'none'
|
|
};
|
|
}
|
|
const { x, y } = mouseOffset;
|
|
return {
|
|
transform: `translate(${x}px, ${y}px)`
|
|
};
|
|
}
|
|
const DragLayer = ({ renderItem })=>{
|
|
const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer((monitor)=>({
|
|
item: monitor.getItem(),
|
|
itemType: monitor.getItemType(),
|
|
initialOffset: monitor.getInitialSourceClientOffset(),
|
|
currentOffset: monitor.getSourceClientOffset(),
|
|
isDragging: monitor.isDragging(),
|
|
mouseOffset: monitor.getClientOffset()
|
|
}));
|
|
if (!isDragging) {
|
|
return null;
|
|
}
|
|
return /*#__PURE__*/ jsx(Box, {
|
|
height: "100%",
|
|
left: 0,
|
|
position: "fixed",
|
|
pointerEvents: "none",
|
|
top: 0,
|
|
zIndex: 100,
|
|
width: "100%",
|
|
children: /*#__PURE__*/ jsx(Box, {
|
|
style: getStyle(initialOffset, currentOffset, mouseOffset),
|
|
children: renderItem({
|
|
type: itemType,
|
|
item
|
|
})
|
|
})
|
|
});
|
|
};
|
|
|
|
export { DragLayer };
|
|
//# sourceMappingURL=DragLayer.mjs.map
|