@cbinsights/fds/lib/components/IconButton/index.js

Form: A design system by CB Insights

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.THEMES = exports.SIZES = exports.RADII = void 0;

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

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

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

var _classcat = _interopRequireDefault(require("classcat"));

var _baseElement = _interopRequireDefault(require("../../util/baseElement"));

var _excluded = ["radius", "theme", "size", "Icon", "disabled", "isActive", "isLoading", "isDestructive", "label", "Link", "isBreakoutLink"];

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 THEMES = ['ghost', 'aqua', 'outlined'];
exports.THEMES = THEMES;
var RADII = ['square', 'circle'];
exports.RADII = RADII;
var SIZES = ['s', 'm'];
exports.SIZES = SIZES;
var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  var _ref$radius = _ref.radius,
      radius = _ref$radius === void 0 ? 'square' : _ref$radius,
      _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? 'ghost' : _ref$theme,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'm' : _ref$size,
      Icon = _ref.Icon,
      disabled = _ref.disabled,
      isActive = _ref.isActive,
      isLoading = _ref.isLoading,
      isDestructive = _ref.isDestructive,
      label = _ref.label,
      Link = _ref.Link,
      isBreakoutLink = _ref.isBreakoutLink,
      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var Element = (0, _baseElement.default)({
    href: rest.href,
    onClick: true,
    as: Link
  });
  return /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({}, rest, {
    ref: ref,
    title: label,
    className: (0, _classcat.default)([{
      'shape--circle': radius === 'circle',
      'fdsIconButton--disabled': disabled,
      'fdsIconButton--isActive': isActive && !disabled,
      'fdsIconButton--isDestructive': isDestructive,
      'fdsIconButton--loading': isLoading,
      breakoutLink: isBreakoutLink
    }, 'fdsIconButton', 'rounded--all', 'border--focus--noTransition', 'transition--default', 'alignChild--center--center', "fdsIconButton--".concat(theme), "fdsIconButton--".concat(size)]),
    disabled: disabled && Element === 'button'
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "fdsIconButton--loading-spinnerWrapper"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classcat.default)({
      'fdsIconButton--loading-spinner': isLoading
    })
  })), /*#__PURE__*/_react.default.createElement("span", {
    className: isLoading ? 'fdsIconButton--hidden' : ''
  }, /*#__PURE__*/_react.default.createElement(Icon, {
    customSize: size === 's' ? 16 : 18
  })));
});
IconButton.displayName = 'IconButton';
var _default = IconButton;
exports.default = _default;