@blocklet/payment-react/lib/components/truncated-text.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = TruncatedText;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _Tooltip = require("@mui/material/Tooltip");
var _system = require("@mui/system");
var _util = require("../libs/util");
const CustomTooltip = (0, _system.styled)(({
  className,
  ...props
}) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
  ...props,
  classes: {
    popper: className
  }
}))({
  [`& .${_Tooltip.tooltipClasses.tooltip}`]: {
    fontSize: 11,
    maxHeight: 120,
    maxWidth: 500,
    overflowY: "auto"
  }
});
function TruncatedText({
  text = "",
  maxLength = 100,
  useWidth = false
}) {
  if (!text) {
    return null;
  }
  const truncatedText = (0, _util.truncateText)(text, maxLength, useWidth);
  if (!truncatedText.endsWith("...")) {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      children: truncatedText
    });
  }
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(CustomTooltip, {
    title: text,
    placement: "bottom",
    enterTouchDelay: 0,
    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      children: truncatedText
    })
  });
}