@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
57 lines • 1.92 kB
JavaScript
import { compileClassNames } from '@zohodesk/utils';
export default function cssJSLogic({
props,
style
}) {
let {
customClass,
needAppearance,
isBold,
rounded,
size,
children,
palette,
status,
disabled,
shouldStrikeThroughDisabled
} = props;
let {
customButton = '',
customStatus = '',
customStatusSize = ''
} = customClass;
const strikeExcludedPalettes = ['plainprimary', 'plainsecondary', 'plainDanger', 'plainSuccess'];
let paletteLower = palette.toLowerCase();
let statusLower = status.toLowerCase();
let canStrikeThrough = !strikeExcludedPalettes.includes(paletteLower);
let buttonClass = compileClassNames({
[style.bold]: isBold,
[style.default]: !needAppearance,
[style[paletteLower]]: needAppearance,
[style.rounded]: needAppearance && rounded,
[style[size.toLowerCase()]]: needAppearance && !children,
[style[`${size}Btn`]]: needAppearance && children,
[style[`${size}Btn${paletteLower}`]]: needAppearance && children && rounded,
[`${style[`${paletteLower}Strike`]} ${style.strike}`]: disabled && canStrikeThrough && shouldStrikeThroughDisabled,
[style.loader]: !!needAppearance && statusLower !== 'none',
[customButton]: !!customButton
});
let loaderParentClass = compileClassNames({
[style.loading]: statusLower === 'loading',
[style[`${size}loading`]]: statusLower === 'loading',
[style.successstate]: statusLower != 'loading',
[customStatusSize]: !!customStatusSize
});
let loaderChildClass = compileClassNames({
[style.loadingelement]: statusLower === 'loading',
[style[`${paletteLower}element`]]: statusLower === 'loading',
[style.tickElement]: statusLower != 'loading',
[style[`${paletteLower}Tick`]]: statusLower != 'loading',
[customStatus]: !!customStatus
});
return {
buttonClass,
loaderParentClass,
loaderChildClass
};
}