@zohodesk/components/lib/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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = cssJSLogic;

var _Button_v1Module = _interopRequireDefault(require("./Button_v1.module.css"));

var _compileClassNames4 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));

var _semanticButtonModule = _interopRequireDefault(require("../../../semantic/Button/semanticButton.module.css"));

var _colorHelper = _interopRequireDefault(require("../../helpers/colorHelpers/colorHelper"));

var _constants = require("@zohodesk/dotkit/es/utils/constants");

var _constants2 = require("../constants");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var capitalize = function capitalize() {
  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  return value.charAt(0).toUpperCase() + value.slice(1);
};

function cssJSLogic(_ref) {
  var _compileClassNames;

  var props = _ref.props;
  var palette = props.palette,
      bgAppearance = props.bgAppearance,
      borderAppearance = props.borderAppearance,
      paletteShade = props.paletteShade,
      size = props.size,
      status = props.status,
      isDisabled = props.isDisabled,
      isReadOnly = props.isReadOnly,
      isSelected = props.isSelected,
      shape = props.shape,
      loaderPlacement = props.loaderPlacement,
      disabledAppearance = props.disabledAppearance,
      _props$customClass = props.customClass,
      customClass = _props$customClass === void 0 ? _constants.DUMMY_OBJECT : _props$customClass;
  var _customClass$wrapper = customClass.wrapper,
      wrapperClass = _customClass$wrapper === void 0 ? '' : _customClass$wrapper,
      _customClass$text = customClass.text,
      textClassCustom = _customClass$text === void 0 ? '' : _customClass$text,
      _customClass$icon = customClass.icon,
      iconClassCustom = _customClass$icon === void 0 ? '' : _customClass$icon;
  var isLoading = status === _constants2.STATUS.LOADING;
  var isSuccess = status === _constants2.STATUS.SUCCESS;
  var isInteractive = !isDisabled && !isReadOnly;
  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;

  var _getPaletteClasses = (0, _colorHelper["default"])({
    palette: palette,
    bgAppearance: bgAppearance,
    borderAppearance: borderAppearance,
    paletteShade: paletteShade,
    isSelected: isSelected
  }),
      bg = _getPaletteClasses.bg,
      hoverBg = _getPaletteClasses.hoverBg,
      focusBg = _getPaletteClasses.focusBg,
      activeBg = _getPaletteClasses.activeBg,
      text = _getPaletteClasses.text,
      hoverText = _getPaletteClasses.hoverText,
      focusText = _getPaletteClasses.focusText,
      activeText = _getPaletteClasses.activeText,
      border = _getPaletteClasses.border,
      hoverBorder = _getPaletteClasses.hoverBorder,
      focusBorder = _getPaletteClasses.focusBorder,
      activeBorder = _getPaletteClasses.activeBorder;

  var sizeClass = size ? _Button_v1Module["default"]["size".concat(capitalize(size))] : '';
  var shapeClass = shape ? _Button_v1Module["default"]["shape".concat(capitalize(shape))] : '';
  var shouldStrike = disabledAppearance === _constants2.DISABLED_APPEARANCE.STRIKE && isDisabled;
  var buttonClassName = (0, _compileClassNames4["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, _semanticButtonModule["default"].buttonReset, true), _defineProperty(_compileClassNames, _Button_v1Module["default"].button, true), _defineProperty(_compileClassNames, bg, !!bg), _defineProperty(_compileClassNames, hoverBg, !!hoverBg && isInteractive), _defineProperty(_compileClassNames, focusBg, !!focusBg && isInteractive), _defineProperty(_compileClassNames, activeBg, !!activeBg && isInteractive), _defineProperty(_compileClassNames, text, !!text), _defineProperty(_compileClassNames, hoverText, !!hoverText && isInteractive), _defineProperty(_compileClassNames, focusText, !!focusText && isInteractive), _defineProperty(_compileClassNames, activeText, !!activeText && isInteractive), _defineProperty(_compileClassNames, border, !!border), _defineProperty(_compileClassNames, hoverBorder, !!hoverBorder && isInteractive), _defineProperty(_compileClassNames, focusBorder, !!focusBorder && isInteractive), _defineProperty(_compileClassNames, activeBorder, !!activeBorder && isInteractive), _defineProperty(_compileClassNames, sizeClass, !!sizeClass), _defineProperty(_compileClassNames, shapeClass, !!shapeClass), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledOpac, isReadOnly || isDisabled && disabledAppearance === _constants2.DISABLED_APPEARANCE.DULL), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledPointer, isReadOnly || isDisabled), _defineProperty(_compileClassNames, _Button_v1Module["default"].loading, isLoading), _defineProperty(_compileClassNames, _Button_v1Module["default"].strike, shouldStrike), _defineProperty(_compileClassNames, wrapperClass, !!wrapperClass), _compileClassNames));
  var textClassName = (0, _compileClassNames4["default"])(_defineProperty({}, textClassCustom, !!textClassCustom));
  var iconClassName = (0, _compileClassNames4["default"])(_defineProperty({}, iconClassCustom, !!iconClassCustom));
  return {
    buttonClassName: buttonClassName,
    textClassName: textClassName,
    contentWrapperClass: overlayActive ? _Button_v1Module["default"].overlayHidden : _Button_v1Module["default"].contentWrapper,
    loaderOverlayClass: _Button_v1Module["default"].loaderOverlay,
    successOverlayClass: _Button_v1Module["default"].successOverlay,
    iconClassName: iconClassName
  };
}