woocommerce/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx

100 lines
2.4 KiB
TypeScript

/* eslint-disable jsdoc/check-alignment */
/**
* External dependencies
*/
import type { ReactElement } from 'react';
import {
useBlockProps,
InnerBlocks,
BlockControls,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { filledCart, removeCart } from '@woocommerce/icons';
import { Icon } from '@wordpress/icons';
import { EditorProvider } from '@woocommerce/base-context';
import type { TemplateArray } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import { useViewSwitcher, useForcedLayout } from '../../cart-checkout-shared';
import { MiniCartInnerBlocksStyle } from './inner-blocks-style';
import './editor.scss';
// Array of allowed block names.
const ALLOWED_BLOCKS = [
'woocommerce/filled-mini-cart-contents-block',
'woocommerce/empty-mini-cart-contents-block',
];
const views = [
{
view: 'woocommerce/filled-mini-cart-contents-block',
label: __( 'Filled Mini Cart', 'woo-gutenberg-products-block' ),
icon: <Icon icon={ filledCart } />,
},
{
view: 'woocommerce/empty-mini-cart-contents-block',
label: __( 'Empty Mini Cart', 'woo-gutenberg-products-block' ),
icon: <Icon icon={ removeCart } />,
},
];
interface Props {
clientId: string;
}
const Edit = ( { clientId }: Props ): ReactElement => {
const blockProps = useBlockProps( {
/**
* This is a workaround for the Site Editor to calculate the
* correct height of the Mini Cart template part on the first load.
*
* @see https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5825
*/
style: {
minHeight: '100vh',
},
} );
const defaultTemplate = [
[ 'woocommerce/filled-mini-cart-contents-block', {}, [] ],
[ 'woocommerce/empty-mini-cart-contents-block', {}, [] ],
] as TemplateArray;
const { currentView, component: ViewSwitcherComponent } = useViewSwitcher(
clientId,
views
);
useForcedLayout( {
clientId,
registeredBlocks: ALLOWED_BLOCKS,
defaultTemplate,
} );
return (
<div { ...blockProps }>
<EditorProvider currentView={ currentView }>
<BlockControls>{ ViewSwitcherComponent }</BlockControls>
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
template={ defaultTemplate }
templateLock={ false }
/>
</EditorProvider>
<MiniCartInnerBlocksStyle style={ blockProps.style } />
</div>
);
};
export default Edit;
export const Save = (): JSX.Element => {
return (
<div { ...useBlockProps.save() }>
<InnerBlocks.Content />
</div>
);
};