@fluido/react-components/dist/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 react_effects_1 = require("@fluido/react-effects");
const classnames_1 = __importDefault(require("classnames"));
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const StyledNode = styled_components_1.default.button `
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  height: 2.25rem;
  min-width: 4rem;
  margin: 0;
  padding: 0;
  border-radius: ${(p) => (p.radius &&
    ((!isNaN(parseFloat(p.radius)) && p.radius + 'px') || p.radius)) ||
    0};
  border: none;
  outline: none;
  color: var(--on-button);
  user-select: none;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;

  --disabled: var(--on-surface-disabled);
  --transition: 250ms linear;
  transition: color var(--transition);

  &.primary-color {
    --button: var(--button-custom, var(--primary, #4285f4));
    --on-button: var(--on-button-custom, var(--on-primary-high-emphasis, #fff));
  }
  &.secondary-color {
    --button: var(--button-custom, var(--secondary, #aa66cc));
    --on-button: var(--on-button-custom, var(--on-secondary, #fff));
  }
  &.clear-color {
    --button: var(--button-custom, transparent);
    --on-button: var(--on-button-custom, currentColor);
  }

  &:not(.clear-color):is(.text, .outline) {
    color: var(--button);
  }

  & > :not(.button-text) {
    border-radius: ${(p) => (p.radius &&
    ((!isNaN(parseFloat(p.radius)) && p.radius + 'px') ||
        p.radius)) ||
    0};
  }

  & > :not(.button-text) {
    box-sizing: border-box;
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    transition: all var(--transition);
    overflow: hidden;
    background-color: transparent;
  }

  &.marginless {
    clip-path: unset;
    & :is(.button-bg, .button-overlay) {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }

  &:not(.outline):not(.text) {
    & .button-bg {
      background-color: var(--button);
    }
    &:is([data-disabled='true'], :disabled) .button-bg {
      opacity: 0.24;
    }
  }

  &.outline .button-bg {
    border: 2px solid currentColor;
  }

  & .button-overlay {
    background-color: currentColor;
    opacity: 0;
    transition: opacity 0.15s;
  }

  &:hover:not(:is([data-disabled='true'], :disabled)) .button-overlay {
    opacity: 0.12;
  }
  &.no-ripple:is(:focus, :active):not(:is([data-disabled='true'], :disabled))
    .button-overlay {
    opacity: 0.24;
  }

  & .button-text {
    position: relative;
    color: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    width: 100%;

    & > .text {
      flex: 1 0 auto;
    }
  }
  &.text .button-text {
    padding: 0 0.5rem;
  }

  &[data-disabled='true'],
  &:disabled {
    --button: var(--disabled);
    --on-button: var(--disabled);
    cursor: default;
    pointer-events: none;
  }

  & .button-leading,
  & .button-trailing {
    display: flex;
    align-items: center;
  }
  & .button-leading {
    margin-right: 0.5rem;
    margin-left: -0.25rem;
  }
  & .button-trailing {
    margin-left: 0.5rem;
    margin-right: -0.25rem;
  }
`;
const Button = react_1.forwardRef((_a, fRef) => {
    var { children, className, classText, leading, trailing, type = 'button', kind = 'fill', color, ripple = false, radius = 0, marginless = false, elevation = 0 } = _a, props = __rest(_a, ["children", "className", "classText", "leading", "trailing", "type", "kind", "color", "ripple", "radius", "marginless", "elevation"]);
    const { anchor } = react_effects_1.useRipple({
        disabled: !ripple,
    });
    const handleRef = (node) => {
        if (fRef) {
            if (typeof fRef === 'function') {
                fRef(node);
            }
            else {
                fRef.current = node;
            }
        }
        if (ripple && anchor) {
            anchor.current = node;
        }
    };
    return (jsx_runtime_1.jsxs(StyledNode, Object.assign({ as: type === 'link' ? 'a' : 'button', ref: handleRef, radius: radius, className: classnames_1.default('tap-area', 'type-button', className, {
            outline: kind === 'outline',
            text: kind === 'text',
            marginless: marginless,
            'no-ripple': !ripple,
            'primary-color': !color,
            'secondary-color': color === 'secondary',
            'clear-color': color === 'clear',
        }), tabIndex: 0, type: type, "data-disabled": props.disabled || false, disabled: props.disabled || false }, props, { children: [jsx_runtime_1.jsx("div", { className: classnames_1.default('button-bg', kind !== 'text' && `elevation-${elevation}`) }, void 0),
            jsx_runtime_1.jsx("div", { className: 'button-overlay' }, void 0),
            jsx_runtime_1.jsx("div", { className: 'button-pixelate' }, void 0),
            jsx_runtime_1.jsxs("div", Object.assign({ className: 'button-text' }, { children: [leading && jsx_runtime_1.jsx("span", Object.assign({ className: 'button-leading' }, { children: leading }), void 0),
                    jsx_runtime_1.jsx("span", Object.assign({ className: classnames_1.default('text', classText) }, { children: children }), void 0),
                    trailing && jsx_runtime_1.jsx("span", Object.assign({ className: 'button-trailing' }, { children: trailing }), void 0)] }), void 0)] }), void 0));
});
exports.default = Button;