@zohodesk/layout
Version:
Unified Component Library - Layout
51 lines (50 loc) • 1.76 kB
JavaScript
import { compileClassNames } from '@zohodesk/utils';
/**
* container classname based on js state
* @param {object} props flex props
* @param {object} flex style object
* @returns {string} classnames string with space separate
*/
export default function (_ref) {
let {
props,
style
} = _ref;
const {
$ui_displayMode,
$ui_autoFlow,
$ui_alignItems,
$ui_alignSelf,
$ui_alignContent,
$ui_justifyItems,
$ui_justifySelf,
$ui_justifyContent,
$ui_scroll,
$flag_fullsize,
$ui_className
} = props;
const alignItemsClassname = `alignItems_${$ui_alignItems}`;
const alignSelfClassname = `alignSelf_${$ui_alignSelf}`;
const alignContentClassname = `alignContent_${$ui_alignContent}`;
const justifyItemsClassname = `justifyItems_${$ui_justifyItems}`;
const justifySelfClassname = `justifySelf_${$ui_justifySelf}`;
const justifyContentClassname = `justifyContent_${$ui_justifyContent}`;
const overFlow = `scroll_${$ui_scroll}`;
const gridClass = compileClassNames({
[style.grid]: $ui_displayMode === 'grid',
[style.inlineGrid]: $ui_displayMode === 'inline',
[style[$ui_autoFlow]]: !!$ui_autoFlow && !!$ui_displayMode,
[style[alignItemsClassname]]: !!$ui_alignItems && !!$ui_displayMode,
[style[justifyItemsClassname]]: !!$ui_justifyItems && !!$ui_displayMode,
[style[alignContentClassname]]: !!$ui_alignContent && !!$ui_displayMode,
[style[justifyContentClassname]]: !!$ui_justifyContent && !!$ui_displayMode,
[style[alignSelfClassname]]: !!$ui_alignSelf,
[style[justifySelfClassname]]: !!$ui_justifySelf,
[style[overFlow]]: !!$ui_scroll,
[style.fullSize]: $flag_fullsize,
[$ui_className]: !!$ui_className
});
return {
gridClass
};
}