From 71dbb6ad903c21ef263911c9d49b7ccc870b7112 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Tue, 13 Apr 2021 15:33:25 +0200 Subject: [PATCH] Separating useSortable and useSortableWithGrip --- webapp/src/components/contentBlock.tsx | 8 ++++---- webapp/src/components/gallery/galleryCard.tsx | 2 +- webapp/src/components/kanban/kanbanCard.tsx | 2 +- webapp/src/components/table/tableHeader.tsx | 2 +- webapp/src/components/table/tableRow.tsx | 2 +- webapp/src/hooks/sortable.tsx | 20 +++++++++++++++---- 6 files changed, 24 insertions(+), 12 deletions(-) diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx index ac6212719..0e416498a 100644 --- a/webapp/src/components/contentBlock.tsx +++ b/webapp/src/components/contentBlock.tsx @@ -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 => {
{!props.readonly && @@ -107,7 +107,7 @@ const ContentBlock = React.memo((props: Props): JSX.Element => { }
diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx index 51bc1186f..7cb843133 100644 --- a/webapp/src/components/gallery/galleryCard.tsx +++ b/webapp/src/components/gallery/galleryCard.tsx @@ -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' diff --git a/webapp/src/components/kanban/kanbanCard.tsx b/webapp/src/components/kanban/kanbanCard.tsx index bc8f02df4..a7542e5bc 100644 --- a/webapp/src/components/kanban/kanbanCard.tsx +++ b/webapp/src/components/kanban/kanbanCard.tsx @@ -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' diff --git a/webapp/src/components/table/tableHeader.tsx b/webapp/src/components/table/tableHeader.tsx index a7ddc3d87..284a7545f 100644 --- a/webapp/src/components/table/tableHeader.tsx +++ b/webapp/src/components/table/tableHeader.tsx @@ -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' diff --git a/webapp/src/components/table/tableRow.tsx b/webapp/src/components/table/tableRow.tsx index 22f4e3272..86dc1833e 100644 --- a/webapp/src/components/table/tableRow.tsx +++ b/webapp/src/components/table/tableRow.tsx @@ -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' diff --git a/webapp/src/hooks/sortable.tsx b/webapp/src/hooks/sortable.tsx index 37d8937c6..582bd912f 100644 --- a/webapp/src/hooks/sortable.tsx +++ b/webapp/src/hooks/sortable.tsx @@ -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, React.RefObject] { - const ref = useRef(null) - const previewRef = useRef(null) +function useSortableBase(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, DragElementWrapper, DragElementWrapper, DragElementWrapper] { 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] { + 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] { + const ref = useRef(null) + const previewRef = useRef(null) + const [isDragging, isOver, drag, drop, preview] = useSortableBase(itemType, item, enabled, handler) + drag(ref) drop(preview(previewRef)) return [isDragging, isOver, ref, previewRef] }