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:
parent
3bc74b1fb2
commit
ad133ba901
|
@ -157,7 +157,7 @@ export const Edit = ( { className, attributes, setAttributes, clientId } ) => {
|
|||
setAttributes={ setAttributes }
|
||||
/>
|
||||
<BlockControls __experimentalShareWithChildBlocks>
|
||||
<ViewSwitcherComponent />
|
||||
{ ViewSwitcherComponent }
|
||||
</BlockControls>
|
||||
<CartBlockContext.Provider
|
||||
value={ {
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue