diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md index c00ac933d5c..f9ae73ae400 100644 --- a/packages/react-core/src/components/Nav/examples/Nav.md +++ b/packages/react-core/src/components/Nav/examples/Nav.md @@ -12,667 +12,51 @@ import './nav.css'; ### Default -```js -import React from 'react'; -import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup } from '@patternfly/react-core'; - -class NavDefaultList extends React.Component { - constructor(props) { - super(props); - this.state = { - activeItem: 0 - }; - this.onSelect = result => { - this.setState({ - activeItem: result.itemId - }); - }; - } - - render() { - const { activeItem } = this.state; - return ( - - ); - } -} +```ts file="./NavDefault.tsx" ``` ### Grouped -Note: to keep nav groups accessible an `aria-label` should be supplied if the `title` prop is not passed. - -```js -import React from 'react'; -import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup } from '@patternfly/react-core'; - -class NavGroupedList extends React.Component { - constructor(props) { - super(props); - this.state = { - activeItem: 'grp-1_itm-1' - }; - this.onSelect = result => { - this.setState({ - activeItem: result.itemId - }); - }; - } +The following example shows two navigation groups, each with a `title` prop passed into the nav group component. To keep nav groups accessible an `aria-label` must be passed in if the `title` prop is not passed in. - render() { - const { activeItem } = this.state; - return ( - - ); - } -} +```ts file="./NavGrouped.tsx" ``` ### Expandable -```js -import React from 'react'; -import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup } from '@patternfly/react-core'; - -class NavExpandableList extends React.Component { - constructor(props) { - super(props); - this.state = { - activeGroup: 'grp-1', - activeItem: 'grp-1_itm-1' - }; - this.onSelect = result => { - this.setState({ - activeGroup: result.groupId, - activeItem: result.itemId - }); - }; - this.onToggle = result => { - // eslint-disable-next-line no-console - console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`); - }; - this.handleItemOnclick = (event, itemId, groupId) => { - // eslint-disable-next-line no-console - console.log(`my own click handler on ${itemId}`); - }; - } - - render() { - const { activeGroup, activeItem } = this.state; - return ( - - ); - } -} -``` - -### Expandable (w/subnavigation titles) - -```js -import React from 'react'; -import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup } from '@patternfly/react-core'; - -class NavExpandableTitlesList extends React.Component { - constructor(props) { - super(props); - this.state = { - activeGroup: 'grp-1', - activeItem: 'grp-1_itm-1' - }; - this.onSelect = result => { - this.setState({ - activeGroup: result.groupId, - activeItem: result.itemId - }); - }; - } - - render() { - const { activeGroup, activeItem } = this.state; - return ( - - ); - } -} +```ts file="./NavExpandable.tsx" ``` ### Expandable third level -```js -import React from 'react'; -import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core'; - -NavExpandableThirdLevelList = () => { - const [activeGroup, setActiveGroup] = React.useState('grp-1'); - const [activeItem, setActiveItem] = React.useState('grp-1_itm-1'); - - onSelect = result => { - setActiveGroup(result.groupId); - setActiveItem(result.itemId); - }; - - onToggle = result => { - // eslint-disable-next-line no-console - console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`); - }; - - return ( - - ); -}; +```ts file="./NavExpandableThirdLevel.tsx" ``` ### Mixed -```js -import React from 'react'; -import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup } from '@patternfly/react-core'; - -class NavMixedList extends React.Component { - constructor(props) { - super(props); - this.state = { - activeGroup: '', - activeItem: 'itm-1' - }; - this.onSelect = result => { - this.setState({ - activeGroup: result.groupId, - activeItem: result.itemId - }); - }; - } - - render() { - const { activeGroup, activeItem } = this.state; - return ( - - ); - } -} +```ts file="./NavMixed.tsx" ``` ### Horizontal (only in PageHeader) -```js -import React from 'react'; -import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup, PageHeader } from '@patternfly/react-core'; - -class NavHorizontalList extends React.Component { - constructor(props) { - super(props); - this.state = { - activeItem: 0 - }; - this.onSelect = result => { - this.setState({ - activeItem: result.itemId - }); - }; - } - - render() { - const { activeItem } = this.state; - const nav = ( - - ); - return ; - } -} +```ts file="./NavHorizontalPageHeader.tsx" ``` ### Horizontal subnav -```js -import React from 'react'; -import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup, PageHeader } from '@patternfly/react-core'; - -class HorizontalSubNav extends React.Component { - constructor(props) { - super(props); - this.state = { - activeItem: 0 - }; - this.onSelect = result => { - this.setState({ - activeItem: result.itemId - }); - }; - } - - render() { - const { activeItem } = this.state; - return ( - - ); - } -} +```ts file="./NavHorizontalSubNav.tsx" ``` ### Legacy tertiary -```js -import React from 'react'; -import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup, PageSection } from '@patternfly/react-core'; - -class NavTertiaryList extends React.Component { - constructor(props) { - super(props); - this.state = { - activeItem: 0 - }; - this.onSelect = result => { - this.setState({ - activeItem: result.itemId - }); - }; - } - - render() { - const { activeItem } = this.state; - return ( - - ); - } -} +```ts file="./NavLegacyTertiary.tsx" ``` ### Flyout A flyout should be a `Menu` component. Press `space` or `right arrow` to open a flyout using the keyboard, use the arrow keys to navigate between flyout items, and press `escape` or `left arrow` to close a flyout. -```js isBeta -import React from 'react'; -import { - Nav, - NavExpandable, - NavItem, - NavItemSeparator, - NavList, - NavGroup, - Menu, - MenuContent, - MenuList, - MenuItem -} from '@patternfly/react-core'; - -NavWithFlyout = () => { - const [activeItem, setActiveItem] = React.useState(0); - const onSelect = result => setActiveItem(result.itemId); - const onMenuSelect = (event, itemId) => setActiveItem(itemId); - - const numFlyouts = 5; - const FlyoutMenu = ({ depth, children }) => ( - - - - - Next menu - - {[...Array(numFlyouts - depth).keys()].map(j => ( - - Menu {depth} item {j} - - ))} - - Next menu - - - - - ); - - let curFlyout = ; - for (let i = 2; i < numFlyouts - 1; i++) { - curFlyout = {curFlyout}; - } - - return ( - - ); -}; +```ts file="./NavFlyout.tsx" isBeta ``` ### Drilldown diff --git a/packages/react-core/src/components/Nav/examples/NavDefault.tsx b/packages/react-core/src/components/Nav/examples/NavDefault.tsx new file mode 100644 index 00000000000..77490f36fe2 --- /dev/null +++ b/packages/react-core/src/components/Nav/examples/NavDefault.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Nav, NavItem, NavList } from '@patternfly/react-core'; + +export const NavDefault: React.FunctionComponent = () => { + const [activeItem, setActiveItem] = React.useState(0); + + const onSelect = (result: { itemId: number | string }) => { + setActiveItem(result.itemId as number); + }; + + return ( + + ); +}; diff --git a/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx b/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx index 856bdabc0e5..205595f78be 100644 --- a/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx +++ b/packages/react-core/src/components/Nav/examples/NavDrilldown.tsx @@ -7,40 +7,45 @@ interface MenuHeights { } const subMenuTwo: JSX.Element = ( - - + + SubMenu 1 - Item 1 - + SubMenu 2 - Item 1 - + SubMenu 2 - Item 2 - + SubMenu 2 - Item 3 ); const subMenuOne: JSX.Element = ( - - + + Item 1 - + SubMenu 1 - Item 1 - + SubMenu 1 - Item 2 - + SubMenu 1 - Item 3 ); -export const NavLevelThreeDrill: React.FunctionComponent = () => { +export const NavigationDrilldown: React.FunctionComponent = () => { const [menuDrilledIn, setMenuDrilledIn] = React.useState([]); const [drilldownPath, setDrilldownPath] = React.useState([]); const [menuHeights, setMenuHeights] = React.useState({}); @@ -67,7 +72,7 @@ export const NavLevelThreeDrill: React.FunctionComponent = () => { return (