diff --git a/packages/dev/src/AppCustomDrawer.tsx b/packages/dev/src/AppCustomDrawer.tsx index 1488fed8..1269ff22 100644 --- a/packages/dev/src/AppCustomDrawer.tsx +++ b/packages/dev/src/AppCustomDrawer.tsx @@ -1,5 +1,17 @@ import './App.css'; -import { Page, Button, Drawer } from '@patternfly/react-core'; +import { + Page, + Button, + Drawer, + DrawerContent, + DrawerPanelContent, + DrawerHead, + DrawerActions, + DrawerCloseButton, + DrawerPanelDescription, + DrawerPanelBody, + DrawerContentBody, +} from '@patternfly/react-core'; import { LoadingBox, QuickStartContainer, @@ -95,21 +107,49 @@ const App: React.FC = ({ children, showCardFooters }) => { }; const onModalCancel = () => setModalOpen(false); + const [otherDrawerOpen, setOtherDrawerOpen] = React.useState(false); + + const otherDrawerPanelContent = ( + + + Drawer panel header + + setOtherDrawerOpen(false)} /> + + + Drawer panel description + Drawer panel body + + ); + return ( }> - - - - - {children} - - + + + ) : ( + otherDrawerPanelContent + ) + } + > + + + + + {children} + + + { @@ -62,8 +73,6 @@ export const App = ({ showCardFooters }) => { }, }; - // The above code is identical to the current quickstarts setup - // Below is additional handling to support a custom drawer with an in-progress close confirm modal const [modalOpen, setModalOpen] = React.useState(false); const onClose = () => setActiveQuickStartID(''); const handleClose = (activeQuickStartStatus) => { @@ -79,18 +88,52 @@ export const App = ({ showCardFooters }) => { }; const onModalCancel = () => setModalOpen(false); + const [otherDrawerOpen, setOtherDrawerOpen] = React.useState(false); + + const otherDrawerPanelContent = ( + + + Drawer panel header + + setOtherDrawerOpen(false)} /> + + + Drawer panel description + Drawer panel body + + ); + return ( }> - - - - + + + ) : ( + otherDrawerPanelContent + ) + } + > + + + + + + = ({ const onModalCancel = () => setModalOpen(false); + const fullWidthBodyStyle = fullWidth + ? { + style: { + display: activeQuickStartID ? 'none' : 'flex', + }, + } + : {}; + return ( <> - + } + {...fullWidthBodyStyle} > - {children} - + {children} + { quickStarts?: QuickStart[]; - children?: React.ReactNode; appendTo?: HTMLElement | (() => HTMLElement); fullWidth?: boolean; onCloseInProgress?: any; @@ -16,7 +14,6 @@ export interface QuickStartDrawerContentProps extends React.HTMLProps = ({ quickStarts = [], - children, appendTo, fullWidth, handleDrawerClose, @@ -41,15 +38,7 @@ export const QuickStartDrawerContent: React.FC = ( } : {}; - const fullWidthBodyStyle = fullWidth - ? { - style: { - display: activeQuickStartID ? 'none' : 'flex', - }, - } - : {}; - - const panelContent = ( + return ( = ( {...props} /> ); - - return children ? ( - - {children} - - ) : ( -
{panelContent}
- ); }; export default QuickStartDrawerContent;