Skip to content

Commit 27b06ae

Browse files
dominik-petrikjenny-s51
dominik-petrik
authored and
jenny-s51
committed
chore(DashboardHeader) convert to TS
chore(DashboardWrapper) convert to TS chore(Table) convert demos to TS
1 parent 8c784c2 commit 27b06ae

File tree

12 files changed

+561
-112
lines changed

12 files changed

+561
-112
lines changed

‎packages/react-core/src/demos/examples/DashboardWrapper.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React, { useState } from 'react';
2+
import {
3+
Breadcrumb,
4+
BreadcrumbItem,
5+
Nav,
6+
NavItem,
7+
NavList,
8+
Page,
9+
PageSection,
10+
PageSidebar,
11+
PageSidebarBody,
12+
SkipToContent,
13+
Text,
14+
TextContent
15+
} from '@patternfly/react-core';
16+
import DashboardHeader from '@patternfly/react-core/src/demos/examples/Page/DashboardHeader';
17+
18+
interface DashboardWrapperProps {
19+
children: React.ReactNode;
20+
mainContainerId?: string;
21+
breadcrumb?: React.ReactNode;
22+
header?: React.ReactNode;
23+
sidebar?: React.ReactNode;
24+
sidebarNavOpen?: boolean;
25+
onPageResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>, resizeObject: any) => void;
26+
hasNoBreadcrumb?: boolean;
27+
notificationDrawer?: React.ReactNode;
28+
isNotificationDrawerExpanded?: boolean;
29+
hasPageTemplateTitle?: boolean;
30+
}
31+
32+
const DashboardBreadcrumb = (
33+
<Breadcrumb>
34+
<BreadcrumbItem>Section home</BreadcrumbItem>
35+
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
36+
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
37+
<BreadcrumbItem to="#" isActive>
38+
Section landing
39+
</BreadcrumbItem>
40+
</Breadcrumb>
41+
);
42+
43+
const PageTemplateTitle = (
44+
<PageSection variant="light">
45+
<TextContent>
46+
<Text component="h1">Main title</Text>
47+
<Text component="p">This is a full page demo.</Text>
48+
</TextContent>
49+
</PageSection>
50+
);
51+
52+
const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
53+
children,
54+
mainContainerId,
55+
breadcrumb,
56+
header,
57+
sidebar,
58+
sidebarNavOpen,
59+
onPageResize,
60+
hasNoBreadcrumb,
61+
notificationDrawer,
62+
isNotificationDrawerExpanded,
63+
hasPageTemplateTitle,
64+
...pageProps
65+
}) => {
66+
const [activeItem, setActiveItem] = useState(1);
67+
68+
const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, result: any) => {
69+
setActiveItem(result.itemId);
70+
};
71+
72+
let renderedBreadcrumb;
73+
if (!hasNoBreadcrumb) {
74+
renderedBreadcrumb = breadcrumb !== undefined ? breadcrumb : DashboardBreadcrumb;
75+
}
76+
77+
const PageNav = (
78+
<Nav onSelect={onNavSelect} aria-label="Nav">
79+
<NavList>
80+
<NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
81+
System panel
82+
</NavItem>
83+
<NavItem itemId={1} isActive={activeItem === 1} to="#policy">
84+
Policy
85+
</NavItem>
86+
<NavItem itemId={2} isActive={activeItem === 2} to="#auth">
87+
Authentication
88+
</NavItem>
89+
<NavItem itemId={3} isActive={activeItem === 3} to="#network">
90+
Network services
91+
</NavItem>
92+
<NavItem itemId={4} isActive={activeItem === 4} to="#server">
93+
Server
94+
</NavItem>
95+
</NavList>
96+
</Nav>
97+
);
98+
99+
const _sidebar = (
100+
<PageSidebar isSidebarOpen={sidebarNavOpen || false}>
101+
<PageSidebarBody>{PageNav}</PageSidebarBody>
102+
</PageSidebar>
103+
);
104+
105+
const PageSkipToContent = (
106+
<SkipToContent href={`#${mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}`}>
107+
Skip to content
108+
</SkipToContent>
109+
);
110+
111+
return (
112+
<Page
113+
header={header !== undefined ? header : <DashboardHeader />}
114+
sidebar={sidebar !== undefined ? sidebar : _sidebar}
115+
isManagedSidebar
116+
skipToContent={PageSkipToContent}
117+
breadcrumb={renderedBreadcrumb}
118+
mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
119+
notificationDrawer={notificationDrawer}
120+
isNotificationDrawerExpanded={isNotificationDrawerExpanded}
121+
{...(typeof onPageResize === 'function' && {
122+
onPageResize: (event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>, resizeObject: any) =>
123+
onPageResize(event, resizeObject)
124+
})}
125+
{...pageProps}
126+
>
127+
{hasPageTemplateTitle && PageTemplateTitle}
128+
{children}
129+
</Page>
130+
);
131+
};
132+
133+
export default DashboardWrapper;

‎packages/react-core/src/demos/examples/Page/DashboardHeader.tsx‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
import React, { useState } from 'react';
2+
import {
3+
Avatar,
4+
Brand,
5+
Button,
6+
ButtonVariant,
7+
Divider,
8+
Dropdown,
9+
DropdownGroup,
10+
DropdownItem,
11+
DropdownList,
12+
Masthead,
13+
MastheadToggle,
14+
MastheadMain,
15+
MastheadBrand,
16+
MastheadContent,
17+
MenuToggle,
18+
Toolbar,
19+
ToolbarContent,
20+
ToolbarGroup,
21+
ToolbarItem,
22+
PageToggleButton
23+
} from '@patternfly/react-core';
24+
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
25+
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
26+
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
27+
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
28+
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
29+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
30+
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
31+
import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
32+
33+
interface DashboardHeaderProps {
34+
notificationBadge?: React.ReactNode;
35+
}
36+
37+
const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBadge }) => {
38+
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
39+
const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
40+
const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
41+
42+
const kebabDropdownItems = (
43+
<>
44+
<DropdownItem>
45+
<CogIcon /> Settings
46+
</DropdownItem>
47+
<DropdownItem>
48+
<HelpIcon /> Help
49+
</DropdownItem>
50+
</>
51+
);
52+
53+
const userDropdownItems = (
54+
<>
55+
<DropdownItem key="group 2 profile">My profile</DropdownItem>
56+
<DropdownItem key="group 2 user">User management</DropdownItem>
57+
<DropdownItem key="group 2 logout">Logout</DropdownItem>
58+
</>
59+
);
60+
61+
const onDropdownToggle = () => {
62+
setIsDropdownOpen((prevIsDropdownOpen) => !prevIsDropdownOpen);
63+
};
64+
65+
const onDropdownSelect = () => {
66+
setIsDropdownOpen(false);
67+
};
68+
69+
const onKebabDropdownToggle = () => {
70+
setIsKebabDropdownOpen((prevIsKebabDropdownOpen) => !prevIsKebabDropdownOpen);
71+
};
72+
73+
const onKebabDropdownSelect = () => {
74+
setIsKebabDropdownOpen(false);
75+
};
76+
77+
const onFullKebabToggle = () => {
78+
setIsFullKebabDropdownOpen((prevIsFullKebabDropdownOpen) => !prevIsFullKebabDropdownOpen);
79+
};
80+
81+
const onFullKebabSelect = () => {
82+
setIsFullKebabDropdownOpen(false);
83+
};
84+
85+
return (
86+
<Masthead>
87+
<MastheadToggle>
88+
<PageToggleButton variant="plain" aria-label="Global navigation">
89+
<BarsIcon />
90+
</PageToggleButton>
91+
</MastheadToggle>
92+
<MastheadMain>
93+
<MastheadBrand>
94+
<Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
95+
</MastheadBrand>
96+
</MastheadMain>
97+
<MastheadContent>
98+
<Toolbar id="toolbar" isFullHeight isStatic>
99+
<ToolbarContent>
100+
<ToolbarGroup
101+
variant="icon-button-group"
102+
align={{ default: 'alignRight' }}
103+
spacer={{ default: 'spacerNone', md: 'spacerMd' }}
104+
>
105+
{notificationBadge ? (
106+
notificationBadge
107+
) : (
108+
<ToolbarItem>
109+
<Button
110+
aria-label="Notifications"
111+
variant={ButtonVariant.plain}
112+
icon={<BellIcon />}
113+
onClick={() => {}}
114+
/>
115+
</ToolbarItem>
116+
)}
117+
<ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
118+
<ToolbarItem>
119+
<Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
120+
</ToolbarItem>
121+
<ToolbarItem>
122+
<Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
123+
</ToolbarItem>
124+
</ToolbarGroup>
125+
<ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
126+
<Dropdown
127+
isOpen={isKebabDropdownOpen}
128+
onSelect={onKebabDropdownSelect}
129+
onOpenChange={setIsKebabDropdownOpen}
130+
popperProps={{ position: 'right' }}
131+
toggle={(toggleRef: React.RefObject<any>) => (
132+
<MenuToggle
133+
ref={toggleRef}
134+
isExpanded={isKebabDropdownOpen}
135+
onClick={onKebabDropdownToggle}
136+
variant="plain"
137+
aria-label="Settings and help"
138+
>
139+
<EllipsisVIcon aria-hidden="true" />
140+
</MenuToggle>
141+
)}
142+
>
143+
<DropdownList>{kebabDropdownItems}</DropdownList>
144+
</Dropdown>
145+
</ToolbarItem>
146+
<ToolbarItem visibility={{ md: 'hidden' }}>
147+
<Dropdown
148+
isOpen={isFullKebabDropdownOpen}
149+
onSelect={onFullKebabSelect}
150+
onOpenChange={setIsFullKebabDropdownOpen}
151+
popperProps={{ position: 'right' }}
152+
toggle={(toggleRef: React.RefObject<any>) => (
153+
<MenuToggle
154+
ref={toggleRef}
155+
isExpanded={isFullKebabDropdownOpen}
156+
onClick={onFullKebabToggle}
157+
variant="plain"
158+
aria-label="Toolbar menu"
159+
>
160+
<EllipsisVIcon aria-hidden="true" />
161+
</MenuToggle>
162+
)}
163+
>
164+
<DropdownGroup key="group 2" aria-label="User actions">
165+
<DropdownList>{userDropdownItems}</DropdownList>
166+
</DropdownGroup>
167+
<Divider />
168+
<DropdownList>{kebabDropdownItems}</DropdownList>
169+
</Dropdown>
170+
</ToolbarItem>
171+
</ToolbarGroup>
172+
<ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
173+
<Dropdown
174+
isOpen={isDropdownOpen}
175+
onSelect={onDropdownSelect}
176+
onOpenChange={setIsDropdownOpen}
177+
popperProps={{ position: 'right' }}
178+
toggle={(toggleRef: React.RefObject<any>) => (
179+
<MenuToggle
180+
ref={toggleRef}
181+
isExpanded={isDropdownOpen}
182+
onClick={onDropdownToggle}
183+
icon={<Avatar src={imgAvatar} alt="" />}
184+
isFullHeight
185+
>
186+
Ned Username
187+
</MenuToggle>
188+
)}
189+
>
190+
<DropdownList>{userDropdownItems}</DropdownList>
191+
</Dropdown>
192+
</ToolbarItem>
193+
</ToolbarContent>
194+
</Toolbar>
195+
</MastheadContent>
196+
</Masthead>
197+
);
198+
};
199+
200+
export default DashboardHeader;

0 commit comments

Comments
 (0)