Skip to content

Commit 16bbed2

Browse files
kmcfaulkmcfaul
committed
return pure panel content
1 parent b1a4636 commit 16bbed2

File tree

5 files changed

+132
-55
lines changed

5 files changed

+132
-55
lines changed

‎packages/dev/src/AppCustomDrawer.tsx‎

Lines changed: 53 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
import './App.css';
2-
import { Page, Button, Drawer } from '@patternfly/react-core';
2+
import {
3+
Page,
4+
Button,
5+
Drawer,
6+
DrawerContent,
7+
DrawerPanelContent,
8+
DrawerHead,
9+
DrawerActions,
10+
DrawerCloseButton,
11+
DrawerPanelDescription,
12+
DrawerPanelBody,
13+
DrawerContentBody,
14+
} from '@patternfly/react-core';
315
import {
416
LoadingBox,
517
QuickStartContainer,
@@ -95,21 +107,49 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
95107
};
96108
const onModalCancel = () => setModalOpen(false);
97109

110+
const [otherDrawerOpen, setOtherDrawerOpen] = React.useState(false);
111+
112+
const otherDrawerPanelContent = (
113+
<DrawerPanelContent>
114+
<DrawerHead>
115+
<span tabIndex={otherDrawerOpen ? 0 : -1}>Drawer panel header</span>
116+
<DrawerActions>
117+
<DrawerCloseButton onClick={() => setOtherDrawerOpen(false)} />
118+
</DrawerActions>
119+
</DrawerHead>
120+
<DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
121+
<DrawerPanelBody>Drawer panel body</DrawerPanelBody>
122+
</DrawerPanelContent>
123+
);
124+
98125
return (
99126
<React.Suspense fallback={<LoadingBox />}>
100127
<QuickStartContainer {...containerProps} isManagedDrawer={false}>
101-
<Drawer isExpanded={activeQuickStartID !== ''} isInline>
102-
<QuickStartDrawerContent handleDrawerClose={handleClose}>
103-
<Page masthead={AppHeader} sidebar={AppSidebar} isManagedSidebar>
104-
<Button
105-
variant="secondary"
106-
onClick={() => toggleQuickStart('getting-started-with-quick-starts')}
107-
>
108-
Getting started with quick starts
109-
</Button>
110-
{children}
111-
</Page>
112-
</QuickStartDrawerContent>
128+
<Drawer isExpanded={activeQuickStartID !== '' || otherDrawerOpen} isInline>
129+
<DrawerContent
130+
panelContent={
131+
activeQuickStartID !== '' ? (
132+
<QuickStartDrawerContent handleDrawerClose={handleClose} />
133+
) : (
134+
otherDrawerPanelContent
135+
)
136+
}
137+
>
138+
<DrawerContentBody>
139+
<Page masthead={AppHeader} sidebar={AppSidebar} isManagedSidebar>
140+
<Button
141+
variant="secondary"
142+
onClick={() => toggleQuickStart('getting-started-with-quick-starts')}
143+
>
144+
Getting started with quick starts
145+
</Button>
146+
<Button variant="secondary" onClick={() => setOtherDrawerOpen(true)}>
147+
Open a different drawer
148+
</Button>
149+
{children}
150+
</Page>
151+
</DrawerContentBody>
152+
</DrawerContent>
113153
</Drawer>
114154
<QuickStartCloseModal
115155
isOpen={modalOpen}

‎packages/module/patternfly-docs/content/extensions/quick-starts/examples/WithCustomDrawer.jsx‎

Lines changed: 55 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,18 @@ import {
88
QuickStartCloseModal,
99
QuickStartStatus,
1010
} from '@patternfly/quickstarts';
11-
import { Drawer } from '@patternfly/react-core';
11+
import {
12+
Drawer,
13+
DrawerContent,
14+
DrawerPanelContent,
15+
DrawerHead,
16+
DrawerActions,
17+
DrawerCloseButton,
18+
DrawerPanelDescription,
19+
DrawerPanelBody,
20+
DrawerContentBody,
21+
Button,
22+
} from '@patternfly/react-core';
1223
import { quickStarts as exampleQuickStarts } from './example-data';
1324

1425
export const App = ({ showCardFooters }) => {
@@ -62,8 +73,6 @@ export const App = ({ showCardFooters }) => {
6273
},
6374
};
6475

65-
// The above code is identical to the current quickstarts setup
66-
// Below is additional handling to support a custom drawer with an in-progress close confirm modal
6776
const [modalOpen, setModalOpen] = React.useState(false);
6877
const onClose = () => setActiveQuickStartID('');
6978
const handleClose = (activeQuickStartStatus) => {
@@ -79,18 +88,52 @@ export const App = ({ showCardFooters }) => {
7988
};
8089
const onModalCancel = () => setModalOpen(false);
8190

91+
const [otherDrawerOpen, setOtherDrawerOpen] = React.useState(false);
92+
93+
const otherDrawerPanelContent = (
94+
<DrawerPanelContent>
95+
<DrawerHead>
96+
<span tabIndex={otherDrawerOpen ? 0 : -1}>Drawer panel header</span>
97+
<DrawerActions>
98+
<DrawerCloseButton onClick={() => setOtherDrawerOpen(false)} />
99+
</DrawerActions>
100+
</DrawerHead>
101+
<DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
102+
<DrawerPanelBody>Drawer panel body</DrawerPanelBody>
103+
</DrawerPanelContent>
104+
);
105+
82106
return (
83107
<React.Suspense fallback={<LoadingBox />}>
84108
<QuickStartContainer {...drawerProps} isManagedDrawer={false}>
85-
<Drawer isExpanded={activeQuickStartID !== ''} isInline>
86-
<QuickStartDrawerContent handleDrawerClose={handleClose}>
87-
<QuickStartCatalogPage
88-
title="Quick starts"
89-
hint={
90-
'Learn how to create, import, and run applications with step-by-step instructions and tasks.'
91-
}
92-
/>
93-
</QuickStartDrawerContent>
109+
<Drawer isExpanded={activeQuickStartID !== '' || otherDrawerOpen} isInline>
110+
<DrawerContent
111+
panelContent={
112+
activeQuickStartID !== '' ? (
113+
<QuickStartDrawerContent handleDrawerClose={handleClose} />
114+
) : (
115+
otherDrawerPanelContent
116+
)
117+
}
118+
>
119+
<DrawerContentBody>
120+
<Button
121+
variant="secondary"
122+
onClick={() => setActiveQuickStartID('explore-pipelines')}
123+
>
124+
Getting started with quick starts
125+
</Button>
126+
<Button variant="secondary" onClick={() => setOtherDrawerOpen(true)}>
127+
Open a different drawer
128+
</Button>
129+
<QuickStartCatalogPage
130+
title="Quick starts"
131+
hint={
132+
'Learn how to create, import, and run applications with step-by-step instructions and tasks.'
133+
}
134+
/>
135+
</DrawerContentBody>
136+
</DrawerContent>
94137
</Drawer>
95138
<QuickStartCloseModal
96139
isOpen={modalOpen}

‎packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ sourceLink: https://github.com/patternfly/patternfly-quickstarts/tree/main/packa
1414
---
1515

1616
import { quickStarts as exampleQuickStarts } from './example-data';
17-
import { LoadingBox, QuickStartContainer, QuickStartCatalogPage, useLocalStorage, } from '@patternfly/quickstarts';
17+
import { LoadingBox, QuickStartContainer, QuickStartCatalogPage, useLocalStorage, QuickStartDrawerContent, QuickStartCloseModal, QuickStartStatus, } from '@patternfly/quickstarts';
1818
import '@patternfly/quickstarts/dist/quickstarts.css';
1919

2020
## Basic quick starts examples
@@ -37,6 +37,6 @@ To view a fullscreen example, click the image below.
3737

3838
Quick starts may be placed into a nonmanaged, custom drawer. To view a fullscreen example, click the image below.
3939

40-
```js file="./Basic.jsx" isFullscreen
40+
```js file="./WithCustomDrawer.jsx" isFullscreen
4141

4242
```

‎packages/module/src/QuickStartDrawer.tsx‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { Drawer } from '@patternfly/react-core';
2+
import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
33
import QuickStartCloseModal from './QuickStartCloseModal';
44
import QuickStartDrawerContent from './QuickStartDrawerContent';
55
import {
@@ -83,17 +83,30 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
8383

8484
const onModalCancel = () => setModalOpen(false);
8585

86+
const fullWidthBodyStyle = fullWidth
87+
? {
88+
style: {
89+
display: activeQuickStartID ? 'none' : 'flex',
90+
},
91+
}
92+
: {};
93+
8694
return (
8795
<>
8896
<Drawer isExpanded={!!activeQuickStartID} isInline {...props}>
89-
<QuickStartDrawerContent
90-
quickStarts={combinedQuickStarts}
91-
handleDrawerClose={handleClose}
92-
appendTo={appendTo}
93-
fullWidth={fullWidth}
97+
<DrawerContent
98+
panelContent={
99+
<QuickStartDrawerContent
100+
quickStarts={combinedQuickStarts}
101+
handleDrawerClose={handleClose}
102+
appendTo={appendTo}
103+
fullWidth={fullWidth}
104+
/>
105+
}
106+
{...fullWidthBodyStyle}
94107
>
95-
{children}
96-
</QuickStartDrawerContent>
108+
<DrawerContentBody>{children}</DrawerContentBody>
109+
</DrawerContent>
97110
</Drawer>
98111
<QuickStartCloseModal
99112
isOpen={modalOpen}

‎packages/module/src/QuickStartDrawerContent.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import * as React from 'react';
2-
import { DrawerContent, DrawerContentBody } from '@patternfly/react-core';
32
import QuickStartPanelContent from './QuickStartPanelContent';
43
import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
54
import { QuickStart } from './utils/quick-start-types';
65

76
export interface QuickStartDrawerContentProps extends React.HTMLProps<HTMLDivElement> {
87
quickStarts?: QuickStart[];
9-
children?: React.ReactNode;
108
appendTo?: HTMLElement | (() => HTMLElement);
119
fullWidth?: boolean;
1210
onCloseInProgress?: any;
@@ -16,7 +14,6 @@ export interface QuickStartDrawerContentProps extends React.HTMLProps<HTMLDivEle
1614

1715
export const QuickStartDrawerContent: React.FC<QuickStartDrawerContentProps> = ({
1816
quickStarts = [],
19-
children,
2017
appendTo,
2118
fullWidth,
2219
handleDrawerClose,
@@ -41,15 +38,7 @@ export const QuickStartDrawerContent: React.FC<QuickStartDrawerContentProps> = (
4138
}
4239
: {};
4340

44-
const fullWidthBodyStyle = fullWidth
45-
? {
46-
style: {
47-
display: activeQuickStartID ? 'none' : 'flex',
48-
},
49-
}
50-
: {};
51-
52-
const panelContent = (
41+
return (
5342
<QuickStartPanelContent
5443
quickStarts={combinedQuickStarts}
5544
handleClose={handleClose}
@@ -60,14 +49,6 @@ export const QuickStartDrawerContent: React.FC<QuickStartDrawerContentProps> = (
6049
{...props}
6150
/>
6251
);
63-
64-
return children ? (
65-
<DrawerContent panelContent={panelContent} {...fullWidthBodyStyle}>
66-
<DrawerContentBody>{children}</DrawerContentBody>
67-
</DrawerContent>
68-
) : (
69-
<div>{panelContent}</div>
70-
);
7152
};
7253

7354
export default QuickStartDrawerContent;

0 commit comments

Comments
 (0)