Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
optometrists
/
cache
/
cache
/
cache
/
.wp-cli
/
wp-content
/
plugins
/
woocommerce
/
packages
/
woocommerce-blocks
/
assets
/
js
/
base
/
components
/
tabs
:
index.js
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
/** * External dependencies */ import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id'; import classnames from 'classnames'; import { __ } from '@wordpress/i18n'; import { useTabState, Tab, TabList, TabPanel } from 'reakit/Tab'; /** * Internal dependencies */ import './style.scss'; const Tabs = ( { className, onSelect = () => null, tabs, activeClass = 'is-active', initialTabName, ariaLabel = __( 'Tabbed Content', 'woocommerce' ), instanceId, id, } ) => { const initialTab = initialTabName ? { selectedId: `${ instanceId }-${ initialTabName }` } : undefined; const tabState = useTabState( initialTab ); if ( tabs.length === 0 ) { return null; } return ( <div className={ classnames( 'wc-block-components-tabs', className ) }> <TabList { ...tabState } id={ id } className={ 'wc-block-components-tabs__list' } aria-label={ ariaLabel } > { tabs.map( ( { name, title, ariaLabel: tabAriaLabel } ) => ( <Tab { ...tabState } id={ `${ instanceId }-${ name }` } manual={ true } className={ classnames( 'wc-block-components-tabs__item', { [ activeClass ]: // reakit uses the ID as the selectedId `${ instanceId }-${ name }` === tabState.selectedId, } ) } onClick={ () => onSelect( name ) } type="button" key={ name } aria-label={ tabAriaLabel } > <span className="wc-block-components-tabs__item-content"> { title } </span> </Tab> ) ) } </TabList> { tabs.map( ( { name, content } ) => ( <TabPanel { ...tabState } key={ name } id={ `${ instanceId }-${ name }-view` } tabId={ `${ instanceId }-${ name }` } className="wc-block-components-tabs__content" > { tabState.selectedId === `${ instanceId }-${ name }` && content } </TabPanel> ) ) } </div> ); }; export default withInstanceId( Tabs );