woocommerce/plugins/woocommerce-blocks/assets/js/editor-components/grid-content-control/index.js

74 lines
2.1 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import { ToggleControl } from '@wordpress/components';
/**
* A combination of toggle controls for content visibility in product grids.
*
* @param {Object} props Incoming props for the component.
* @param {function(any):any} props.onChange
* @param {Object} props.settings
*/
const GridContentControl = ( { onChange, settings } ) => {
const { image, button, price, rating, title } = settings;
// If `image` is undefined, that might be because it's a block that was
// created before the `image` attribute existed, so we default to true.
const imageIsVisible = image !== false;
return (
<>
<ToggleControl
label={ __( 'Product image', 'woo-gutenberg-products-block' ) }
checked={ imageIsVisible }
onChange={ () =>
onChange( { ...settings, image: ! imageIsVisible } )
}
/>
<ToggleControl
label={ __( 'Product title', 'woo-gutenberg-products-block' ) }
checked={ title }
onChange={ () => onChange( { ...settings, title: ! title } ) }
/>
<ToggleControl
label={ __( 'Product price', 'woo-gutenberg-products-block' ) }
checked={ price }
onChange={ () => onChange( { ...settings, price: ! price } ) }
/>
<ToggleControl
label={ __( 'Product rating', 'woo-gutenberg-products-block' ) }
checked={ rating }
onChange={ () => onChange( { ...settings, rating: ! rating } ) }
/>
<ToggleControl
label={ __(
'Add to Cart button',
'woo-gutenberg-products-block'
) }
checked={ button }
onChange={ () => onChange( { ...settings, button: ! button } ) }
/>
</>
);
};
GridContentControl.propTypes = {
/**
* The current title visibility.
*/
settings: PropTypes.shape( {
image: PropTypes.bool.isRequired,
button: PropTypes.bool.isRequired,
price: PropTypes.bool.isRequired,
rating: PropTypes.bool.isRequired,
title: PropTypes.bool.isRequired,
} ).isRequired,
/**
* Callback to update the layout settings.
*/
onChange: PropTypes.func.isRequired,
};
export default GridContentControl;