@zohodesk/layout
Version:
Unified Component Library - Layout
56 lines (55 loc) • 1.94 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_direction,
$flag_flexible,
$flag_shrink,
$ui_alignItems,
$ui_justifyContent,
$ui_alignContent,
$ui_alignSelf,
$ui_basisMode,
$ui_scroll,
$ui_wrapMode,
$flag_fullsize,
$ui_className
} = props;
const alignItemsClassname = `alignItems_${$ui_alignItems}`;
const justifyContentClassname = `justifyContent_${$ui_justifyContent}`;
const alignContentClassname = `alignContent_${$ui_alignContent}`;
const alignSelfClassname = `alignSelf_${$ui_alignSelf}`;
const basisClassname = `basis_${$ui_basisMode}`;
const overFlow = `scroll_${$ui_scroll}`;
const flexClass = compileClassNames({
[style.flex]: $ui_displayMode === 'flex',
[style.inlineFlex]: $ui_displayMode === 'inline',
[style[$ui_direction]]: !!$ui_direction && !!$ui_displayMode,
[style[alignItemsClassname]]: !!$ui_alignItems && !!$ui_displayMode,
[style[justifyContentClassname]]: !!$ui_justifyContent && !!$ui_displayMode,
[style[alignContentClassname]]: !!$ui_alignContent && !!$ui_displayMode,
[style[$ui_wrapMode]]: !!$ui_wrapMode && !!$ui_displayMode,
[style.flexible]: $flag_flexible,
[style[alignSelfClassname]]: !!$ui_alignSelf,
[style.basis_zero]: $ui_basisMode === undefined && $flag_flexible,
[style[basisClassname]]: !!$ui_basisMode,
[style.noShrink]: $flag_shrink === false,
[style.shrink]: $flag_shrink === true || $flag_shrink === undefined && $flag_flexible,
[style[overFlow]]: !!$ui_scroll,
[style.fullSize]: $flag_fullsize,
[$ui_className]: !!$ui_className
});
return {
flexClass
};
}