luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Typing adjustment - 1353 (#1415)

Browse source 
* refactor: adjusting typing

* fix: improving typing

* refactor: simplifying typing using Generics
This commit is contained in:
Tiago Santos Da Silva 2021-10-05 19:55:55 -03:00 committed by GitHub
parent b2f42e9d4c
commit e0935eb15c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
webapp/src/hooks/sortable.tsx
View file

@ -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<DragSourceOptions>, DragElementWrapper<any>, DragElementWrapper<DragPreviewOptions>] {
import {IContentBlockWithCords} from '../blocks/contentBlock'
import {Block} from '../blocks/block'
interface ISortableWithGripItem {
block: Block | Block[],
cords: {x: number, y?: number, z?: number}
}
function useSortableBase<T>(itemType: string, item: T, enabled: boolean, handler: (src: T, st: T) => void): [boolean, boolean, DragElementWrapper<DragSourceOptions>, DragElementWrapper<DragSourceOptions>, DragElementWrapper<DragPreviewOptions>] {
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<HTMLDivElement>] {
export function useSortable<T>(itemType: string, item: T, enabled: boolean, handler: (src: T, st: T) => void): [boolean, boolean, React.RefObject<HTMLDivElement>] {
const ref = useRef<HTMLDivElement>(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<HTMLDivElement>, React.RefObject<HTMLDivElement>] {
export function useSortableWithGrip(itemType: string, item: ISortableWithGripItem, enabled: boolean, handler: (src: IContentBlockWithCords, st: IContentBlockWithCords) => void): [boolean, boolean, React.RefObject<HTMLDivElement>, React.RefObject<HTMLDivElement>] {
const ref = useRef<HTMLDivElement>(null)
const previewRef = useRef<HTMLDivElement>(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]