Tiny File Manager

Back Back Up Advanced Editor

import { Placeholder } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';

/**
 * Get columns sizes array from layout string
 *
 * @param {string} layout   The layout string. Example: `3-6-3`
 * @param {string} uniqueId The grid block uniqueId attribute
 * @return {Array} The columns attributes
 */
export const getColumnsFromLayout = ( layout, uniqueId ) => {
	const {
		gridItemPaddingTop,
		gridItemPaddingRight,
		gridItemPaddingBottom,
		gridItemPaddingLeft,
	} = generateBlocksStyling.container;

const columnsData = layout.split( '-' ) || [];

return columnsData.map( ( col ) => ( {
		isGrid: true,
		gridId: uniqueId,
		paddingTop: gridItemPaddingTop || '',
		paddingRight: gridItemPaddingRight || '',
		paddingBottom: gridItemPaddingBottom || '',
		paddingLeft: gridItemPaddingLeft || '',
		sizing: {
			width: `${ col }%`,
			widthMobile: '100%',
		},
	} ) );
};

export default ( { uniqueId, onClick, isDisabled = false } ) => {
	if ( isDisabled ) {
		return false;
	}

const layouts = [
		'100',
		'50-50',
		'33.33-33.33-33.33',
		'25-25-25-25',

'25-75',
		'75-25',
		'25-25-50',
		'25-50-25',

'50-25-25',
		'20-60-20',
		'20-20-20-20-20',
		'16-16-16-16-16-16',
	];

return (
		<Placeholder
			label={ __( 'Grid', 'generateblocks' ) }
			instructions={ __( 'Choose how many Containers to start with.', 'generateblocks' ) }
			className="gb-select-layout"
		>
			<div className="gb-grid-wrapper-layout-preview">
				{ layouts.map( ( layout ) => {
					const columnsData = getColumnsFromLayout( layout, uniqueId );

return (
						<button
							key={ `layout-${ layout }` }
							className="gb-grid-wrapper-layout-preview-btn"
							onClick={ () => onClick( layout ) }
						>
							{ columnsData.map( ( colAttrs, idx ) => {
								const colWidth = colAttrs.sizing.width.replace( '%', '' ).replace( '.', '-' );

return (
									<div
										key={ `layout-${ layout }-col-${ idx }` }
										className={ classnames( 'gb-col', `gb-col-${ colWidth }` ) }
									/>
								);
							} ) }
						</button>
					);
				} ) }
			</div>
		</Placeholder>
	);
};