Move sortable to drag overlay

This commit is contained in:
Mitchell McCaffrey 2021-05-09 19:17:55 +10:00
parent 5a6bfd8a60
commit 31ef21a588
3 changed files with 33 additions and 7 deletions

View File

@ -14,7 +14,7 @@ function Sortable({ id, children }) {
const style = { const style = {
cursor: "pointer", cursor: "pointer",
touchAction: "none", touchAction: "none",
opacity: isDragging ? 0.5 : undefined, opacity: isDragging ? 0.25 : undefined,
transform: transform:
transform && `translate3d(${transform.x}px, ${transform.y}px, 0px)`, transform && `translate3d(${transform.x}px, ${transform.y}px, 0px)`,
zIndex: isDragging ? 100 : 0, zIndex: isDragging ? 100 : 0,

View File

@ -1,7 +1,8 @@
import React from "react"; import React, { useState } from "react";
import { createPortal } from "react-dom";
import { Flex, Box, Text, IconButton, Close, Grid } from "theme-ui"; import { Flex, Box, Text, IconButton, Close, Grid } from "theme-ui";
import SimpleBar from "simplebar-react"; import SimpleBar from "simplebar-react";
import { DndContext } from "@dnd-kit/core"; import { DndContext, DragOverlay } from "@dnd-kit/core";
import { SortableContext, arrayMove } from "@dnd-kit/sortable"; import { SortableContext, arrayMove } from "@dnd-kit/sortable";
import RemoveMapIcon from "../../icons/RemoveMapIcon"; import RemoveMapIcon from "../../icons/RemoveMapIcon";
@ -35,6 +36,7 @@ function MapTiles({
}) { }) {
const { databaseStatus } = useDatabase(); const { databaseStatus } = useDatabase();
const layout = useResponsiveLayout(); const layout = useResponsiveLayout();
const [dragId, setDragId] = useState();
let hasMapState = false; let hasMapState = false;
for (let state of selectedMapStates) { for (let state of selectedMapStates) {
@ -74,7 +76,12 @@ function MapTiles({
const multipleSelected = selectedMaps.length > 1; const multipleSelected = selectedMaps.length > 1;
function handleDragStart({ active }) {
setDragId(active.id);
}
function handleDragEnd({ active, over }) { function handleDragEnd({ active, over }) {
setDragId();
if (active && over && active.id !== over.id) { if (active && over && active.id !== over.id) {
const oldIndex = groups.indexOf(active.id); const oldIndex = groups.indexOf(active.id);
const newIndex = groups.indexOf(over.id); const newIndex = groups.indexOf(over.id);
@ -83,7 +90,7 @@ function MapTiles({
} }
return ( return (
<DndContext onDragEnd={handleDragEnd}> <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<SortableContext items={groups}> <SortableContext items={groups}>
<Box sx={{ position: "relative" }}> <Box sx={{ position: "relative" }}>
<FilterBar <FilterBar
@ -177,6 +184,12 @@ function MapTiles({
</Flex> </Flex>
)} )}
</Box> </Box>
{createPortal(
<DragOverlay>
{dragId && mapToTile(maps.find((maps) => maps.id === dragId))}
</DragOverlay>,
document.body
)}
</SortableContext> </SortableContext>
</DndContext> </DndContext>
); );

View File

@ -1,7 +1,8 @@
import React from "react"; import React, { useState } from "react";
import { createPortal } from "react-dom";
import { Flex, Box, Text, IconButton, Close, Grid } from "theme-ui"; import { Flex, Box, Text, IconButton, Close, Grid } from "theme-ui";
import SimpleBar from "simplebar-react"; import SimpleBar from "simplebar-react";
import { DndContext } from "@dnd-kit/core"; import { DndContext, DragOverlay } from "@dnd-kit/core";
import { SortableContext, arrayMove } from "@dnd-kit/sortable"; import { SortableContext, arrayMove } from "@dnd-kit/sortable";
import RemoveTokenIcon from "../../icons/RemoveTokenIcon"; import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
@ -34,6 +35,7 @@ function TokenTiles({
}) { }) {
const { databaseStatus } = useDatabase(); const { databaseStatus } = useDatabase();
const layout = useResponsiveLayout(); const layout = useResponsiveLayout();
const [dragId, setDragId] = useState();
let hasSelectedDefaultToken = selectedTokens.some( let hasSelectedDefaultToken = selectedTokens.some(
(token) => token.type === "default" (token) => token.type === "default"
@ -77,7 +79,12 @@ function TokenTiles({
} }
} }
function handleDragStart({ active }) {
setDragId(active.id);
}
function handleDragEnd({ active, over }) { function handleDragEnd({ active, over }) {
setDragId();
if (active && over && active.id !== over.id) { if (active && over && active.id !== over.id) {
const oldIndex = groups.indexOf(active.id); const oldIndex = groups.indexOf(active.id);
const newIndex = groups.indexOf(over.id); const newIndex = groups.indexOf(over.id);
@ -86,7 +93,7 @@ function TokenTiles({
} }
return ( return (
<DndContext onDragEnd={handleDragEnd}> <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<SortableContext items={groups}> <SortableContext items={groups}>
<Box sx={{ position: "relative" }}> <Box sx={{ position: "relative" }}>
<FilterBar <FilterBar
@ -181,6 +188,12 @@ function TokenTiles({
</Flex> </Flex>
)} )}
</Box> </Box>
{createPortal(
<DragOverlay>
{dragId && tokenToTile(tokens.find((token) => token.id === dragId))}
</DragOverlay>,
document.body
)}
</SortableContext> </SortableContext>
</DndContext> </DndContext>
); );