Merge pull request #1368 from Alex-NRCan/feat-panel-opened-callback

Added a new optional callback when the panel has completed transitioning and is fully opened (#1368)
Canadian-Geospatial-Platform · Oct 13, 2023 · 54d5ed8 · 54d5ed8
2 parents ef3420e + f2c6454
commit 54d5ed8
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 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-types.ts b/packages/geoview-core/src/ui/panel/panel-types.ts
@@ -35,6 +35,8 @@ export type TypePanelProps = {
   content?: ReactNode;
   /** Custom panel styles */
   panelStyles?: PanelStyles;
+  /** Handler callback triggered when a panel is fully opened */
+  handlePanelOpened?: () => void;
 };
 
 export interface PanelStyles {
@@ -103,6 +105,8 @@ export type TypeButtonPanel = {
   button: TypeIconButtonProps;
   /** Group name. */
   groupName?: string;
+  /** Handler callback triggered when a panel is fully opened */
+  handlePanelOpened?: () => void;
 };
 
 /** ******************************************************************************************************************************

diff --git a/packages/geoview-core/src/ui/panel/panel.tsx b/packages/geoview-core/src/ui/panel/panel.tsx
@@ -11,6 +11,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import CardContent from '@mui/material/CardContent';
+import { useTheme } from '@mui/styles';
 
 import { Cast } from '@/core/types/global-types';
 import { HtmlToReact } from '@/core/containers/html-to-react';
@@ -37,6 +38,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) => ({
@@ -102,16 +106,19 @@ const useStyles = makeStyles((theme) => ({
  * @returns {JSX.Element} the created Panel element
  */
 export function Panel(props: TypePanelAppProps): JSX.Element {
-  const { panel, button } = props;
+  const { panel, button, handlePanelOpened } = props;
   const { panelStyles } = panel;
   // set the active trap value for FocusTrap
   const [panelStatus, setPanelStatus] = useState(false);
 
+  // Get the theme
+  const theme = useTheme();
+
   const panelWidth = panel?.width ?? 350;
   const panelContainerStyles = {
     ...(panelStyles?.panelContainer && { ...panelStyles.panelContainer }),
     width: panelStatus ? panelWidth : 0,
-    transition: 'width 300ms ease',
+    transition: `width ${theme.transitions.duration.standard}ms ease`,
   };
 
   const [actionButtons, setActionButtons] = useState<JSX.Element[] & ReactNode[]>([]);
@@ -181,6 +188,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!();
+        }, theme.transitions.duration.standard + 50);
+      }
+
       if (closeBtnRef && closeBtnRef.current) {
         (closeBtnRef.current as HTMLElement).focus();
       }
@@ -339,3 +353,10 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
     </Box>
   );
 }
+
+/**
+ * React's default properties for the Panel
+ */
+Panel.defaultProps = {
+  handlePanelOpened: null,
+};