File "grid.js"
Full Path: /home/warrior1/public_html/wp-content/plugins/elementor/app/assets/js/ui/grid/grid.js
File size: 2.86 KB
MIME-type: text/x-java
Charset: utf-8
import { arrayToClassName, pxToRem } from 'elementor-app/utils/utils.js';
import './grid.scss';
export default function Grid( props ) {
const propsMap = {
direction: '--direction{{ -VALUE }}',
justify: '--justify{{ -VALUE }}',
alignContent: '--align-content{{ -VALUE }}',
alignItems: '--align-items{{ -VALUE }}',
container: '-container',
item: '-item',
noWrap: '-container--no-wrap',
wrapReverse: '-container--wrap-reverse',
zeroMinWidth: '-item--zero-min-width',
spacing: '-container--spacing',
xs: '-item-xs{{ -VALUE }}',
sm: '-item-sm{{ -VALUE }}',
md: '-item-md{{ -VALUE }}',
lg: '-item-lg{{ -VALUE }}',
xl: '-item-xl{{ -VALUE }}',
xxl: '-item-xxl{{ -VALUE }}',
},
getStyle = () => isValidPropValue( props.spacing ) ? { '--grid-spacing-gutter': pxToRem( props.spacing ) } : {},
classes = [ getBaseClassName(), props.className, ...getPropsClasses( propsMap, props ) ];
return (
<div style={ getStyle() } className={ arrayToClassName( classes ) }>
{ props.children }
</div>
);
}
function getPropsClasses( propsMap, props ) {
const classes = [];
for ( const prop in propsMap ) {
if ( props[ prop ] ) {
const propValue = isValidPropValue( props[ prop ] ) ? props[ prop ] : '';
classes.push( getBaseClassName() + renderPropValueBrackets( propsMap[ prop ], propValue ) );
}
}
return classes;
}
function renderPropValueBrackets( propClass, propValue ) {
const brackets = propClass.match( /{{.*?}}/ );
if ( brackets ) {
const bracketsValue = propValue ? brackets[ 0 ].replace( /[{ }]/g, '' ).replace( /value/i, propValue ) : '';
propClass = propClass.replace( brackets[ 0 ], bracketsValue );
}
return propClass;
}
function getBaseClassName() {
return 'eps-grid';
}
function isValidPropValue( propValue ) {
return propValue && 'boolean' !== typeof propValue;
}
Grid.propTypes = {
className: PropTypes.string,
direction: PropTypes.oneOf( [ 'row', 'column', 'row-reverse', 'column-reverse' ] ),
justify: PropTypes.oneOf( [ 'start', 'center', 'end', 'space-between', 'space-evenly', 'space-around', 'stretch' ] ),
alignContent: PropTypes.oneOf( [ 'start', 'center', 'end', 'space-between', 'stretch' ] ),
alignItems: PropTypes.oneOf( [ 'start', 'center', 'end', 'baseline', 'stretch' ] ),
container: PropTypes.bool,
item: PropTypes.bool,
noWrap: PropTypes.bool,
wrapReverse: PropTypes.bool,
zeroMinWidth: PropTypes.bool,
spacing: PropTypes.number,
xs: PropTypes.oneOfType( [ PropTypes.number, PropTypes.bool ] ),
sm: PropTypes.oneOfType( [ PropTypes.number, PropTypes.bool ] ),
md: PropTypes.oneOfType( [ PropTypes.number, PropTypes.bool ] ),
lg: PropTypes.oneOfType( [ PropTypes.number, PropTypes.bool ] ),
xl: PropTypes.oneOfType( [ PropTypes.number, PropTypes.bool ] ),
xxl: PropTypes.oneOfType( [ PropTypes.number, PropTypes.bool ] ),
children: PropTypes.any.isRequired,
};
Grid.defaultProps = {
className: '',
};