{"version":3,"file":"OperationSelectModalStyle-CC2BnhjO.js","sources":["../../../app/javascript/components/templates/flowbots/OperationSelection/AppLabel.tsx","../../../app/javascript/components/templates/flowbots/OperationSelection/OperationSelectModalStyle.ts"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\nimport styles from \"./OperationSelectModal.module.scss\";\nimport { getImageUrl } from \"../../../../commons/assets_path\";\nimport { useTranslation } from \"react-i18next\";\n\ntype Props = {\n  code: string;\n  image: string;\n  name: string;\n  isPlanLimited?: boolean;\n  availablePlans?: string;\n  isAppSelectView?: boolean;\n  onClick?: () => void;\n};\n\nexport const AppLabel = ({ code, image, name, isPlanLimited, availablePlans, isAppSelectView, onClick }: Props) => {\n  const { t } = useTranslation();\n  const TITLE_MAX_WIDTH = isAppSelectView ? 239 : 148;\n  const [tooltipPosition, setTooltipPosition] = useState({ bottom: 0 });\n  const [isTextWrapped, setIsTextWrapped] = useState(false);\n  const operationDetailRef = useRef<HTMLDivElement | null>(null);\n  const descriptionRef = useRef<HTMLDivElement | null>(null);\n\n  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    const targetElement = e.currentTarget;\n\n    if (targetElement) {\n      const targetBounds = targetElement.getBoundingClientRect();\n\n      // デフォルトは説明文を要素の下に表示\n      let calculatedTooltipPosition = targetBounds.bottom + 5;\n\n      // 説明文の高さを取得し、ウィンドウの高さをはみ出す場合の調整\n      const tooltipHeight = descriptionRef.current?.clientHeight || 0;\n      const tooltipHeightAdjustment = 3;\n      const exceedsWindowBounds =\n        calculatedTooltipPosition + tooltipHeight + tooltipHeightAdjustment >= window.innerHeight;\n\n      if (exceedsWindowBounds) {\n        // ウィンドウをはみ出す場合は説明文を要素の上に表示\n        calculatedTooltipPosition = targetBounds.top - tooltipHeight - 5;\n      }\n\n      setTooltipPosition({ bottom: calculatedTooltipPosition });\n    }\n  };\n\n  // NOTE: 文字が折り返されているかを判定\n  useEffect(() => {\n    if (operationDetailRef.current) {\n      setIsTextWrapped(operationDetailRef.current.scrollWidth >= TITLE_MAX_WIDTH);\n    }\n  }, [name]);\n\n  return (\n    <div\n      className={styles.operationCard}\n      data-testid=\"AppLabel\"\n      onClick={onClick}\n      onMouseEnter={(e) => handleMouseEnter(e)}\n      style={{\n        marginTop: isAppSelectView ? \"0\" : \"12px\",\n        alignItems: isTextWrapped ? \"flex-start\" : \"center\",\n      }}\n    >\n      <img\n        src={code === \"yoom\" ? getImageUrl(\"images/icons/yoom_icon.png\") : image}\n        className={styles.operationImg}\n        alt={name}\n        width={32}\n        height={32}\n      />\n      <div ref={operationDetailRef} className={styles.operationDetail}>\n        <div className={styles.operationTitleArea}>\n          <span className={styles.operationTitle}>{name}</span>\n          {isPlanLimited && (\n            <div className={styles.operationLimitedIcon}>\n              <img\n                src={getImageUrl(\"images/icons/operations/limited_icon_regular.svg\")}\n                alt=\"Limited\"\n                width=\"22\"\n                height=\"22\"\n              />\n            </div>\n          )}\n        </div>\n      </div>\n      {isPlanLimited && availablePlans && (\n        <div\n          className={styles.appDescription}\n          onClick={(e) => e.stopPropagation()}\n          style={{ top: tooltipPosition.bottom }}\n          ref={descriptionRef}\n        >\n          <span>{t(\"AppLabel.このアプリはプランで実行可能なアプリです。\", { availablePlans: availablePlans })}</span>\n        </div>\n      )}\n    </div>\n  );\n};\n","export const modalStyle = {\n  overlay: {\n    position: \"fixed\",\n    zIndex: 1500,\n    backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  content: {\n    inset: \"auto\",\n    margin: \"auto\",\n    width: \"1004px\",\n    maxWidth: \"996px\",\n    maxHeight: \"100vh\",\n    border: \"1px solid #ccc\",\n    background: \"#fff\",\n    overflow: \"hidden\",\n    WebkitOverflowScrolling: \"touch\",\n    borderRadius: \"12px\",\n    outline: \"none\",\n    padding: \"0px\",\n  },\n};\n"],"names":["AppLabel","code","image","name","isPlanLimited","availablePlans","isAppSelectView","onClick","t","useTranslation","TITLE_MAX_WIDTH","tooltipPosition","setTooltipPosition","useState","isTextWrapped","setIsTextWrapped","operationDetailRef","useRef","descriptionRef","handleMouseEnter","e","targetElement","targetBounds","calculatedTooltipPosition","tooltipHeight","_a","useEffect","jsxs","styles","jsx","getImageUrl","modalStyle"],"mappings":"s2FAeaA,GAAW,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,KAAAC,EAAM,cAAAC,EAAe,eAAAC,EAAgB,gBAAAC,EAAiB,QAAAC,KAAqB,CAC3G,KAAA,CAAE,EAAAC,CAAE,EAAIC,EAAe,EACvBC,EAAkBJ,EAAkB,IAAM,IAC1C,CAACK,EAAiBC,CAAkB,EAAIC,WAAS,CAAE,OAAQ,EAAG,EAC9D,CAACC,EAAeC,CAAgB,EAAIF,EAAAA,SAAS,EAAK,EAClDG,EAAqBC,SAA8B,IAAI,EACvDC,EAAiBD,SAA8B,IAAI,EAEnDE,EAAoBC,GAAoD,OAC5E,MAAMC,EAAgBD,EAAE,cAExB,GAAIC,EAAe,CACX,MAAAC,EAAeD,EAAc,sBAAsB,EAGrD,IAAAE,EAA4BD,EAAa,OAAS,EAGhD,MAAAE,IAAgBC,EAAAP,EAAe,UAAf,YAAAO,EAAwB,eAAgB,EAG5DF,EAA4BC,EAFE,GAEyC,OAAO,cAIlDD,EAAAD,EAAa,IAAME,EAAgB,GAG9CZ,EAAA,CAAE,OAAQW,EAA2B,CAAA,CAE5D,EAGAG,OAAAA,EAAAA,UAAU,IAAM,CACVV,EAAmB,SACJD,EAAAC,EAAmB,QAAQ,aAAeN,CAAe,CAC5E,EACC,CAACP,CAAI,CAAC,EAGPwB,EAAA,KAAC,MAAA,CACC,UAAWC,EAAO,cAClB,cAAY,WACZ,QAAArB,EACA,aAAea,GAAMD,EAAiBC,CAAC,EACvC,MAAO,CACL,UAAWd,EAAkB,IAAM,OACnC,WAAYQ,EAAgB,aAAe,QAC7C,EAEA,SAAA,CAAAe,EAAA,IAAC,MAAA,CACC,IAAK5B,IAAS,OAAS6B,EAAY,4BAA4B,EAAI5B,EACnE,UAAW0B,EAAO,aAClB,IAAKzB,EACL,MAAO,GACP,OAAQ,EAAA,CACV,EACA0B,EAAA,IAAC,MAAI,CAAA,IAAKb,EAAoB,UAAWY,EAAO,gBAC9C,SAACD,EAAAA,KAAA,MAAA,CAAI,UAAWC,EAAO,mBACrB,SAAA,CAAAC,EAAA,IAAC,OAAK,CAAA,UAAWD,EAAO,eAAiB,SAAKzB,EAAA,EAC7CC,GACCyB,EAAA,IAAC,MAAI,CAAA,UAAWD,EAAO,qBACrB,SAAAC,EAAA,IAAC,MAAA,CACC,IAAKC,EAAY,kDAAkD,EACnE,IAAI,UACJ,MAAM,KACN,OAAO,IAAA,CAAA,CAEX,CAAA,CAAA,CAAA,CAEJ,CACF,CAAA,EACC1B,GAAiBC,GAChBwB,EAAA,IAAC,MAAA,CACC,UAAWD,EAAO,eAClB,QAAUR,GAAMA,EAAE,gBAAgB,EAClC,MAAO,CAAE,IAAKT,EAAgB,MAAO,EACrC,IAAKO,EAEL,eAAC,OAAM,CAAA,SAAAV,EAAE,iCAAkC,CAAE,eAAAH,CAAA,CAAgC,CAAE,CAAA,CAAA,CAAA,CACjF,CAAA,CAEJ,CAEJ,ECnGa0B,GAAa,CACxB,QAAS,CACP,SAAU,QACV,OAAQ,KACR,gBAAiB,qBACjB,QAAS,OACT,WAAY,SACZ,eAAgB,QAClB,EACA,QAAS,CACP,MAAO,OACP,OAAQ,OACR,MAAO,SACP,SAAU,QACV,UAAW,QACX,OAAQ,iBACR,WAAY,OACZ,SAAU,SACV,wBAAyB,QACzB,aAAc,OACd,QAAS,OACT,QAAS,KAAA,CAEb"}