Server IP : 172.67.158.161 / Your IP : 18.226.200.172 Web Server : LiteSpeed System : Linux business53.web-hosting.com 4.18.0-553.lve.el8.x86_64 #1 SMP Mon May 27 15:27:34 UTC 2024 x86_64 User : giankuin ( 1871) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /proc/self/root/proc/thread-self/root/home/giankuin/thietke365.net/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/tabs/ |
Upload File : |
/** * External dependencies */ import { withInstanceId } from '@wordpress/compose'; import classnames from 'classnames'; import { __ } from '@wordpress/i18n'; import { useTabState, Tab, TabList, TabPanel } from 'reakit/Tab'; /** * Internal dependencies */ import './style.scss'; export interface TabsProps { /** * Component wrapper classname */ className?: string; /** * Event handler triggered when a tab is selected */ onSelect?: ( tabName: string ) => void; /** * Array of tab objects */ tabs: Array< { name: string; title: string; content: JSX.Element; ariaLabel?: string; } >; /** * Classname to be applied to the active tab */ activeClass?: string; /** * Name of the tab to be selected by default */ initialTabName?: string | undefined; /** * Aria label for the tablist */ ariaLabel?: string; /** * Instance ID for the component */ instanceId: number; /** * ID for the component */ id?: string; } /** * Exporting the component for Storybook. Use the default export instead. */ export const __TabsWithoutInstanceId = ( { className, onSelect = () => null, tabs, activeClass = 'is-active', initialTabName, ariaLabel = __( 'Tabbed Content', 'woo-gutenberg-products-block' ), instanceId, id, }: TabsProps ): JSX.Element | null => { 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( __TabsWithoutInstanceId );