-
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 move to utils and update imports fix md line fix build errors update columnmanagement dashboardwrapper import testing move files out of utils change to absolute imports change to relative imports for each component update page import add rollup plugin-typescript rename rollup.config.js to rollup.config.mjs revert build changes and remove imports from top of md files revert yarn.lock, revert to index.d.ts, update jumplinks import
- Loading branch information
1 parent
0f8ac62
commit bf2ce5c
Showing
39 changed files
with
831 additions
and
415 deletions.
There are no files selected for viewing
186 changes: 186 additions & 0 deletions
186
packages/react-core/src/components/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,186 @@ | ||
import React, { useState } from 'react'; | ||
import { Avatar } from '../Avatar'; | ||
import { Brand } from '../Brand'; | ||
import { Button, ButtonVariant } from '../Button'; | ||
import { Divider } from '../Divider'; | ||
import { Dropdown, DropdownGroup, DropdownItem, DropdownList } from '../Dropdown'; | ||
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent } from '../Masthead'; | ||
import { MenuToggle } from '../MenuToggle'; | ||
import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '../Toolbar'; | ||
import { PageToggleButton } from './PageToggleButton'; | ||
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; | ||
} | ||
|
||
export 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> | ||
); | ||
}; | ||
DashboardHeader.displayName = 'DashboardHeader'; |
123 changes: 123 additions & 0 deletions
123
packages/react-core/src/components/Page/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,123 @@ | ||
import React, { useState } from 'react'; | ||
import { Breadcrumb, BreadcrumbItem } from '../Breadcrumb'; | ||
import { Nav, NavItem, NavList } from '../Nav'; | ||
import { Page, PageSection, PageSidebar, PageSidebarBody } from '../Page'; | ||
import { SkipToContent } from '../SkipToContent'; | ||
import { Text, TextContent } from '../Text'; | ||
import { DashboardHeader } from './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; | ||
} | ||
|
||
export 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> | ||
); | ||
|
||
export 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> | ||
); | ||
}; | ||
DashboardWrapper.displayName = 'DashboardWrapper'; |
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
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
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
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
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
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
Oops, something went wrong.