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

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

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

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

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

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

var _utils = require("@zohodesk/utils");

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

var _ButtonModule = _interopRequireDefault(require("./css/Button.module.css"));

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

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); }

/*
Button text and children props?
use children for both cases
toLowerCase check needed?
*/
function Button(props) {
  var text = props.text,
      disabled = props.disabled,
      onClick = props.onClick,
      status = props.status,
      children = props.children,
      dataId = props.dataId,
      needAppearance = props.needAppearance,
      getRef = props.getRef,
      title = props.title,
      dataSelectorId = props.dataSelectorId,
      customProps = props.customProps,
      customStyle = props.customStyle,
      a11y = props.a11y,
      id = props.id;
  var finalStyle = (0, _utils.mergeStyle)(_ButtonModule["default"], customStyle);

  var _cssJSLogic = (0, _cssJSLogic2["default"])({
    props: props,
    style: finalStyle
  }),
      buttonClass = _cssJSLogic.buttonClass,
      loaderParentClass = _cssJSLogic.loaderParentClass,
      loaderChildClass = _cssJSLogic.loaderChildClass;

  var statusLower = status.toLowerCase();
  return /*#__PURE__*/_react["default"].createElement("button", _extends({
    className: buttonClass,
    "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
    "data-test-id": disabled ? "".concat(dataId, "_disabled") : dataId,
    disabled: disabled || statusLower === 'loading',
    onClick: onClick,
    "data-title": title,
    type: "button",
    ref: getRef,
    "data-selector-id": dataSelectorId
  }, customProps, a11y, {
    id: id
  }), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
    className: finalStyle.overlay
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: loaderParentClass
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: loaderChildClass
  }))));
}

Button.defaultProps = _defaultProps.defaultProps;
Button.propTypes = _propTypes.propTypes;

var _default = (0, _ComponentRegistry.withComponentRegistrar)(Button, {
  name: 'ZDC_Button'
}); // if (__DOCS__) {
//   Button.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide'
//   };
// }


exports["default"] = _default;