{"version":3,"file":"ExpandingText-OVJIC5_0.js","sources":["../../../app/javascript/components/ui/ExpandingText.tsx"],"sourcesContent":["/* eslint-disable react/no-danger */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport classNames from \"lib/classNames\";\nimport { useCallback, useMemo, useState } from \"react\";\n\ntype ExpandingTextProps = {\n  text: string;\n  lines: number;\n  className?: string;\n  isTextExpandedFromOutside?: boolean;\n};\n\nconst CHAR_PER_LINE = 45 * 2;\n\n// line-clamp-1 line-clamp-2 line-clamp-3 line-clamp-4 line-clamp-5 line-clamp-6\nexport default function ExpandingText({\n  text = \"\",\n  lines = 3,\n  className = \"\",\n  isTextExpandedFromOutside = false,\n}: ExpandingTextProps) {\n  const [isExpanded, setExpanded] = useState(\n    isTextExpandedFromOutside || text.length < CHAR_PER_LINE * lines\n  );\n\n  const htmlText = useMemo(() => {\n    return (text || \"\")\n      .replaceAll(\"\\n\\n\", \"<br/><br/>\")\n      .replaceAll(\"\\r\\n\\r\\n\", \"<br/><br/>\")\n      .replaceAll(\"\\r\\n\", \"<br/>\")\n      .replaceAll(\"\\n\", \"<br/>\");\n  }, [text]);\n\n  const toggleExpanded = useCallback(() => {\n    setExpanded((e) => !e);\n  }, []);\n\n  if (!text || text.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <div className={`relative max-w-screen overflow-hidden group ${className}`}>\n      {!isExpanded && (\n        <button\n          type=\"button\"\n          className=\"cursor pointer absolute z-10 h-full w-full bg-gradient-to-b from-transparent to-white dark:to-gray-800 via-transparent via-70%\"\n          onClick={toggleExpanded}\n          aria-label=\"Expand text\"\n        />\n      )}\n      <p\n        aria-label=\"Show text\"\n        className={classNames(\n          \"lg:text-left\",\n          isExpanded ? \"\" : `line-clamp-${lines}`,\n          !isExpanded\n            ? \"group-hover:bg-gray-100 dark:group-hover:bg-gray-900 rounded-lg\"\n            : \"\"\n        )}\n        dangerouslySetInnerHTML={{\n          __html: htmlText,\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["CHAR_PER_LINE","ExpandingText","text","lines","className","isTextExpandedFromOutside","isExpanded","setExpanded","useState","htmlText","useMemo","toggleExpanded","useCallback","e","jsx","Fragment","jsxs","classNames"],"mappings":"uFAYA,MAAMA,EAAgB,GAAK,EAG3B,SAAwBC,EAAc,CACpC,KAAAC,EAAO,GACP,MAAAC,EAAQ,EACR,UAAAC,EAAY,GACZ,0BAAAC,EAA4B,EAC9B,EAAuB,CACf,KAAA,CAACC,EAAYC,CAAW,EAAIC,EAAA,SAChCH,GAA6BH,EAAK,OAASF,EAAgBG,CAAA,EAGvDM,EAAWC,EAAAA,QAAQ,KACfR,GAAQ,IACb,WAAW;AAAA;AAAA,EAAQ,YAAY,EAC/B,WAAW;AAAA;AAAA,EAAY,YAAY,EACnC,WAAW;AAAA,EAAQ,OAAO,EAC1B,WAAW;AAAA,EAAM,OAAO,EAC1B,CAACA,CAAI,CAAC,EAEHS,EAAiBC,EAAAA,YAAY,IAAM,CAC3BL,EAACM,GAAM,CAACA,CAAC,CACvB,EAAG,CAAE,CAAA,EAEL,MAAI,CAACX,GAAQA,EAAK,SAAW,EAClBY,EAAA,IAAAC,WAAA,CAAA,CAAA,EAIRC,EAAA,KAAA,MAAA,CAAI,UAAW,+CAA+CZ,CAAS,GACrE,SAAA,CAAA,CAACE,GACAQ,EAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAU,iIACV,QAASH,EACT,aAAW,aAAA,CACb,EAEFG,EAAA,IAAC,IAAA,CACC,aAAW,YACX,UAAWG,EACT,eACAX,EAAa,GAAK,cAAcH,CAAK,GACpCG,EAEG,GADA,iEAEN,EACA,wBAAyB,CACvB,OAAQG,CACV,CAAA,CACF,CACF,CAAA,CAAA,CAEJ"}