primereact/button/button.esm.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

import * as React from 'react';
import { Ripple } from 'primereact/ripple';
import { Tooltip } from 'primereact/tooltip';
import { ObjectUtils, classNames, IconUtils } from 'primereact/utils';

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

function _toPrimitive(input, hint) {
  if (_typeof(input) !== "object" || input === null) return input;
  var prim = input[Symbol.toPrimitive];
  if (prim !== undefined) {
    var res = prim.call(input, hint || "default");
    if (_typeof(res) !== "object") return res;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return (hint === "string" ? String : Number)(input);
}

function _toPropertyKey(arg) {
  var key = _toPrimitive(arg, "string");
  return _typeof(key) === "symbol" ? key : String(key);
}

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

var ButtonBase = {
  defaultProps: {
    __TYPE: 'Button',
    label: null,
    icon: null,
    iconPos: 'left',
    badge: null,
    severity: null,
    rounded: false,
    raised: false,
    outlined: false,
    text: false,
    link: false,
    badgeClassName: null,
    tooltip: null,
    size: null,
    tooltipOptions: null,
    disabled: false,
    loading: false,
    loadingIcon: 'pi pi-spinner pi-spin',
    visible: true,
    children: undefined
  },
  getProps: function getProps(props) {
    return ObjectUtils.getMergedProps(props, ButtonBase.defaultProps);
  },
  getOtherProps: function getOtherProps(props) {
    return ObjectUtils.getDiffProps(props, ButtonBase.defaultProps);
  }
};

var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
  var _classNames2;
  var props = ButtonBase.getProps(inProps);
  var elementRef = React.useRef(ref);
  React.useEffect(function () {
    ObjectUtils.combinedRefs(elementRef, ref);
  }, [elementRef, ref]);
  if (props.visible === false) {
    return null;
  }
  var createIcon = function createIcon() {
    var icon = props.loading ? props.loadingIcon : props.icon;
    var className = classNames('p-button-icon p-c', _defineProperty({
      'p-button-loading-icon': props.loading
    }, "p-button-icon-".concat(props.iconPos), props.label));
    return IconUtils.getJSXIcon(icon, {
      className: className
    }, {
      props: props
    });
  };
  var createLabel = function createLabel() {
    if (props.label) {
      return /*#__PURE__*/React.createElement("span", {
        className: "p-button-label p-c"
      }, props.label);
    }
    return !props.children && !props.label && /*#__PURE__*/React.createElement("span", {
      className: "p-button-label p-c",
      dangerouslySetInnerHTML: {
        __html: '&nbsp;'
      }
    });
  };
  var createBadge = function createBadge() {
    if (props.badge) {
      var badgeClassName = classNames('p-badge', props.badgeClassName);
      return /*#__PURE__*/React.createElement("span", {
        className: badgeClassName
      }, props.badge);
    }
    return null;
  };
  var disabled = props.disabled || props.loading;
  var showTooltip = !disabled || props.tooltipOptions && props.tooltipOptions.showOnDisabled;
  var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
  var otherProps = ButtonBase.getOtherProps(props);
  var sizeMapping = {
    large: 'lg',
    small: 'sm'
  };
  var size = sizeMapping[props.size];
  var className = classNames('p-button p-component', props.className, (_classNames2 = {
    'p-button-icon-only': (props.icon || props.loading && props.loadingIcon) && !props.label && !props.children,
    'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
    'p-disabled': disabled,
    'p-button-loading': props.loading,
    'p-button-outlined': props.outlined,
    'p-button-raised': props.raised,
    'p-button-link': props.link,
    'p-button-text': props.text,
    'p-button-rounded': props.rounded,
    'p-button-loading-label-only': props.loading && !props.icon && props.label
  }, _defineProperty(_classNames2, "p-button-loading-".concat(props.iconPos), props.loading && props.loadingIcon && props.label), _defineProperty(_classNames2, "p-button-".concat(size), size), _defineProperty(_classNames2, "p-button-".concat(props.severity), props.severity), _classNames2));
  var icon = createIcon();
  var label = createLabel();
  var badge = createBadge();
  var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", _extends({
    ref: elementRef,
    "aria-label": defaultAriaLabel
  }, otherProps, {
    className: className,
    disabled: disabled
  }), icon, label, props.children, badge, /*#__PURE__*/React.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
    target: elementRef,
    content: props.tooltip
  }, props.tooltipOptions)));
}));
Button.displayName = 'Button';

export { Button };