update drawer behavior when other drawer is opened

patternfly · Nov 22, 2024 · 8b6aa3b · 8b6aa3b
1 parent 16bbed2
commit 8b6aa3b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 16 deletions.
diff --git a/packages/dev/src/AppCustomDrawer.tsx b/packages/dev/src/AppCustomDrawer.tsx
@@ -92,7 +92,10 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
   };
 
   const [modalOpen, setModalOpen] = React.useState<boolean>(false);
-  const onClose = () => setActiveQuickStartID('');
+  const onClose = () => {
+    setActiveQuickStartID('');
+    setDrawerContent('none');
+  };
   const handleClose = (activeQuickStartStatus: string | number) => {
     if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {
       setModalOpen(true);
@@ -107,14 +110,14 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
   };
   const onModalCancel = () => setModalOpen(false);
 
-  const [otherDrawerOpen, setOtherDrawerOpen] = React.useState(false);
+  const [drawerContent, setDrawerContent] = React.useState('none');
 
   const otherDrawerPanelContent = (
     <DrawerPanelContent>
       <DrawerHead>
-        <span tabIndex={otherDrawerOpen ? 0 : -1}>Drawer panel header</span>
+        <span tabIndex={drawerContent === 'custom' ? 0 : -1}>Drawer panel header</span>
         <DrawerActions>
-          <DrawerCloseButton onClick={() => setOtherDrawerOpen(false)} />
+          <DrawerCloseButton onClick={() => setDrawerContent('none')} />
         </DrawerActions>
       </DrawerHead>
       <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
@@ -125,10 +128,10 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
   return (
     <React.Suspense fallback={<LoadingBox />}>
       <QuickStartContainer {...containerProps} isManagedDrawer={false}>
-        <Drawer isExpanded={activeQuickStartID !== '' || otherDrawerOpen} isInline>
+        <Drawer isExpanded={drawerContent !== 'none'} isInline>
           <DrawerContent
             panelContent={
-              activeQuickStartID !== '' ? (
+              drawerContent === 'quickstart' || activeQuickStartID !== '' ? (
                 <QuickStartDrawerContent handleDrawerClose={handleClose} />
               ) : (
                 otherDrawerPanelContent
@@ -139,11 +142,20 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
               <Page masthead={AppHeader} sidebar={AppSidebar} isManagedSidebar>
                 <Button
                   variant="secondary"
-                  onClick={() => toggleQuickStart('getting-started-with-quick-starts')}
+                  onClick={() => {
+                    toggleQuickStart('getting-started-with-quick-starts');
+                    setDrawerContent('quickstart');
+                  }}
                 >
                   Getting started with quick starts
                 </Button>
-                <Button variant="secondary" onClick={() => setOtherDrawerOpen(true)}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setActiveQuickStartID('');
+                    setDrawerContent('custom');
+                  }}
+                >
                   Open a different drawer
                 </Button>
                 {children}

diff --git a/...ages/module/patternfly-docs/content/extensions/quick-starts/examples/WithCustomDrawer.jsx b/...ages/module/patternfly-docs/content/extensions/quick-starts/examples/WithCustomDrawer.jsx
@@ -74,7 +74,10 @@ export const App = ({ showCardFooters }) => {
   };
 
   const [modalOpen, setModalOpen] = React.useState(false);
-  const onClose = () => setActiveQuickStartID('');
+  const onClose = () => {
+    setActiveQuickStartID('');
+    setDrawerContent('none');
+  };
   const handleClose = (activeQuickStartStatus) => {
     if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {
       setModalOpen(true);
@@ -88,14 +91,14 @@ export const App = ({ showCardFooters }) => {
   };
   const onModalCancel = () => setModalOpen(false);
 
-  const [otherDrawerOpen, setOtherDrawerOpen] = React.useState(false);
+  const [drawerContent, setDrawerContent] = React.useState('none');
 
   const otherDrawerPanelContent = (
     <DrawerPanelContent>
       <DrawerHead>
-        <span tabIndex={otherDrawerOpen ? 0 : -1}>Drawer panel header</span>
+        <span tabIndex={drawerContent === 'custom' ? 0 : -1}>Drawer panel header</span>
         <DrawerActions>
-          <DrawerCloseButton onClick={() => setOtherDrawerOpen(false)} />
+          <DrawerCloseButton onClick={() => setDrawerContent('none')} />
         </DrawerActions>
       </DrawerHead>
       <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
@@ -106,10 +109,10 @@ export const App = ({ showCardFooters }) => {
   return (
     <React.Suspense fallback={<LoadingBox />}>
       <QuickStartContainer {...drawerProps} isManagedDrawer={false}>
-        <Drawer isExpanded={activeQuickStartID !== '' || otherDrawerOpen} isInline>
+        <Drawer isExpanded={drawerContent !== 'none'} isInline>
           <DrawerContent
             panelContent={
-              activeQuickStartID !== '' ? (
+              drawerContent === 'quickstart' || activeQuickStartID !== '' ? (
                 <QuickStartDrawerContent handleDrawerClose={handleClose} />
               ) : (
                 otherDrawerPanelContent
@@ -119,11 +122,20 @@ export const App = ({ showCardFooters }) => {
             <DrawerContentBody>
               <Button
                 variant="secondary"
-                onClick={() => setActiveQuickStartID('explore-pipelines')}
+                onClick={() => {
+                  setActiveQuickStartID('explore-pipelines');
+                  setDrawerContent('quickstart');
+                }}
               >
                 Getting started with quick starts
               </Button>
-              <Button variant="secondary" onClick={() => setOtherDrawerOpen(true)}>
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  setActiveQuickStartID('');
+                  setDrawerContent('custom');
+                }}
+              >
                 Open a different drawer
               </Button>
               <QuickStartCatalogPage