{"version":3,"file":"IconSuggest-EkeClzS1.js","sources":["../../../app/javascript/components/common/DynamicTables/DbIcon/IconSearchForm.tsx","../../../app/javascript/components/common/DynamicTables/DbIcon/IconList.tsx","../../../app/javascript/components/common/DynamicTables/DbIcon/IconSuggest.tsx"],"sourcesContent":["// @ts-nocheck\nimport PropTypes from \"prop-types\";\nimport React, { useState } from \"react\";\nimport className from \"./IconSuggest.module.scss\";\nimport { getImageUrl } from \"../../../../commons/assets_path\";\nimport { useTranslation } from \"react-i18next\";\n\n/**\n * @arg {PropTypes.InferProps.<typeof OutputSuggest.propTypes>} props\n * @return {ReturnType.<React.FC>}\n */\n\nexport const IconSearchForm = ({ onSearchIcons }) => {\n  const { t } = useTranslation();\n  // IME入力中flg\n  const [compFlg, setCompFlg] = useState(false);\n\n  return (\n    <div className={className.searchForm}>\n      <span style={{ padding: \"8px\" }}>\n        <img src={getImageUrl(\"images/icons/search.svg\")} width=\"20\" height=\"20\" />\n      </span>\n      <input\n        type=\"text\"\n        placeholder={t(\"IconSearchForm.検索\")}\n        className={className.searchInput}\n        onChange={(e) => {\n          if (compFlg) return false;\n          onSearchIcons(e.target.value);\n        }}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            e.stopPropagation();\n\n            return;\n          }\n        }}\n        onCompositionStart={() => {\n          setCompFlg(true);\n        }}\n        onCompositionEnd={(e) => {\n          onSearchIcons(e.target.value);\n          setCompFlg(false);\n        }}\n      />\n    </div>\n  );\n};\n\nIconSearchForm.propTypes = {\n  onSearchIcons: PropTypes.func,\n};\n","import React from \"react\";\nimport style from \"./IconSuggest.module.scss\";\nimport axios from \"axios\";\naxios.defaults.headers.common[\"X-Requested-With\"] = \"XMLHttpRequest\";\nimport { DB_ICON_TAB_LIST } from \"../../../../constants/constants\";\nimport { useTranslation } from \"react-i18next\";\n\ntype Props = {\n  client: string;\n  pageId: number;\n  pageType: string;\n  selectTab: { tabName: string; iconKey: string };\n  iconData: Record<string, any>;\n  setCurrentIcon: React.Dispatch<React.SetStateAction<{ unicode: string | null; image_path: string | null }>>;\n  setIsIconOpen: (isOpen: boolean) => void;\n};\n\ntype Icon = {\n  icon_id: number;\n  unicode?: string;\n  image_path?: string;\n};\n\ntype IconCategory = \"unicode\" | \"image_path\";\n\nexport const IconList = ({ client, pageId, pageType, selectTab, iconData, setCurrentIcon, setIsIconOpen }: Props) => {\n  const { t } = useTranslation();\n\n  const registerIcon = async (iconId: number) => {\n    await axios.patch(`/${client}/icons/${pageType}/${pageId}`, {\n      icon_id: iconId,\n    });\n  };\n\n  const formatIconData = (icon: Icon, iconCategory: IconCategory) => {\n    return iconCategory === \"unicode\"\n      ? { unicode: icon.unicode ?? null, image_path: null }\n      : { unicode: null, image_path: icon.image_path ?? null };\n  };\n\n  const registerIconFunc = (icon: Icon, iconCategory: IconCategory) => {\n    registerIcon(icon.icon_id);\n    setCurrentIcon(formatIconData(icon, iconCategory));\n    setIsIconOpen(false);\n  };\n\n  return (\n    <div style={{ maxHeight: \"420px\", overflow: \"scroll\" }}>\n      {DB_ICON_TAB_LIST.map((tabInfo, i) => (\n        <div\n          key={i}\n          style={{\n            display:\n              selectTab.tabName === t(\"IconList.すべて\") || selectTab.tabName === tabInfo.tabName ? \"block\" : \"none\",\n          }}\n        >\n          {iconData[tabInfo.iconKey]?.length ? (\n            <small style={{ marginLeft: \"16px\", color: \"#777777\" }}>\n              {tabInfo.tabName === t(\"IconList.すべて\") ? t(\"IconList.最近\") : tabInfo.tabName}\n            </small>\n          ) : (\n            <></>\n          )}\n\n          <>\n            {(\n              selectTab.tabName === t(\"IconList.すべて\")\n                ? iconData[tabInfo.iconKey]?.length\n                : iconData[selectTab.iconKey]?.length\n            ) ? (\n              <div id={`label`} className={`${style.iconSelection} test-selection-label d-flex flex-wrap`} tabIndex={0}>\n                <>\n                  {iconData[tabInfo.iconKey]?.map((icon: Icon, i: number) =>\n                    icon.unicode ? (\n                      <span key={i} className={style.unicodeStyle} onClick={() => registerIconFunc(icon, \"unicode\")}>\n                        {icon.unicode}\n                      </span>\n                    ) : (\n                      <span key={i} className={style.imageStyle} onClick={() => registerIconFunc(icon, \"image_path\")}>\n                        <img src={icon.image_path} width=\"28\" height=\"28\" />\n                      </span>\n                    ),\n                  )}\n                </>\n              </div>\n            ) : (\n              <></>\n            )}\n          </>\n        </div>\n      ))}\n      {(selectTab.tabName === t(\"IconList.すべて\")\n        ? !Object.values(iconData) && !Object.values(iconData).some((v) => v.length)\n        : !iconData[selectTab.iconKey]?.length) && (\n        <div id={`label`} className={`${style.iconSelection} test-selection-label d-flex flex-wrap`} tabIndex={0}>\n          <span\n            style={{\n              color: \"#cacaca\",\n              fontSize: \"10px\",\n              padding: \"6px\",\n            }}\n          >\n            {t(\"IconList.該当のアイコンが存在しません。\")}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n};\n","import React, { useEffect, useRef, useState } from \"react\";\nimport style from \"./IconSuggest.module.scss\";\nimport { IconSearchForm } from \"./IconSearchForm\";\nimport { IconList } from \"./IconList\";\nimport axios from \"axios\";\naxios.defaults.headers.common[\"X-Requested-With\"] = \"XMLHttpRequest\";\nimport { DB_ICON_TAB_LIST } from \"../../../../constants/constants\";\nimport { useTranslation } from \"react-i18next\";\n\ntype Props = {\n  client: string;\n  pageId: number;\n  pageType: string;\n  setCurrentIcon: React.Dispatch<React.SetStateAction<{ unicode: string | null; image_path: string | null }>>;\n  isIconOpen: boolean;\n  setIsIconOpen: (isOpen: boolean) => void;\n  defaultImagePath: string;\n};\n\nexport const IconSuggest = ({\n  client,\n  pageId,\n  pageType,\n  setCurrentIcon,\n  isIconOpen,\n  setIsIconOpen,\n  defaultImagePath,\n}: Props) => {\n  const { t } = useTranslation();\n  const closeRef = useRef<HTMLDivElement>(null);\n  const [selectTab, setSelectTab] = useState({ tabName: t(\"IconSuggest.すべて\"), iconKey: \"recently\" });\n  const [iconData, setIconData] = useState({});\n\n  const suggestStyle = (() => {\n    const pageTypeStyles: Record<string, { top?: string; marginLeft?: string; marginTop?: string }> = {\n      dynamic_databases: { top: \"50px\", marginLeft: \"2px\" },\n      workflow_templates: { top: \"180px\", marginLeft: \"6px\" },\n      sections: { marginTop: \"20px\", marginLeft: \"2px\" },\n    };\n\n    return pageTypeStyles[pageType];\n  })();\n\n  const onClickOuterClose = (e: MouseEvent) => {\n    if (e.target && (e.target as HTMLElement).id === \"iconImg\") {\n      return;\n    } else if (isIconOpen) {\n      if (closeRef.current && !closeRef.current.contains(e.target as Node)) {\n        setIsIconOpen(false);\n      }\n    }\n  };\n\n  const fetchIcons = async () => {\n    await axios.get(`/${client}/icons`).then((res) => {\n      setIconData(res.data.icons);\n    });\n  };\n\n  const onSearchIcons = async (value = null, category = null) => {\n    await axios\n      .get(`/${client}/icons`, {\n        params: {\n          category: category,\n          query: value,\n        },\n      })\n      .then((res) => {\n        setIconData(res.data.icons);\n      });\n  };\n\n  const deleteIcon = async () => {\n    await axios\n      .patch(`/${client}/icons/${pageType}/${pageId}`, {\n        icon_id: null,\n      })\n      .then(() => {\n        setCurrentIcon({ unicode: null, image_path: defaultImagePath });\n      });\n  };\n\n  useEffect(() => {\n    document.addEventListener(\"click\", onClickOuterClose);\n    return () => {\n      if (isIconOpen) {\n        document.removeEventListener(\"click\", onClickOuterClose);\n      }\n    };\n  }, [isIconOpen]);\n\n  useEffect(() => {\n    fetchIcons();\n  }, []);\n\n  return (\n    <div className={style.pulldownField} ref={closeRef} style={suggestStyle}>\n      <div\n        style={{\n          borderBottom: \"solid 0.5px #cacaca\",\n          minHeight: \"37px\",\n        }}\n      >\n        <ul className={`${style.tableListItem} list-unstyled main-menu d-flex pl-3 pr-4`}>\n          {DB_ICON_TAB_LIST.map((tabInfo, i) => (\n            <li key={i} className=\"d-flex align-items-center position-relative px-3\">\n              <div\n                className=\"d-flex align-items-center\"\n                style={{ whiteSpace: \"nowrap\", cursor: \"pointer\" }}\n                onClick={() => {\n                  setSelectTab(tabInfo);\n                }}\n              >\n                {tabInfo.tabName !== selectTab.tabName ? (\n                  <div style={{ color: \"#777777\" }}>{tabInfo.tabName}</div>\n                ) : (\n                  <div className=\"dynamic-table-title  yoom-text-black font-weight-bold\">{tabInfo.tabName}</div>\n                )}\n              </div>\n              <>{tabInfo.tabName === selectTab.tabName && <div className={style.tableListItemCurrentBar} />}</>\n            </li>\n          ))}\n          <li className={style.deleteIcon} onClick={deleteIcon}>\n            {t(\"IconSuggest.削除\")}\n          </li>\n        </ul>\n      </div>\n      <div\n        style={{\n          padding: \"4px 0px\",\n          maxHeight: \"170px\",\n          overflow: \"scroll\",\n        }}\n      >\n        <IconSearchForm onSearchIcons={onSearchIcons} />\n      </div>\n      <IconList\n        client={client}\n        pageId={pageId}\n        pageType={pageType}\n        selectTab={selectTab}\n        iconData={iconData}\n        setCurrentIcon={setCurrentIcon}\n        setIsIconOpen={setIsIconOpen}\n      />\n    </div>\n  );\n};\n"],"names":["IconSearchForm","onSearchIcons","t","useTranslation","compFlg","setCompFlg","useState","jsxs","className","jsx","getImageUrl","e","PropTypes","axios","IconList","client","pageId","pageType","selectTab","iconData","setCurrentIcon","setIsIconOpen","registerIcon","iconId","formatIconData","icon","iconCategory","registerIconFunc","DB_ICON_TAB_LIST","tabInfo","i","_a","Fragment","_b","_c","style","_d","v","IconSuggest","isIconOpen","defaultImagePath","closeRef","useRef","setSelectTab","setIconData","suggestStyle","onClickOuterClose","fetchIcons","res","value","category","deleteIcon","useEffect"],"mappings":"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"}