Spaces:
Runtime error
Runtime error
File size: 2,056 Bytes
229b3b8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import { useEditorState } from '@designcombo/core';
import React, { useState, cloneElement, ReactElement, useRef } from 'react';
import { createPortal } from 'react-dom';
interface DraggableProps {
children: ReactElement;
shouldDisplayPreview?: boolean;
renderCustomPreview?: ReactElement;
data?: Record<string, any>;
}
const Draggable: React.FC<DraggableProps> = ({
children,
renderCustomPreview,
data = {},
shouldDisplayPreview = true,
}) => {
const [isDragging, setIsDragging] = useState(false);
const [position, setPosition] = useState({ x: 0, y: 0 });
const previewRef = useRef<HTMLDivElement>(null);
const handleDragStart = (e: React.DragEvent<HTMLElement>) => {
setIsDragging(true);
e.dataTransfer.setDragImage(new Image(), 0, 0); // Hides default preview
// set drag data
e.dataTransfer.setData('transition', JSON.stringify(data));
setPosition({
x: e.clientX,
y: e.clientY,
});
};
const handleDragEnd = () => {
setIsDragging(false);
};
const handleDrag = (e: React.DragEvent<HTMLElement>) => {
if (isDragging) {
setPosition({
x: e.clientX,
y: e.clientY,
});
}
};
const childWithProps = cloneElement(children, {
draggable: true,
onDragStart: handleDragStart,
onDragEnd: handleDragEnd,
onDrag: handleDrag,
style: {
...children.props.style,
cursor: 'grab',
},
});
return (
<>
{childWithProps}
{isDragging && shouldDisplayPreview && renderCustomPreview
? createPortal(
<div
ref={previewRef}
style={{
position: 'fixed',
left: position.x,
top: position.y,
pointerEvents: 'none',
zIndex: 9999,
transform: 'translate(-50%, -50%)', // Center the preview
}}
>
{renderCustomPreview}
</div>,
document.body,
)
: null}
</>
);
};
export default Draggable;
|