65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
import React, { useRef, } from 'react'
|
|
import { useDrag, useDrop } from 'react-dnd'
|
|
import { ItemTypes } from '../ItemTypes';
|
|
|
|
|
|
const BuilderElement = ({ id, text, index, move }) => {
|
|
const ref = useRef(null);
|
|
|
|
const [{ handlerId }, drop] = useDrop({
|
|
accept: ItemTypes.FIELD,
|
|
collect(monitor) {
|
|
return {
|
|
handlerId: monitor.getHandlerId(),
|
|
}
|
|
},
|
|
hover(item, monitor) {
|
|
if (!ref.current) {
|
|
return
|
|
}
|
|
const dragIndex = item.index
|
|
const hoverIndex = index
|
|
|
|
if (dragIndex === hoverIndex) {
|
|
return
|
|
}
|
|
|
|
const hoverBoundingRect = ref.current?.getBoundingClientRect()
|
|
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
|
|
const clientOffset = monitor.getClientOffset()
|
|
const hoverClientY = clientOffset.y - hoverBoundingRect.top
|
|
|
|
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
|
|
return
|
|
}
|
|
|
|
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
|
|
return
|
|
}
|
|
|
|
move(dragIndex, hoverIndex)
|
|
item.index = hoverIndex
|
|
},
|
|
});
|
|
|
|
const [{ isDragging }, drag] = useDrag({
|
|
type: ItemTypes.FIELD,
|
|
item: () => {
|
|
return { id, index }
|
|
},
|
|
collect: (monitor) => ({
|
|
isDragging: monitor.isDragging(),
|
|
}),
|
|
});
|
|
|
|
const opacity = isDragging ? 0 : 1;
|
|
drag(drop(ref));
|
|
|
|
return (
|
|
<div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
|
|
{text}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BuilderElement; |