@teppen/react-ui 1.8.2 → 1.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./context.js"),o=require("../id/provider.js"),i=require("../lib/id-generator.js");exports.OptionsArea=function(){var r=o.useIdContext(),s=n.useOptionsWindow(),l=s.state,u=s.actions,a=t.useState(""),c=a[0],d=a[1],f=t.useState(void 0),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./context.js"),o=require("../id/provider.js"),i=require("../lib/id-generator.js");exports.OptionsArea=function(){var r=o.useIdContext(),s=n.useOptionsWindow(),l=s.state,u=s.actions,a=t.useState(""),c=a[0],d=a[1],f=t.useState(void 0),p=f[0],v=f[1],m=t.useState({top:0,left:0}),g=m[0],y=m[1],h=l.isOpen?0===l.options.length?void 0:"number"==typeof p&&p<l.options.length&&p>=0?l.options[p].value:void 0:void 0;return t.useEffect((function(){if(l.isOpen){var e=document.getElementById(i.IdGenerator.generateIdSelectBoxOption(r,null!=h?h:""));if(!e)return;if(0===g.top&&0===g.left)return;e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}else v(void 0)}),[l,g,h]),t.useEffect((function(){if(l.isOpen){var e=function(e){if("ArrowDown"===e.key)e.preventDefault(),v((function(e){return"number"==typeof e?Math.min(e+1,l.options.length-1):0}));else if("ArrowUp"===e.key)e.preventDefault(),v((function(e){return"number"==typeof e?Math.max(e-1,0):0}));else if("Enter"===e.key&&(e.preventDefault(),"number"==typeof p)){if(0===l.options.length||l.options.length<=p)return;var t=l.options[p].value;if(!t)return;d(t),l.onSelect(t),u.closeOptionsWindow()}};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}}),[l,p,v]),t.useEffect((function(){var e=setTimeout((function(){var e;if(l.isOpen){for(var t=null===(e=document.getElementById("ReactUI:SelectBox:OptionsArea"))||void 0===e?void 0:e.parentElement,n=["relative","fixed","absolute","sticky"];t;){var o=n.some((function(e){return t.className.includes(e)})),i=n.some((function(e){return t.style.position.includes(e)}));if(o||i)break;t=t.parentElement}var r=document.getElementById(l.selectBoxId);if(r){var s=r.getBoundingClientRect(),u=s.top+s.height,a=s.left;if(t){var c=t.getBoundingClientRect();y({top:u-c.top+t.scrollTop,left:a-c.left+t.scrollLeft})}else y({top:u+window.scrollY,left:a+window.scrollX})}}}),0);return function(){clearTimeout(e)}}),[l.isOpen]),t.useEffect((function(){var e=function(e){if(l.isOpen){var t=document.getElementById(l.selectBoxId),n=document.getElementById("ReactUI:SelectBox:OptionsArea"),o=e.target;o instanceof Node&&(null==t?void 0:t.contains(o))||o instanceof Node&&(null==n?void 0:n.contains(o))||(u.setSearchText(""),u.closeOptionsWindow())}};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[l.isOpen]),l.isOpen?e.jsx("div",{id:"ReactUI:SelectBox:OptionsArea",className:"absolute min-w-fit max-h-[40vh] overflow-auto border border-gray-300 z-10",style:g,children:l.options.map((function(t){var n,o;return e.jsx("div",{id:i.IdGenerator.generateIdSelectBoxOption(r,null!==(n=t.value)&&void 0!==n?n:""),className:"hover:bg-gray-200 px-2 py-1 ".concat("string"==typeof h?h===t.value?"bg-gray-100":"bg-white":c===t.value?"bg-gray-100":"bg-white"),onClick:function(){l.onSelect(t.value),u.closeOptionsWindow()},children:null!==(o=t.searchLabel)&&void 0!==o?o:t.label},t.value)}))}):e.jsx(e.Fragment,{})};
|
|
2
2
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../../../src/select-box/options-window/component.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { useOptionsWindow } from \"../options-window\";\nimport { useIdContext } from \"../id/provider\";\nimport { IdGenerator } from \"../lib\";\n\nexport function OptionsArea() {\n const id = useIdContext();\n const { state, actions } = useOptionsWindow();\n const [value, setValue] = useState(\"\");\n const [selectingIndex, setSelectingIndex] = useState<number | undefined>(\n undefined\n );\n const [position, setPosition] = useState({ top: 0, left: 0 });\n\n const selectingValue = state.isOpen\n ? state.options.length === 0\n ? undefined\n : typeof selectingIndex === \"number\" &&\n selectingIndex < state.options.length &&\n selectingIndex >= 0\n ? state.options[selectingIndex].value\n : undefined\n : undefined;\n\n useEffect(() => {\n if (state.isOpen) {\n const optionElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOption(id, selectingValue ?? \"\")\n );\n\n if (!optionElement) return;\n if (position.top === 0 && position.left === 0) return;\n\n optionElement.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"nearest\",\n });\n } else {\n setSelectingIndex(undefined);\n }\n }, [state, position, selectingValue]);\n\n useEffect(() => {\n if (state.isOpen) {\n const handleKeydown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setSelectingIndex((prev) =>\n typeof prev === \"number\"\n ? Math.min(prev + 1, state.options.length - 1)\n : 0\n );\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setSelectingIndex((prev) =>\n typeof prev === \"number\" ? Math.max(prev - 1, 0) : 0\n );\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (typeof selectingIndex === \"number\") {\n if (\n state.options.length === 0 ||\n state.options.length <= selectingIndex\n )\n return;\n\n const value = state.options[selectingIndex].value;\n\n if (!value) return;\n\n setValue(value);\n state.onSelect(value);\n actions.closeOptionsWindow();\n }\n }\n };\n\n document.addEventListener(\"keydown\", handleKeydown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown);\n };\n }\n }, [state, selectingIndex, setSelectingIndex]);\n\n useEffect(() => {\n const searchParentElement = () => {\n if (state.isOpen) {\n let parentElement = document.getElementById(\n \"ReactUI:SelectBox:OptionsArea\"\n )?.parentElement;\n\n const positionClasses = [\"relative\", \"fixed\", \"absolute\", \"sticky\"];\n\n while (parentElement) {\n const hasPositionClass = positionClasses.some((className) =>\n parentElement!.className.includes(className)\n );\n\n const hasPositionStyle = positionClasses.some((style) =>\n parentElement!.style.position.includes(style)\n );\n\n if (hasPositionClass || hasPositionStyle) {\n console.log(parentElement);\n break;\n }\n\n parentElement = parentElement.parentElement;\n }\n\n const selectBoxElement = document.getElementById(state.selectBoxId);\n\n if (selectBoxElement) {\n const rect = selectBoxElement.getBoundingClientRect();\n let top = rect.top + rect.height;\n let left = rect.left;\n\n if (parentElement) {\n const parentRect = parentElement.getBoundingClientRect();\n setPosition({\n top: top - parentRect.top,\n left: left - parentRect.left,\n });\n } else {\n setPosition({\n top: top + window.scrollY,\n left: left + window.scrollX,\n });\n }\n }\n }\n };\n\n const timer = setTimeout(searchParentElement, 0);\n\n return () => {\n clearTimeout(timer);\n };\n }, [state.isOpen]);\n\n useEffect(() => {\n const onClickOutOfSelectBox = (e: MouseEvent) => {\n if (!state.isOpen) return;\n\n // SelectBox関連の要素を取得\n const frameElement = document.getElementById(state.selectBoxId);\n const optionsElement = document.getElementById(\n \"ReactUI:SelectBox:OptionsArea\"\n );\n\n // クリックされた要素を取得\n const ele = e.target;\n\n if (ele instanceof Node && frameElement?.contains(ele)) return;\n\n if (ele instanceof Node && optionsElement?.contains(ele)) return;\n\n actions.setSearchText(\"\");\n actions.closeOptionsWindow();\n };\n\n document.addEventListener(\"mousedown\", onClickOutOfSelectBox);\n\n return () => {\n document.removeEventListener(\"mousedown\", onClickOutOfSelectBox);\n };\n }, [state.isOpen]);\n\n if (!state.isOpen) return <></>;\n\n return (\n <div\n id={\"ReactUI:SelectBox:OptionsArea\"}\n className=\"absolute min-w-fit max-h-[40vh] overflow-auto border border-gray-300 z-10\"\n style={position}\n >\n {state.options.map((option) => (\n <div\n id={IdGenerator.generateIdSelectBoxOption(id, option.value ?? \"\")}\n className={`hover:bg-gray-200 px-2 py-1 ${\n typeof selectingValue === \"string\"\n ? selectingValue === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n : value === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n }`}\n key={option.value}\n onClick={() => {\n state.onSelect(option.value);\n actions.closeOptionsWindow();\n }}\n >\n {option.searchLabel ?? option.label}\n </div>\n ))}\n </div>\n );\n}\n"],"names":["id","useIdContext","_a","useOptionsWindow","state","actions","_b","useState","value","setValue","_c","undefined","selectingIndex","setSelectingIndex","_d","top","left","position","setPosition","selectingValue","isOpen","options","length","useEffect","optionElement","document","getElementById","IdGenerator","generateIdSelectBoxOption","scrollIntoView","behavior","block","inline","handleKeydown_1","e","key","preventDefault","prev","Math","min","max","value_1","onSelect","closeOptionsWindow","addEventListener","removeEventListener","timer","setTimeout","parentElement_1","parentElement","positionClasses","hasPositionClass","some","className","includes","hasPositionStyle","style","console","log","selectBoxElement","selectBoxId","rect","getBoundingClientRect","top_1","height","parentRect","window","scrollY","scrollX","clearTimeout","onClickOutOfSelectBox","frameElement","optionsElement","ele","target","Node","contains","setSearchText","_jsx","map","option","jsx","concat","onClick","children","searchLabel","label"],"mappings":"+LAME,IAAMA,EAAKC,EAAAA,eACLC,EAAqBC,EAAgBA,mBAAnCC,EAAKF,EAAAE,MAAEC,EAAOH,EAAAG,QAChBC,EAAoBC,EAAAA,SAAS,IAA5BC,EAAKF,EAAA,GAAEG,EAAQH,EAAA,GAChBI,EAAsCH,EAAAA,cAC1CI,GADKC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAGlCI,EAA0BP,EAAAA,SAAS,CAAEQ,IAAK,EAAGC,KAAM,IAAlDC,OAAUC,OAEXC,EAAiBf,EAAMgB,OACA,IAAzBhB,EAAMiB,QAAQC,YACZX,EAC0B,iBAAnBC,GACPA,EAAiBR,EAAMiB,QAAQC,QAC/BV,GAAkB,EAClBR,EAAMiB,QAAQT,GAAgBJ,WAC9BG,OACFA,EAoJJ,OAlJAY,EAAAA,WAAU,WACR,GAAInB,EAAMgB,OAAQ,CAChB,IAAMI,EAAgBC,SAASC,eAC7BC,EAAWA,YAACC,0BAA0B5B,EAAImB,QAAAA,EAAkB,KAG9D,IAAKK,EAAe,OACpB,GAAqB,IAAjBP,EAASF,KAA+B,IAAlBE,EAASD,KAAY,OAE/CQ,EAAcK,eAAe,CAC3BC,SAAU,SACVC,MAAO,UACPC,OAAQ,WAEX,MACCnB,OAAkBF,EAErB,GAAE,CAACP,EAAOa,EAAUE,IAErBI,EAAAA,WAAU,WACR,GAAInB,EAAMgB,OAAQ,CAChB,IAAMa,EAAgB,SAACC,GACrB,GAAc,cAAVA,EAAEC,IACJD,EAAEE,iBACFvB,GAAkB,SAACwB,GACjB,MAAgB,iBAATA,EACHC,KAAKC,IAAIF,EAAO,EAAGjC,EAAMiB,QAAQC,OAAS,GAC1C,CAFJ,SAIG,GAAc,YAAVY,EAAEC,IACXD,EAAEE,iBACFvB,GAAkB,SAACwB,GACjB,MAAgB,iBAATA,EAAoBC,KAAKE,IAAIH,EAAO,EAAG,GAAK,CAAnD,SAEG,GAAc,UAAVH,EAAEC,MACXD,EAAEE,iBAC4B,iBAAnBxB,GAA6B,CACtC,GAC2B,IAAzBR,EAAMiB,QAAQC,QACdlB,EAAMiB,QAAQC,QAAUV,EAExB,OAEF,IAAM6B,EAAQrC,EAAMiB,QAAQT,GAAgBJ,MAE5C,IAAKiC,EAAO,OAEZhC,EAASgC,GACTrC,EAAMsC,SAASD,GACfpC,EAAQsC,oBACT,CAEL,EAIA,OAFAlB,SAASmB,iBAAiB,UAAWX,GAE9B,WACLR,SAASoB,oBAAoB,UAAWZ,EAC1C,CACD,CACF,GAAE,CAAC7B,EAAOQ,EAAgBC,IAE3BU,EAAAA,WAAU,WACR,IAgDMuB,EAAQC,YAhDc,iBAC1B,GAAI3C,EAAMgB,OAAQ,CAOhB,IANA,IAAI4B,EAED,QAFiB9C,EAAAuB,SAASC,eAC3B,wCACC,IAAAxB,OAAA,EAAAA,EAAA+C,cAEGC,EAAkB,CAAC,WAAY,QAAS,WAAY,UAEnDF,GAAe,CACpB,IAAMG,EAAmBD,EAAgBE,MAAK,SAACC,GAC7C,OAAAL,EAAeK,UAAUC,SAASD,EAAlC,IAGIE,EAAmBL,EAAgBE,MAAK,SAACI,GAC7C,OAAAR,EAAeQ,MAAMvC,SAASqC,SAASE,EAAvC,IAGF,GAAIL,GAAoBI,EAAkB,CACxCE,QAAQC,IAAIV,GACZ,KACD,CAEDA,EAAgBA,EAAcC,aAC/B,CAED,IAAMU,EAAmBlC,SAASC,eAAetB,EAAMwD,aAEvD,GAAID,EAAkB,CACpB,IAAME,EAAOF,EAAiBG,wBAC1BC,EAAMF,EAAK9C,IAAM8C,EAAKG,OACtBhD,EAAO6C,EAAK7C,KAEhB,GAAIgC,EAAe,CACjB,IAAMiB,EAAajB,EAAcc,wBACjC5C,EAAY,CACVH,IAAKgD,EAAME,EAAWlD,IACtBC,KAAMA,EAAOiD,EAAWjD,MAE3B,MACCE,EAAY,CACVH,IAAKgD,EAAMG,OAAOC,QAClBnD,KAAMA,EAAOkD,OAAOE,SAGzB,CACF,CACH,GAE8C,GAE9C,OAAO,WACLC,aAAavB,EACf,CACF,GAAG,CAAC1C,EAAMgB,SAEVG,EAAAA,WAAU,WACR,IAAM+C,EAAwB,SAACpC,GAC7B,GAAK9B,EAAMgB,OAAX,CAGA,IAAMmD,EAAe9C,SAASC,eAAetB,EAAMwD,aAC7CY,EAAiB/C,SAASC,eAC9B,iCAII+C,EAAMvC,EAAEwC,OAEVD,aAAeE,OAAQJ,aAAA,EAAAA,EAAcK,SAASH,KAE9CA,aAAeE,OAAQH,aAAA,EAAAA,EAAgBI,SAASH,MAEpDpE,EAAQwE,cAAc,IACtBxE,EAAQsC,qBAhBkB,CAiB5B,EAIA,OAFAlB,SAASmB,iBAAiB,YAAa0B,GAEhC,WACL7C,SAASoB,oBAAoB,YAAayB,EAC5C,CACF,GAAG,CAAClE,EAAMgB,SAELhB,EAAMgB,OAGT0D,EAAAA,WACE9E,GAAI,gCACJqD,UAAU,4EACVG,MAAOvC,WAENb,EAAMiB,QAAQ0D,KAAI,SAACC,WAAW,OAC7BF,EACEG,IAAA,MAAA,CAAAjF,GAAI2B,EAAAA,YAAYC,0BAA0B5B,EAAgB,QAAZE,EAAA8E,EAAOxE,aAAK,IAAAN,EAAAA,EAAI,IAC9DmD,UAAW,+BACT6B,OAA0B,iBAAnB/D,EACHA,IAAmB6D,EAAOxE,MACxB,cACA,WACFA,IAAUwE,EAAOxE,MACjB,cACA,YAGN2E,QAAS,WACP/E,EAAMsC,SAASsC,EAAOxE,OACtBH,EAAQsC,oBACV,EAECyC,SAAsB,QAAtB9E,EAAA0E,EAAOK,mBAAe,IAAA/E,EAAAA,EAAA0E,EAAOM,OANzBN,EAAOxE,MAQf,MA5BqBsE,oBA+B5B"}
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../../../src/select-box/options-window/component.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { useOptionsWindow } from \"../options-window\";\nimport { useIdContext } from \"../id/provider\";\nimport { IdGenerator } from \"../lib\";\n\nexport function OptionsArea() {\n const id = useIdContext();\n const { state, actions } = useOptionsWindow();\n const [value, setValue] = useState(\"\");\n const [selectingIndex, setSelectingIndex] = useState<number | undefined>(\n undefined\n );\n const [position, setPosition] = useState({ top: 0, left: 0 });\n\n const selectingValue = state.isOpen\n ? state.options.length === 0\n ? undefined\n : typeof selectingIndex === \"number\" &&\n selectingIndex < state.options.length &&\n selectingIndex >= 0\n ? state.options[selectingIndex].value\n : undefined\n : undefined;\n\n useEffect(() => {\n if (state.isOpen) {\n const optionElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOption(id, selectingValue ?? \"\")\n );\n\n if (!optionElement) return;\n if (position.top === 0 && position.left === 0) return;\n\n optionElement.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"nearest\",\n });\n } else {\n setSelectingIndex(undefined);\n }\n }, [state, position, selectingValue]);\n\n useEffect(() => {\n if (state.isOpen) {\n const handleKeydown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setSelectingIndex((prev) =>\n typeof prev === \"number\"\n ? Math.min(prev + 1, state.options.length - 1)\n : 0\n );\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setSelectingIndex((prev) =>\n typeof prev === \"number\" ? Math.max(prev - 1, 0) : 0\n );\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (typeof selectingIndex === \"number\") {\n if (\n state.options.length === 0 ||\n state.options.length <= selectingIndex\n )\n return;\n\n const value = state.options[selectingIndex].value;\n\n if (!value) return;\n\n setValue(value);\n state.onSelect(value);\n actions.closeOptionsWindow();\n }\n }\n };\n\n document.addEventListener(\"keydown\", handleKeydown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown);\n };\n }\n }, [state, selectingIndex, setSelectingIndex]);\n\n useEffect(() => {\n const searchParentElement = () => {\n if (state.isOpen) {\n let parentElement = document.getElementById(\n \"ReactUI:SelectBox:OptionsArea\"\n )?.parentElement;\n\n const positionClasses = [\"relative\", \"fixed\", \"absolute\", \"sticky\"];\n\n while (parentElement) {\n const hasPositionClass = positionClasses.some((className) =>\n parentElement!.className.includes(className)\n );\n\n const hasPositionStyle = positionClasses.some((style) =>\n parentElement!.style.position.includes(style)\n );\n\n if (hasPositionClass || hasPositionStyle) break;\n\n parentElement = parentElement.parentElement;\n }\n\n const selectBoxElement = document.getElementById(state.selectBoxId);\n\n if (selectBoxElement) {\n const rect = selectBoxElement.getBoundingClientRect();\n let top = rect.top + rect.height;\n let left = rect.left;\n\n if (parentElement) {\n const parentRect = parentElement.getBoundingClientRect();\n setPosition({\n top: top - parentRect.top + parentElement.scrollTop,\n left: left - parentRect.left + parentElement.scrollLeft,\n });\n } else {\n setPosition({\n top: top + window.scrollY,\n left: left + window.scrollX,\n });\n }\n }\n }\n };\n\n const timer = setTimeout(searchParentElement, 0);\n\n return () => {\n clearTimeout(timer);\n };\n }, [state.isOpen]);\n\n useEffect(() => {\n const onClickOutOfSelectBox = (e: MouseEvent) => {\n if (!state.isOpen) return;\n\n // SelectBox関連の要素を取得\n const frameElement = document.getElementById(state.selectBoxId);\n const optionsElement = document.getElementById(\n \"ReactUI:SelectBox:OptionsArea\"\n );\n\n // クリックされた要素を取得\n const ele = e.target;\n\n if (ele instanceof Node && frameElement?.contains(ele)) return;\n\n if (ele instanceof Node && optionsElement?.contains(ele)) return;\n\n actions.setSearchText(\"\");\n actions.closeOptionsWindow();\n };\n\n document.addEventListener(\"mousedown\", onClickOutOfSelectBox);\n\n return () => {\n document.removeEventListener(\"mousedown\", onClickOutOfSelectBox);\n };\n }, [state.isOpen]);\n\n if (!state.isOpen) return <></>;\n\n return (\n <div\n id={\"ReactUI:SelectBox:OptionsArea\"}\n className=\"absolute min-w-fit max-h-[40vh] overflow-auto border border-gray-300 z-10\"\n style={position}\n >\n {state.options.map((option) => (\n <div\n id={IdGenerator.generateIdSelectBoxOption(id, option.value ?? \"\")}\n className={`hover:bg-gray-200 px-2 py-1 ${\n typeof selectingValue === \"string\"\n ? selectingValue === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n : value === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n }`}\n key={option.value}\n onClick={() => {\n state.onSelect(option.value);\n actions.closeOptionsWindow();\n }}\n >\n {option.searchLabel ?? option.label}\n </div>\n ))}\n </div>\n );\n}\n"],"names":["id","useIdContext","_a","useOptionsWindow","state","actions","_b","useState","value","setValue","_c","undefined","selectingIndex","setSelectingIndex","_d","top","left","position","setPosition","selectingValue","isOpen","options","length","useEffect","optionElement","document","getElementById","IdGenerator","generateIdSelectBoxOption","scrollIntoView","behavior","block","inline","handleKeydown_1","e","key","preventDefault","prev","Math","min","max","value_1","onSelect","closeOptionsWindow","addEventListener","removeEventListener","timer","setTimeout","parentElement_1","parentElement","positionClasses","hasPositionClass","some","className","includes","hasPositionStyle","style","selectBoxElement","selectBoxId","rect","getBoundingClientRect","top_1","height","parentRect","scrollTop","scrollLeft","window","scrollY","scrollX","clearTimeout","onClickOutOfSelectBox","frameElement","optionsElement","ele","target","Node","contains","setSearchText","_jsx","map","option","jsx","concat","onClick","children","searchLabel","label"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,Fragment as t}from"react/jsx-runtime";import{useState as n,useEffect as o}from"react";import{useOptionsWindow as i}from"./context.js";import{useIdContext as r}from"../id/provider.js";import{IdGenerator as l}from"../lib/id-generator.js";function a(){var a=r(),s=i(),
|
|
1
|
+
import{jsx as e,Fragment as t}from"react/jsx-runtime";import{useState as n,useEffect as o}from"react";import{useOptionsWindow as i}from"./context.js";import{useIdContext as r}from"../id/provider.js";import{IdGenerator as l}from"../lib/id-generator.js";function a(){var a=r(),s=i(),c=s.state,u=s.actions,d=n(""),f=d[0],p=d[1],v=n(void 0),m=v[0],g=v[1],y=n({top:0,left:0}),h=y[0],b=y[1],w=c.isOpen?0===c.options.length?void 0:"number"==typeof m&&m<c.options.length&&m>=0?c.options[m].value:void 0:void 0;return o((function(){if(c.isOpen){var e=document.getElementById(l.generateIdSelectBoxOption(a,null!=w?w:""));if(!e)return;if(0===h.top&&0===h.left)return;e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}else g(void 0)}),[c,h,w]),o((function(){if(c.isOpen){var e=function(e){if("ArrowDown"===e.key)e.preventDefault(),g((function(e){return"number"==typeof e?Math.min(e+1,c.options.length-1):0}));else if("ArrowUp"===e.key)e.preventDefault(),g((function(e){return"number"==typeof e?Math.max(e-1,0):0}));else if("Enter"===e.key&&(e.preventDefault(),"number"==typeof m)){if(0===c.options.length||c.options.length<=m)return;var t=c.options[m].value;if(!t)return;p(t),c.onSelect(t),u.closeOptionsWindow()}};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}}),[c,m,g]),o((function(){var e=setTimeout((function(){var e;if(c.isOpen){for(var t=null===(e=document.getElementById("ReactUI:SelectBox:OptionsArea"))||void 0===e?void 0:e.parentElement,n=["relative","fixed","absolute","sticky"];t;){var o=n.some((function(e){return t.className.includes(e)})),i=n.some((function(e){return t.style.position.includes(e)}));if(o||i)break;t=t.parentElement}var r=document.getElementById(c.selectBoxId);if(r){var l=r.getBoundingClientRect(),a=l.top+l.height,s=l.left;if(t){var u=t.getBoundingClientRect();b({top:a-u.top+t.scrollTop,left:s-u.left+t.scrollLeft})}else b({top:a+window.scrollY,left:s+window.scrollX})}}}),0);return function(){clearTimeout(e)}}),[c.isOpen]),o((function(){var e=function(e){if(c.isOpen){var t=document.getElementById(c.selectBoxId),n=document.getElementById("ReactUI:SelectBox:OptionsArea"),o=e.target;o instanceof Node&&(null==t?void 0:t.contains(o))||o instanceof Node&&(null==n?void 0:n.contains(o))||(u.setSearchText(""),u.closeOptionsWindow())}};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[c.isOpen]),c.isOpen?e("div",{id:"ReactUI:SelectBox:OptionsArea",className:"absolute min-w-fit max-h-[40vh] overflow-auto border border-gray-300 z-10",style:h,children:c.options.map((function(t){var n,o;return e("div",{id:l.generateIdSelectBoxOption(a,null!==(n=t.value)&&void 0!==n?n:""),className:"hover:bg-gray-200 px-2 py-1 ".concat("string"==typeof w?w===t.value?"bg-gray-100":"bg-white":f===t.value?"bg-gray-100":"bg-white"),onClick:function(){c.onSelect(t.value),u.closeOptionsWindow()},children:null!==(o=t.searchLabel)&&void 0!==o?o:t.label},t.value)}))}):e(t,{})}export{a as OptionsArea};
|
|
2
2
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../../../src/select-box/options-window/component.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { useOptionsWindow } from \"../options-window\";\nimport { useIdContext } from \"../id/provider\";\nimport { IdGenerator } from \"../lib\";\n\nexport function OptionsArea() {\n const id = useIdContext();\n const { state, actions } = useOptionsWindow();\n const [value, setValue] = useState(\"\");\n const [selectingIndex, setSelectingIndex] = useState<number | undefined>(\n undefined\n );\n const [position, setPosition] = useState({ top: 0, left: 0 });\n\n const selectingValue = state.isOpen\n ? state.options.length === 0\n ? undefined\n : typeof selectingIndex === \"number\" &&\n selectingIndex < state.options.length &&\n selectingIndex >= 0\n ? state.options[selectingIndex].value\n : undefined\n : undefined;\n\n useEffect(() => {\n if (state.isOpen) {\n const optionElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOption(id, selectingValue ?? \"\")\n );\n\n if (!optionElement) return;\n if (position.top === 0 && position.left === 0) return;\n\n optionElement.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"nearest\",\n });\n } else {\n setSelectingIndex(undefined);\n }\n }, [state, position, selectingValue]);\n\n useEffect(() => {\n if (state.isOpen) {\n const handleKeydown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setSelectingIndex((prev) =>\n typeof prev === \"number\"\n ? Math.min(prev + 1, state.options.length - 1)\n : 0\n );\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setSelectingIndex((prev) =>\n typeof prev === \"number\" ? Math.max(prev - 1, 0) : 0\n );\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (typeof selectingIndex === \"number\") {\n if (\n state.options.length === 0 ||\n state.options.length <= selectingIndex\n )\n return;\n\n const value = state.options[selectingIndex].value;\n\n if (!value) return;\n\n setValue(value);\n state.onSelect(value);\n actions.closeOptionsWindow();\n }\n }\n };\n\n document.addEventListener(\"keydown\", handleKeydown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown);\n };\n }\n }, [state, selectingIndex, setSelectingIndex]);\n\n useEffect(() => {\n const searchParentElement = () => {\n if (state.isOpen) {\n let parentElement = document.getElementById(\n \"ReactUI:SelectBox:OptionsArea\"\n )?.parentElement;\n\n const positionClasses = [\"relative\", \"fixed\", \"absolute\", \"sticky\"];\n\n while (parentElement) {\n const hasPositionClass = positionClasses.some((className) =>\n parentElement!.className.includes(className)\n );\n\n const hasPositionStyle = positionClasses.some((style) =>\n parentElement!.style.position.includes(style)\n );\n\n if (hasPositionClass || hasPositionStyle) {\n console.log(parentElement);\n break;\n }\n\n parentElement = parentElement.parentElement;\n }\n\n const selectBoxElement = document.getElementById(state.selectBoxId);\n\n if (selectBoxElement) {\n const rect = selectBoxElement.getBoundingClientRect();\n let top = rect.top + rect.height;\n let left = rect.left;\n\n if (parentElement) {\n const parentRect = parentElement.getBoundingClientRect();\n setPosition({\n top: top - parentRect.top,\n left: left - parentRect.left,\n });\n } else {\n setPosition({\n top: top + window.scrollY,\n left: left + window.scrollX,\n });\n }\n }\n }\n };\n\n const timer = setTimeout(searchParentElement, 0);\n\n return () => {\n clearTimeout(timer);\n };\n }, [state.isOpen]);\n\n useEffect(() => {\n const onClickOutOfSelectBox = (e: MouseEvent) => {\n if (!state.isOpen) return;\n\n // SelectBox関連の要素を取得\n const frameElement = document.getElementById(state.selectBoxId);\n const optionsElement = document.getElementById(\n \"ReactUI:SelectBox:OptionsArea\"\n );\n\n // クリックされた要素を取得\n const ele = e.target;\n\n if (ele instanceof Node && frameElement?.contains(ele)) return;\n\n if (ele instanceof Node && optionsElement?.contains(ele)) return;\n\n actions.setSearchText(\"\");\n actions.closeOptionsWindow();\n };\n\n document.addEventListener(\"mousedown\", onClickOutOfSelectBox);\n\n return () => {\n document.removeEventListener(\"mousedown\", onClickOutOfSelectBox);\n };\n }, [state.isOpen]);\n\n if (!state.isOpen) return <></>;\n\n return (\n <div\n id={\"ReactUI:SelectBox:OptionsArea\"}\n className=\"absolute min-w-fit max-h-[40vh] overflow-auto border border-gray-300 z-10\"\n style={position}\n >\n {state.options.map((option) => (\n <div\n id={IdGenerator.generateIdSelectBoxOption(id, option.value ?? \"\")}\n className={`hover:bg-gray-200 px-2 py-1 ${\n typeof selectingValue === \"string\"\n ? selectingValue === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n : value === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n }`}\n key={option.value}\n onClick={() => {\n state.onSelect(option.value);\n actions.closeOptionsWindow();\n }}\n >\n {option.searchLabel ?? option.label}\n </div>\n ))}\n </div>\n );\n}\n"],"names":["OptionsArea","id","useIdContext","_a","useOptionsWindow","state","actions","_b","useState","value","setValue","_c","undefined","selectingIndex","setSelectingIndex","_d","top","left","position","setPosition","selectingValue","isOpen","options","length","useEffect","optionElement","document","getElementById","IdGenerator","generateIdSelectBoxOption","scrollIntoView","behavior","block","inline","handleKeydown_1","e","key","preventDefault","prev","Math","min","max","value_1","onSelect","closeOptionsWindow","addEventListener","removeEventListener","timer","setTimeout","parentElement_1","parentElement","positionClasses","hasPositionClass","some","className","includes","hasPositionStyle","style","console","log","selectBoxElement","selectBoxId","rect","getBoundingClientRect","top_1","height","parentRect","window","scrollY","scrollX","clearTimeout","onClickOutOfSelectBox","frameElement","optionsElement","ele","target","Node","contains","setSearchText","_jsx","map","option","concat","onClick","children","searchLabel","label"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../../../src/select-box/options-window/component.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { useOptionsWindow } from \"../options-window\";\nimport { useIdContext } from \"../id/provider\";\nimport { IdGenerator } from \"../lib\";\n\nexport function OptionsArea() {\n const id = useIdContext();\n const { state, actions } = useOptionsWindow();\n const [value, setValue] = useState(\"\");\n const [selectingIndex, setSelectingIndex] = useState<number | undefined>(\n undefined\n );\n const [position, setPosition] = useState({ top: 0, left: 0 });\n\n const selectingValue = state.isOpen\n ? state.options.length === 0\n ? undefined\n : typeof selectingIndex === \"number\" &&\n selectingIndex < state.options.length &&\n selectingIndex >= 0\n ? state.options[selectingIndex].value\n : undefined\n : undefined;\n\n useEffect(() => {\n if (state.isOpen) {\n const optionElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOption(id, selectingValue ?? \"\")\n );\n\n if (!optionElement) return;\n if (position.top === 0 && position.left === 0) return;\n\n optionElement.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"nearest\",\n });\n } else {\n setSelectingIndex(undefined);\n }\n }, [state, position, selectingValue]);\n\n useEffect(() => {\n if (state.isOpen) {\n const handleKeydown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setSelectingIndex((prev) =>\n typeof prev === \"number\"\n ? Math.min(prev + 1, state.options.length - 1)\n : 0\n );\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setSelectingIndex((prev) =>\n typeof prev === \"number\" ? Math.max(prev - 1, 0) : 0\n );\n } else if (e.key === \"Enter\") {\n e.preventDefault();\n if (typeof selectingIndex === \"number\") {\n if (\n state.options.length === 0 ||\n state.options.length <= selectingIndex\n )\n return;\n\n const value = state.options[selectingIndex].value;\n\n if (!value) return;\n\n setValue(value);\n state.onSelect(value);\n actions.closeOptionsWindow();\n }\n }\n };\n\n document.addEventListener(\"keydown\", handleKeydown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown);\n };\n }\n }, [state, selectingIndex, setSelectingIndex]);\n\n useEffect(() => {\n const searchParentElement = () => {\n if (state.isOpen) {\n let parentElement = document.getElementById(\n \"ReactUI:SelectBox:OptionsArea\"\n )?.parentElement;\n\n const positionClasses = [\"relative\", \"fixed\", \"absolute\", \"sticky\"];\n\n while (parentElement) {\n const hasPositionClass = positionClasses.some((className) =>\n parentElement!.className.includes(className)\n );\n\n const hasPositionStyle = positionClasses.some((style) =>\n parentElement!.style.position.includes(style)\n );\n\n if (hasPositionClass || hasPositionStyle) break;\n\n parentElement = parentElement.parentElement;\n }\n\n const selectBoxElement = document.getElementById(state.selectBoxId);\n\n if (selectBoxElement) {\n const rect = selectBoxElement.getBoundingClientRect();\n let top = rect.top + rect.height;\n let left = rect.left;\n\n if (parentElement) {\n const parentRect = parentElement.getBoundingClientRect();\n setPosition({\n top: top - parentRect.top + parentElement.scrollTop,\n left: left - parentRect.left + parentElement.scrollLeft,\n });\n } else {\n setPosition({\n top: top + window.scrollY,\n left: left + window.scrollX,\n });\n }\n }\n }\n };\n\n const timer = setTimeout(searchParentElement, 0);\n\n return () => {\n clearTimeout(timer);\n };\n }, [state.isOpen]);\n\n useEffect(() => {\n const onClickOutOfSelectBox = (e: MouseEvent) => {\n if (!state.isOpen) return;\n\n // SelectBox関連の要素を取得\n const frameElement = document.getElementById(state.selectBoxId);\n const optionsElement = document.getElementById(\n \"ReactUI:SelectBox:OptionsArea\"\n );\n\n // クリックされた要素を取得\n const ele = e.target;\n\n if (ele instanceof Node && frameElement?.contains(ele)) return;\n\n if (ele instanceof Node && optionsElement?.contains(ele)) return;\n\n actions.setSearchText(\"\");\n actions.closeOptionsWindow();\n };\n\n document.addEventListener(\"mousedown\", onClickOutOfSelectBox);\n\n return () => {\n document.removeEventListener(\"mousedown\", onClickOutOfSelectBox);\n };\n }, [state.isOpen]);\n\n if (!state.isOpen) return <></>;\n\n return (\n <div\n id={\"ReactUI:SelectBox:OptionsArea\"}\n className=\"absolute min-w-fit max-h-[40vh] overflow-auto border border-gray-300 z-10\"\n style={position}\n >\n {state.options.map((option) => (\n <div\n id={IdGenerator.generateIdSelectBoxOption(id, option.value ?? \"\")}\n className={`hover:bg-gray-200 px-2 py-1 ${\n typeof selectingValue === \"string\"\n ? selectingValue === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n : value === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n }`}\n key={option.value}\n onClick={() => {\n state.onSelect(option.value);\n actions.closeOptionsWindow();\n }}\n >\n {option.searchLabel ?? option.label}\n </div>\n ))}\n </div>\n );\n}\n"],"names":["OptionsArea","id","useIdContext","_a","useOptionsWindow","state","actions","_b","useState","value","setValue","_c","undefined","selectingIndex","setSelectingIndex","_d","top","left","position","setPosition","selectingValue","isOpen","options","length","useEffect","optionElement","document","getElementById","IdGenerator","generateIdSelectBoxOption","scrollIntoView","behavior","block","inline","handleKeydown_1","e","key","preventDefault","prev","Math","min","max","value_1","onSelect","closeOptionsWindow","addEventListener","removeEventListener","timer","setTimeout","parentElement_1","parentElement","positionClasses","hasPositionClass","some","className","includes","hasPositionStyle","style","selectBoxElement","selectBoxId","rect","getBoundingClientRect","top_1","height","parentRect","scrollTop","scrollLeft","window","scrollY","scrollX","clearTimeout","onClickOutOfSelectBox","frameElement","optionsElement","ele","target","Node","contains","setSearchText","_jsx","map","option","concat","onClick","children","searchLabel","label"],"mappings":"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"}
|