import React from 'react'; import { Tabs, Tab, TabTitleText, TabAction, Popover } from '@patternfly/react-core'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; export const TabsHelp: React.FunctionComponent = () => { const [activeTabKey, setActiveTabKey] = React.useState(0); const tabs = ['Users', 'Containers', 'Database', 'Disabled', 'ARIA disabled', 'Help disabled']; const helpPopover = (header: string, popoverRef: React.RefObject) => ( {header}} bodyContent={
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
} footerContent="Popover footer" triggerRef={popoverRef} /> ); return ( setActiveTabKey(tabIndex as number)} aria-label="Tabs in the help action example" role="region" > {tabs.map((tab, index) => { const ref = React.createRef(); return ( {tab}} {...(tab === 'Disabled' && { isDisabled: true })} {...(tab === 'ARIA disabled' && { isAriaDisabled: true })} actions={ <> {helpPopover(`Help popover for ${tab}`, ref)} } > {tab} ); })} ); };