Return an element instead of a component in useViewSwitcher (https://github.com/woocommerce/woocommerce-blocks/pull/5016)

* return element instead of component in viewSwitcher

* use ToolbarGroup instead of Toolbar
This commit is contained in:
Seghir Nadir 2021-10-27 16:41:57 +01:00 committed by GitHub
parent 3bc74b1fb2
commit ad133ba901
2 changed files with 7 additions and 6 deletions

View File

@ -157,7 +157,7 @@ export const Edit = ( { className, attributes, setAttributes, clientId } ) => {
setAttributes={ setAttributes }
/>
<BlockControls __experimentalShareWithChildBlocks>
<ViewSwitcherComponent />
{ ViewSwitcherComponent }
</BlockControls>
<CartBlockContext.Provider
value={ {

View File

@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useDispatch, select } from '@wordpress/data';
import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
import { Icon, eye } from '@woocommerce/icons';
import { store as blockEditorStore } from '@wordpress/block-editor';
@ -19,15 +19,15 @@ export const useViewSwitcher = (
views: View[]
): {
currentView: string;
component: () => JSX.Element;
component: JSX.Element;
} => {
const initialView = views[ 0 ];
const [ currentView, setCurrentView ] = useState( initialView );
const { selectBlock } = useDispatch( 'core/block-editor' );
const { getBlock } = select( blockEditorStore );
const ViewSwitcherComponent = () => (
<Toolbar>
const ViewSwitcherComponent = (
<ToolbarGroup>
<ToolbarDropdownMenu
label={ __( 'Switch view', 'woo-gutenberg-products-block' ) }
text={ currentView.label }
@ -37,6 +37,7 @@ export const useViewSwitcher = (
controls={ views.map( ( view ) => ( {
...view,
title: view.label,
isActive: view.view === currentView.view,
onClick: () => {
setCurrentView( view );
selectBlock(
@ -48,7 +49,7 @@ export const useViewSwitcher = (
},
} ) ) }
/>
</Toolbar>
</ToolbarGroup>
);
return {