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

/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { RangeControl, ToggleControl } from '@wordpress/components';

interface ClampProps {
	( number: number, boundOne: number, boundTwo?: number ): number;
}

const clamp: ClampProps = ( number, boundOne, boundTwo ) => {
	if ( ! boundTwo ) {
		return Math.max( number, boundOne ) === boundOne ? number : boundOne;
	} else if ( Math.min( number, boundOne ) === number ) {
		return boundOne;
	} else if ( Math.max( number, boundTwo ) === number ) {
		return boundTwo;
	}
	return number;
};

interface GridLayoutControlProps {
	columns: number;
	rows: number;
	setAttributes: ( attributes: Record< string, unknown > ) => void;
	alignButtons: boolean;
	minColumns?: number;
	maxColumns?: number;
	minRows?: number;
	maxRows?: number;
}

/**
 * A combination of range controls for product grid layout settings.
 *
 * @param {Object}            props               Incoming props for the component.
 * @param {number}            props.columns
 * @param {number}            props.rows
 * @param {function(any):any} props.setAttributes Setter for block attributes.
 * @param {boolean}           props.alignButtons
 * @param {number}            props.minColumns
 * @param {number}            props.maxColumns
 * @param {number}            props.minRows
 * @param {number}            props.maxRows
 */
const GridLayoutControl = ( {
	columns,
	rows,
	setAttributes,
	alignButtons,
	minColumns = 1,
	maxColumns = 6,
	minRows = 1,
	maxRows = 6,
}: GridLayoutControlProps ) => {
	return (
		<>
			<RangeControl
				label={ __( 'Columns', 'woocommerce' ) }
				value={ columns }
				onChange={ ( value: number ) => {
					const newValue = clamp( value, minColumns, maxColumns );
					setAttributes( {
						columns: Number.isNaN( newValue ) ? '' : newValue,
					} );
				} }
				min={ minColumns }
				max={ maxColumns }
			/>
			<RangeControl
				label={ __( 'Rows', 'woocommerce' ) }
				value={ rows }
				onChange={ ( value: number ) => {
					const newValue = clamp( value, minRows, maxRows );
					setAttributes( {
						rows: Number.isNaN( newValue ) ? '' : newValue,
					} );
				} }
				min={ minRows }
				max={ maxRows }
			/>
			<ToggleControl
				label={ __(
					'Align the last block to the bottom',
					'woocommerce'
				) }
				help={
					alignButtons
						? __(
								'Align the last block to the bottom.',
								'woocommerce'
						  )
						: __(
								'The last inner block will follow other content.',
								'woocommerce'
						  )
				}
				checked={ alignButtons }
				onChange={ () =>
					setAttributes( { alignButtons: ! alignButtons } )
				}
			/>
		</>
	);
};

export default GridLayoutControl;