@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
33 lines • 1.01 kB
JavaScript
import { useEffect } from 'react';
import { useDrag } from 'react-dnd';
import { useDragDropContextInternal } from './drag-drop-context-internal';
export function useDraggable(props) {
const { item, onBeginDrag, onEndDrag, } = props || {
item: {
type: "~invalid~"
}
};
const dragDropContext = useDragDropContextInternal();
const [{ isDragging }, dragRef] = useDrag(() => ({
type: item.type,
item,
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
end: (item, monitor) => {
dragDropContext.setDragItem(null);
onEndDrag && onEndDrag(monitor.getDropResult());
},
}), [item, item.type]);
useEffect(() => {
if (isDragging) {
dragDropContext.setDragItem(item);
onBeginDrag && onBeginDrag();
}
}, [isDragging, onBeginDrag]);
return {
isDragging,
dragRef,
};
}
//# sourceMappingURL=use-draggable.js.map