diff --git a/webapp/src/hooks/sortable.tsx b/webapp/src/hooks/sortable.tsx index 582bd912f..8e3de405a 100644 --- a/webapp/src/hooks/sortable.tsx +++ b/webapp/src/hooks/sortable.tsx @@ -3,7 +3,14 @@ import React, {useRef} from 'react' import {useDrag, useDrop, DragElementWrapper, DragSourceOptions, DragPreviewOptions} from 'react-dnd' -function useSortableBase(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, DragElementWrapper, DragElementWrapper, DragElementWrapper] { +import {IContentBlockWithCords} from '../blocks/contentBlock' +import {Block} from '../blocks/block' +interface ISortableWithGripItem { + block: Block | Block[], + cords: {x: number, y?: number, z?: number} +} + +function useSortableBase(itemType: string, item: T, enabled: boolean, handler: (src: T, st: T) => void): [boolean, boolean, DragElementWrapper, DragElementWrapper, DragElementWrapper] { const [{isDragging}, drag, preview] = useDrag(() => ({ type: itemType, item, @@ -17,7 +24,7 @@ function useSortableBase(itemType: string, item: any, enabled: boolean, handler: collect: (monitor) => ({ isOver: monitor.isOver(), }), - drop: (dragItem: any) => { + drop: (dragItem: T) => { handler(dragItem, item) }, canDrop: () => enabled, @@ -26,17 +33,17 @@ function useSortableBase(itemType: string, item: any, enabled: boolean, handler: return [isDragging, isOver, drag, drop, preview] } -export function useSortable(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, React.RefObject] { +export function useSortable(itemType: string, item: T, enabled: boolean, handler: (src: T, st: T) => void): [boolean, boolean, React.RefObject] { const ref = useRef(null) const [isDragging, isOver, drag, drop] = useSortableBase(itemType, item, enabled, handler) drop(drag(ref)) return [isDragging, isOver, ref] } -export function useSortableWithGrip(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, React.RefObject, React.RefObject] { +export function useSortableWithGrip(itemType: string, item: ISortableWithGripItem, enabled: boolean, handler: (src: IContentBlockWithCords, st: IContentBlockWithCords) => void): [boolean, boolean, React.RefObject, React.RefObject] { const ref = useRef(null) const previewRef = useRef(null) - const [isDragging, isOver, drag, drop, preview] = useSortableBase(itemType, item, enabled, handler) + const [isDragging, isOver, drag, drop, preview] = useSortableBase(itemType, item as IContentBlockWithCords, enabled, handler) drag(ref) drop(preview(previewRef)) return [isDragging, isOver, ref, previewRef]