Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move sortable to drag overlay

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Sortable.js
View File

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

19
src/components/map/MapTiles.js
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 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 RemoveMapIcon from "../../icons/RemoveMapIcon";
@ -35,6 +36,7 @@ function MapTiles({
}) {
const { databaseStatus } = useDatabase();
const layout = useResponsiveLayout();
const [dragId, setDragId] = useState();
let hasMapState = false;
for (let state of selectedMapStates) {
@ -74,7 +76,12 @@ function MapTiles({
const multipleSelected = selectedMaps.length > 1;
function handleDragStart({ active }) {
setDragId(active.id);
}
function handleDragEnd({ active, over }) {
setDragId();
if (active && over && active.id !== over.id) {
const oldIndex = groups.indexOf(active.id);
const newIndex = groups.indexOf(over.id);
@ -83,7 +90,7 @@ function MapTiles({
}
return (
<DndContext onDragEnd={handleDragEnd}>
<DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<SortableContext items={groups}>
<Box sx={{ position: "relative" }}>
<FilterBar
@ -177,6 +184,12 @@ function MapTiles({
</Flex>
)}
</Box>
{createPortal(
<DragOverlay>
{dragId && mapToTile(maps.find((maps) => maps.id === dragId))}
</DragOverlay>,
document.body
)}
</SortableContext>
</DndContext>
);

19
src/components/token/TokenTiles.js
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 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 RemoveTokenIcon from "../../icons/RemoveTokenIcon";
@ -34,6 +35,7 @@ function TokenTiles({
}) {
const { databaseStatus } = useDatabase();
const layout = useResponsiveLayout();
const [dragId, setDragId] = useState();
let hasSelectedDefaultToken = selectedTokens.some(
(token) => token.type === "default"
@ -77,7 +79,12 @@ function TokenTiles({
}
}
function handleDragStart({ active }) {
setDragId(active.id);
}
function handleDragEnd({ active, over }) {
setDragId();
if (active && over && active.id !== over.id) {
const oldIndex = groups.indexOf(active.id);
const newIndex = groups.indexOf(over.id);
@ -86,7 +93,7 @@ function TokenTiles({
}
return (
<DndContext onDragEnd={handleDragEnd}>
<DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<SortableContext items={groups}>
<Box sx={{ position: "relative" }}>
<FilterBar
@ -181,6 +188,12 @@ function TokenTiles({
</Flex>
)}
</Box>
{createPortal(
<DragOverlay>
{dragId && tokenToTile(tokens.find((token) => token.id === dragId))}
</DragOverlay>,
document.body
)}
</SortableContext>
</DndContext>
);