@fluido/react-components/dist/icon-button/index.js

Fluido webapp components

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const classnames_1 = __importDefault(require("classnames"));
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const badge_1 = __importDefault(require("../badge"));
const StyledIconButton = styled_components_1.default.button `
  --icon-button-size: ${(p) => (p.size &&
    ((!isNaN(parseFloat(p.size)) && p.size + 'px') || p.size)) ||
    ''};
  appearance: none;
  background-color: transparent;
  width: var(--icon-button-size, 2.5rem);
  height: var(--icon-button-size, 2.5rem);
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--icon-button-color, inherit);
  font-size: inherit;
  border-radius: var(--icon-button-border-radius, 999px);
  cursor: pointer;
  position: relative;
  z-index: 0;

  &:disabled {
    color: var(--on-surface-disabled);
    cursor: default;
    pointer-events: none;
  }

  &:focus {
    outline: none;
  }

  .button {
    width: 100%;
    height: 100%;
    color: inherit;
    border: none;
    border-radius: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .button::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background-color: currentColor;
    opacity: 0;
    transition: transform 100ms var(--easing-standard, ease-in-out),
      opacity 100ms var(--easing-standard, ease-in-out);
    will-change: transform;
    z-index: -1;
  }

  &:not(:disabled) {
    &:hover .button::after {
      opacity: 0.04;
    }

    &:focus .button::after {
      opacity: 0.12;
      animation: grow 100ms var(--easing-standard, ease-in-out);
    }

    &:active .button::after {
      opacity: 0.12;
      transform: scale(0.9);
    }
  }

  @keyframes grow {
    from {
      transform: scale(0.0001);
    }
    to {
      transform: scale(1);
    }
  }
`;
const IconButton = react_1.forwardRef((_a, ref) => {
    var { children, className, badge = '', type = 'button', disabled, size } = _a, props = __rest(_a, ["children", "className", "badge", "type", "disabled", "size"]);
    return (
    // Todos os botões devem respeitar a área ideal de clique de 48px (3rem).
    // O tamanho visual do botão é definido no componente filho.
    jsx_runtime_1.jsxs(StyledIconButton, Object.assign({ ref: ref, size: size, type: type, className: classnames_1.default('type-button', className), disabled: disabled }, props, { children: [jsx_runtime_1.jsx("div", Object.assign({ className: 'button' }, { children: children }), void 0),
            !!badge && jsx_runtime_1.jsx(badge_1.default, { children: badge }, void 0)] }), void 0));
});
exports.default = IconButton;