import { useRef } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' // a custom component rendered on top of a draggable area that renders the // dragged item. See // https://react-dnd.github.io/react-dnd/examples/drag-around/custom-drag-layer // for more details. // Also used to display a container border when hovered. function FileTreeDraggablePreviewLayer({ isOver, isDragging, item, clientOffset, }) { const ref = useRef() return (
{isDragging && item?.title && (
)}
) } FileTreeDraggablePreviewLayer.propTypes = { isOver: PropTypes.bool.isRequired, isDragging: PropTypes.bool.isRequired, item: PropTypes.shape({ title: PropTypes.string, }), clientOffset: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number, }), } function DraggablePreviewItem({ title }) { return
{title}
} DraggablePreviewItem.propTypes = { title: PropTypes.string.isRequired, } // makes the preview item follow the cursor. // See https://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitor function getItemStyle(clientOffset, containerOffset) { if (!containerOffset || !clientOffset) { return { display: 'none', } } const { x: containerX, y: containerY } = containerOffset const { x: clientX, y: clientY } = clientOffset const posX = clientX - containerX - 15 const posY = clientY - containerY - 15 const transform = `translate(${posX}px, ${posY}px)` return { transform, WebkitTransform: transform, } } export default FileTreeDraggablePreviewLayer