@gravityforms/utils/src/dom/spacer-classes.js

JavaScript utilities for Gravity Forms development.

/**
 * @ignore
 */
const getPrefixedSpacerClasses = ( prop, prefix = '', classname = 'gform-spacing' ) => {
	const classes = {};

	if (
		! prop ||
		(
			typeof prop !== 'string' &&
			typeof prop !== 'number' &&
			! Array.isArray( prop )
		) ||
		( Array.isArray( prop ) && ! prop.length )
	) {
		return classes;
	}

	if ( typeof prop === 'string' || typeof prop === 'number' ) {
		classes[ `${ classname }--${ prefix }bottom-${ prop }` ] = true;
		return classes;
	}

	if ( prop.length === 1 ) {
		[ 'top', 'right', 'bottom', 'left' ].forEach( ( position ) => {
			classes[ `${ classname }--${ prefix }${ position }-${ prop[ 0 ] }` ] = true;
		} );
		return classes;
	}
	if ( prop.length === 2 ) {
		[ 'top', 'bottom' ].forEach( ( position ) => {
			classes[ `${ classname }--${ prefix }${ position }-${ prop[ 0 ] }` ] = true;
		} );
		[ 'right', 'left' ].forEach( ( position ) => {
			classes[ `${ classname }--${ prefix }${ position }-${ prop[ 1 ] }` ] = true;
		} );
		return classes;
	}
	if ( prop.length === 3 ) {
		classes[ `${ classname }--${ prefix }top-${ prop[ 0 ] }` ] = true;
		[ 'right', 'left' ].forEach( ( position ) => {
			classes[ `${ classname }--${ prefix }${ position }-${ prop[ 1 ] }` ] = true;
		} );
		classes[ `gform-spacing--${ prefix }bottom-${ prop[ 2 ] }` ] = true;
		return classes;
	}
	if ( prop.length === 4 ) {
		classes[ `${ classname }--${ prefix }top-${ prop[ 0 ] }` ] = true;
		classes[ `${ classname }--${ prefix }right-${ prop[ 1 ] }` ] = true;
		classes[ `${ classname }--${ prefix }bottom-${ prop[ 2 ] }` ] = true;
		classes[ `${ classname }--${ prefix }left-${ prop[ 3 ] }` ] = true;
		return classes;
	}

	return classes;
};

/**
 * @module spacerClasses
 * @description Return an object in the format classnames expects for spacing classes built by using a
 * passed in string or array of strings defining spaces at breakpoints.
 *
 * @since 1.4.2
 *
 * @param {string|number|Array} prop      The spacing information matching units in the design system.
 * @param {string}              classname The root classname to apply to the spacing classes.
 *
 * @return {object} The spacing classes object.
 */
export default function spacerClasses( prop = '', classname = 'gform-spacing' ) {
	const classes = {};
	const breakpointMap = [ '', 'md', 'lg' ];

	if (
		! prop || ( typeof prop !== 'string' &&
			typeof prop !== 'number' &&
			! Array.isArray( prop ) && ! ( typeof prop === 'object' && ! Array.isArray( prop ) ) ) ||
		( Array.isArray( prop ) && ! prop.length )
	) {
		return classes;
	}

	classes[ classname ] = true;

	if ( typeof prop === 'string' || typeof prop === 'number' || Array.isArray( prop ) ) {
		return {
			...classes,
			...getPrefixedSpacerClasses( prop, '', classname ),
		};
	}

	return breakpointMap.reduce( ( carry, breakpoint ) => {
		if ( ! Object.prototype.hasOwnProperty.call( prop, breakpoint ) ) {
			return carry;
		}

		return {
			...carry,
			...getPrefixedSpacerClasses( prop[ breakpoint ], breakpoint ? `${ breakpoint }-` : '', classname ),
		};
	}, classes );
}