From 4e5bd8bf02291775aa29802ae56bbffb58a571d7 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 24 May 2021 17:11:46 +1000
Subject: [PATCH] Add animation to group open

---
 src/components/map/MapTileGroup.js     |   8 +-
 src/components/map/MapTiles.js         |   2 +
 src/components/tile/SortableTile.js    |   9 +-
 src/components/tile/SortableTiles.js   |  37 ++-----
 src/components/tile/TilesContainer.js  |  28 ++++-
 src/components/tile/TilesOverlay.js    | 139 ++++++++++++++++++-------
 src/components/token/TokenBar.js       |   2 +-
 src/components/token/TokenTileGroup.js |   4 +-
 src/components/token/TokenTiles.js     |   2 +
 src/hooks/useResponsiveLayout.js       |  11 +-
 src/modals/SelectMapModal.js           |   2 +-
 src/modals/SelectTokensModal.js        |   2 +-
 12 files changed, 170 insertions(+), 76 deletions(-)

diff --git a/src/components/map/MapTileGroup.js b/src/components/map/MapTileGroup.js
index 91c334d..9ab54cb 100644
--- a/src/components/map/MapTileGroup.js
+++ b/src/components/map/MapTileGroup.js
@@ -16,9 +16,13 @@ function MapTileGroup({ group, maps, isSelected, onSelect, onDoubleClick }) {
       onSelect={() => onSelect(group.id)}
       onDoubleClick={onDoubleClick}
     >
-      <Grid columns={layout.gridTemplate} p={2} sx={{ gridGap: 2 }}>
+      <Grid columns={layout.groupGridTemplate} p={2} sx={{ gridGap: 2 }}>
         {maps.slice(0, 16).map((map) => (
-          <MapTileImage sx={{ borderRadius: "8px" }} map={map} key={map.id} />
+          <MapTileImage
+            sx={{ borderRadius: "8px" }}
+            map={map}
+            key={`${map.id}-group-tile`}
+          />
         ))}
       </Grid>
     </Tile>
diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.js
index aa841f2..d051fa7 100644
--- a/src/components/map/MapTiles.js
+++ b/src/components/map/MapTiles.js
@@ -13,6 +13,7 @@ function MapTiles({ maps, onMapEdit, onMapSelect, subgroup }) {
   const {
     groups,
     selectedGroupIds,
+    openGroupId,
     openGroupItems,
     selectMode,
     onGroupOpen,
@@ -63,6 +64,7 @@ function MapTiles({ maps, onMapEdit, onMapSelect, subgroup }) {
       renderTile={renderTile}
       onTileSelect={onGroupSelect}
       disableGrouping={subgroup}
+      openGroupId={openGroupId}
     />
   );
 }
diff --git a/src/components/tile/SortableTile.js b/src/components/tile/SortableTile.js
index 1e3dc8e..bce4227 100644
--- a/src/components/tile/SortableTile.js
+++ b/src/components/tile/SortableTile.js
@@ -2,8 +2,9 @@ import React from "react";
 import { Box } from "theme-ui";
 import { useDroppable } from "@dnd-kit/core";
 import { useSortable } from "@dnd-kit/sortable";
+import { animated, useSpring } from "react-spring";
 
-function Sortable({ id, disableGrouping, children }) {
+function Sortable({ id, disableGrouping, hidden, children }) {
   const {
     attributes,
     listeners,
@@ -48,8 +49,10 @@ function Sortable({ id, disableGrouping, children }) {
       over?.id === `__group__${id}` && active.id !== id ? "solid" : "none",
   };
 
+  const { opacity } = useSpring({ opacity: hidden ? 0 : 1 });
+
   return (
-    <Box sx={{ position: "relative" }}>
+    <animated.div style={{ opacity, position: "relative" }}>
       <Box
         ref={setDraggableNodeRef}
         style={dragStyle}
@@ -75,7 +78,7 @@ function Sortable({ id, disableGrouping, children }) {
           sx={{ borderColor: "primary" }}
         />
       </Box>
-    </Box>
+    </animated.div>
   );
 }
 
diff --git a/src/components/tile/SortableTiles.js b/src/components/tile/SortableTiles.js
index 209d750..c6dcf63 100644
--- a/src/components/tile/SortableTiles.js
+++ b/src/components/tile/SortableTiles.js
@@ -11,12 +11,9 @@ import {
 } from "@dnd-kit/core";
 import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 import { animated, useSpring, config } from "react-spring";
-import { Grid } from "theme-ui";
 
 import { combineGroups, moveGroups } from "../../helpers/group";
 
-import useResponsiveLayout from "../../hooks/useResponsiveLayout";
-
 import SortableTile from "./SortableTile";
 
 function SortableTiles({
@@ -25,9 +22,8 @@ function SortableTiles({
   renderTile,
   onTileSelect,
   disableGrouping,
+  openGroupId,
 }) {
-  const layout = useResponsiveLayout();
-
   const mouseSensor = useSensor(MouseSensor, {
     activationConstraint: { delay: 250, tolerance: 5 },
   });
@@ -105,27 +101,16 @@ function SortableTiles({
       collisionDetection={closestCenter}
     >
       <SortableContext items={groups}>
-        <Grid
-          p={3}
-          pb={4}
-          sx={{
-            borderRadius: "4px",
-            overflow: "hidden",
-          }}
-          gap={2}
-          columns={layout.gridTemplate}
-          onClick={() => onTileSelect()}
-        >
-          {groups.map((group) => (
-            <SortableTile
-              id={group.id}
-              key={group.id}
-              disableGrouping={disableGrouping}
-            >
-              {renderSortableGroup(group)}
-            </SortableTile>
-          ))}
-        </Grid>
+        {groups.map((group) => (
+          <SortableTile
+            id={group.id}
+            key={group.id}
+            disableGrouping={disableGrouping}
+            hidden={group.id === openGroupId}
+          >
+            {renderSortableGroup(group)}
+          </SortableTile>
+        ))}
         {createPortal(
           <DragOverlay dropAnimation={null}>
             {dragId && (
diff --git a/src/components/tile/TilesContainer.js b/src/components/tile/TilesContainer.js
index 438e933..16714bc 100644
--- a/src/components/tile/TilesContainer.js
+++ b/src/components/tile/TilesContainer.js
@@ -1,14 +1,40 @@
 import React from "react";
+import { Box, Grid } from "theme-ui";
 import SimpleBar from "simplebar-react";
 
+import { useGroup } from "../../contexts/GroupContext";
+
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
 function TilesContainer({ children }) {
+  const { onGroupSelect } = useGroup();
+
   const layout = useResponsiveLayout();
 
   return (
     <SimpleBar style={{ height: layout.tileContainerHeight }}>
-      {children}
+      <Box
+        sx={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          top: 0,
+        }}
+        bg="muted"
+        onClick={() => onGroupSelect()}
+      />
+      <Grid
+        p={3}
+        pb={4}
+        sx={{
+          borderRadius: "4px",
+          overflow: "hidden",
+        }}
+        gap={2}
+        columns={layout.gridTemplate}
+      >
+        {children}
+      </Grid>
     </SimpleBar>
   );
 }
diff --git a/src/components/tile/TilesOverlay.js b/src/components/tile/TilesOverlay.js
index 1b37136..ad43c7b 100644
--- a/src/components/tile/TilesOverlay.js
+++ b/src/components/tile/TilesOverlay.js
@@ -1,48 +1,111 @@
-import React from "react";
-import { Box, Close } from "theme-ui";
+import React, { useState } from "react";
+import { Box, Close, Grid } from "theme-ui";
+import { useSpring, animated, config } from "react-spring";
+import ReactResizeDetector from "react-resize-detector";
+import SimpleBar from "simplebar-react";
 
 import { useGroup } from "../../contexts/GroupContext";
 
-function TilesOverlay({ children }) {
-  const { openGroupId, onGroupClose } = useGroup();
+import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
-  if (!openGroupId) {
-    return null;
+function TilesOverlay({ children }) {
+  const { openGroupId, onGroupClose, onGroupSelect } = useGroup();
+
+  const openAnimation = useSpring({
+    opacity: openGroupId ? 1 : 0,
+    transform: openGroupId ? "scale(1)" : "scale(0.95)",
+    config: config.gentle,
+  });
+
+  const [containerSize, setContinerSize] = useState(0);
+  function handleResize(width, height) {
+    const size = Math.min(width, height) - 16;
+    setContinerSize(size);
   }
 
+  const layout = useResponsiveLayout();
+
   return (
-    <Box
-      sx={{
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        top: 0,
-        cursor: "pointer",
-      }}
-      p={3}
-      bg="overlay"
-      onClick={() => onGroupClose()}
-    >
-      <Box
-        sx={{
-          width: "100%",
-          height: "100%",
-          borderRadius: "8px",
-          border: "1px solid",
-          borderColor: "border",
-          cursor: "default",
-        }}
-        bg="muted"
-        onClick={(e) => e.stopPropagation()}
-        p={3}
-      >
-        {children}
-      </Box>
-      <Close
-        onClick={() => onGroupClose()}
-        sx={{ position: "absolute", top: "16px", right: "16px" }}
-      />
-    </Box>
+    <>
+      {openGroupId && (
+        <Box
+          sx={{
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            top: 0,
+          }}
+          bg="overlay"
+        />
+      )}
+      <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
+        <animated.div
+          style={{
+            ...openAnimation,
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            top: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            pointerEvents: openGroupId ? undefined : "none",
+          }}
+          onClick={() => openGroupId && onGroupClose()}
+        >
+          <Box
+            sx={{
+              width: containerSize,
+              height: containerSize,
+              borderRadius: "8px",
+              border: "1px solid",
+              borderColor: "border",
+              cursor: "default",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              position: "relative",
+            }}
+            bg="background"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Box
+              sx={{
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                top: 0,
+              }}
+              bg="muted"
+              onClick={() => onGroupSelect()}
+            />
+            <SimpleBar
+              style={{
+                width: containerSize - 16,
+                height: containerSize - 48,
+              }}
+            >
+              <Grid
+                sx={{
+                  borderRadius: "4px",
+                  overflow: "hidden",
+                }}
+                gap={2}
+                columns={layout.groupGridTemplate}
+                px={3}
+              >
+                {children}
+              </Grid>
+            </SimpleBar>
+            <Close
+              onClick={() => onGroupClose()}
+              sx={{ position: "absolute", top: 0, right: 0 }}
+            />
+          </Box>
+        </animated.div>
+      </ReactResizeDetector>
+    </>
   );
 }
 
diff --git a/src/components/token/TokenBar.js b/src/components/token/TokenBar.js
index 2c11909..acfb395 100644
--- a/src/components/token/TokenBar.js
+++ b/src/components/token/TokenBar.js
@@ -57,7 +57,7 @@ function TokenBar({ onMapTokenStateCreate }) {
           height: "100%",
           width: "80px",
           minWidth: "80px",
-          overflowY: "scroll",
+          overflowY: "hidden",
           overflowX: "hidden",
           display: fullScreen ? "none" : "block",
         }}
diff --git a/src/components/token/TokenTileGroup.js b/src/components/token/TokenTileGroup.js
index 8c749d6..aa6133e 100644
--- a/src/components/token/TokenTileGroup.js
+++ b/src/components/token/TokenTileGroup.js
@@ -23,12 +23,12 @@ function TokenTileGroup({
       onDoubleClick={onDoubleClick}
       columns="1fr 1fr"
     >
-      <Grid columns={layout.gridTemplate} p={2} sx={{ gridGap: 2 }}>
+      <Grid columns={layout.groupGridTemplate} p={2} sx={{ gridGap: 2 }}>
         {tokens.slice(0, 16).map((token) => (
           <TokenTileImage
             sx={{ borderRadius: "8px" }}
             token={token}
-            key={token.id}
+            key={`${token.id}-group-tile`}
           />
         ))}
       </Grid>
diff --git a/src/components/token/TokenTiles.js b/src/components/token/TokenTiles.js
index daf7182..4296cb1 100644
--- a/src/components/token/TokenTiles.js
+++ b/src/components/token/TokenTiles.js
@@ -13,6 +13,7 @@ function TokenTiles({ tokens, onTokenEdit, subgroup }) {
   const {
     groups,
     selectedGroupIds,
+    openGroupId,
     openGroupItems,
     selectMode,
     onGroupOpen,
@@ -68,6 +69,7 @@ function TokenTiles({ tokens, onTokenEdit, subgroup }) {
       renderTile={renderTile}
       onTileSelect={onGroupSelect}
       disableGrouping={subgroup}
+      openGroupId={openGroupId}
     />
   );
 }
diff --git a/src/hooks/useResponsiveLayout.js b/src/hooks/useResponsiveLayout.js
index 6cf41b7..3eb0e1c 100644
--- a/src/hooks/useResponsiveLayout.js
+++ b/src/hooks/useResponsiveLayout.js
@@ -27,9 +27,18 @@ function useResponsiveLayout() {
     ? "1fr 1fr 1fr"
     : "1fr 1fr";
 
+  const groupGridTemplate = isLargeScreen ? "1fr 1fr 1fr" : "1fr 1fr";
+
   const tileContainerHeight = isLargeScreen ? "600px" : "400px";
 
-  return { screenSize, modalSize, tileSize, gridTemplate, tileContainerHeight };
+  return {
+    screenSize,
+    modalSize,
+    tileSize,
+    gridTemplate,
+    tileContainerHeight,
+    groupGridTemplate,
+  };
 }
 
 export default useResponsiveLayout;
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js
index 46a733b..00e3d92 100644
--- a/src/modals/SelectMapModal.js
+++ b/src/modals/SelectMapModal.js
@@ -252,7 +252,7 @@ function SelectMapModal({
           <Label pt={2} pb={1}>
             Select or import a map
           </Label>
-          <Box sx={{ position: "relative" }} bg="muted">
+          <Box sx={{ position: "relative" }}>
             <GroupProvider
               groups={mapGroups}
               onGroupsChange={updateMapGroups}
diff --git a/src/modals/SelectTokensModal.js b/src/modals/SelectTokensModal.js
index 7affdc1..a515214 100644
--- a/src/modals/SelectTokensModal.js
+++ b/src/modals/SelectTokensModal.js
@@ -193,7 +193,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
           <Label pt={2} pb={1}>
             Edit or import a token
           </Label>
-          <Box sx={{ position: "relative" }} bg="muted">
+          <Box sx={{ position: "relative" }}>
             <GroupProvider
               groups={tokenGroups}
               onGroupsChange={updateTokenGroups}