85 lines
1.9 KiB
JavaScript
85 lines
1.9 KiB
JavaScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import { __ } from '@wordpress/i18n';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
import { ButtonGroup, Button } from '@wordpress/components';
|
||
|
|
import { useState, Fragment } from '@wordpress/element';
|
||
|
|
import withComponentId from '@woocommerce/base-hocs/with-component-id';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import './editor.scss';
|
||
|
|
|
||
|
|
const ViewSwitcher = ( {
|
||
|
|
className,
|
||
|
|
label = __( 'View', 'woo-gutenberg-products-block' ),
|
||
|
|
views,
|
||
|
|
defaultView,
|
||
|
|
componentId,
|
||
|
|
render,
|
||
|
|
} ) => {
|
||
|
|
const [ currentView, setCurrentView ] = useState( defaultView );
|
||
|
|
const classes = classnames( className, 'wc-block-view-switch-control' );
|
||
|
|
const htmlId = 'wc-block-view-switch-control-' + componentId;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Fragment>
|
||
|
|
<div className={ classes }>
|
||
|
|
<label
|
||
|
|
htmlFor={ htmlId }
|
||
|
|
className="wc-block-view-switch-control__label"
|
||
|
|
>
|
||
|
|
{ label + ': ' }
|
||
|
|
</label>
|
||
|
|
<ButtonGroup id={ htmlId }>
|
||
|
|
{ views.map( ( view ) => (
|
||
|
|
<Button
|
||
|
|
key={ view.value }
|
||
|
|
isPrimary={ currentView === view.value }
|
||
|
|
isLarge
|
||
|
|
aria-pressed={ currentView === view.value }
|
||
|
|
onClick={ () => {
|
||
|
|
setCurrentView( view.value );
|
||
|
|
} }
|
||
|
|
>
|
||
|
|
{ view.name }
|
||
|
|
</Button>
|
||
|
|
) ) }
|
||
|
|
</ButtonGroup>
|
||
|
|
</div>
|
||
|
|
{ render( currentView ) }
|
||
|
|
</Fragment>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
ViewSwitcher.propTypes = {
|
||
|
|
/**
|
||
|
|
* Custom class name to add to component.
|
||
|
|
*/
|
||
|
|
className: PropTypes.string,
|
||
|
|
/**
|
||
|
|
* List of views.
|
||
|
|
*/
|
||
|
|
views: PropTypes.arrayOf(
|
||
|
|
PropTypes.shape( {
|
||
|
|
name: PropTypes.string.isRequired,
|
||
|
|
value: PropTypes.string.isRequired,
|
||
|
|
} )
|
||
|
|
).isRequired,
|
||
|
|
/**
|
||
|
|
* The default selected view.
|
||
|
|
*/
|
||
|
|
defaultView: PropTypes.string.isRequired,
|
||
|
|
/**
|
||
|
|
* Render prop for selected views.
|
||
|
|
*/
|
||
|
|
render: PropTypes.func.isRequired,
|
||
|
|
// from withComponentId
|
||
|
|
componentId: PropTypes.number.isRequired,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default withComponentId( ViewSwitcher );
|