Server IP : 104.21.14.103 / Your IP : 18.216.66.30 Web Server : LiteSpeed System : Linux business53.web-hosting.com 4.18.0-553.lve.el8.x86_64 #1 SMP Mon May 27 15:27:34 UTC 2024 x86_64 User : giankuin ( 1871) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/giankuin/www/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/components/grid-layout-control/ |
Upload File : |
/** * External dependencies */ import { __ } from '@wordpress/i18n'; import { clamp, isNaN } from 'lodash'; import { Fragment } from '@wordpress/element'; import PropTypes from 'prop-types'; import { RangeControl, ToggleControl } from '@wordpress/components'; import { MAX_COLUMNS, MIN_COLUMNS, MAX_ROWS, MIN_ROWS, } from '@woocommerce/block-settings'; /** * A combination of range controls for product grid layout settings. */ const GridLayoutControl = ( { columns, rows, setAttributes, alignButtons, } ) => { return ( <Fragment> <RangeControl label={ __( 'Columns', 'woocommerce' ) } value={ columns } onChange={ ( value ) => { const newValue = clamp( value, MIN_COLUMNS, MAX_COLUMNS ); setAttributes( { columns: isNaN( newValue ) ? '' : newValue, } ); } } min={ MIN_COLUMNS } max={ MAX_COLUMNS } /> <RangeControl label={ __( 'Rows', 'woocommerce' ) } value={ rows } onChange={ ( value ) => { const newValue = clamp( value, MIN_ROWS, MAX_ROWS ); setAttributes( { rows: isNaN( newValue ) ? '' : newValue, } ); } } min={ MIN_ROWS } max={ MAX_ROWS } /> <ToggleControl label={ __( 'Align Last Block', 'woocommerce' ) } help={ alignButtons ? __( 'The last inner block will be aligned vertically.', 'woocommerce' ) : __( 'The last inner block will follow other content.', 'woocommerce' ) } checked={ alignButtons } onChange={ () => setAttributes( { alignButtons: ! alignButtons } ) } /> </Fragment> ); }; GridLayoutControl.propTypes = { /** * The current columns count. */ columns: PropTypes.oneOfType( [ PropTypes.number, PropTypes.string ] ) .isRequired, /** * The current rows count. */ rows: PropTypes.oneOfType( [ PropTypes.number, PropTypes.string ] ) .isRequired, /** * Whether or not buttons are aligned horizontally across items. */ alignButtons: PropTypes.bool.isRequired, /** * Callback to update the layout settings. */ setAttributes: PropTypes.func.isRequired, }; export default GridLayoutControl;