mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 23:05:56 -05:00
6dc7ced2df
GitOrigin-RevId: 5a62bed823b716a6e0d6d3aa57ee187d161f3346
78 lines
1.9 KiB
JavaScript
78 lines
1.9 KiB
JavaScript
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 (
|
|
<div
|
|
ref={ref}
|
|
className={classNames('dnd-draggable-preview-layer', {
|
|
'dnd-droppable-hover': isOver,
|
|
})}
|
|
>
|
|
{isDragging && item?.title && (
|
|
<div
|
|
style={getItemStyle(
|
|
clientOffset,
|
|
ref.current?.getBoundingClientRect()
|
|
)}
|
|
>
|
|
<DraggablePreviewItem title={item.title} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
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 <div className="dnd-draggable-preview-item">{title}</div>
|
|
}
|
|
|
|
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
|