102 lines
2.0 KiB
TypeScript
102 lines
2.0 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { useEffect } from '@wordpress/element';
|
|
import { Button } from '@wordpress/components';
|
|
import classNames from 'classnames';
|
|
import { getQuery, getNewPath, navigateTo } from '@woocommerce/navigation';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './tabs.scss';
|
|
import { DEFAULT_TAB_KEY, MARKETPLACE_PATH } from '../constants';
|
|
|
|
export interface TabsProps {
|
|
selectedTab?: string | undefined;
|
|
setSelectedTab: ( value: string ) => void;
|
|
}
|
|
|
|
interface Tab {
|
|
name: string;
|
|
title: string;
|
|
}
|
|
|
|
interface Tabs {
|
|
[ key: string ]: Tab;
|
|
}
|
|
|
|
const tabs: Tabs = {
|
|
discover: {
|
|
name: 'discover',
|
|
title: __( 'Discover', 'woocommerce' ),
|
|
},
|
|
extensions: {
|
|
name: 'extensions',
|
|
title: __( 'Extensions', 'woocommerce' ),
|
|
},
|
|
};
|
|
|
|
const setUrlTabParam = ( tabKey: string ) => {
|
|
if ( tabKey === DEFAULT_TAB_KEY ) {
|
|
navigateTo( {
|
|
url: getNewPath( {}, MARKETPLACE_PATH, {} ),
|
|
} );
|
|
return;
|
|
}
|
|
navigateTo( {
|
|
url: getNewPath( { tab: tabKey } ),
|
|
} );
|
|
};
|
|
|
|
const renderTabs = ( props: TabsProps ) => {
|
|
const { selectedTab, setSelectedTab } = props;
|
|
const tabContent = [];
|
|
for ( const tabKey in tabs ) {
|
|
tabContent.push(
|
|
<Button
|
|
className={ classNames( 'woocommerce-marketplace__tab-button', {
|
|
'is-active': tabKey === selectedTab,
|
|
} ) }
|
|
onClick={ () => {
|
|
setSelectedTab( tabKey );
|
|
setUrlTabParam( tabKey );
|
|
} }
|
|
key={ tabKey }
|
|
>
|
|
{ tabs[ tabKey ]?.title }
|
|
</Button>
|
|
);
|
|
}
|
|
return tabContent;
|
|
};
|
|
|
|
const Tabs = ( props: TabsProps ): JSX.Element => {
|
|
const { setSelectedTab } = props;
|
|
|
|
interface Query {
|
|
path?: string;
|
|
tab?: string;
|
|
}
|
|
|
|
useEffect( () => {
|
|
const query: Query = getQuery();
|
|
|
|
if ( query?.tab && tabs[ query.tab ] ) {
|
|
setSelectedTab( query.tab );
|
|
return;
|
|
}
|
|
|
|
setSelectedTab( DEFAULT_TAB_KEY );
|
|
}, [ setSelectedTab ] );
|
|
|
|
return (
|
|
<nav className="woocommerce-marketplace__tabs">
|
|
{ renderTabs( props ) }
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Tabs;
|