FE Close button on panel

Greater-Wellington-Regional-Council · Nov 21, 2024 · 4bdf396 · 4bdf396
1 parent f210025
commit 4bdf396
Showing 1 changed file with 32 additions and 18 deletions.
diff --git a/packages/cccv/src/components/InfoPanel/SlidingPanel.tsx b/packages/cccv/src/components/InfoPanel/SlidingPanel.tsx
@@ -2,28 +2,29 @@ import './SlidingPanel.scss'
 import React, { useState, useEffect, useRef } from 'react'
 
 interface InfoPanelProps {
-    showPanel: boolean;
+    showPanel?: boolean;
     contentChanged: boolean;
     onClose: () => void;
     onResize?: (width: number) => void;
     children?: React.ReactNode;
 }
 
-export default function SlidingPanel({ showPanel, contentChanged, onResize, children }: InfoPanelProps) {
+export default function SlidingPanel({ showPanel, contentChanged, onResize, onClose, children }: InfoPanelProps) {
     const panelRef = useRef<HTMLDivElement>(null)
     const isResizing = useRef(false)
     const [panelWidth, setPanelWidth] = useState(300)
-    const [isPanelVisible, setIsPanelVisible] = useState(showPanel) // Track visibility state
-    const [isLargeScreen, setIsLargeScreen] = useState(window.innerWidth > 640) // Detect if the screen is large
+    const [isPanelVisible, setIsPanelVisible] = useState(showPanel)
+    const [isLargeScreen, setIsLargeScreen] = useState(window.innerWidth > 640)
+
+    useEffect(() => {
+        setIsPanelVisible(showPanel || true)
+    }, [showPanel])
 
     useEffect(() => {
-        // Listen for window resize to update isLargeScreen
         const handleResize = () => {
             setIsLargeScreen(window.innerWidth > 640)
         }
-
         window.addEventListener('resize', handleResize)
-
         return () => {
             window.removeEventListener('resize', handleResize)
         }
@@ -43,7 +44,6 @@ export default function SlidingPanel({ showPanel, contentChanged, onResize, chil
             if (isResizing.current && panelRef.current && isLargeScreen) {
                 const panelRightEdge = panelRef.current.getBoundingClientRect().right
                 const newWidth = panelRightEdge - e.clientX
-
                 if (newWidth > 100) {
                     setPanelWidth(newWidth)
                     onResize && onResize(newWidth)
@@ -54,7 +54,7 @@ export default function SlidingPanel({ showPanel, contentChanged, onResize, chil
 
         const handleMouseUp = () => {
             isResizing.current = false
-            document.body.style.userSelect = '' // Re-enable text selection
+            document.body.style.userSelect = ''
         }
 
         document.addEventListener('mousemove', handleMouseMove)
@@ -69,12 +69,17 @@ export default function SlidingPanel({ showPanel, contentChanged, onResize, chil
     const handleMouseDown = () => {
         if (isLargeScreen) {
             isResizing.current = true
-            document.body.style.userSelect = 'none' // Disable text selection
+            document.body.style.userSelect = 'none'
         }
     }
 
     const handleDoubleClick = () => {
-        setIsPanelVisible(!isPanelVisible) // Toggle panel visibility
+        setIsPanelVisible(!isPanelVisible)
+    }
+
+    const handleClose = () => {
+        setIsPanelVisible(false)
+        onClose()
     }
 
     const revealOrHideInfoPanel = isPanelVisible ? 'animate-in' : 'animate-out'
@@ -86,23 +91,32 @@ export default function SlidingPanel({ showPanel, contentChanged, onResize, chil
             ref={panelRef}
             className={`sliding-panel ${stateClass} absolute bg-white font-mono shadow-black ${signalUpdatedInfoPanel} ${revealOrHideInfoPanel} transition ease-in-out duration-500 z-10`}
             style={{
-                width: isLargeScreen ? `${panelWidth}px` : '100%', // Full width for small screens
-                height: '100vh', // Full height of the viewport
-                maxHeight: '100vh', // Full height of the viewport
+                width: isLargeScreen ? `${panelWidth}px` : '100%',
+                height: isLargeScreen ? `100vh` : '92vh',
+                maxHeight: isLargeScreen ? `100vh` : '92vh',
                 display: isPanelVisible ? 'block' : 'none',
             }}
             data-testid="sliding-panel"
         >
-            {/* Conditionally render the bezel only for large screens */}
+            <div
+                className="absolute top-0 m-0 p-0 text-gray-400 cursor-pointer leading-none z-50"
+                onClick={handleClose}
+                role="button"
+                aria-label="Close Panel"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd"
+                          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                          clipRule="evenodd"/>
+                </svg>
+            </div>
             {isLargeScreen && (
                 <div
                     className="absolute left-[-6px] top-0 bottom-0 w-[6px] cursor-ew-resize z-20 bg-gray-100"
                     onMouseDown={handleMouseDown}
-                    onDoubleClick={handleDoubleClick} // Added double-click event
+                    onDoubleClick={handleDoubleClick}
                 />
             )}
-
-            {/* Scrollable content area */}
             <div className="relative z-30 overflow-auto h-full">
                 {children}
             </div>