50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import React, { useRef } from 'react'
|
|
import { useDrag } from 'react-dnd'
|
|
import { ItemTypes } from '../ItemTypes';
|
|
import uniqid from '../../../../helpers/uniqid';
|
|
import { storeSet } from '../../../../store';
|
|
|
|
|
|
const BuilderElementItem = ({ dbId, name, label, description = '' }) => {
|
|
const ref = useRef(null);
|
|
|
|
const [{ isDragging }, drag] = useDrag(() => ({
|
|
type: ItemTypes.FIELD,
|
|
item: () => {
|
|
const newId = uniqid();
|
|
storeSet('draggingElementId', newId);
|
|
return { name, dbId, id: newId, index: -1 }
|
|
},
|
|
end: (item, monitor) => {
|
|
const dropResult = monitor.getDropResult()
|
|
|
|
if (monitor.didDrop()) {
|
|
if (item && dropResult) {
|
|
return item;
|
|
}
|
|
} else {
|
|
storeSet('removeElement', item.id);
|
|
storeSet('draggingElementId', 0);
|
|
}
|
|
},
|
|
collect: (monitor) => ({
|
|
isDragging: monitor.isDragging(),
|
|
handlerId: monitor.getHandlerId(),
|
|
}),
|
|
}))
|
|
|
|
const opacity = isDragging ? 0.4 : 1
|
|
drag(ref);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
title={description}
|
|
className="formBuilder__elementItem"
|
|
style={{ opacity }}>
|
|
{label}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BuilderElementItem; |