woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/use-view-switcher.tsx

59 lines
1.3 KiB
TypeScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
import { BlockControls } from '@wordpress/block-editor';
import { Icon, eye } from '@woocommerce/icons';
interface View {
view: string;
label: string;
icon: string | JSX.Element;
default?: boolean;
}
export const useViewSwitcher = (
views: View[]
): {
currentView: string;
component: () => JSX.Element;
} => {
const initialView =
views?.find( ( view ) => view.default === true ) || views[ 0 ];
const [ currentView, setCurrentView ] = useState( initialView );
const ViewSwitcherComponent = () => (
<BlockControls>
<Toolbar>
<ToolbarDropdownMenu
label={ __(
'Switch view',
'woo-gutenberg-products-block'
) }
text={ currentView.label }
icon={
<Icon
srcElement={ eye }
style={ { marginRight: '8px' } }
/>
}
controls={ views.map( ( view ) => ( {
...view,
title: view.label,
onClick: () => setCurrentView( view ),
} ) ) }
/>
</Toolbar>
</BlockControls>
);
return {
currentView: currentView.view,
component: ViewSwitcherComponent,
};
};
export default useViewSwitcher;