@zohodesk/components/es/v1/Button/css/cssJSLogic.js

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

import style from "./Button_v1.module.css";
import compileClassNames from '@zohodesk/utils/es/compileClassNames';
import buttonResetStyle from "../../../semantic/Button/semanticButton.module.css";
import getPaletteClasses from "../../helpers/colorHelpers/colorHelper";
import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
import { DISABLED_APPEARANCE, LOADER_PLACEMENT, SHAPE, SIZE, STATUS } from "../constants";

const capitalize = (value = '') => value.charAt(0).toUpperCase() + value.slice(1);

export default function cssJSLogic({
  props
}) {
  const {
    palette,
    bgAppearance,
    borderAppearance,
    paletteShade,
    size,
    status,
    isDisabled,
    isReadOnly,
    isSelected,
    shape,
    loaderPlacement,
    disabledAppearance,
    customClass = DUMMY_OBJECT
  } = props;
  const {
    wrapper: wrapperClass = '',
    text: textClassCustom = '',
    icon: iconClassCustom = ''
  } = customClass;
  const isLoading = status === STATUS.LOADING;
  const isSuccess = status === STATUS.SUCCESS;
  const isInteractive = !isDisabled && !isReadOnly;
  const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
  const {
    bg,
    hoverBg,
    focusBg,
    activeBg,
    text,
    hoverText,
    focusText,
    activeText,
    border,
    hoverBorder,
    focusBorder,
    activeBorder
  } = getPaletteClasses({
    palette,
    bgAppearance,
    borderAppearance,
    paletteShade,
    isSelected
  });
  const sizeClass = size ? style[`size${capitalize(size)}`] : '';
  const shapeClass = shape ? style[`shape${capitalize(shape)}`] : '';
  const shouldStrike = disabledAppearance === DISABLED_APPEARANCE.STRIKE && isDisabled;
  const buttonClassName = compileClassNames({
    [buttonResetStyle.buttonReset]: true,
    [style.button]: true,
    [bg]: !!bg,
    [hoverBg]: !!hoverBg && isInteractive,
    [focusBg]: !!focusBg && isInteractive,
    [activeBg]: !!activeBg && isInteractive,
    [text]: !!text,
    [hoverText]: !!hoverText && isInteractive,
    [focusText]: !!focusText && isInteractive,
    [activeText]: !!activeText && isInteractive,
    [border]: !!border,
    [hoverBorder]: !!hoverBorder && isInteractive,
    [focusBorder]: !!focusBorder && isInteractive,
    [activeBorder]: !!activeBorder && isInteractive,
    [sizeClass]: !!sizeClass,
    [shapeClass]: !!shapeClass,
    [style.disabledOpac]: isReadOnly || isDisabled && disabledAppearance === DISABLED_APPEARANCE.DULL,
    [style.disabledPointer]: isReadOnly || isDisabled,
    [style.loading]: isLoading,
    [style.strike]: shouldStrike,
    [wrapperClass]: !!wrapperClass
  });
  const textClassName = compileClassNames({
    [textClassCustom]: !!textClassCustom
  });
  const iconClassName = compileClassNames({
    [iconClassCustom]: !!iconClassCustom
  });
  return {
    buttonClassName,
    textClassName,
    contentWrapperClass: overlayActive ? style.overlayHidden : style.contentWrapper,
    loaderOverlayClass: style.loaderOverlay,
    successOverlayClass: style.successOverlay,
    iconClassName
  };
}