@clayui/button/lib/cjs/Button.js

ClayButton component

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _loadingIndicator = _interopRequireDefault(require("@clayui/loading-indicator"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _warning = _interopRequireDefault(require("warning"));
var _Group = _interopRequireDefault(require("./Group"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /**
 * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
 * SPDX-License-Identifier: BSD-3-Clause
 */
function forwardRef(component) {
  return /*#__PURE__*/_react.default.forwardRef(component);
}
const Button = forwardRef((_ref, ref) => {
  let {
    alert,
    block,
    borderless,
    children,
    className,
    dark,
    displayType = 'primary',
    loading,
    monospaced,
    outline,
    rounded,
    size = 'regular',
    small,
    translucent,
    type = 'button',
    ...otherProps
  } = _ref;
  const childArray = _react.default.Children.toArray(children);
  undefined !== "production" ? (0, _warning.default)(!(childArray.length === 1 &&
  // @ts-ignore
  childArray[0].type?.displayName === 'ClayIcon' && typeof otherProps['aria-label'] !== 'string' && typeof otherProps['aria-labelledby'] !== 'string'), 'Button Accessibility: Component has only the Icon declared. Define an `aria-label` or `aria-labelledby` attribute that labels the interactive button that screen readers can read. The `title` attribute is optional but consult your design team.') : void 0;
  if (displayType === 'beta') {
    displayType = 'info';
    translucent = true;
  } else if (displayType === 'beta-dark') {
    dark = true;
    displayType = 'info';
    translucent = true;
  }
  return /*#__PURE__*/_react.default.createElement("button", _extends({
    className: (0, _classnames.default)(className, 'btn', {
      'alert-btn': alert,
      'btn-block': block,
      'btn-monospaced': monospaced,
      'btn-outline-borderless': borderless,
      'btn-sm': small && (!size || size === 'regular'),
      'btn-translucent': translucent,
      'clay-dark': dark,
      [`btn-${displayType}`]: displayType && !outline && !borderless,
      [`btn-outline-${displayType}`]: displayType && (outline || borderless),
      'rounded-pill': rounded,
      [`btn-${size}`]: size && size !== 'regular'
    }),
    ref: ref,
    type: type
  }, otherProps), loading && /*#__PURE__*/_react.default.createElement("span", {
    className: "inline-item inline-item-before"
  }, /*#__PURE__*/_react.default.createElement(_loadingIndicator.default, null)), children);
});
Button.Group = _Group.default;
Button.displayName = 'ClayButton';
var _default = exports.default = Button;