@parkassist/pa-ui-library/dist/components/Chip/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, { useRef, useEffect, useState } from "react";
import { Chip } from "@mui/material";
import { ThemeProvider, styled } from '@mui/material/styles';
import ChipsTheme from "./styles";
import CancelIcon from '@mui/icons-material/Cancel';
import CustomTooltip from "../Tooltip";
import { getTextWidth } from "../utils";
const ChipItem = _a => {
  var _b;
  var {
      label,
      color,
      variant = "filled",
      size = "medium",
      onDelete,
      style,
      tooltipPlacement = "right",
      icon,
      shouldShowTooltip = true
    } = _a,
    props = __rest(_a, ["label", "color", "variant", "size", "onDelete", "style", "tooltipPlacement", "icon", "shouldShowTooltip"]);
  const chipRef = useRef(null);
  const [showTooltip, setShowTooltip] = useState(false);
  const textWidth = getTextWidth(label, (style === null || style === void 0 ? void 0 : style.font) || "12px Poppins");
  const iconSize = icon ? ((_b = icon === null || icon === void 0 ? void 0 : icon.props) === null || _b === void 0 ? void 0 : _b.size) || 24 : 0;
  const chipSize = size === 'small' ? 5 : 0;
  const checkShowTooltip = () => {
    var _a;
    const width = (_a = chipRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
    const shouldShowTooltip = width - (22 + iconSize - chipSize) < textWidth;
    setShowTooltip(shouldShowTooltip);
  };
  useEffect(() => {
    if (!chipRef.current) return;
    const resizeObserver = new ResizeObserver(() => {
      checkShowTooltip();
    });
    resizeObserver.observe(chipRef.current);
    return () => {
      resizeObserver.disconnect();
    };
  }, [checkShowTooltip]);
  const StyledChip = styled(Chip)(() => ({
    justifyContent: "space-between",
    "> .MuiChip-deleteIcon": {
      opacity: 1,
      transition: "all 0.2s"
    },
    "> .MuiChip-deleteIcon:hover": {
      opacity: 0.7
    }
  }));
  const chip = _jsx(ThemeProvider, {
    theme: ChipsTheme,
    children: _jsx(StyledChip, Object.assign({
      ref: chipRef,
      deleteIcon: _jsx(CancelIcon, {
        onMouseDown: event => {
          event.stopPropagation();
          onDelete();
        }
      }),
      label: label,
      color: color,
      variant: variant,
      size: size,
      onDelete: onDelete,
      icon: icon
    }, props, {
      sx: Object.assign({
        cursor: props.pointer && 'pointer'
      }, style)
    }))
  });
  if (showTooltip && shouldShowTooltip) {
    return _jsx(CustomTooltip, {
      content: label,
      placement: tooltipPlacement,
      contentStyles: {
        overflow: "hidden"
      },
      children: chip
    });
  }
  return chip;
};
export default ChipItem;