@zohodesk/components/lib/v1/Button/Button.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";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

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

var _react = _interopRequireWildcard(require("react"));

var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");

var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));

var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));

var _Typography = _interopRequireDefault(require("../../Typography/Typography"));

var _renderNode = _interopRequireWildcard(require("@zohodesk/utils/es/renderNode"));

var _propTypes = _interopRequireDefault(require("./props/propTypes"));

var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));

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

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

var _Loader = _interopRequireDefault(require("../shared/Loader/Loader"));

var _SuccessTick = _interopRequireDefault(require("../shared/SuccessTick/SuccessTick"));

var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

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 getTypographySize = function getTypographySize(size) {
  return _constants2.TYPOGRAPHY_SIZE_MAP[size] || '13';
};

var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
  var palette = props.palette,
      bgAppearance = props.bgAppearance,
      borderAppearance = props.borderAppearance,
      variant = props.variant,
      status = props.status,
      loaderPlacement = props.loaderPlacement,
      size = props.size,
      iconName = props.iconName,
      iconSize = props.iconSize,
      iconPlacement = props.iconPlacement,
      renderIcon = props.renderIcon,
      renderBefore = props.renderBefore,
      renderAfter = props.renderAfter,
      renderLoader = props.renderLoader,
      renderSuccess = props.renderSuccess,
      children = props.children,
      type = props.type,
      onClick = props.onClick,
      isDisabled = props.isDisabled,
      isReadOnly = props.isReadOnly,
      isSelected = props.isSelected,
      shape = props.shape,
      paletteShade = props.paletteShade,
      disabledAppearance = props.disabledAppearance,
      title = props.title,
      customProps = props.customProps,
      customAttributes = props.customAttributes,
      a11yAttributes = props.a11yAttributes,
      customId = props.customId,
      testId = props.testId;
  var isLoading = status === _constants2.STATUS.LOADING;
  var isSuccess = status === _constants2.STATUS.SUCCESS;
  var isDisabledState = isDisabled || isLoading;
  var isInteractionDisabled = isDisabledState || isReadOnly;
  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
  var _customProps$text = customProps.text,
      contentProps = _customProps$text === void 0 ? _constants.DUMMY_OBJECT : _customProps$text,
      _customProps$icon = customProps.icon,
      iconProps = _customProps$icon === void 0 ? _constants.DUMMY_OBJECT : _customProps$icon;
  var iconTagAttributes = (0, _react.useMemo)(function () {
    return _objectSpread(_objectSpread({}, iconProps.tagAttributes || _constants.DUMMY_OBJECT), {}, {
      'data-test-id': testId ? "".concat(testId, "_icon") : undefined
    });
  }, [iconProps.tagAttributes, testId]);
  var classes = (0, _react.useMemo)(function () {
    return (0, _cssJSLogic["default"])({
      props: props
    });
  }, [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
  var loaderOverlayClass = classes.loaderOverlayClass,
      successOverlayClass = classes.successOverlayClass,
      contentWrapperClass = classes.contentWrapperClass,
      textClassName = classes.textClassName,
      buttonClassName = classes.buttonClassName,
      iconClassName = classes.iconClassName;
  var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);

  var _handleClick = function _handleClick(event) {
    if (isInteractionDisabled) {
      return;
    }

    onClick(event);
  };

  var _renderLoader = function _renderLoader() {
    if (!isLoading) {
      return null;
    }

    if ((0, _renderNode.isRenderable)(renderLoader)) {
      return (0, _renderNode["default"])(renderLoader, {
        status: status
      });
    }

    var loaderClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? loaderOverlayClass : '';
    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
      $ui_displayMode: "flex",
      $ui_alignItems: "center",
      $ui_justifyContent: "center",
      $ui_className: loaderClassName,
      testId: testId ? "".concat(testId, "_loader") : undefined
    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null));
  };

  var _renderSuccess = function _renderSuccess() {
    if (!isSuccess) {
      return null;
    }

    if ((0, _renderNode.isRenderable)(renderSuccess)) {
      return (0, _renderNode["default"])(renderSuccess, {
        status: status
      });
    }

    var successClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? successOverlayClass : '';
    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
      $ui_displayMode: "flex",
      $ui_alignItems: "center",
      $ui_justifyContent: "center",
      $ui_className: successClassName,
      testId: testId ? "".concat(testId, "_success") : undefined
    }, /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], null));
  };

  var _renderIconNode = function _renderIconNode() {
    if (!showIcon) {
      return null;
    }

    if ((0, _renderNode.isRenderable)(renderIcon)) {
      return (0, _renderNode["default"])(renderIcon);
    }

    return /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
      iconClass: iconClassName,
      name: iconName,
      size: iconSize,
      tagAttributes: iconTagAttributes,
      dataId: testId ? "".concat(testId, "_icon") : undefined
    }));
  };

  var _renderBeforeNode = function _renderBeforeNode() {
    if (!(0, _renderNode.isRenderable)(renderBefore)) {
      return null;
    }

    return (0, _renderNode["default"])(renderBefore, props);
  };

  var _renderAfterNode = function _renderAfterNode() {
    if (!(0, _renderNode.isRenderable)(renderAfter)) {
      return null;
    }

    return (0, _renderNode["default"])(renderAfter, props);
  };

  var _renderContent = function _renderContent() {
    var shouldShowText = variant !== _constants2.VARIANT.ICON && children !== undefined && children !== null;
    var showLoaderStart = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
    var showLoaderAfter = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
    var showSuccessStart = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
    var showSuccessAfter = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
      $ui_displayMode: "flex",
      $ui_direction: "row",
      $flag_shrink: true,
      $ui_alignItems: "center",
      $ui_justifyContent: "center",
      $ui_className: contentWrapperClass
    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, _renderBeforeNode(), iconPlacement === _constants2.ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({}, contentProps, {
      $ui_className: textClassName,
      $ui_size: getTypographySize(size),
      $flag_dotted: variant !== _constants2.VARIANT.ICON
    }), children) : null, iconPlacement === _constants2.ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, _renderAfterNode(), showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
  };

  var containerAttributes = _objectSpread(_objectSpread({}, customAttributes), {}, {
    'data-id': customId,
    'data-test-id': testId,
    'data-title': title
  });

  return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, a11yAttributes, {
    ref: ref,
    type: type,
    className: buttonClassName,
    "aria-busy": isLoading,
    "aria-disabled": isDisabledState,
    "aria-readonly": isReadOnly,
    "aria-pressed": isSelected,
    onClick: _handleClick
  }), _renderContent(), overlayActive ? isLoading ? _renderLoader() : _renderSuccess() : null);
});
Button.propTypes = _propTypes["default"];
Button.defaultProps = _defaultProps["default"];
Button.displayName = 'Button';

var _default = (0, _ComponentRegistry.withComponentRegistrar)( /*#__PURE__*/(0, _react.memo)(Button), {
  name: 'ZDC_V1_Button'
});

exports["default"] = _default;