Reworked panel opened handle

Canadian-Geospatial-Platform · Oct 11, 2023 · 78bfcff · 78bfcff
1 parent bdd4814
commit 78bfcff
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 16 deletions.
diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar-buttons.ts b/packages/geoview-core/src/core/components/app-bar/app-bar-buttons.ts
@@ -101,6 +101,7 @@ export class AppbarButtons {
         panel: new PanelApi(panel, buttonId, this.mapId),
         button,
         groupName: group,
+        handlePanelOpened: panelProps.handlePanelOpened,
       };
 
       // add the new button panel to the correct group

diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
@@ -259,7 +259,12 @@ export function Appbar({ activeTrap, activeTrapSet }: AppbarProps): JSX.Element
             {Object.keys(buttonPanels).map((buttonPanelsKey) => {
               const buttonPanel = buttonPanels[buttonPanelsKey];
               return buttonPanel?.panel ? (
-                <Panel key={buttonPanel.panel.panelId} panel={buttonPanel.panel} button={buttonPanel.button} />
+                <Panel
+                  key={buttonPanel.panel.panelId}
+                  panel={buttonPanel.panel}
+                  button={buttonPanel.button}
+                  handlePanelOpened={buttonPanel.handlePanelOpened}
+                />
               ) : null;
             })}
           </Fragment>

diff --git a/packages/geoview-core/src/ui/panel/panel-api.ts b/packages/geoview-core/src/ui/panel/panel-api.ts
@@ -7,7 +7,7 @@ import { CheckboxListAPI } from '../list/checkbox-list/checkbox-list-api';
 
 import { PanelPayload, TypeActionButton } from '@/api/events/payloads';
 import { generateId } from '@/core/utils/utilities';
-import { PanelStyles, TypePanelProps, TRANSITION_PERIOD } from './panel-types';
+import { PanelStyles, TypePanelProps } from './panel-types';
 
 /**
  * Class used to handle creating a new panel
@@ -47,8 +47,6 @@ export class PanelApi {
 
   panelStyles?: PanelStyles;
 
-  handlePanelOpened?: () => void;
-
   /**
    * Initialize a new panel
    *
@@ -67,7 +65,6 @@ export class PanelApi {
     this.status = panel.status !== undefined && panel.status !== null ? panel.status : false;
     this.width = panel.width || 350;
     this.panelStyles = panel.panelStyles ?? {};
-    this.handlePanelOpened = panel.handlePanelOpened;
   }
 
   /**
@@ -82,13 +79,6 @@ export class PanelApi {
     api.event.emit(
       PanelPayload.withButtonIdAndType(EVENT_NAMES.PANEL.EVENT_PANEL_OPEN, `${this.mapId}/${this.buttonId}`, this.buttonId, this.type!)
     );
-
-    if (this.handlePanelOpened) {
-      // Wait the transition period (+50 ms just to be sure of shenanigans)
-      setTimeout(() => {
-        this.handlePanelOpened!();
-      }, TRANSITION_PERIOD + 50);
-    }
   };
 
   /**

diff --git a/packages/geoview-core/src/ui/panel/panel-types.ts b/packages/geoview-core/src/ui/panel/panel-types.ts
@@ -105,6 +105,8 @@ export type TypeButtonPanel = {
   button: TypeIconButtonProps;
   /** Group name. */
   groupName?: string;
+  /** Handler callback triggered when a panel is fully opened */
+  handlePanelOpened?: () => void;
 };
 
 /** ******************************************************************************************************************************
@@ -114,5 +116,3 @@ export const CONST_PANEL_TYPES = {
   APPBAR: 'app-bar',
   NAVBAR: 'nav-bar',
 };
-
-export const TRANSITION_PERIOD = 300;
diff --git a/packages/geoview-core/src/ui/panel/panel.tsx b/packages/geoview-core/src/ui/panel/panel.tsx
@@ -18,7 +18,6 @@ import { MapContext } from '@/core/app-start';
 
 import { api } from '@/app';
 import { EVENT_NAMES } from '@/api/events/event-types';
-import { TRANSITION_PERIOD } from './panel-types';
 
 import { IconButton, CloseIcon, PanelApi, Box } from '..';
 import {
@@ -38,6 +37,9 @@ type TypePanelAppProps = {
   panel: PanelApi;
   //   panelOpen: boolean;
   button: TypeIconButtonProps;
+
+  // Callback when the panel has completed opened (and transitioned in)
+  handlePanelOpened?: () => void;
 };
 
 const useStyles = makeStyles((theme) => ({
@@ -96,14 +98,20 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+/**
+ * The transition period it takes for the panel to slide in
+ */
+const TRANSITION_PERIOD = 300;
+
 /**
  * Create a panel with a header title, icon and content
  * @param {TypePanelAppProps} props panel properties
  *
  * @returns {JSX.Element} the created Panel element
  */
 export function Panel(props: TypePanelAppProps): JSX.Element {
-  const { panel, button } = props;
+  // debugger;
+  const { panel, button, handlePanelOpened } = props;
   const { panelStyles } = panel;
   // set the active trap value for FocusTrap
   const [panelStatus, setPanelStatus] = useState(false);
@@ -182,6 +190,13 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
       // set focus on close button on panel open
       setPanelStatus(true);
 
+      if (handlePanelOpened) {
+        // Wait the transition period (+50 ms just to be sure of shenanigans)
+        setTimeout(() => {
+          handlePanelOpened!();
+        }, TRANSITION_PERIOD + 50);
+      }
+
       if (closeBtnRef && closeBtnRef.current) {
         (closeBtnRef.current as HTMLElement).focus();
       }
@@ -340,3 +355,10 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
     </Box>
   );
 }
+
+/**
+ * React's default properties for the Panel
+ */
+Panel.defaultProps = {
+  handlePanelOpened: null,
+};