fix: improve side drawer

gisce · Sep 22, 2024 · 4a74622 · 4a74622
1 parent c5ad943
commit 4a74622
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 64 deletions.
diff --git a/src/ui/FloatingDrawer.tsx b/src/ui/FloatingDrawer.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import { motion } from "framer-motion";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { Typography, Button, Layout } from "antd";
 import { CloseOutlined } from "@ant-design/icons";
 
@@ -22,12 +22,41 @@ export const FloatingDrawer: React.FC<FloatingDrawerProps> = ({
   footer,
 }) => {
   const [showDrawer, setShowDrawer] = useState(isOpen);
+  const drawerRef = useRef<HTMLDivElement>(null);
+
+  const handleOverlayClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onClose();
+    },
+    [onClose],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose],
+  );
 
   useEffect(() => {
     if (isOpen) {
       setShowDrawer(true);
+      document.addEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "hidden"; // Prevent scrolling of the body
+    } else {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = ""; // Restore scrolling
     }
-  }, [isOpen]);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = ""; // Ensure scrolling is restored on unmount
+    };
+  }, [isOpen, handleKeyDown]);
 
   const handleAnimationComplete = () => {
     if (!isOpen) {
@@ -38,65 +67,89 @@ export const FloatingDrawer: React.FC<FloatingDrawerProps> = ({
   if (!showDrawer) return null;
 
   return (
-    <motion.div
-      initial={{ x: "100%" }}
-      animate={{ x: isOpen ? 0 : "100%" }}
-      transition={{ type: "spring", stiffness: 300, damping: 30 }}
-      onAnimationComplete={handleAnimationComplete}
-      style={{
-        position: "fixed",
-        top: 0,
-        right: 0,
-        bottom: 0,
-        width: "500px",
-        backgroundColor: "white",
-        boxShadow: "-2px 0 5px rgba(0, 0, 0, 0.1)",
-        zIndex: 1000,
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <Header
-        style={{
-          background: "#fff",
-          padding: 10,
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          borderBottom: "1px solid #f0f0f0",
-        }}
-      >
-        <Title level={3} style={{ margin: 0, paddingLeft: 10 }}>
-          {title}
-        </Title>
-        <Button
-          type="text"
-          icon={<CloseOutlined />}
-          onClick={onClose}
-          aria-label="Close"
-        />
-      </Header>
-      <Content
-        style={{
-          flex: 1,
-          overflowY: "auto",
-          paddingLeft: "10px",
-          paddingRight: "10px",
-        }}
-      >
-        {children}
-      </Content>
-      {footer && (
-        <Footer
-          style={{
-            padding: "10px 10px",
-            background: "#fff",
-            borderTop: "1px solid #f0f0f0",
-          }}
-        >
-          {footer}
-        </Footer>
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            style={{
+              position: "fixed",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              zIndex: 999,
+            }}
+            onClick={handleOverlayClick}
+          />
+          <motion.div
+            ref={drawerRef}
+            initial={{ x: "100%" }}
+            animate={{ x: 0 }}
+            exit={{ x: "100%" }}
+            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+            onAnimationComplete={handleAnimationComplete}
+            style={{
+              position: "fixed",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              width: "500px",
+              backgroundColor: "white",
+              boxShadow: "-2px 0 5px rgba(0, 0, 0, 0.1)",
+              zIndex: 1000,
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            <Header
+              style={{
+                background: "#fff",
+                padding: 10,
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                borderBottom: "1px solid #f0f0f0",
+              }}
+            >
+              <Title level={3} style={{ margin: 0, paddingLeft: 10 }}>
+                {title}
+              </Title>
+              <Button
+                type="text"
+                icon={<CloseOutlined />}
+                onClick={onClose}
+                aria-label="Close"
+              />
+            </Header>
+            <Content
+              style={{
+                flex: 1,
+                overflowY: "auto",
+                paddingLeft: "10px",
+                paddingRight: "10px",
+              }}
+            >
+              {children}
+            </Content>
+            {footer && (
+              <Footer
+                style={{
+                  padding: "10px 10px",
+                  background: "#fff",
+                  borderTop: "1px solid #f0f0f0",
+                }}
+              >
+                {footer}
+              </Footer>
+            )}
+          </motion.div>
+        </>
       )}
-    </motion.div>
+    </AnimatePresence>
   );
 };
diff --git a/src/widgets/views/SearchTreeInfinite.tsx b/src/widgets/views/SearchTreeInfinite.tsx
@@ -321,8 +321,6 @@ function SearchTreeInfiniteComp(props: SearchTreeInfiniteProps, ref: any) {
     return selectedRowItems?.map((item) => item.id) || [];
   }, [selectedRowItems]);
 
-  console.log({ selectedRowKeys });
-
   const content = useMemo(() => {
     if (!columns || !treeOoui) {
       return null;