59 lines
1.3 KiB
TypeScript
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;
|