Add animation to group open

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>
+    </>
   );
 }