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

Separating useSortable and useSortableWithGrip

Browse source
This commit is contained in:
Jesús Espino 2021-04-13 15:33:25 +02:00
parent cae02a2ae2
commit 71dbb6ad90
6 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
webapp/src/components/contentBlock.tsx
View file

@ -17,7 +17,7 @@ import SortUpIcon from '../widgets/icons/sortUp'
import GripIcon from '../widgets/icons/grip'
import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
import useSortable from '../hooks/sortable'
import {useSortableWithGrip} from '../hooks/sortable'
import ContentElement from './content/contentElement'
import AddContentMenuItem from './addContentMenuItem'
@ -35,7 +35,7 @@ type Props = {
const ContentBlock = React.memo((props: Props): JSX.Element => {
const {intl, card, contents, block, readonly} = props
const [isDragging, isOver, dragRef, previewRef] = useSortable('content', block, true, props.onDrop)
const [isDragging, isOver, gripRef, itemRef] = useSortableWithGrip('content', block, true, props.onDrop)
const index = contents.indexOf(block)
let className = 'ContentBlock octo-block'
@ -46,7 +46,7 @@ const ContentBlock = React.memo((props: Props): JSX.Element => {
<div
className={className}
style={{opacity: isDragging ? 0.5 : 1}}
ref={previewRef}
ref={itemRef}
>
<div className='octo-block-margin'>
{!props.readonly &&
@ -107,7 +107,7 @@ const ContentBlock = React.memo((props: Props): JSX.Element => {
</MenuWrapper>
}
<div
ref={dragRef}
ref={gripRef}
className='dnd-handle'
>
<GripIcon/>

2
webapp/src/components/gallery/galleryCard.tsx
View file

@ -15,7 +15,7 @@ import DuplicateIcon from '../../widgets/icons/duplicate'
import OptionsIcon from '../../widgets/icons/options'
import Menu from '../../widgets/menu'
import MenuWrapper from '../../widgets/menuWrapper'
import useSortable from '../../hooks/sortable'
import {useSortable} from '../../hooks/sortable'
import ImageElement from '../content/imageElement'
import ContentElement from '../content/contentElement'

2
webapp/src/components/kanban/kanbanCard.tsx
View file

@ -12,7 +12,7 @@ import DuplicateIcon from '../../widgets/icons/duplicate'
import OptionsIcon from '../../widgets/icons/options'
import Menu from '../../widgets/menu'
import MenuWrapper from '../../widgets/menuWrapper'
import useSortable from '../../hooks/sortable'
import {useSortable} from '../../hooks/sortable'
import './kanbanCard.scss'
import PropertyValueElement from '../propertyValueElement'

2
webapp/src/components/table/tableHeader.tsx
View file

@ -9,7 +9,7 @@ import SortDownIcon from '../../widgets/icons/sortDown'
import SortUpIcon from '../../widgets/icons/sortUp'
import MenuWrapper from '../../widgets/menuWrapper'
import Label from '../../widgets/label'
import useSortable from '../../hooks/sortable'
import {useSortable} from '../../hooks/sortable'
import HorizontalGrip from './horizontalGrip'

2
webapp/src/components/table/tableRow.tsx
View file

@ -9,7 +9,7 @@ import mutator from '../../mutator'
import {BoardTree} from '../../viewModel/boardTree'
import Button from '../../widgets/buttons/button'
import Editable from '../../widgets/editable'
import useSortable from '../../hooks/sortable'
import {useSortable} from '../../hooks/sortable'
import PropertyValueElement from '../propertyValueElement'
import './tableRow.scss'

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

@ -1,11 +1,9 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useRef} from 'react'
import {useDrag, useDrop} from 'react-dnd'
import {useDrag, useDrop, DragElementWrapper, DragSourceOptions, DragPreviewOptions} from 'react-dnd'
export default function useSortable(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, React.RefObject<HTMLDivElement>, React.RefObject<HTMLDivElement>] {
const ref = useRef<HTMLDivElement>(null)
const previewRef = useRef<HTMLDivElement>(null)
function useSortableBase(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, DragElementWrapper<DragSourceOptions>, DragElementWrapper<any>, DragElementWrapper<DragPreviewOptions>] {
const [{isDragging}, drag, preview] = useDrag(() => ({
type: itemType,
item,
@ -25,7 +23,21 @@ export default function useSortable(itemType: string, item: any, enabled: boolea
canDrop: () => enabled,
}), [item, handler, enabled])
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>] {
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>] {
const ref = useRef<HTMLDivElement>(null)
const previewRef = useRef<HTMLDivElement>(null)
const [isDragging, isOver, drag, drop, preview] = useSortableBase(itemType, item, enabled, handler)
drag(ref)
drop(preview(previewRef))
return [isDragging, isOver, ref, previewRef]
}