react-base-guide/lib/components/icon-button/index.js

react ui components

"use strict";
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 styled_components_1 = __importDefault(require("styled-components"));
const ripple_1 = __importDefault(require("../ripple"));
const defaultButtonSize = "36px";
const defaultSvgSize = "24px";
const buttonSizes = {
    s: "28px",
    m: defaultButtonSize,
    l: "48px",
    xl: "64px",
    xxl: "96px",
};
const svgSizes = {
    s: "16px",
    m: defaultSvgSize,
    l: "32px",
    xl: "48px",
    xxl: "64px",
};
const ButtonRipple = (0, styled_components_1.default)(ripple_1.default) `
  display: ${p => { var _a; return ((_a = p.styled) === null || _a === void 0 ? void 0 : _a.display) || "inline-block"; }};
  vertical-align: middle;
  width: ${p => buttonSizes[p.size] || defaultButtonSize};
  min-width: ${p => buttonSizes[p.size] || defaultButtonSize};
  height: ${p => buttonSizes[p.size] || defaultButtonSize};
  min-height: ${p => buttonSizes[p.size] || defaultButtonSize};
  border-radius: ${p => p.theme.radius.round};
  transition: box-shadow 0.3s;
  box-shadow: ${p => p.shadow && p.theme.shadow.element};
`;
const ButtonBase = styled_components_1.default.button `
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-around;
  outline: none;
  cursor: pointer;
  user-select: none;
  width: ${p => buttonSizes[p.size] || defaultButtonSize};
  min-width: ${p => buttonSizes[p.size] || defaultButtonSize};
  height: ${p => buttonSizes[p.size] || defaultButtonSize};
  min-height: ${p => buttonSizes[p.size] || defaultButtonSize};
  padding: 0;
  background: ${p => p.secondary ? "transparent" : p.theme.palette.element.primary};
  border: 1px solid transparent;
  border-radius: ${p => p.theme.radius.round};
  transition: background 0.3s;

  svg {
    width: ${p => svgSizes[p.size] || defaultSvgSize};
    min-width: ${p => svgSizes[p.size] || defaultSvgSize};
    height: ${p => svgSizes[p.size] || defaultSvgSize};
    min-height: ${p => svgSizes[p.size] || defaultSvgSize};
    pointer-events: none;
  }
  
  .rgb-fill {
    fill: ${p => p.secondary ? p.theme.palette.text.primary : p.theme.palette.text.contrast};
  }

  .rgb-stroke {
    stroke: ${p => p.secondary ? p.theme.palette.text.primary : p.theme.palette.text.contrast};
  }

  &:hover {
    background: ${p => p.secondary ? p.theme.palette.background.secondary : p.theme.palette.element.primaryHover};
  }

  &:active {
    transform: translateY(1px);
  }
  
  &:disabled {
    pointer-events: none;
    opacity: 0.3;
  }
`;
const IconButton = (props) => ((0, jsx_runtime_1.jsx)(ButtonRipple, Object.assign({ disabled: props.disabled, className: props.className, size: props.size, shadow: props.shadow, borderRadius: "50%", styled: props.styled }, { children: (0, jsx_runtime_1.jsx)(ButtonBase, Object.assign({}, props, { className: undefined, styled: undefined })) })));
exports.default = IconButton;
//# sourceMappingURL=index.js.map