import * as React from 'react' ; import { Children , cloneElement , ReactElement , isValidElement } from 'react' ; import PropTypes from 'prop-types' ; import Tabs , { TabsProps } from '@material-ui/core/Tabs' ; import { useLocation , useRouteMatch } from 'react-router-dom' ; import { TabProps } from './Tab' ; export const TabbedShowLayoutTabs = ( { children , syncWithLocation , value , ... rest } ) => { const location = useLocation ( ) ; const match = useRouteMatch ( ) ; const tabValue = location . pathname ; return ( < Tabs indicatorColor = "primary" value = { syncWithLocation ? tabValue : value } { ... rest } > { Children . map ( children , ( tab , index ) => { if ( ! tab || ! isValidElement ( tab ) ) return null ; const tabPath = getTabFullPath ( tab , index , match . url ) ; return cloneElement ( tab , { context : 'header' , value : syncWithLocation ? tabPath : index , syncWithLocation , } ) ; } ) } < /Tabs>); } ; export const getTabFullPath = ( tab , index , baseUrl ) => `${ baseUrl }${ tab . props . path ? `/${ tab . props . path }` : index > 0 ? `/${ index }` : '' }` . replace ( '//' , '/' ) ; export interface TabbedShowLayoutTabsProps extends TabsProps { children ? : ReactElement < TabProps > ; syncWithLocation ? : boolean ; } TabbedShowLayoutTabs . propTypes = { children : PropTypes . node , } ;