-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(DashboardHeader) convert to TS
chore(DashboardWrapper) convert to TS chore(Table) convert demos to TS
- Loading branch information
1 parent
8c784c2
commit 27b06ae
Showing
12 changed files
with
561 additions
and
112 deletions.
There are no files selected for viewing
133 changes: 133 additions & 0 deletions
133
packages/react-core/src/demos/examples/DashboardWrapper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,133 @@ | ||
import React, { useState } from 'react'; | ||
import { | ||
Breadcrumb, | ||
BreadcrumbItem, | ||
Nav, | ||
NavItem, | ||
NavList, | ||
Page, | ||
PageSection, | ||
PageSidebar, | ||
PageSidebarBody, | ||
SkipToContent, | ||
Text, | ||
TextContent | ||
} from '@patternfly/react-core'; | ||
import DashboardHeader from '@patternfly/react-core/src/demos/examples/Page/DashboardHeader'; | ||
|
||
interface DashboardWrapperProps { | ||
children: React.ReactNode; | ||
mainContainerId?: string; | ||
breadcrumb?: React.ReactNode; | ||
header?: React.ReactNode; | ||
sidebar?: React.ReactNode; | ||
sidebarNavOpen?: boolean; | ||
onPageResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>, resizeObject: any) => void; | ||
hasNoBreadcrumb?: boolean; | ||
notificationDrawer?: React.ReactNode; | ||
isNotificationDrawerExpanded?: boolean; | ||
hasPageTemplateTitle?: boolean; | ||
} | ||
|
||
const DashboardBreadcrumb = ( | ||
<Breadcrumb> | ||
<BreadcrumbItem>Section home</BreadcrumbItem> | ||
<BreadcrumbItem to="#">Section title</BreadcrumbItem> | ||
<BreadcrumbItem to="#">Section title</BreadcrumbItem> | ||
<BreadcrumbItem to="#" isActive> | ||
Section landing | ||
</BreadcrumbItem> | ||
</Breadcrumb> | ||
); | ||
|
||
const PageTemplateTitle = ( | ||
<PageSection variant="light"> | ||
<TextContent> | ||
<Text component="h1">Main title</Text> | ||
<Text component="p">This is a full page demo.</Text> | ||
</TextContent> | ||
</PageSection> | ||
); | ||
|
||
const DashboardWrapper: React.FC<DashboardWrapperProps> = ({ | ||
children, | ||
mainContainerId, | ||
breadcrumb, | ||
header, | ||
sidebar, | ||
sidebarNavOpen, | ||
onPageResize, | ||
hasNoBreadcrumb, | ||
notificationDrawer, | ||
isNotificationDrawerExpanded, | ||
hasPageTemplateTitle, | ||
...pageProps | ||
}) => { | ||
const [activeItem, setActiveItem] = useState(1); | ||
|
||
const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, result: any) => { | ||
setActiveItem(result.itemId); | ||
}; | ||
|
||
let renderedBreadcrumb; | ||
if (!hasNoBreadcrumb) { | ||
renderedBreadcrumb = breadcrumb !== undefined ? breadcrumb : DashboardBreadcrumb; | ||
} | ||
|
||
const PageNav = ( | ||
<Nav onSelect={onNavSelect} aria-label="Nav"> | ||
<NavList> | ||
<NavItem itemId={0} isActive={activeItem === 0} to="#system-panel"> | ||
System panel | ||
</NavItem> | ||
<NavItem itemId={1} isActive={activeItem === 1} to="#policy"> | ||
Policy | ||
</NavItem> | ||
<NavItem itemId={2} isActive={activeItem === 2} to="#auth"> | ||
Authentication | ||
</NavItem> | ||
<NavItem itemId={3} isActive={activeItem === 3} to="#network"> | ||
Network services | ||
</NavItem> | ||
<NavItem itemId={4} isActive={activeItem === 4} to="#server"> | ||
Server | ||
</NavItem> | ||
</NavList> | ||
</Nav> | ||
); | ||
|
||
const _sidebar = ( | ||
<PageSidebar isSidebarOpen={sidebarNavOpen || false}> | ||
<PageSidebarBody>{PageNav}</PageSidebarBody> | ||
</PageSidebar> | ||
); | ||
|
||
const PageSkipToContent = ( | ||
<SkipToContent href={`#${mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}`}> | ||
Skip to content | ||
</SkipToContent> | ||
); | ||
|
||
return ( | ||
<Page | ||
header={header !== undefined ? header : <DashboardHeader />} | ||
sidebar={sidebar !== undefined ? sidebar : _sidebar} | ||
isManagedSidebar | ||
skipToContent={PageSkipToContent} | ||
breadcrumb={renderedBreadcrumb} | ||
mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'} | ||
notificationDrawer={notificationDrawer} | ||
isNotificationDrawerExpanded={isNotificationDrawerExpanded} | ||
{...(typeof onPageResize === 'function' && { | ||
onPageResize: (event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>, resizeObject: any) => | ||
onPageResize(event, resizeObject) | ||
})} | ||
{...pageProps} | ||
> | ||
{hasPageTemplateTitle && PageTemplateTitle} | ||
{children} | ||
</Page> | ||
); | ||
}; | ||
|
||
export default DashboardWrapper; |
200 changes: 200 additions & 0 deletions
200
packages/react-core/src/demos/examples/Page/DashboardHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,200 @@ | ||
import React, { useState } from 'react'; | ||
import { | ||
Avatar, | ||
Brand, | ||
Button, | ||
ButtonVariant, | ||
Divider, | ||
Dropdown, | ||
DropdownGroup, | ||
DropdownItem, | ||
DropdownList, | ||
Masthead, | ||
MastheadToggle, | ||
MastheadMain, | ||
MastheadBrand, | ||
MastheadContent, | ||
MenuToggle, | ||
Toolbar, | ||
ToolbarContent, | ||
ToolbarGroup, | ||
ToolbarItem, | ||
PageToggleButton | ||
} from '@patternfly/react-core'; | ||
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; | ||
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; | ||
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; | ||
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; | ||
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; | ||
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; | ||
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; | ||
import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg'; | ||
|
||
interface DashboardHeaderProps { | ||
notificationBadge?: React.ReactNode; | ||
} | ||
|
||
const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBadge }) => { | ||
const [isDropdownOpen, setIsDropdownOpen] = useState(false); | ||
const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); | ||
const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); | ||
|
||
const kebabDropdownItems = ( | ||
<> | ||
<DropdownItem> | ||
<CogIcon /> Settings | ||
</DropdownItem> | ||
<DropdownItem> | ||
<HelpIcon /> Help | ||
</DropdownItem> | ||
</> | ||
); | ||
|
||
const userDropdownItems = ( | ||
<> | ||
<DropdownItem key="group 2 profile">My profile</DropdownItem> | ||
<DropdownItem key="group 2 user">User management</DropdownItem> | ||
<DropdownItem key="group 2 logout">Logout</DropdownItem> | ||
</> | ||
); | ||
|
||
const onDropdownToggle = () => { | ||
setIsDropdownOpen((prevIsDropdownOpen) => !prevIsDropdownOpen); | ||
}; | ||
|
||
const onDropdownSelect = () => { | ||
setIsDropdownOpen(false); | ||
}; | ||
|
||
const onKebabDropdownToggle = () => { | ||
setIsKebabDropdownOpen((prevIsKebabDropdownOpen) => !prevIsKebabDropdownOpen); | ||
}; | ||
|
||
const onKebabDropdownSelect = () => { | ||
setIsKebabDropdownOpen(false); | ||
}; | ||
|
||
const onFullKebabToggle = () => { | ||
setIsFullKebabDropdownOpen((prevIsFullKebabDropdownOpen) => !prevIsFullKebabDropdownOpen); | ||
}; | ||
|
||
const onFullKebabSelect = () => { | ||
setIsFullKebabDropdownOpen(false); | ||
}; | ||
|
||
return ( | ||
<Masthead> | ||
<MastheadToggle> | ||
<PageToggleButton variant="plain" aria-label="Global navigation"> | ||
<BarsIcon /> | ||
</PageToggleButton> | ||
</MastheadToggle> | ||
<MastheadMain> | ||
<MastheadBrand> | ||
<Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} /> | ||
</MastheadBrand> | ||
</MastheadMain> | ||
<MastheadContent> | ||
<Toolbar id="toolbar" isFullHeight isStatic> | ||
<ToolbarContent> | ||
<ToolbarGroup | ||
variant="icon-button-group" | ||
align={{ default: 'alignRight' }} | ||
spacer={{ default: 'spacerNone', md: 'spacerMd' }} | ||
> | ||
{notificationBadge ? ( | ||
notificationBadge | ||
) : ( | ||
<ToolbarItem> | ||
<Button | ||
aria-label="Notifications" | ||
variant={ButtonVariant.plain} | ||
icon={<BellIcon />} | ||
onClick={() => {}} | ||
/> | ||
</ToolbarItem> | ||
)} | ||
<ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}> | ||
<ToolbarItem> | ||
<Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} /> | ||
</ToolbarItem> | ||
<ToolbarItem> | ||
<Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} /> | ||
</ToolbarItem> | ||
</ToolbarGroup> | ||
<ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}> | ||
<Dropdown | ||
isOpen={isKebabDropdownOpen} | ||
onSelect={onKebabDropdownSelect} | ||
onOpenChange={setIsKebabDropdownOpen} | ||
popperProps={{ position: 'right' }} | ||
toggle={(toggleRef: React.RefObject<any>) => ( | ||
<MenuToggle | ||
ref={toggleRef} | ||
isExpanded={isKebabDropdownOpen} | ||
onClick={onKebabDropdownToggle} | ||
variant="plain" | ||
aria-label="Settings and help" | ||
> | ||
<EllipsisVIcon aria-hidden="true" /> | ||
</MenuToggle> | ||
)} | ||
> | ||
<DropdownList>{kebabDropdownItems}</DropdownList> | ||
</Dropdown> | ||
</ToolbarItem> | ||
<ToolbarItem visibility={{ md: 'hidden' }}> | ||
<Dropdown | ||
isOpen={isFullKebabDropdownOpen} | ||
onSelect={onFullKebabSelect} | ||
onOpenChange={setIsFullKebabDropdownOpen} | ||
popperProps={{ position: 'right' }} | ||
toggle={(toggleRef: React.RefObject<any>) => ( | ||
<MenuToggle | ||
ref={toggleRef} | ||
isExpanded={isFullKebabDropdownOpen} | ||
onClick={onFullKebabToggle} | ||
variant="plain" | ||
aria-label="Toolbar menu" | ||
> | ||
<EllipsisVIcon aria-hidden="true" /> | ||
</MenuToggle> | ||
)} | ||
> | ||
<DropdownGroup key="group 2" aria-label="User actions"> | ||
<DropdownList>{userDropdownItems}</DropdownList> | ||
</DropdownGroup> | ||
<Divider /> | ||
<DropdownList>{kebabDropdownItems}</DropdownList> | ||
</Dropdown> | ||
</ToolbarItem> | ||
</ToolbarGroup> | ||
<ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}> | ||
<Dropdown | ||
isOpen={isDropdownOpen} | ||
onSelect={onDropdownSelect} | ||
onOpenChange={setIsDropdownOpen} | ||
popperProps={{ position: 'right' }} | ||
toggle={(toggleRef: React.RefObject<any>) => ( | ||
<MenuToggle | ||
ref={toggleRef} | ||
isExpanded={isDropdownOpen} | ||
onClick={onDropdownToggle} | ||
icon={<Avatar src={imgAvatar} alt="" />} | ||
isFullHeight | ||
> | ||
Ned Username | ||
</MenuToggle> | ||
)} | ||
> | ||
<DropdownList>{userDropdownItems}</DropdownList> | ||
</Dropdown> | ||
</ToolbarItem> | ||
</ToolbarContent> | ||
</Toolbar> | ||
</MastheadContent> | ||
</Masthead> | ||
); | ||
}; | ||
|
||
export default DashboardHeader; |
Oops, something went wrong.