@helpscout/hsds-react/components/Button/Button.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.WrappedButton = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Button = require("./Button.css");

var _Button2 = require("./Button.utils");

var _jsxRuntime = require("react/jsx-runtime");

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

var WrappedButton = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
  var _useButton = (0, _Button2.useButton)(props),
      loading = _useButton.loading,
      children = _useButton.children,
      prefixIcon = _useButton.prefixIcon,
      suffixIcon = _useButton.suffixIcon,
      buttonProps = (0, _objectWithoutPropertiesLoose2.default)(_useButton, ["loading", "children", "prefixIcon", "suffixIcon"]);

  var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [prefixIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.PrefixIconUI, {
      name: prefixIcon,
      isWithHiddenTitle: false,
      size: "24"
    }), children, suffixIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.SuffixIconUI, {
      name: suffixIcon,
      isWithHiddenTitle: false,
      size: "24"
    })]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.ButtonUI, (0, _extends2.default)({}, buttonProps, {
    ref: ref,
    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.SpinnerUI, {
        className: "c-Button--spinner"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.LoadingWrapperUI, {
        children: content
      })]
    }), !loading && content]
  }));
});
exports.WrappedButton = WrappedButton;
WrappedButton.defaultProps = {
  'data-cy': 'Button',
  disabled: false,
  isFirst: false,
  isLast: false,
  linked: false,
  isNotOnly: false,
  rounded: false,
  loading: false,
  size: 'lg',
  submit: false,
  theme: 'blue'
};
WrappedButton.propTypes = {
  /** Change the html element used for the button component. */
  as: _propTypes.default.string,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Disable the button so it can't be clicked. */
  disabled: _propTypes.default.bool,

  /** Hyperlink for the button. This transforms the button to a `<a>` selector. */
  href: _propTypes.default.string,

  /** rel html attribute */
  rel: _propTypes.default.string,

  /** target html attribute */
  target: _propTypes.default.string,

  /** Renders a button with the link styles */
  linked: _propTypes.default.bool,

  /** Renders a link button without any size styles (height, padding, min-width) */
  inlined: _propTypes.default.bool,

  /** Renders a loading `Spinner`. */
  loading: _propTypes.default.bool,

  /** Renders the button with white bg and theme outline and text color */
  outlined: _propTypes.default.bool,

  /** Sets the size of the button. */
  size: _propTypes.default.oneOf(['xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs']),

  /** Sets the `type` of the button to `"submit"`. */
  submit: _propTypes.default.bool,

  /** Applies a theme based style to the button. */
  theme: _propTypes.default.oneOf(['blue', 'red', 'green', 'grey']),

  /** React Router path to navigate on click. */
  to: _propTypes.default.string,
  isFirst: _propTypes.default.bool,
  isNotOnly: _propTypes.default.bool,
  isLast: _propTypes.default.bool,

  /** Sets the button radius to 100%. */
  rounded: _propTypes.default.bool,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = WrappedButton;
exports.default = _default;