@parkassist/pa-ui-library/dist/components/IconButton/index.js

INX Platform elements

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;
};
import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import Tooltip from "../Tooltip";
import Palette from "../../constants/Palette";
import FontStyles from "../../constants/FontStyles";
export const tooltipTextStyle = {
  width: "fit-content",
  minWidth: 80,
  textAlign: "center",
  font: FontStyles.SMALL_FONT
};
const getBackgroundColor = (dark, isHovered = false) => {
  if (isHovered) {
    return dark ? Palette.DIM_GREY : Palette.WHITE_SMOKE;
  }
  return dark ? Palette.LIGHT_BLACK : Palette.WHITE;
};
const Wrapper = styled.div`
  width: 32px;
  height: 32px;
  font: ${FontStyles.BUTTON_FONT};
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-left: ${({
  marginLeft
}) => marginLeft}px;
  border: ${({
  bordered
}) => bordered ? `1px solid ${Palette.LIGHT_BLACK}` : 'none'};
  border-radius: 3px;
  background-position-x: 3px;
  background-color: ${({
  dark
}) => getBackgroundColor(dark)};
  opacity: ${({
  disabled
}) => disabled ? 0.5 : 1};
  cursor: ${({
  disabled
}) => disabled ? 'auto' : 'pointer'};
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  
  &:hover {
    background-color: ${({
  disabled,
  dark
}) => getBackgroundColor(dark, !disabled)};
  }
`;
const IconButton = _a => {
  var {
      icon = null,
      faIcon,
      onClick,
      disabled = false,
      tooltip = null,
      marginLeft = 5,
      placement = "bottom",
      dark = false
    } = _a,
    props = __rest(_a, ["icon", "faIcon", "onClick", "disabled", "tooltip", "marginLeft", "placement", "dark"]);
  if (!disabled && tooltip) {
    return _jsx(Tooltip, {
      placement: placement,
      backgroundColor: Palette.BLACK,
      color: Palette.WHITE,
      padding: 10,
      style: {
        borderRadius: 5
      },
      content: _jsx("div", {
        style: tooltipTextStyle,
        children: tooltip.text
      }),
      children: _jsx(Wrapper, Object.assign({}, props, {
        dark: dark,
        marginLeft: marginLeft,
        onClick: onClick,
        children: icon ? icon : _jsx("i", {
          className: faIcon
        })
      }))
    });
  }
  return _jsx("div", {
    children: _jsx(Wrapper, Object.assign({}, props, {
      dark: dark,
      disabled: disabled,
      onClick: () => !disabled && onClick(),
      children: icon ? icon : _jsx("i", {
        className: faIcon
      })
    }))
  });
};
export default IconButton;