Skip to content

Commit 1194a7e

Browse files
adamviktoraadamviktora
authored
chore(Nav): convert demos to TS (#9487)
* chore(Nav): convert demos to TS * fix(Nav): omit <boolean> in useState * fix(Nav): subnav aria-label * chore(Nav): rename components * chore(Nav): add preventDefault prop to NavItem components in demos * refactor(Nav examples): simplify Array.apply, renaming * fix(Nav demo): update JS shortcuts to TS warnings should disappear once issue #9544 is closed * docs(Nav): fix Flyout nav demo: hide sidebar bug * chore(Nav demo): update DashboardHeader/Wrapper imports * chore(Nav demo): use JS shortcut, since docs build still failing on ts * refactor(Nav demo): get rid of Array.apply
1 parent b37416a commit 1194a7e

File tree

12 files changed

+1748
-1673
lines changed

12 files changed

+1748
-1673
lines changed

‎packages/react-core/src/demos/Nav.md‎

Lines changed: 10 additions & 1673 deletions
Large diffs are not rendered by default.

‎packages/react-core/src/demos/examples/Nav/NavDefault.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React from 'react';
2+
import {
3+
Card,
4+
CardBody,
5+
Gallery,
6+
GalleryItem,
7+
Nav,
8+
NavItem,
9+
NavList,
10+
Page,
11+
PageSection,
12+
PageSectionVariants,
13+
PageSidebar,
14+
PageSidebarBody,
15+
SkipToContent,
16+
TextContent,
17+
Text
18+
} from '@patternfly/react-core';
19+
import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
20+
import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
21+
22+
export const NavDefault: React.FunctionComponent = () => {
23+
const [activeItem, setActiveItem] = React.useState<number | string>(0);
24+
25+
const onNavSelect = (
26+
_event: React.FormEvent<HTMLInputElement>,
27+
selectedItem: {
28+
groupId: number | string;
29+
itemId: number | string;
30+
to: string;
31+
}
32+
) => setActiveItem(selectedItem.itemId);
33+
34+
const PageNav = (
35+
<Nav onSelect={onNavSelect} aria-label="Nav">
36+
<NavList>
37+
{/* Preventing default click behavior on each NavItem for demo purposes only */}
38+
<NavItem preventDefault itemId={0} isActive={activeItem === 0} to="#">
39+
System Panel
40+
</NavItem>
41+
<NavItem preventDefault itemId={1} isActive={activeItem === 1} to="#">
42+
Policy
43+
</NavItem>
44+
<NavItem preventDefault itemId={2} isActive={activeItem === 2} to="#">
45+
Authentication
46+
</NavItem>
47+
<NavItem preventDefault itemId={3} isActive={activeItem === 3} to="#">
48+
Network Services
49+
</NavItem>
50+
<NavItem preventDefault itemId={4} isActive={activeItem === 4} to="#">
51+
Server
52+
</NavItem>
53+
</NavList>
54+
</Nav>
55+
);
56+
57+
const Sidebar = (
58+
<PageSidebar>
59+
<PageSidebarBody>{PageNav}</PageSidebarBody>
60+
</PageSidebar>
61+
);
62+
const pageId = 'main-content-page-layout-default-nav';
63+
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
64+
65+
return (
66+
<>
67+
<Page
68+
header={<DashboardHeader />}
69+
sidebar={Sidebar}
70+
isManagedSidebar
71+
skipToContent={PageSkipToContent}
72+
breadcrumb={DashboardBreadcrumb}
73+
mainContainerId={pageId}
74+
>
75+
<PageSection variant={PageSectionVariants.light}>
76+
<TextContent>
77+
<Text component="h1">Main title</Text>
78+
<Text component="p">
79+
Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
80+
of its relative line height of 1.5.
81+
</Text>
82+
</TextContent>
83+
</PageSection>
84+
<PageSection>
85+
<Gallery hasGutter>
86+
{Array.from({ length: 10 }, (_value: any, index: React.Key) => (
87+
<GalleryItem key={index}>
88+
<Card>
89+
<CardBody>This is a card</CardBody>
90+
</Card>
91+
</GalleryItem>
92+
))}
93+
</Gallery>
94+
</PageSection>
95+
</Page>
96+
</>
97+
);
98+
};

‎packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
PageSection
1414
} from '@patternfly/react-core';
1515
import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
16+
1617
interface MenuHeights {
1718
[menuId: string]: number;
1819
}
@@ -26,6 +27,7 @@ function getNavLayer(menuId: string): number {
2627
case 'subMenu-2':
2728
return 3;
2829
}
30+
return 1;
2931
}
3032

3133
const subMenuTwo: JSX.Element = (

‎packages/react-core/src/demos/examples/Nav/NavExpandable.tsx‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import React from 'react';
2+
import {
3+
Card,
4+
CardBody,
5+
Gallery,
6+
GalleryItem,
7+
Nav,
8+
NavExpandable,
9+
NavItem,
10+
NavList,
11+
Page,
12+
PageSection,
13+
PageSectionVariants,
14+
PageSidebar,
15+
PageSidebarBody,
16+
SkipToContent,
17+
TextContent,
18+
Text
19+
} from '@patternfly/react-core';
20+
import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
21+
import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
22+
23+
export const NavExpandableDemo: React.FunctionComponent = () => {
24+
const [activeGroup, setActiveGroup] = React.useState<string | number>('grp-1');
25+
const [activeItem, setActiveItem] = React.useState<string | number>('grp-1_itm-1');
26+
27+
const onNavSelect = (
28+
_event: React.FormEvent<HTMLInputElement>,
29+
selectedItem: {
30+
groupId: number | string;
31+
itemId: number | string;
32+
to: string;
33+
}
34+
) => {
35+
setActiveItem(selectedItem.itemId);
36+
setActiveGroup(selectedItem.groupId);
37+
};
38+
39+
const PageNav = (
40+
<Nav onSelect={onNavSelect} aria-label="Nav">
41+
<NavList>
42+
<NavExpandable title="System Panel" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
43+
{/* Preventing default click behavior on each NavItem for demo purposes only */}
44+
<NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'} to="#">
45+
Overview
46+
</NavItem>
47+
<NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'} to="#">
48+
Resource usage
49+
</NavItem>
50+
<NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'} to="#">
51+
Hypervisors
52+
</NavItem>
53+
<NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-4" isActive={activeItem === 'grp-1_itm-4'} to="#">
54+
Instances
55+
</NavItem>
56+
<NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-5" isActive={activeItem === 'grp-1_itm-5'} to="#">
57+
Volumes
58+
</NavItem>
59+
<NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-6" isActive={activeItem === 'grp-1_itm-6'} to="#">
60+
Network
61+
</NavItem>
62+
</NavExpandable>
63+
<NavExpandable title="Policy" groupId="grp-2" isActive={activeGroup === 'grp-2'}>
64+
<NavItem preventDefault groupId="grp-2" itemId="grp-2_itm-1" isActive={activeItem === 'grp-2_itm-1'} to="#">
65+
Subnav link 1
66+
</NavItem>
67+
<NavItem preventDefault groupId="grp-2" itemId="grp-2_itm-2" isActive={activeItem === 'grp-2_itm-2'} to="#">
68+
Subnav link 2
69+
</NavItem>
70+
</NavExpandable>
71+
<NavExpandable title="Authentication" groupId="grp-3" isActive={activeGroup === 'grp-3'}>
72+
<NavItem preventDefault groupId="grp-3" itemId="grp-3_itm-1" isActive={activeItem === 'grp-3_itm-1'} to="#">
73+
Subnav link 1
74+
</NavItem>
75+
<NavItem preventDefault groupId="grp-3" itemId="grp-3_itm-2" isActive={activeItem === 'grp-3_itm-2'} to="#">
76+
Subnav link 2
77+
</NavItem>
78+
</NavExpandable>
79+
</NavList>
80+
</Nav>
81+
);
82+
83+
const Sidebar = (
84+
<PageSidebar>
85+
<PageSidebarBody>{PageNav}</PageSidebarBody>
86+
</PageSidebar>
87+
);
88+
const pageId = 'main-content-page-layout-expandable-nav';
89+
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
90+
91+
return (
92+
<React.Fragment>
93+
<Page
94+
header={<DashboardHeader />}
95+
sidebar={Sidebar}
96+
isManagedSidebar
97+
skipToContent={PageSkipToContent}
98+
breadcrumb={DashboardBreadcrumb}
99+
mainContainerId={pageId}
100+
>
101+
<PageSection variant={PageSectionVariants.light}>
102+
<TextContent>
103+
<Text component="h1">Main title</Text>
104+
<Text component="p">
105+
Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
106+
of its relative line height of 1.5.
107+
</Text>
108+
</TextContent>
109+
</PageSection>
110+
<PageSection>
111+
<Gallery hasGutter>
112+
{Array.from({ length: 10 }, (_value: any, index: React.Key) => (
113+
<GalleryItem key={index}>
114+
<Card>
115+
<CardBody>This is a card</CardBody>
116+
</Card>
117+
</GalleryItem>
118+
))}
119+
</Gallery>
120+
</PageSection>
121+
</Page>
122+
</React.Fragment>
123+
);
124+
};

0 commit comments

Comments
 (0)