Na}{

File Content: `edit.jsx`

/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
const {
	Component,
	Fragment,
} = wp.element;

const {
	InnerBlocks,
} = wp.blockEditor;

const {
	compose,
} = wp.compose;
const {
	withSelect,
} = wp.data;

/**
 * Internal dependencies
 */
import getStyles from './styles';
import changeColumnSize from '../block-column/change-column-size';

const availableSizes = {
	1: [ 12 ],
	2: [ 6, 6 ],
	3: [ 4, 4, 4 ],
	4: [ 3, 3, 3, 3 ],
	5: [ 2, 2, 4, 2, 2 ],
	6: [ 2, 2, 2, 2, 2, 2 ],
};

/**
 * Component
 */
class RowBlockEdit extends Component {
	constructor() {
		super( ...arguments );

		this.state = {
			currentColumnCount: this.props.attributes.columns,
		};

		this.getLayoutTemplate = this.getLayoutTemplate.bind( this );
		this.updateColumnsSizes = this.updateColumnsSizes.bind( this );
	}

	componentDidUpdate( prevProps ) {
		if ( this.props.attributes.columns !== this.state.currentColumnCount ) {
			this.setState( {
				currentColumnCount: this.props.attributes.columns,
			} );
			this.updateColumnsSizes();
		}
	}

	/**
	 * Returns the template configuration for a given section layout.
	 *
	 * @return {Object[]} Layout configuration.
	 */
	getLayoutTemplate() {
		const {
			attributes,
		} = this.props;

		let {
			columns,
		} = attributes;

		const result = [];

		for ( let k = 0; k < columns; k++ ) {
			result.push( [
				'canvas/column',
				{
					size: availableSizes[ columns ][ k ],
				},
			] );
		}

		return result;
	}

	/**
	 * Update columns sizes.
	 */
	updateColumnsSizes() {
		const {
			block,
			attributes,
		} = this.props;

		let {
			columns,
		} = attributes;

		block.innerBlocks.forEach( ( colData, i ) => {
			if ( availableSizes[ columns ][ i ] ) {
				changeColumnSize( colData.clientId, availableSizes[ columns ][ i ] );
			}
		} );
	}

	render() {
		const {
			attributes,
		} = this.props;

		let {
			className,
		} = this.props;

		const {
			columns,
			canvasClassName,
		} = attributes;

		className = classnames(
			'cnvs-block-row',
			`cnvs-block-row-columns-${ columns }`,
			canvasClassName,
		);

		return (
			<Fragment>
				<div className={ className }>
					<div className="cnvs-block-row-inner">
						<InnerBlocks
							template={ this.getLayoutTemplate() }
							templateLock="all"
							allowedBlocks={ [ 'canvas/column' ] }
						/>
					</div>
				</div>
				<style>{ canvasClassName ? getStyles( attributes, canvasClassName ) : '' }</style>
			</Fragment>
		);
	}
}

export default compose( [
	withSelect( ( select, ownProps ) => {
		const {
			getBlock,
		} = select( 'core/block-editor' );

		return {
			block: getBlock( ownProps.clientId ),
		};
	} ),
] )( RowBlockEdit );

Name	Size	Permission
block-row-editor-rtl.css	3356 bytes	0644
block-row-editor.css	3354 bytes	0644
block-row-rtl.css	946 bytes	0644
block-row.css	946 bytes	0644
block.js	9155 bytes	0644
block.jsx	962 bytes	0644
edit.jsx	2710 bytes	0644
render.php	704 bytes	0644
save.jsx	250 bytes	0644
styles.jsx	1811 bytes	0644
styles.php	1429 bytes	0644

File Content: edit.jsx

File Content: `edit.jsx`