72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { useDispatch, select as dataSelect } from '@wordpress/data';
|
|
import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
|
|
import { BlockControls } from '@wordpress/block-editor';
|
|
import { Icon } from '@wordpress/icons';
|
|
import { eye } from '@woocommerce/icons';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import type { View } from './types';
|
|
import { getView } from './utils';
|
|
|
|
export const Switcher = ( {
|
|
currentView,
|
|
views,
|
|
clientId,
|
|
}: {
|
|
currentView: string;
|
|
views: View[];
|
|
clientId: string;
|
|
} ): JSX.Element | null => {
|
|
const currentViewObject = getView( currentView, views ) || views[ 0 ];
|
|
const currentViewLabel = currentViewObject.label;
|
|
const { updateBlockAttributes, selectBlock } =
|
|
useDispatch( 'core/block-editor' );
|
|
|
|
return (
|
|
<BlockControls>
|
|
<ToolbarGroup>
|
|
<ToolbarDropdownMenu
|
|
label={ __(
|
|
'Switch view',
|
|
'woo-gutenberg-products-block'
|
|
) }
|
|
text={ currentViewLabel }
|
|
icon={
|
|
<Icon icon={ eye } style={ { marginRight: '8px' } } />
|
|
}
|
|
controls={ views.map( ( view ) => ( {
|
|
...view,
|
|
title: (
|
|
<span style={ { marginLeft: '8px' } }>
|
|
{ view.label }
|
|
</span>
|
|
),
|
|
isActive: view.view === currentView,
|
|
onClick: () => {
|
|
updateBlockAttributes( clientId, {
|
|
currentView: view.view,
|
|
} );
|
|
selectBlock(
|
|
dataSelect( 'core/block-editor' )
|
|
.getBlock( clientId )
|
|
?.innerBlocks.find(
|
|
( block: { name: string } ) =>
|
|
block.name === view.view
|
|
)?.clientId || clientId
|
|
);
|
|
},
|
|
} ) ) }
|
|
/>
|
|
</ToolbarGroup>
|
|
</BlockControls>
|
|
);
|
|
};
|
|
|
|
export default Switcher;
|