Sha256: a7d6b34c96f285219eb397314548ad504bcc5797871099fb673f2052ea4372f7
Contents?: true
Size: 1.65 KB
Versions: 28
Compression:
Stored size: 1.65 KB
Contents
import React from 'react';
import { shape, string, number, element, arrayOf } from 'prop-types';
import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
import { Switch, Route, Redirect, useLocation, withRouter, HashRouter } from 'react-router-dom';
import { head, last } from 'lodash';
const RoutedTabs = ({
tabs, defaultTabIndex,
}) => {
const {
hash, key: locationKey,
} = useLocation();
// The below transforms #/history/6 to history
const currentTabFromUrl = head(last(hash.split('#/')).split('/'));
return (
<>
<Tabs
activeKey={currentTabFromUrl}
ouiaId="routed-tabs"
className="margin-0-24"
>
{tabs.map(({ key, title }) => (
<Tab
ouiaId={`routed-tabs-tab-${key}`}
href={`#/${key}`}
key={key}
eventKey={key}
aria-label={title}
title={<TabTitleText>{title}</TabTitleText>}
/>
))}
</Tabs>
<div className="margin-16-0">
<HashRouter key={locationKey}>
<Switch ouiaId="routed-tabs-switch">
{tabs.map(({ key, content }) => (
<Route key={`${key}-route`} path={`/${key}`}>
{content}
</Route>))}
<Redirect to={`/${currentTabFromUrl || tabs[defaultTabIndex]?.key}`} />
</Switch>
</HashRouter>
</div>
</>
);
};
RoutedTabs.propTypes = {
tabs: arrayOf(shape({
key: string.isRequired,
title: string.isRequired,
content: element.isRequired,
})).isRequired,
defaultTabIndex: number,
};
RoutedTabs.defaultProps = {
defaultTabIndex: 0,
};
export default withRouter(RoutedTabs);
Version data entries
28 entries across 28 versions & 1 rubygems