@carbon/ibm-security/es/components/IconButton/IconButton.js

Carbon for Cloud & Cognitive IBM Security UI components

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "iconClassName", "iconSize", "label", "onClick", "path", "renderIcon", "size", "state", "tooltip", "tooltipDirection"];
/**
 * @file Icon button.
 * @copyright IBM Security 2019, 2021
 */

import classnames from 'classnames';
import { bool, func, oneOf, string } from 'prop-types';
import React from 'react';
import { getComponentNamespace } from '../../globals/namespace';
import Icon, { renderIconDefaultProp, renderIconPropType, sizeDefaultProp, sizePropType } from '../Icon/Icon';
var defaultTooltipDirection = 'bottom';
var tooltipDirections = ['top', 'right', defaultTooltipDirection, 'left'];
export var namespace = getComponentNamespace('button--icon');

/** @enum Allowed tooltip directions. */
export var TooltipDirection = tooltipDirections.reduce(function (accumulator, tooltipDirection) {
  accumulator[tooltipDirection.toUpperCase()] = tooltipDirection;
  return accumulator;
}, {});

/**
 * Icon button component.
 */
var IconButton = function IconButton(_ref) {
  var className = _ref.className,
    iconClassName = _ref.iconClassName,
    iconSize = _ref.iconSize,
    label = _ref.label,
    onClick = _ref.onClick,
    path = _ref.path,
    renderIcon = _ref.renderIcon,
    size = _ref.size,
    state = _ref.state,
    tooltip = _ref.tooltip,
    tooltipDirection = _ref.tooltipDirection,
    other = _objectWithoutProperties(_ref, _excluded);
  var hasTooltip = label && tooltip;
  return /*#__PURE__*/React.createElement("button", _extends({
    className: classnames(namespace, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(namespace, "--active"), state), "".concat(namespace, "--").concat(size), size), "".concat(namespace, "--tooltip"), hasTooltip), "".concat(namespace, "--tooltip--").concat(tooltipDirection), hasTooltip)),
    "aria-label": label,
    onClick: onClick,
    type: "button"
  }, other), /*#__PURE__*/React.createElement(Icon, {
    className: iconClassName,
    path: path,
    renderIcon: renderIcon,
    size: iconSize
  }));
};
IconButton.defaultProps = {
  className: null,
  iconClassName: '',
  iconSize: sizeDefaultProp,
  label: null,
  onClick: null,
  path: null,
  renderIcon: renderIconDefaultProp,
  size: null,
  state: false,
  tooltip: true,
  tooltipDirection: defaultTooltipDirection
};
IconButton.propTypes = {
  /** @type {string} Extra classes to add. */
  className: string,
  /** @type {string} Icon classes to add. */
  iconClassName: string,
  /** @type {number|string} Icon dimensions. */
  iconSize: sizePropType,
  /** @type {string} Label. */
  label: string,
  /** @type {Function} Click handler. */
  onClick: func,
  /** @type {string} Path for icon. */
  path: string,
  /** @type {Function|object} Icon to render. */
  renderIcon: renderIconPropType,
  /** @type {string} Icon button size. */
  size: sizePropType,
  /** @type {boolean} The state of the icon button. */
  state: bool,
  /** @type {boolean} Specify tooltip. */
  tooltip: bool,
  /** @type {string} Tooltip direction. */
  tooltipDirection: oneOf(tooltipDirections)
};
IconButton.TooltipDirection = TooltipDirection;
export default IconButton;