37 lines
993 B
JavaScript
37 lines
993 B
JavaScript
import React, { useRef } from 'react'
|
|
import { useDrag } from 'react-dnd'
|
|
import { ItemTypes } from '../ItemTypes';
|
|
import uniqid from '../../../../helpers/uniqid';
|
|
|
|
|
|
const BuilderElementItem = ({ dbId, name, label, move }) => {
|
|
const ref = useRef(null);
|
|
|
|
const [{ isDragging }, drag] = useDrag(() => ({
|
|
type: ItemTypes.FIELD,
|
|
item: () => {
|
|
return { name, dbId, id: uniqid(), index: -1 }
|
|
},
|
|
end: (item, monitor) => {
|
|
const dropResult = monitor.getDropResult()
|
|
if (item && dropResult) {
|
|
return item;
|
|
}
|
|
},
|
|
collect: (monitor) => ({
|
|
isDragging: monitor.isDragging(),
|
|
handlerId: monitor.getHandlerId(),
|
|
}),
|
|
}))
|
|
|
|
const opacity = isDragging ? 0.4 : 1
|
|
drag(ref);
|
|
|
|
return (
|
|
<div ref={ref} className="formBuilder__elementItem" style={{ opacity }}>
|
|
{label}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BuilderElementItem; |