@patternfly/react-core 5.0.0-alpha.52 → 5.0.0-alpha.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dist/esm/components/Page/Page.d.ts +2 -2
- package/dist/esm/components/Page/Page.d.ts.map +1 -1
- package/dist/esm/components/Page/index.d.ts +0 -4
- package/dist/esm/components/Page/index.d.ts.map +1 -1
- package/dist/esm/components/Page/index.js +0 -4
- package/dist/esm/components/Page/index.js.map +1 -1
- package/dist/esm/deprecated/components/PageHeader/PageHeader.d.ts.map +1 -0
- package/dist/esm/{components/Page → deprecated/components/PageHeader}/PageHeader.js +2 -2
- package/dist/esm/deprecated/components/PageHeader/PageHeader.js.map +1 -0
- package/dist/esm/deprecated/components/PageHeader/PageHeaderTools.d.ts.map +1 -0
- package/dist/esm/deprecated/components/PageHeader/PageHeaderTools.js.map +1 -0
- package/dist/esm/deprecated/components/PageHeader/PageHeaderToolsGroup.d.ts.map +1 -0
- package/dist/esm/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsGroup.js +2 -2
- package/dist/esm/deprecated/components/PageHeader/PageHeaderToolsGroup.js.map +1 -0
- package/dist/esm/deprecated/components/PageHeader/PageHeaderToolsItem.d.ts.map +1 -0
- package/dist/esm/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsItem.js +2 -2
- package/dist/esm/deprecated/components/PageHeader/PageHeaderToolsItem.js.map +1 -0
- package/dist/esm/deprecated/components/PageHeader/index.d.ts +5 -0
- package/dist/esm/deprecated/components/PageHeader/index.d.ts.map +1 -0
- package/dist/esm/deprecated/components/PageHeader/index.js +5 -0
- package/dist/esm/deprecated/components/PageHeader/index.js.map +1 -0
- package/dist/esm/deprecated/components/index.d.ts +1 -0
- package/dist/esm/deprecated/components/index.d.ts.map +1 -1
- package/dist/esm/deprecated/components/index.js +1 -0
- package/dist/esm/deprecated/components/index.js.map +1 -1
- package/dist/js/components/Page/Page.d.ts +2 -2
- package/dist/js/components/Page/Page.d.ts.map +1 -1
- package/dist/js/components/Page/index.d.ts +0 -4
- package/dist/js/components/Page/index.d.ts.map +1 -1
- package/dist/js/components/Page/index.js +0 -4
- package/dist/js/components/Page/index.js.map +1 -1
- package/dist/js/deprecated/components/PageHeader/PageHeader.d.ts.map +1 -0
- package/dist/js/{components/Page → deprecated/components/PageHeader}/PageHeader.js +2 -2
- package/dist/js/deprecated/components/PageHeader/PageHeader.js.map +1 -0
- package/dist/js/deprecated/components/PageHeader/PageHeaderTools.d.ts.map +1 -0
- package/dist/js/deprecated/components/PageHeader/PageHeaderTools.js.map +1 -0
- package/dist/js/deprecated/components/PageHeader/PageHeaderToolsGroup.d.ts.map +1 -0
- package/dist/js/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsGroup.js +2 -2
- package/dist/js/deprecated/components/PageHeader/PageHeaderToolsGroup.js.map +1 -0
- package/dist/js/deprecated/components/PageHeader/PageHeaderToolsItem.d.ts.map +1 -0
- package/dist/js/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsItem.js +2 -2
- package/dist/js/deprecated/components/PageHeader/PageHeaderToolsItem.js.map +1 -0
- package/dist/js/deprecated/components/PageHeader/index.d.ts +5 -0
- package/dist/js/deprecated/components/PageHeader/index.d.ts.map +1 -0
- package/dist/js/deprecated/components/PageHeader/index.js +8 -0
- package/dist/js/deprecated/components/PageHeader/index.js.map +1 -0
- package/dist/js/deprecated/components/index.d.ts +1 -0
- package/dist/js/deprecated/components/index.d.ts.map +1 -1
- package/dist/js/deprecated/components/index.js +1 -0
- package/dist/js/deprecated/components/index.js.map +1 -1
- package/dist/umd/react-core.min.js +1 -1
- package/package.json +2 -2
- package/src/components/Nav/examples/Nav.md +0 -5
- package/src/components/Page/Page.tsx +2 -2
- package/src/components/Page/__tests__/Page.test.tsx +1 -1
- package/src/components/Page/examples/Page.md +6 -13
- package/src/components/Page/index.ts +0 -4
- package/src/demos/CardDemos.md +4 -4
- package/src/demos/Filters/FilterDemos.md +1 -1
- package/src/demos/Filters/examples/FilterAttributeSearch.tsx +3 -3
- package/src/demos/Filters/examples/FilterCheckboxSelect.tsx +3 -3
- package/src/demos/Filters/examples/FilterFaceted.tsx +3 -3
- package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx +3 -3
- package/src/demos/Filters/examples/FilterSameSelectGroup.tsx +3 -3
- package/src/demos/Filters/examples/FilterSearchInput.tsx +3 -3
- package/src/demos/Filters/examples/FilterSingleSelect.tsx +3 -3
- package/src/demos/Nav.md +37 -30
- package/src/demos/Page.md +0 -8
- package/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx +0 -267
- package/src/demos/examples/Tabs/TabsAndTable.tsx +5 -5
- package/src/{components/Page → deprecated/components/PageHeader}/PageHeader.tsx +2 -2
- package/src/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsGroup.tsx +2 -2
- package/src/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsItem.tsx +2 -2
- package/src/deprecated/components/PageHeader/examples/PageHeader.md +15 -0
- package/src/{components/Page → deprecated/components/PageHeader}/examples/PageVerticalNavUsingPageHeaderComponent.tsx +4 -2
- package/src/deprecated/components/PageHeader/index.ts +4 -0
- package/src/{components/Page/__tests__ → deprecated/components/PageHeader/tests}/PageHeader.test.tsx +0 -2
- package/src/{components/Page/__tests__/Generated → deprecated/components/PageHeader/tests}/PageHeaderTools.test.tsx +2 -2
- package/src/{components/Page/__tests__/Generated → deprecated/components/PageHeader/tests}/PageHeaderToolsGroup.test.tsx +2 -2
- package/src/{components/Page/__tests__/Generated → deprecated/components/PageHeader/tests}/PageHeaderToolsItem.test.tsx +2 -2
- package/src/{components/Page/__tests__/Generated → deprecated/components/PageHeader/tests}/__snapshots__/PageHeaderToolsItem.test.tsx.snap +1 -0
- package/src/deprecated/components/index.ts +1 -0
- package/dist/esm/components/Page/PageHeader.d.ts.map +0 -1
- package/dist/esm/components/Page/PageHeader.js.map +0 -1
- package/dist/esm/components/Page/PageHeaderTools.d.ts.map +0 -1
- package/dist/esm/components/Page/PageHeaderTools.js.map +0 -1
- package/dist/esm/components/Page/PageHeaderToolsGroup.d.ts.map +0 -1
- package/dist/esm/components/Page/PageHeaderToolsGroup.js.map +0 -1
- package/dist/esm/components/Page/PageHeaderToolsItem.d.ts.map +0 -1
- package/dist/esm/components/Page/PageHeaderToolsItem.js.map +0 -1
- package/dist/js/components/Page/PageHeader.d.ts.map +0 -1
- package/dist/js/components/Page/PageHeader.js.map +0 -1
- package/dist/js/components/Page/PageHeaderTools.d.ts.map +0 -1
- package/dist/js/components/Page/PageHeaderTools.js.map +0 -1
- package/dist/js/components/Page/PageHeaderToolsGroup.d.ts.map +0 -1
- package/dist/js/components/Page/PageHeaderToolsGroup.js.map +0 -1
- package/dist/js/components/Page/PageHeaderToolsItem.d.ts.map +0 -1
- package/dist/js/components/Page/PageHeaderToolsItem.js.map +0 -1
- package/src/components/Nav/examples/NavHorizontalPageHeader.tsx +0 -34
- /package/dist/esm/{components/Page → deprecated/components/PageHeader}/PageHeader.d.ts +0 -0
- /package/dist/esm/{components/Page → deprecated/components/PageHeader}/PageHeaderTools.d.ts +0 -0
- /package/dist/esm/{components/Page → deprecated/components/PageHeader}/PageHeaderTools.js +0 -0
- /package/dist/esm/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsGroup.d.ts +0 -0
- /package/dist/esm/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsItem.d.ts +0 -0
- /package/dist/js/{components/Page → deprecated/components/PageHeader}/PageHeader.d.ts +0 -0
- /package/dist/js/{components/Page → deprecated/components/PageHeader}/PageHeaderTools.d.ts +0 -0
- /package/dist/js/{components/Page → deprecated/components/PageHeader}/PageHeaderTools.js +0 -0
- /package/dist/js/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsGroup.d.ts +0 -0
- /package/dist/js/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsItem.d.ts +0 -0
- /package/src/{components/Page → deprecated/components/PageHeader}/PageHeaderTools.tsx +0 -0
- /package/src/{components/Page/__tests__ → deprecated/components/PageHeader/tests}/__snapshots__/PageHeader.test.tsx.snap +0 -0
- /package/src/{components/Page/__tests__/Generated → deprecated/components/PageHeader/tests}/__snapshots__/PageHeaderTools.test.tsx.snap +0 -0
- /package/src/{components/Page/__tests__/Generated → deprecated/components/PageHeader/tests}/__snapshots__/PageHeaderToolsGroup.test.tsx.snap +0 -0
|
@@ -1,267 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
Avatar,
|
|
4
|
-
Brand,
|
|
5
|
-
Breadcrumb,
|
|
6
|
-
BreadcrumbItem,
|
|
7
|
-
Button,
|
|
8
|
-
ButtonVariant,
|
|
9
|
-
Card,
|
|
10
|
-
CardBody,
|
|
11
|
-
Divider,
|
|
12
|
-
Gallery,
|
|
13
|
-
GalleryItem,
|
|
14
|
-
Nav,
|
|
15
|
-
NavItem,
|
|
16
|
-
NavList,
|
|
17
|
-
Page,
|
|
18
|
-
PageHeader,
|
|
19
|
-
PageHeaderTools,
|
|
20
|
-
PageHeaderToolsGroup,
|
|
21
|
-
PageHeaderToolsItem,
|
|
22
|
-
PageSection,
|
|
23
|
-
PageSectionVariants,
|
|
24
|
-
PageSidebar,
|
|
25
|
-
SkipToContent,
|
|
26
|
-
Text,
|
|
27
|
-
TextContent
|
|
28
|
-
} from '@patternfly/react-core';
|
|
29
|
-
import {
|
|
30
|
-
Dropdown as DropdownDeprecated,
|
|
31
|
-
DropdownGroup as DropdownGroupDeprecated,
|
|
32
|
-
DropdownItem as DropdownItemDeprecated,
|
|
33
|
-
DropdownToggle,
|
|
34
|
-
KebabToggle
|
|
35
|
-
} from '@patternfly/react-core/deprecated';
|
|
36
|
-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
|
|
37
|
-
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
|
|
38
|
-
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
|
|
39
|
-
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
|
|
40
|
-
import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
|
|
41
|
-
|
|
42
|
-
interface NavOnSelectProps {
|
|
43
|
-
groupId: number | string;
|
|
44
|
-
itemId: number | string;
|
|
45
|
-
to: string;
|
|
46
|
-
event: React.FormEvent<HTMLInputElement>;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = () => {
|
|
50
|
-
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
|
|
51
|
-
const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
|
|
52
|
-
const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
|
|
53
|
-
const [activeItem, setActiveItem] = React.useState(1);
|
|
54
|
-
|
|
55
|
-
const onNavSelect = (selectedItem: NavOnSelectProps) => {
|
|
56
|
-
typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
const onDropdownToggle = (_event: any, isOpen: boolean) => {
|
|
60
|
-
setIsDropdownOpen(isOpen);
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
const onDropdownSelect = () => {
|
|
64
|
-
setIsDropdownOpen(!isDropdownOpen);
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
|
|
68
|
-
setIsKebabDropdownOpen(isOpen);
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
const onKebabDropdownSelect = () => {
|
|
72
|
-
setIsKebabDropdownOpen(!isKebabDropdownOpen);
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
|
|
76
|
-
setIsFullKebabDropdownOpen(isOpen);
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
const onFullKebabDropdownSelect = () => {
|
|
80
|
-
setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
const dashboardBreadcrumb = (
|
|
84
|
-
<Breadcrumb>
|
|
85
|
-
<BreadcrumbItem>Section home</BreadcrumbItem>
|
|
86
|
-
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
|
|
87
|
-
<BreadcrumbItem to="#">Section title</BreadcrumbItem>
|
|
88
|
-
<BreadcrumbItem to="#" isActive>
|
|
89
|
-
Section landing
|
|
90
|
-
</BreadcrumbItem>
|
|
91
|
-
</Breadcrumb>
|
|
92
|
-
);
|
|
93
|
-
|
|
94
|
-
const kebabDropdownItems = [
|
|
95
|
-
<DropdownItemDeprecated key="settings">
|
|
96
|
-
<CogIcon /> Settings
|
|
97
|
-
</DropdownItemDeprecated>,
|
|
98
|
-
<DropdownItemDeprecated key="help">
|
|
99
|
-
<HelpIcon /> Help
|
|
100
|
-
</DropdownItemDeprecated>
|
|
101
|
-
];
|
|
102
|
-
|
|
103
|
-
const fullKebabDropdownItems = [
|
|
104
|
-
<DropdownGroupDeprecated key="group 2">
|
|
105
|
-
<DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
|
|
106
|
-
<DropdownItemDeprecated key="group 2 user" component="button">
|
|
107
|
-
User management
|
|
108
|
-
</DropdownItemDeprecated>
|
|
109
|
-
<DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
|
|
110
|
-
</DropdownGroupDeprecated>,
|
|
111
|
-
<Divider key="divider" />,
|
|
112
|
-
<DropdownItemDeprecated key="settings">
|
|
113
|
-
<CogIcon /> Settings
|
|
114
|
-
</DropdownItemDeprecated>,
|
|
115
|
-
<DropdownItemDeprecated key="help">
|
|
116
|
-
<HelpIcon /> Help
|
|
117
|
-
</DropdownItemDeprecated>
|
|
118
|
-
];
|
|
119
|
-
|
|
120
|
-
const userDropdownItems = [
|
|
121
|
-
<DropdownGroupDeprecated key="group 2">
|
|
122
|
-
<DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
|
|
123
|
-
<DropdownItemDeprecated key="group 2 user" component="button">
|
|
124
|
-
User management
|
|
125
|
-
</DropdownItemDeprecated>
|
|
126
|
-
<DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
|
|
127
|
-
</DropdownGroupDeprecated>
|
|
128
|
-
];
|
|
129
|
-
|
|
130
|
-
const pageNav = (
|
|
131
|
-
<Nav onSelect={onNavSelect}>
|
|
132
|
-
<NavList>
|
|
133
|
-
<NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
|
|
134
|
-
System panel
|
|
135
|
-
</NavItem>
|
|
136
|
-
<NavItem itemId={1} isActive={activeItem === 1} to="#policy">
|
|
137
|
-
Policy
|
|
138
|
-
</NavItem>
|
|
139
|
-
<NavItem itemId={2} isActive={activeItem === 2} to="#auth">
|
|
140
|
-
Authentication
|
|
141
|
-
</NavItem>
|
|
142
|
-
<NavItem itemId={3} isActive={activeItem === 3} to="#network">
|
|
143
|
-
Network services
|
|
144
|
-
</NavItem>
|
|
145
|
-
<NavItem itemId={4} isActive={activeItem === 4} to="#server">
|
|
146
|
-
Server
|
|
147
|
-
</NavItem>
|
|
148
|
-
</NavList>
|
|
149
|
-
</Nav>
|
|
150
|
-
);
|
|
151
|
-
|
|
152
|
-
const sidebar = <PageSidebar nav={pageNav} />;
|
|
153
|
-
|
|
154
|
-
const mainContainerId = 'main-content';
|
|
155
|
-
|
|
156
|
-
const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
|
|
157
|
-
|
|
158
|
-
const headerTools = (
|
|
159
|
-
<PageHeaderTools>
|
|
160
|
-
<PageHeaderToolsGroup>
|
|
161
|
-
<PageHeaderToolsItem>
|
|
162
|
-
<Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
|
|
163
|
-
</PageHeaderToolsItem>
|
|
164
|
-
<PageHeaderToolsGroup visibility={{ default: 'hidden', lg: 'visible' }}>
|
|
165
|
-
<PageHeaderToolsItem>
|
|
166
|
-
<Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
|
|
167
|
-
</PageHeaderToolsItem>
|
|
168
|
-
<PageHeaderToolsItem>
|
|
169
|
-
<Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
|
|
170
|
-
</PageHeaderToolsItem>
|
|
171
|
-
</PageHeaderToolsGroup>
|
|
172
|
-
<PageHeaderToolsItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
|
|
173
|
-
<DropdownDeprecated
|
|
174
|
-
isPlain
|
|
175
|
-
position="right"
|
|
176
|
-
onSelect={onKebabDropdownSelect}
|
|
177
|
-
toggle={<KebabToggle onToggle={onKebabDropdownToggle} />}
|
|
178
|
-
isOpen={isKebabDropdownOpen}
|
|
179
|
-
dropdownItems={kebabDropdownItems}
|
|
180
|
-
/>
|
|
181
|
-
</PageHeaderToolsItem>
|
|
182
|
-
<PageHeaderToolsItem visibility={{ md: 'hidden' }}>
|
|
183
|
-
<DropdownDeprecated
|
|
184
|
-
isPlain
|
|
185
|
-
position="right"
|
|
186
|
-
onSelect={onFullKebabDropdownSelect}
|
|
187
|
-
toggle={<KebabToggle onToggle={onFullKebabDropdownToggle} />}
|
|
188
|
-
isOpen={isFullKebabDropdownOpen}
|
|
189
|
-
dropdownItems={fullKebabDropdownItems}
|
|
190
|
-
/>
|
|
191
|
-
</PageHeaderToolsItem>
|
|
192
|
-
</PageHeaderToolsGroup>
|
|
193
|
-
<PageHeaderToolsItem
|
|
194
|
-
visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
|
|
195
|
-
>
|
|
196
|
-
<Avatar src={imgAvatar} alt="Avatar" />
|
|
197
|
-
</PageHeaderToolsItem>
|
|
198
|
-
<PageHeaderToolsItem
|
|
199
|
-
visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
|
|
200
|
-
>
|
|
201
|
-
<DropdownDeprecated
|
|
202
|
-
isPlain
|
|
203
|
-
position="right"
|
|
204
|
-
onSelect={onDropdownSelect}
|
|
205
|
-
isOpen={isDropdownOpen}
|
|
206
|
-
toggle={<DropdownToggle onToggle={onDropdownToggle}>Ned Username</DropdownToggle>}
|
|
207
|
-
dropdownItems={userDropdownItems}
|
|
208
|
-
/>
|
|
209
|
-
</PageHeaderToolsItem>
|
|
210
|
-
</PageHeaderTools>
|
|
211
|
-
);
|
|
212
|
-
|
|
213
|
-
const pageHeader = (
|
|
214
|
-
<PageHeader
|
|
215
|
-
logo={
|
|
216
|
-
<Brand
|
|
217
|
-
widths={{ default: '180px', md: '180px', '2xl': '220px' }}
|
|
218
|
-
src="/assets/images/logo__pf--reverse--base.png"
|
|
219
|
-
alt="Fallback patternFly default logo"
|
|
220
|
-
>
|
|
221
|
-
<source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
|
|
222
|
-
<source srcSet="/assets/images/logo__pf--reverse--base.svg" />
|
|
223
|
-
</Brand>
|
|
224
|
-
}
|
|
225
|
-
headerTools={headerTools}
|
|
226
|
-
showNavToggle
|
|
227
|
-
/>
|
|
228
|
-
);
|
|
229
|
-
|
|
230
|
-
return (
|
|
231
|
-
<Page
|
|
232
|
-
header={pageHeader}
|
|
233
|
-
sidebar={sidebar}
|
|
234
|
-
isManagedSidebar
|
|
235
|
-
skipToContent={pageSkipToContent}
|
|
236
|
-
breadcrumb={dashboardBreadcrumb}
|
|
237
|
-
mainContainerId={mainContainerId}
|
|
238
|
-
isBreadcrumbWidthLimited
|
|
239
|
-
isBreadcrumbGrouped
|
|
240
|
-
additionalGroupedContent={
|
|
241
|
-
<PageSection variant={PageSectionVariants.light} isWidthLimited>
|
|
242
|
-
<TextContent>
|
|
243
|
-
<Text component="h1">Main title</Text>
|
|
244
|
-
<Text component="p">This is a full page demo.</Text>
|
|
245
|
-
</TextContent>
|
|
246
|
-
</PageSection>
|
|
247
|
-
}
|
|
248
|
-
groupProps={{
|
|
249
|
-
stickyOnBreakpoint: {
|
|
250
|
-
default: 'top'
|
|
251
|
-
}
|
|
252
|
-
}}
|
|
253
|
-
>
|
|
254
|
-
<PageSection>
|
|
255
|
-
<Gallery hasGutter>
|
|
256
|
-
{Array.apply(0, Array(50)).map((x, i) => (
|
|
257
|
-
<GalleryItem key={i}>
|
|
258
|
-
<Card>
|
|
259
|
-
<CardBody>This is a card</CardBody>
|
|
260
|
-
</Card>
|
|
261
|
-
</GalleryItem>
|
|
262
|
-
))}
|
|
263
|
-
</Gallery>
|
|
264
|
-
</PageSection>
|
|
265
|
-
</Page>
|
|
266
|
-
);
|
|
267
|
-
};
|
|
@@ -41,7 +41,7 @@ import {
|
|
|
41
41
|
ToolbarToggleGroup
|
|
42
42
|
} from '@patternfly/react-core';
|
|
43
43
|
import {
|
|
44
|
-
|
|
44
|
+
Table,
|
|
45
45
|
Thead,
|
|
46
46
|
Tbody,
|
|
47
47
|
Tr,
|
|
@@ -209,8 +209,8 @@ export const TablesAndTabs = () => {
|
|
|
209
209
|
</Toolbar>
|
|
210
210
|
);
|
|
211
211
|
|
|
212
|
-
const
|
|
213
|
-
<
|
|
212
|
+
const table = (
|
|
213
|
+
<Table aria-label="`Composable` table">
|
|
214
214
|
<Thead noWrap>
|
|
215
215
|
<Tr>
|
|
216
216
|
<Th
|
|
@@ -284,7 +284,7 @@ export const TablesAndTabs = () => {
|
|
|
284
284
|
</Tr>
|
|
285
285
|
))}
|
|
286
286
|
</Tbody>
|
|
287
|
-
</
|
|
287
|
+
</Table>
|
|
288
288
|
);
|
|
289
289
|
|
|
290
290
|
const panelContent = (
|
|
@@ -375,7 +375,7 @@ export const TablesAndTabs = () => {
|
|
|
375
375
|
const tabContent = (
|
|
376
376
|
<Drawer isExpanded={isExpanded} isInline>
|
|
377
377
|
<DrawerContent panelContent={panelContent}>
|
|
378
|
-
<DrawerContentBody>{
|
|
378
|
+
<DrawerContentBody>{table}</DrawerContentBody>
|
|
379
379
|
</DrawerContent>
|
|
380
380
|
</Drawer>
|
|
381
381
|
);
|
|
@@ -3,8 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
import styles from '@patternfly/react-styles/css/components/Page/page';
|
|
4
4
|
import { css } from '@patternfly/react-styles';
|
|
5
5
|
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
|
|
6
|
-
import { Button, ButtonVariant } from '
|
|
7
|
-
import { PageContextConsumer, PageContextProps } from '
|
|
6
|
+
import { Button, ButtonVariant } from '../../../components/Button';
|
|
7
|
+
import { PageContextConsumer, PageContextProps } from '../../../components/Page/PageContext';
|
|
8
8
|
|
|
9
9
|
export interface PageHeaderProps extends React.HTMLProps<HTMLDivElement> {
|
|
10
10
|
/** Additional classes added to the page header */
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import styles from '@patternfly/react-styles/css/components/Page/page';
|
|
3
3
|
import { css } from '@patternfly/react-styles';
|
|
4
|
-
import { formatBreakpointMods } from '
|
|
5
|
-
import { PageContext } from '
|
|
4
|
+
import { formatBreakpointMods } from '../../../helpers/util';
|
|
5
|
+
import { PageContext } from '../../../components/Page/PageContext';
|
|
6
6
|
|
|
7
7
|
export interface PageHeaderToolsGroupProps extends React.HTMLProps<HTMLDivElement> {
|
|
8
8
|
/** Content rendered in the page header tools group */
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import styles from '@patternfly/react-styles/css/components/Page/page';
|
|
3
3
|
import { css } from '@patternfly/react-styles';
|
|
4
|
-
import { formatBreakpointMods } from '
|
|
5
|
-
import { PageContext } from '
|
|
4
|
+
import { formatBreakpointMods } from '../../../helpers/util';
|
|
5
|
+
import { PageContext } from '../../../components/Page/PageContext';
|
|
6
6
|
|
|
7
7
|
export interface PageHeaderToolsItemProps extends React.HTMLProps<HTMLDivElement> {
|
|
8
8
|
/** Content rendered in page header tools item. */
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: Page
|
|
3
|
+
section: components
|
|
4
|
+
cssPrefix: pf-c-page
|
|
5
|
+
propComponents: ['PageHeader','PageHeaderTools','PageHeaderToolsGroup','PageHeaderToolsItem']
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Page header examples
|
|
9
|
+
|
|
10
|
+
### Vertical navigation
|
|
11
|
+
|
|
12
|
+
This example shows the deprecated implementation of a page's vertical navigation. Our updated recommendation advises you to use a masthead and toolbar to make headers, rather than `<PageHeader>` and `<PageHeaderTools>` as shown in the following example.
|
|
13
|
+
|
|
14
|
+
```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
|
|
15
|
+
```
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {
|
|
3
3
|
Page,
|
|
4
|
-
PageHeader,
|
|
5
|
-
PageHeaderTools,
|
|
6
4
|
PageSidebar,
|
|
7
5
|
PageSection,
|
|
8
6
|
PageSectionVariants
|
|
9
7
|
} from '@patternfly/react-core';
|
|
8
|
+
import {
|
|
9
|
+
PageHeader,
|
|
10
|
+
PageHeaderTools
|
|
11
|
+
} from '@patternfly/react-core/deprecated';
|
|
10
12
|
|
|
11
13
|
export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent = () => {
|
|
12
14
|
const [isNavOpen, setIsNavOpen] = React.useState(true);
|
package/src/{components/Page/__tests__ → deprecated/components/PageHeader/tests}/PageHeader.test.tsx
RENAMED
|
@@ -2,8 +2,6 @@ import * as React from 'react';
|
|
|
2
2
|
import { render } from '@testing-library/react';
|
|
3
3
|
import { PageHeader } from '../PageHeader';
|
|
4
4
|
|
|
5
|
-
jest.mock('../Page');
|
|
6
|
-
|
|
7
5
|
test('Check page vertical layout example against snapshot', () => {
|
|
8
6
|
const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
|
|
9
7
|
const { asFragment } = render(Header);
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { render } from '@testing-library/react';
|
|
6
|
-
import { PageHeaderTools } from '
|
|
6
|
+
import { PageHeaderTools } from '../PageHeaderTools';
|
|
7
7
|
// any missing imports can usually be resolved by adding them here
|
|
8
8
|
import {} from '../..';
|
|
9
9
|
|
|
10
10
|
it('PageHeaderTools should match snapshot (auto-generated)', () => {
|
|
11
|
-
const { asFragment } = render(<PageHeaderTools
|
|
11
|
+
const { asFragment } = render(<PageHeaderTools className={'string'}><div>ReactNode</div></PageHeaderTools>);
|
|
12
12
|
expect(asFragment()).toMatchSnapshot();
|
|
13
13
|
});
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { render } from '@testing-library/react';
|
|
6
|
-
import { PageHeaderToolsGroup } from '
|
|
6
|
+
import { PageHeaderToolsGroup } from '../PageHeaderToolsGroup';
|
|
7
7
|
// any missing imports can usually be resolved by adding them here
|
|
8
8
|
import {} from '../..';
|
|
9
9
|
|
|
10
10
|
it('PageHeaderToolsGroup should match snapshot (auto-generated)', () => {
|
|
11
|
-
const { asFragment } = render(<PageHeaderToolsGroup
|
|
11
|
+
const { asFragment } = render(<PageHeaderToolsGroup className={'string'}><div>ReactNode</div></PageHeaderToolsGroup>);
|
|
12
12
|
expect(asFragment()).toMatchSnapshot();
|
|
13
13
|
});
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { render } from '@testing-library/react';
|
|
6
|
-
import { PageHeaderToolsItem } from '
|
|
6
|
+
import { PageHeaderToolsItem } from '../PageHeaderToolsItem';
|
|
7
7
|
// any missing imports can usually be resolved by adding them here
|
|
8
8
|
import {} from '../..';
|
|
9
9
|
|
|
10
10
|
it('PageHeaderToolsItem should match snapshot (auto-generated)', () => {
|
|
11
11
|
const { asFragment } = render(
|
|
12
|
-
<PageHeaderToolsItem
|
|
12
|
+
<PageHeaderToolsItem className={'string'} isSelected={true}>children={<div>ReactNode</div>}</PageHeaderToolsItem>
|
|
13
13
|
);
|
|
14
14
|
expect(asFragment()).toMatchSnapshot();
|
|
15
15
|
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Page/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACtE,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,iDAAiD;IACjD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,qEAAqE;IACrE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,oEAAoE;IACpE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6IAA6I;IAC7I,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CA8D/D,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../../../src/components/Page/PageHeader.tsx"],"names":[],"mappings":";AAAA,+BAA+B;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,mDAAmD,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,QAAQ,MAAM,kDAAkD,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAoB,MAAM,eAAe,CAAC;AA6BtE,MAAM,CAAC,MAAM,UAAU,GAA6C,CAAC,EAenD,EAAE,EAAE;QAf+C,EACnE,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,IAAuB,EAC9B,SAAS,GAAG,IAAW,EACvB,aAAa,EACb,WAAW,GAAG,IAAuB,EACrC,MAAM,GAAG,IAAuB,EAChC,SAAS,GAAG,IAAI,EAChB,IAAI,GAAG,SAAmB,EAC1B,aAAa,GAAG,KAAK,EACrB,WAAW,GAAG,YAAY,EAC1B,WAAW,GAAG,GAAG,EAAE,CAAC,SAAgB,EACpC,YAAY,EAAE,SAAS,GAAG,mBAAmB,EAC7C,eAAe,EAAE,YAAY,GAAG,IAAI,OAEpB,EADb,KAAK,cAd2D,+KAepE,CADS;IAER,IAAI,aAAa,GAAG,aAAoB,CAAC;IACzC,IAAI,CAAC,aAAa,EAAE;QAClB,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,MAAK,SAAS,EAAE;YACjC,aAAa,GAAG,GAAG,CAAC;SACrB;aAAM;YACL,aAAa,GAAG,MAAM,CAAC;SACxB;KACF;IACD,OAAO,CACL,oBAAC,mBAAmB,QACjB,CAAC,EAAE,gBAAgB,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,gBAAgB,EAAoB,EAAE,EAAE;QACxG,MAAM,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW,CAAC;QACtE,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;QAEhE,OAAO,CACL,8CAAQ,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,IAAM,KAAK;YACxE,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,CAC1B,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC;gBACxC,aAAa,IAAI,CAChB,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,qBAAqB,CAAC;oBAC/C,oBAAC,MAAM,IACL,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,SAAS,gBACN,SAAS,mBACN,YAAY,mBACZ,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACzC,OAAO,EAAE,aAAa,CAAC,KAAK;wBAE5B,oBAAC,QAAQ,OAAG,CACL,CACL,CACP;gBACA,IAAI,IAAI,CACP,oBAAC,aAAa,kBAAC,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,mBAAmB,CAAC,IAAM,SAAS,GACrE,IAAI,CACS,CACjB,CACG,CACP;YACA,MAAM,IAAI,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,IAAG,MAAM,CAAO;YACnE,WAAW,CACL,CACV,CAAC;IACJ,CAAC,CACmB,CACvB,CAAC;AACJ,CAAC,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderTools.d.ts","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC3E,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAQzE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderTools.js","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderTools.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,mDAAmD,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAS/C,MAAM,CAAC,MAAM,eAAe,GAAkD,CAAC,EAIxD,EAAE,EAAE;QAJoD,EAC7E,QAAQ,EACR,SAAS,OAEY,EADlB,KAAK,cAHqE,yBAI9E,CADS;IACkB,OAAA,CAC1B,2CAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,eAAe,EAAE,SAAS,CAAC,IAAM,KAAK,GAC9D,QAAQ,CACL,CACP,CAAA;CAAA,CAAC;AACF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderToolsGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderToolsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAChF,sDAAsD;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC/B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;KAC9B,CAAC;CACH;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAAC,yBAAyB,CAmBnF,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderToolsGroup.js","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderToolsGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,mDAAmD,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAkB5C,MAAM,CAAC,MAAM,oBAAoB,GAAuD,CAAC,EAK7D,EAAE,EAAE;QALyD,EACvF,QAAQ,EACR,SAAS,EACT,UAAU,OAEgB,EADvB,KAAK,cAJ+E,uCAKxF,CADS;IAER,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/D,OAAO,CACL,2CACE,SAAS,EAAE,GAAG,CACZ,MAAM,CAAC,oBAAoB,EAC3B,oBAAoB,CAAC,UAAU,EAAE,MAAM,EAAE,EAAE,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,EAClE,SAAS,CACV,IACG,KAAK,GAER,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AACF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderToolsItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderToolsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC/E,kDAAkD;IAClD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yCAAyC;IACzC,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC/B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;KAC9B,CAAC;IACF,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC,wBAAwB,CAuBjF,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderToolsItem.js","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderToolsItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,mDAAmD,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAsB5C,MAAM,CAAC,MAAM,mBAAmB,GAAsD,CAAC,EAO5D,EAAE,EAAE;QAPwD,EACrF,QAAQ,EACR,EAAE,EACF,SAAS,EACT,UAAU,EACV,UAAU,OAEe,EADtB,KAAK,cAN6E,2DAOtF,CADS;IAER,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/D,OAAO,CACL,2CACE,SAAS,EAAE,GAAG,CACZ,MAAM,CAAC,mBAAmB,EAC1B,UAAU,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,EACvC,oBAAoB,CAAC,UAAU,EAAE,MAAM,EAAE,EAAE,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,EAClE,SAAS,CACV,EACD,EAAE,EAAE,EAAE,IACF,KAAK,GAER,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AACF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Page/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACtE,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,iDAAiD;IACjD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,qEAAqE;IACrE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,oEAAoE;IACpE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6IAA6I;IAC7I,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CA8D/D,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../../../src/components/Page/PageHeader.tsx"],"names":[],"mappings":";;;;AAAA,+BAA+B;AAC/B,qDAA+B;AAC/B,qGAAuE;AACvE,2DAA+C;AAC/C,wGAAwE;AACxE,oDAAgE;AAChE,+CAAsE;AA6B/D,MAAM,UAAU,GAA6C,CAAC,EAenD,EAAE,EAAE;QAf+C,EACnE,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,IAAuB,EAC9B,SAAS,GAAG,IAAW,EACvB,aAAa,EACb,WAAW,GAAG,IAAuB,EACrC,MAAM,GAAG,IAAuB,EAChC,SAAS,GAAG,IAAI,EAChB,IAAI,GAAG,SAAmB,EAC1B,aAAa,GAAG,KAAK,EACrB,WAAW,GAAG,YAAY,EAC1B,WAAW,GAAG,GAAG,EAAE,CAAC,SAAgB,EACpC,YAAY,EAAE,SAAS,GAAG,mBAAmB,EAC7C,eAAe,EAAE,YAAY,GAAG,IAAI,OAEpB,EADb,KAAK,sBAd2D,+KAepE,CADS;IAER,IAAI,aAAa,GAAG,aAAoB,CAAC;IACzC,IAAI,CAAC,aAAa,EAAE;QAClB,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,MAAK,SAAS,EAAE;YACjC,aAAa,GAAG,GAAG,CAAC;SACrB;aAAM;YACL,aAAa,GAAG,MAAM,CAAC;SACxB;KACF;IACD,OAAO,CACL,oBAAC,iCAAmB,QACjB,CAAC,EAAE,gBAAgB,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,gBAAgB,EAAoB,EAAE,EAAE;QACxG,MAAM,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW,CAAC;QACtE,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;QAEhE,OAAO,CACL,8CAAQ,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAA,kBAAG,EAAC,cAAM,CAAC,UAAU,EAAE,SAAS,CAAC,IAAM,KAAK;YACxE,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,CAC1B,6BAAK,SAAS,EAAE,IAAA,kBAAG,EAAC,cAAM,CAAC,eAAe,CAAC;gBACxC,aAAa,IAAI,CAChB,6BAAK,SAAS,EAAE,IAAA,kBAAG,EAAC,cAAM,CAAC,qBAAqB,CAAC;oBAC/C,oBAAC,eAAM,IACL,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,SAAS,gBACN,SAAS,mBACN,YAAY,mBACZ,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACzC,OAAO,EAAE,sBAAa,CAAC,KAAK;wBAE5B,oBAAC,mBAAQ,OAAG,CACL,CACL,CACP;gBACA,IAAI,IAAI,CACP,oBAAC,aAAa,kBAAC,SAAS,EAAE,IAAA,kBAAG,EAAC,cAAM,CAAC,mBAAmB,CAAC,IAAM,SAAS,GACrE,IAAI,CACS,CACjB,CACG,CACP;YACA,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAA,kBAAG,EAAC,cAAM,CAAC,aAAa,CAAC,IAAG,MAAM,CAAO;YACnE,WAAW,CACL,CACV,CAAC;IACJ,CAAC,CACmB,CACvB,CAAC;AACJ,CAAC,CAAC;AA9DW,QAAA,UAAU,cA8DrB;AACF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderTools.d.ts","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC3E,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAQzE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderTools.js","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderTools.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,qGAAuE;AACvE,2DAA+C;AASxC,MAAM,eAAe,GAAkD,CAAC,EAIxD,EAAE,EAAE;QAJoD,EAC7E,QAAQ,EACR,SAAS,OAEY,EADlB,KAAK,sBAHqE,yBAI9E,CADS;IACkB,OAAA,CAC1B,2CAAK,SAAS,EAAE,IAAA,kBAAG,EAAC,cAAM,CAAC,eAAe,EAAE,SAAS,CAAC,IAAM,KAAK,GAC9D,QAAQ,CACL,CACP,CAAA;CAAA,CAAC;AARW,QAAA,eAAe,mBAQ1B;AACF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderToolsGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderToolsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAChF,sDAAsD;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC/B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;KAC9B,CAAC;CACH;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAAC,yBAAyB,CAmBnF,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderToolsGroup.js","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderToolsGroup.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,qGAAuE;AACvE,2DAA+C;AAC/C,6CAA0D;AAC1D,+CAA4C;AAkBrC,MAAM,oBAAoB,GAAuD,CAAC,EAK7D,EAAE,EAAE;QALyD,EACvF,QAAQ,EACR,SAAS,EACT,UAAU,OAEgB,EADvB,KAAK,sBAJ+E,uCAKxF,CADS;IAER,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAW,CAAC,CAAC;IAC/D,OAAO,CACL,2CACE,SAAS,EAAE,IAAA,kBAAG,EACZ,cAAM,CAAC,oBAAoB,EAC3B,IAAA,2BAAoB,EAAC,UAAU,EAAE,cAAM,EAAE,EAAE,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,EAClE,SAAS,CACV,IACG,KAAK,GAER,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,oBAAoB,wBAmB/B;AACF,4BAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderToolsItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderToolsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC/E,kDAAkD;IAClD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yCAAyC;IACzC,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC/B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,EAAE,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC1B,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;KAC9B,CAAC;IACF,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC,wBAAwB,CAuBjF,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageHeaderToolsItem.js","sourceRoot":"","sources":["../../../../src/components/Page/PageHeaderToolsItem.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,qGAAuE;AACvE,2DAA+C;AAC/C,6CAA0D;AAC1D,+CAA4C;AAsBrC,MAAM,mBAAmB,GAAsD,CAAC,EAO5D,EAAE,EAAE;QAPwD,EACrF,QAAQ,EACR,EAAE,EACF,SAAS,EACT,UAAU,EACV,UAAU,OAEe,EADtB,KAAK,sBAN6E,2DAOtF,CADS;IAER,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAW,CAAC,CAAC;IAC/D,OAAO,CACL,2CACE,SAAS,EAAE,IAAA,kBAAG,EACZ,cAAM,CAAC,mBAAmB,EAC1B,UAAU,IAAI,cAAM,CAAC,SAAS,CAAC,QAAQ,EACvC,IAAA,2BAAoB,EAAC,UAAU,EAAE,cAAM,EAAE,EAAE,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,EAClE,SAAS,CACV,EACD,EAAE,EAAE,EAAE,IACF,KAAK,GAER,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAvBW,QAAA,mBAAmB,uBAuB9B;AACF,2BAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Nav, NavItem, NavList, PageHeader } from '@patternfly/react-core';
|
|
3
|
-
|
|
4
|
-
export const NavHorizontalPageHeader: React.FunctionComponent = () => {
|
|
5
|
-
const [activeItem, setActiveItem] = React.useState(0);
|
|
6
|
-
|
|
7
|
-
const onSelect = (result: { itemId: number | string }) => {
|
|
8
|
-
setActiveItem(result.itemId as number);
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
const nav = (
|
|
12
|
-
<Nav onSelect={onSelect} variant="horizontal" aria-label="Horizontal global">
|
|
13
|
-
<NavList>
|
|
14
|
-
{Array.apply(0, Array(10)).map(function(_item, index: number) {
|
|
15
|
-
const num = index + 1;
|
|
16
|
-
return (
|
|
17
|
-
<NavItem
|
|
18
|
-
preventDefault
|
|
19
|
-
key={num}
|
|
20
|
-
itemId={num}
|
|
21
|
-
isActive={activeItem === num}
|
|
22
|
-
id={`horizontal-pageHeader-${num}`}
|
|
23
|
-
to={`#horizontal-pageHeader-${num}`}
|
|
24
|
-
>
|
|
25
|
-
Horizontal nav item {num}
|
|
26
|
-
</NavItem>
|
|
27
|
-
);
|
|
28
|
-
})}
|
|
29
|
-
</NavList>
|
|
30
|
-
</Nav>
|
|
31
|
-
);
|
|
32
|
-
|
|
33
|
-
return <PageHeader topNav={nav} />;
|
|
34
|
-
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/dist/esm/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsGroup.d.ts
RENAMED
|
File without changes
|
/package/dist/esm/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsItem.d.ts
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/dist/js/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsGroup.d.ts
RENAMED
|
File without changes
|
/package/dist/js/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsItem.d.ts
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|