import React from 'react'; import PropTypes from 'prop-types'; import { Tabs, Tab } from '@patternfly/react-core'; import { useLocation, useHistory } from 'react-router-dom'; import classnames from 'classnames'; import './nav-tabs.scss'; const NavTabs = ({ tabItems, TabsProps: { className, ...TabsProps } }) => { const { push } = useHistory(); const { pathname, search } = useLocation(); const activeTab = tabItems.find(({ pathname: tabPathname }) => pathname.includes(tabPathname) ); const handleTabClick = (_event, tabIndex) => push({ pathname: tabItems[tabIndex].pathname, search }); return ( <Tabs {...TabsProps} className={classnames('ins-c-navtabs', className)} activeKey={activeTab ? activeTab.eventKey : 0} onSelect={handleTabClick} > {tabItems.map((item) => ( <Tab key={item.eventKey} {...item} /> ))} </Tabs> ); }; NavTabs.propTypes = { tabItems: PropTypes.arrayOf( PropTypes.shape({ pathname: PropTypes.string.isRequired, eventKey: PropTypes.number.isRequired, title: PropTypes.node.isRequired, }) ), TabsProps: PropTypes.object, }; export default NavTabs;