From ccc31fe6c134ffddd8264e5229f9dce47b6549b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Thu, 8 Apr 2021 09:55:16 +0200 Subject: [PATCH] Adding enable/disable of sorting --- webapp/src/components/gallery/gallery.tsx | 5 +++-- webapp/src/components/gallery/galleryCard.tsx | 3 ++- webapp/src/components/kanban/kanban.tsx | 1 + webapp/src/components/kanban/kanbanCard.tsx | 3 ++- webapp/src/components/table/tableHeader.tsx | 3 ++- webapp/src/components/table/tableRow.tsx | 9 +++++---- webapp/src/hooks/sortable.tsx | 8 +++++--- 7 files changed, 20 insertions(+), 12 deletions(-) diff --git a/webapp/src/components/gallery/gallery.tsx b/webapp/src/components/gallery/gallery.tsx index 6b0794c57..f4cda5965 100644 --- a/webapp/src/components/gallery/gallery.tsx +++ b/webapp/src/components/gallery/gallery.tsx @@ -23,13 +23,13 @@ type Props = { const Gallery = (props: Props): JSX.Element => { const {boardTree} = props - const {cards} = boardTree + const {cards, activeView} = boardTree const visiblePropertyTemplates = boardTree.board.cardProperties.filter((template) => boardTree.activeView.visiblePropertyIds.includes(template.id)) const [cardTrees, setCardTrees] = useState<{[key: string]: CardTree | undefined}>({}) + const isManualSort = activeView.sortOptions.length < 1 const onDropToCard = (srcCard: Card, dstCard: Card) => { Utils.log(`onDropToCard: ${dstCard.title}`) - const {activeView} = boardTree const {selectedCardIds} = props const draggedCardIds = Array.from(new Set(selectedCardIds).add(srcCard.id)) @@ -88,6 +88,7 @@ const Gallery = (props: Props): JSX.Element => { isSelected={props.selectedCardIds.includes(card.id)} readonly={props.readonly} onDrop={onDropToCard} + isManualSort={isManualSort} /> ) } diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx index 67fb4caf6..b755d4d12 100644 --- a/webapp/src/components/gallery/galleryCard.tsx +++ b/webapp/src/components/gallery/galleryCard.tsx @@ -30,12 +30,13 @@ type Props = { isSelected: boolean intl: IntlShape readonly: boolean + isManualSort: boolean onDrop: (srcCard: Card, dstCard: Card) => void } const GalleryCard = React.memo((props: Props) => { const {cardTree} = props - const [isDragging, isOver, cardRef] = useSortable('card', cardTree.card, props.onDrop) + const [isDragging, isOver, cardRef] = useSortable('card', cardTree.card, props.isManualSort, props.onDrop) const visiblePropertyTemplates = props.visiblePropertyTemplates || [] diff --git a/webapp/src/components/kanban/kanban.tsx b/webapp/src/components/kanban/kanban.tsx index 7a500fe05..c9b0b459d 100644 --- a/webapp/src/components/kanban/kanban.tsx +++ b/webapp/src/components/kanban/kanban.tsx @@ -130,6 +130,7 @@ class Kanban extends React.Component { this.props.onCardClicked(e, card) }} onDrop={this.onDropToCard} + isManualSort={isManualSort} /> ))} {!this.props.readonly && diff --git a/webapp/src/components/kanban/kanbanCard.tsx b/webapp/src/components/kanban/kanbanCard.tsx index 6a8d106a7..bc8f02df4 100644 --- a/webapp/src/components/kanban/kanbanCard.tsx +++ b/webapp/src/components/kanban/kanbanCard.tsx @@ -25,11 +25,12 @@ type Props = { intl: IntlShape readonly: boolean onDrop: (srcCard: Card, dstCard: Card) => void + isManualSort: boolean } const KanbanCard = React.memo((props: Props) => { const {card, intl} = props - const [isDragging, isOver, cardRef] = useSortable('card', card, props.onDrop) + const [isDragging, isOver, cardRef] = useSortable('card', card, props.isManualSort, props.onDrop) const visiblePropertyTemplates = props.visiblePropertyTemplates || [] let className = props.isSelected ? 'KanbanCard selected' : 'KanbanCard' if (isOver) { diff --git a/webapp/src/components/table/tableHeader.tsx b/webapp/src/components/table/tableHeader.tsx index fef51cebc..68e2fbc4b 100644 --- a/webapp/src/components/table/tableHeader.tsx +++ b/webapp/src/components/table/tableHeader.tsx @@ -28,7 +28,8 @@ type Props = { } const TableHeader = React.memo((props: Props): JSX.Element => { - const [isDragging, isOver, columnRef] = useSortable('column', props.template, props.onDrop) + const isManualSort = props.boardTree.activeView.sortOptions.length < 1 + const [isDragging, isOver, columnRef] = useSortable('column', props.template, isManualSort, props.onDrop) const columnWidth = (templateId: string): number => { return Math.max(Constants.minColumnWidth, (props.boardTree.activeView.columnWidths[templateId] || 0) + props.offset) diff --git a/webapp/src/components/table/tableRow.tsx b/webapp/src/components/table/tableRow.tsx index ae92c90fe..dd4bcd235 100644 --- a/webapp/src/components/table/tableRow.tsx +++ b/webapp/src/components/table/tableRow.tsx @@ -29,10 +29,14 @@ type Props = { } const TableRow = React.memo((props: Props) => { + const {boardTree, onSaveWithEnter} = props + const {board, activeView} = boardTree + const titleRef = useRef(null) const [title, setTitle] = useState(props.card.title) const {card} = props - const [isDragging, isOver, cardRef] = useSortable('card', card, props.onDrop) + const isManualSort = activeView.sortOptions.length < 1 + const [isDragging, isOver, cardRef] = useSortable('card', card, isManualSort, props.onDrop) useEffect(() => { if (props.focusOnMount) { @@ -47,9 +51,6 @@ const TableRow = React.memo((props: Props) => { return Math.max(Constants.minColumnWidth, props.boardTree.activeView.columnWidths[templateId] || 0) } - const {boardTree, onSaveWithEnter} = props - const {board, activeView} = boardTree - let className = props.isSelected ? 'TableRow octo-table-row selected' : 'TableRow octo-table-row' if (isOver) { className += ' dragover' diff --git a/webapp/src/hooks/sortable.tsx b/webapp/src/hooks/sortable.tsx index 95edb8767..39be40fe4 100644 --- a/webapp/src/hooks/sortable.tsx +++ b/webapp/src/hooks/sortable.tsx @@ -3,7 +3,7 @@ import React, {useRef} from 'react' import {useDrag, useDrop} from 'react-dnd' -export default function useSortable(itemType: string, item: any, handler: (src: any, st: any) => void): [boolean, boolean, React.RefObject] { +export default function useSortable(itemType: string, item: any, enabled: boolean, handler: (src: any, st: any) => void): [boolean, boolean, React.RefObject] { const ref = useRef(null) const [{isDragging}, drag] = useDrag(() => ({ type: itemType, @@ -11,7 +11,8 @@ export default function useSortable(itemType: string, item: any, handler: (src: collect: (monitor) => ({ isDragging: monitor.isDragging(), }), - }), [itemType, item]) + canDrag: () => enabled, + }), [itemType, item, enabled]) const [{isOver}, drop] = useDrop(() => ({ accept: itemType, collect: (monitor) => ({ @@ -20,7 +21,8 @@ export default function useSortable(itemType: string, item: any, handler: (src: drop: (dragItem: any) => { handler(dragItem, item) }, - }), [item, handler]) + canDrop: () => enabled, + }), [item, handler, enabled]) drop(drag(ref)) return [isDragging, isOver, ref]