@teppen/react-ui 1.7.5 → 1.7.7
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.
- package/dist/cjs/src/select-box/index.js +1 -1
- package/dist/cjs/src/select-box/index.js.map +1 -1
- package/dist/cjs/src/select-box/parts/options-area.js +1 -1
- package/dist/cjs/src/select-box/parts/options-area.js.map +1 -1
- package/dist/cjs/src/table/copy/hooks.js +1 -1
- package/dist/cjs/src/table/copy/hooks.js.map +1 -1
- package/dist/cjs/src/table/operation/components/keyboard-setting.js +1 -1
- package/dist/cjs/src/table/table/base.js +1 -1
- package/dist/esm/src/select-box/index.js +1 -1
- package/dist/esm/src/select-box/index.js.map +1 -1
- package/dist/esm/src/select-box/parts/options-area.js +1 -1
- package/dist/esm/src/select-box/parts/options-area.js.map +1 -1
- package/dist/esm/src/table/copy/hooks.js +1 -1
- package/dist/esm/src/table/copy/hooks.js.map +1 -1
- package/dist/esm/src/table/operation/components/keyboard-setting.js +1 -1
- package/dist/esm/src/table/table/base.js +1 -1
- package/dist/index.d.ts +29 -4
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),n=require("react"),t=require("./parts/input-area.js"),r=require("./parts/options-area.js"),o=require("./parts/frame.js"),u=require("./id/provider.js"),i=require("./lib/id-generator.js");exports.SelectBox=function(a){var d,
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),n=require("react"),t=require("./parts/input-area.js"),r=require("./parts/options-area.js"),o=require("./parts/frame.js"),u=require("./id/provider.js"),i=require("./lib/id-generator.js");exports.SelectBox=function(a){var s,d,c,l,v=n.useState(null!==(s=a.value)&&void 0!==s?s:""),f=v[0],p=v[1],m=n.useState(null!==(d=a.defaultIsOpen)&&void 0!==d&&d),w=m[0],g=m[1],x=n.useState(""),y=x[0],h=x[1],L=n.useState(void 0),I=L[0],S=L[1],E=function(e){p(e),a.onSelect(e),h(""),g(!1)},j=null!==(l=null===(c=a.options.find((function(e){return e.value===f})))||void 0===c?void 0:c.label)&&void 0!==l?l:"",b=n.useMemo((function(){return a.options.filter((function(e){return e.searchText?e.searchText.toLowerCase().includes(y.toLowerCase()):e.searchLabel?e.searchLabel.toLowerCase().includes(y.toLowerCase()):void e.label.toLowerCase().includes(y.toLowerCase())}))}),[a.options,y]);n.useEffect((function(){var e=function(e){var n=document.getElementById(i.IdGenerator.generateIdSelectBoxFrame(a.id)),t=document.getElementById(i.IdGenerator.generateIdSelectBoxOptionsArea(a.id)),r=e.target;r instanceof Node&&(null==n?void 0:n.contains(r))||r instanceof Node&&(null==t?void 0:t.contains(r))||(h(""),g(!1))};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[]),n.useEffect((function(){if(w){var e=function(e){"ArrowDown"===e.key?(e.preventDefault(),S((function(e){return"number"==typeof e?Math.min(e+1,b.length-1):0}))):"ArrowUp"===e.key?(e.preventDefault(),S((function(e){return"number"==typeof e?Math.max(e-1,0):0}))):"Enter"===e.key&&(e.preventDefault(),"number"==typeof I&&E(b[I].value))};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}S(void 0);var n=document.getElementById(i.IdGenerator.generateIdSelectBoxInputArea(a.id));if(n){var t=function(e){"ArrowDown"===e.key&&(e.preventDefault(),g(!0))};return n.addEventListener("keydown",t),function(){n.removeEventListener("keydown",t)}}}),[w,b,I,S]);var k=0===b.length?void 0:"number"==typeof I&&I<b.length?b[I].value:void 0;return e.jsx(u.IdProvider,{id:a.id,children:e.jsxs(o.SelectBoxFrame,{isOpen:w,onToggle:function(){return g((function(e){return!e}))},children:[e.jsx(t.InputArea,{inputRef:a.inputRef,isSelecting:w,selectedValue:j,searchText:y,onChangeSearchText:h}),w&&e.jsx(r.OptionsArea,{options:b,value:f,onSelect:E,selectingValue:k})]})})};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/select-box/index.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { InputArea, OptionsArea, SelectBoxFrame } from \"./parts\";\nimport { Options } from \"./types\";\nimport { IdProvider } from \"./id/provider\";\nimport { IdGenerator } from \"./lib\";\n\ninterface IPropsSelectBox {\n id: string;\n inputRef?: React.RefObject<HTMLInputElement>;\n defaultIsOpen?: boolean;\n options: Options[];\n value?: string;\n onSelect: (value: string) => void;\n}\n\nexport function SelectBox(props: IPropsSelectBox) {\n const [value, setValue] = useState(props.value ?? \"\");\n const [isOpen, setIsOpen] = useState(props.defaultIsOpen ?? false);\n const [searchText, setSearchText] = useState(\"\");\n const [selectingIndex, setSelectingIndex] = useState<number | undefined>(\n undefined\n );\n\n const handleSelect = (value: string) => {\n setValue(value);\n props.onSelect(value);\n setSearchText(\"\");\n setIsOpen(false);\n };\n\n const label =\n props.options.find((option) => option.value === value)?.label ?? \"\";\n\n const searchedOptions = useMemo(\n () =>\n props.options.filter((option)
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/select-box/index.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { InputArea, OptionsArea, SelectBoxFrame } from \"./parts\";\nimport { Options } from \"./types\";\nimport { IdProvider } from \"./id/provider\";\nimport { IdGenerator } from \"./lib\";\n\ninterface IPropsSelectBox {\n id: string;\n inputRef?: React.RefObject<HTMLInputElement>;\n defaultIsOpen?: boolean;\n options: Options[];\n value?: string;\n onSelect: (value: string) => void;\n}\n\nexport function SelectBox(props: IPropsSelectBox) {\n const [value, setValue] = useState(props.value ?? \"\");\n const [isOpen, setIsOpen] = useState(props.defaultIsOpen ?? false);\n const [searchText, setSearchText] = useState(\"\");\n const [selectingIndex, setSelectingIndex] = useState<number | undefined>(\n undefined\n );\n\n const handleSelect = (value: string) => {\n setValue(value);\n props.onSelect(value);\n setSearchText(\"\");\n setIsOpen(false);\n };\n\n const label =\n props.options.find((option) => option.value === value)?.label ?? \"\";\n\n const searchedOptions = useMemo(\n () =>\n props.options.filter((option) => {\n if (option.searchText) {\n return option.searchText\n .toLowerCase()\n .includes(searchText.toLowerCase());\n } else if (option.searchLabel) {\n return option.searchLabel\n .toLowerCase()\n .includes(searchText.toLowerCase());\n } else {\n option.label.toLowerCase().includes(searchText.toLowerCase());\n }\n }),\n [props.options, searchText]\n );\n\n useEffect(() => {\n const onClickOutOfSelectBox = (e: MouseEvent) => {\n // SelectBox関連の要素を取得\n const frameElement = document.getElementById(\n IdGenerator.generateIdSelectBoxFrame(props.id)\n );\n const optionsElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOptionsArea(props.id)\n );\n\n // クリックされた要素を取得\n const ele = e.target;\n\n if (ele instanceof Node && frameElement?.contains(ele)) return;\n if (ele instanceof Node && optionsElement?.contains(ele)) return;\n\n setSearchText(\"\");\n setIsOpen(false);\n };\n\n document.addEventListener(\"mousedown\", onClickOutOfSelectBox);\n\n return () => {\n document.removeEventListener(\"mousedown\", onClickOutOfSelectBox);\n };\n }, []);\n\n useEffect(() => {\n if (!isOpen) {\n setSelectingIndex(undefined);\n\n const inputElement = document.getElementById(\n IdGenerator.generateIdSelectBoxInputArea(props.id)\n );\n\n if (inputElement) {\n // inputElementにフォーカスされている場合、ArrowDownを押すとOptionsAreaが開く\n const handleKeydown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setIsOpen(true);\n }\n };\n inputElement.addEventListener(\"keydown\", handleKeydown);\n\n return () => {\n inputElement.removeEventListener(\"keydown\", handleKeydown);\n };\n }\n } else {\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, searchedOptions.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 handleSelect(searchedOptions[selectingIndex].value);\n }\n }\n };\n document.addEventListener(\"keydown\", handleKeydown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown);\n };\n }\n }, [isOpen, searchedOptions, selectingIndex, setSelectingIndex]);\n\n const selectingValue =\n searchedOptions.length === 0\n ? undefined\n : typeof selectingIndex === \"number\" &&\n selectingIndex < searchedOptions.length\n ? searchedOptions[selectingIndex].value\n : undefined;\n\n return (\n <IdProvider id={props.id}>\n <SelectBoxFrame\n isOpen={isOpen}\n onToggle={() => setIsOpen((prev) => !prev)}\n >\n <InputArea\n inputRef={props.inputRef}\n isSelecting={isOpen}\n selectedValue={label}\n searchText={searchText}\n onChangeSearchText={setSearchText}\n />\n {isOpen && (\n <OptionsArea\n options={searchedOptions}\n value={value}\n onSelect={handleSelect}\n selectingValue={selectingValue}\n />\n )}\n </SelectBoxFrame>\n </IdProvider>\n );\n}\n"],"names":["props","_e","useState","_a","value","setValue","_f","_b","defaultIsOpen","isOpen","setIsOpen","_g","searchText","setSearchText","_h","undefined","selectingIndex","setSelectingIndex","handleSelect","onSelect","label","_d","_c","options","find","option","searchedOptions","useMemo","filter","toLowerCase","includes","searchLabel","useEffect","onClickOutOfSelectBox","e","frameElement","document","getElementById","IdGenerator","generateIdSelectBoxFrame","id","optionsElement","generateIdSelectBoxOptionsArea","ele","target","Node","contains","addEventListener","removeEventListener","handleKeydown_2","key","preventDefault","prev","Math","min","length","max","inputElement_1","generateIdSelectBoxInputArea","handleKeydown_1","selectingValue","_jsx","IdProvider","children","_jsxs","jsxs","SelectBoxFrame","onToggle","jsx","InputArea","inputRef","isSelecting","selectedValue","onChangeSearchText","OptionsArea"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../id/provider.js"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../id/provider.js"),l=require("../lib/id-generator.js");exports.OptionsArea=function(n){var a=t.useIdContext();return r.useEffect((function(){var e,r=document.getElementById(l.IdGenerator.generateIdSelectBoxOption(a,null!==(e=n.selectingValue)&&void 0!==e?e:""));r&&r.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}),[n.selectingValue]),e.jsx("div",{id:l.IdGenerator.generateIdSelectBoxOptionsArea(a),className:"absolute top-full left-0 w-full max-h-[40vh] overflow-auto border border-gray-300",children:n.options.map((function(r){var t,o;return e.jsx("div",{id:l.IdGenerator.generateIdSelectBoxOption(a,null!==(t=r.value)&&void 0!==t?t:""),className:"hover:bg-gray-200 px-2 py-1 ".concat("string"==typeof n.selectingValue?n.selectingValue===r.value?"bg-gray-100":"bg-white":n.value===r.value?"bg-gray-100":"bg-white"),onClick:function(){return n.onSelect(r.value)},children:null!==(o=r.searchLabel)&&void 0!==o?o:r.label},r.value)}))})};
|
|
2
2
|
//# sourceMappingURL=options-area.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"options-area.js","sources":["../../../../../src/select-box/parts/options-area.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Options } from \"../types\";\nimport { useIdContext } from \"../id/provider\";\nimport { IdGenerator } from \"../lib\";\n\ninterface IPropsSelectArea {\n options: Options[];\n value: string;\n onSelect: (value: string) => void;\n selectingValue?: string;\n}\n\nexport function OptionsArea(props: IPropsSelectArea) {\n const id = useIdContext();\n\n useEffect(() => {\n const optionElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOption(id, props.selectingValue ?? \"\")\n );\n\n if (!optionElement) return;\n\n optionElement.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"nearest\",\n });\n }, [props.selectingValue]);\n\n return (\n <div\n id={IdGenerator.generateIdSelectBoxOptionsArea(id)}\n className=\"absolute top-full left-0 w-full max-h-[40vh] overflow-auto border border-gray-300\"\n >\n {props.options.map((option) => (\n <div\n id={IdGenerator.generateIdSelectBoxOption(id, option.value ?? \"\")}\n className={`hover:bg-gray-200 px-2 py-1 ${\n typeof props.selectingValue === \"string\"\n ? props.selectingValue === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n : props.value === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n }`}\n key={option.value}\n onClick={() => props.onSelect(option.value)}\n >\n {option.label}\n </div>\n ))}\n </div>\n );\n}\n"],"names":["props","id","useIdContext","useEffect","optionElement","document","getElementById","IdGenerator","generateIdSelectBoxOption","_a","selectingValue","scrollIntoView","behavior","block","inline","_jsx","generateIdSelectBoxOptionsArea","className","options","map","option","value","concat","onClick","onSelect","children","label"],"mappings":"0JAYM,SAAsBA,GAC1B,IAAMC,EAAKC,EAAAA,eAgBX,OAdAC,EAAAA,WAAU,iBACFC,EAAgBC,SAASC,eAC7BC,EAAWA,YAACC,0BAA0BP,UAAIQ,EAAAT,EAAMU,8BAAkB,KAG/DN,GAELA,EAAcO,eAAe,CAC3BC,SAAU,SACVC,MAAO,UACPC,OAAQ,WAEZ,GAAG,CAACd,EAAMU,iBAGRK,EAAAA,WACEd,GAAIM,EAAWA,YAACS,+BAA+Bf,GAC/CgB,UAAU,6FAETjB,EAAMkB,QAAQC,KAAI,SAACC,
|
|
1
|
+
{"version":3,"file":"options-area.js","sources":["../../../../../src/select-box/parts/options-area.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Options } from \"../types\";\nimport { useIdContext } from \"../id/provider\";\nimport { IdGenerator } from \"../lib\";\n\ninterface IPropsSelectArea {\n options: Options[];\n value: string;\n onSelect: (value: string) => void;\n selectingValue?: string;\n}\n\nexport function OptionsArea(props: IPropsSelectArea) {\n const id = useIdContext();\n\n useEffect(() => {\n const optionElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOption(id, props.selectingValue ?? \"\")\n );\n\n if (!optionElement) return;\n\n optionElement.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"nearest\",\n });\n }, [props.selectingValue]);\n\n return (\n <div\n id={IdGenerator.generateIdSelectBoxOptionsArea(id)}\n className=\"absolute top-full left-0 w-full max-h-[40vh] overflow-auto border border-gray-300\"\n >\n {props.options.map((option) => (\n <div\n id={IdGenerator.generateIdSelectBoxOption(id, option.value ?? \"\")}\n className={`hover:bg-gray-200 px-2 py-1 ${\n typeof props.selectingValue === \"string\"\n ? props.selectingValue === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n : props.value === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n }`}\n key={option.value}\n onClick={() => props.onSelect(option.value)}\n >\n {option.searchLabel ?? option.label}\n </div>\n ))}\n </div>\n );\n}\n"],"names":["props","id","useIdContext","useEffect","optionElement","document","getElementById","IdGenerator","generateIdSelectBoxOption","_a","selectingValue","scrollIntoView","behavior","block","inline","_jsx","generateIdSelectBoxOptionsArea","className","options","map","option","value","concat","onClick","onSelect","children","_b","searchLabel","label"],"mappings":"0JAYM,SAAsBA,GAC1B,IAAMC,EAAKC,EAAAA,eAgBX,OAdAC,EAAAA,WAAU,iBACFC,EAAgBC,SAASC,eAC7BC,EAAWA,YAACC,0BAA0BP,UAAIQ,EAAAT,EAAMU,8BAAkB,KAG/DN,GAELA,EAAcO,eAAe,CAC3BC,SAAU,SACVC,MAAO,UACPC,OAAQ,WAEZ,GAAG,CAACd,EAAMU,iBAGRK,EAAAA,WACEd,GAAIM,EAAWA,YAACS,+BAA+Bf,GAC/CgB,UAAU,6FAETjB,EAAMkB,QAAQC,KAAI,SAACC,WAAW,OAC7BL,MACE,MAAA,CAAAd,GAAIM,EAAWA,YAACC,0BAA0BP,EAAoB,QAAhBQ,EAAAW,EAAOC,aAAS,IAAAZ,EAAAA,EAAA,IAC9DQ,UAAW,+BACTK,OAAgC,iBAAzBtB,EAAMU,eACTV,EAAMU,iBAAmBU,EAAOC,MAC9B,cACA,WACFrB,EAAMqB,QAAUD,EAAOC,MACvB,cACA,YAGNE,QAAS,WAAM,OAAAvB,EAAMwB,SAASJ,EAAOC,MAAM,EAE1CI,SAAsB,QAAtBC,EAAAN,EAAOO,mBAAe,IAAAD,EAAAA,EAAAN,EAAOQ,OAHzBR,EAAOC,MAKf,KAGP"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),
|
|
1
|
+
"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),t=require("react"),n=require("../range/provider.js"),o=function(t,n){switch(n.type){case"setRows":return e.__assign(e.__assign({},t),{rows:n.payload.rows});case"setCols":return e.__assign(e.__assign({},t),{cols:n.payload.cols});case"copied":return e.__assign(e.__assign({},t),{copiedAt:new Date});default:return t}};exports.useCopyReducer=function(s){var r=t.useReducer(o,e.__assign({},s)),a=r[0],d=r[1],i=n.useRangeStateContext(),c=t.useCallback((function(e){if(i.isSelecting){var t=i.start.rowIndex<=i.end.rowIndex?i.start.rowIndex:i.end.rowIndex,n=i.start.rowIndex>=i.end.rowIndex?i.start.rowIndex:i.end.rowIndex,o=i.start.colIndex<=i.end.colIndex?i.start.colIndex:i.end.colIndex,s=i.start.colIndex>=i.end.colIndex?i.start.colIndex:i.end.colIndex,r=a.rows.slice(t,n+1).map((function(e){for(var t=[],n=function(n){var o=a.cols[n];if("number"==o.type||"string"==o.type)return t.push(e[o.key]),"continue";if("select"==o.type){var s=e[o.key];null==s||""===s?t.push(""):t.push(o.options.find((function(t){return t.value===e[o.key]})).label)}},r=o;r<=s;r++)n(r);return t})).map((function(e){return e.join("\t")})).join("\n");if(null==e?void 0:e.enableDeprecatedCopy){var c=document.createElement("textarea");c.style.position="fixed",c.style.top="0",c.style.left="0",c.style.width="2em",c.style.height="2em",c.style.padding="0",c.style.border="none",c.style.outline="none",c.style.boxShadow="none",c.style.background="transparent",c.value=r,document.body.appendChild(c),c.select(),document.execCommand("copy"),document.body.removeChild(c)}else navigator.clipboard.writeText(r);d({type:"copied"})}}),[i,a.rows,a.cols]),l=t.useCallback((function(e){d({type:"setRows",payload:{rows:e}})}),[]);return{states:t.useMemo((function(){return{copiedAt:a.copiedAt}}),[a.copiedAt]),actions:t.useMemo((function(){return{copy:c,setRows:l}}),[c,l])}};
|
|
2
2
|
//# sourceMappingURL=hooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.js","sources":["../../../../../src/table/copy/hooks.ts"],"sourcesContent":["import { useCallback, useMemo, useReducer } from \"react\";\nimport { useRangeStateContext } from \"../range/provider\";\nimport { TCopyReducer, TReturnCopyReducer } from \"./types\";\n\nconst reducer: TCopyReducer = (state, action) => {\n switch (action.type) {\n case \"setRows\":\n return { ...state, rows: action.payload.rows };\n case \"setCols\":\n return { ...state, cols: action.payload.cols };\n case \"copied\":\n return { ...state, copiedAt: new Date() };\n default:\n return state;\n }\n};\n\nexport function useCopyReducer(initial: {\n rows: any[];\n cols: any[];\n onUpdateRowFunction?: (newRow: any, oldRow: any) => void;\n}): TReturnCopyReducer {\n const [state, dispatch] = useReducer(reducer, {\n ...initial,\n });\n const range = useRangeStateContext();\n\n const copy = useCallback(() => {\n
|
|
1
|
+
{"version":3,"file":"hooks.js","sources":["../../../../../src/table/copy/hooks.ts"],"sourcesContent":["import { useCallback, useMemo, useReducer } from \"react\";\nimport { useRangeStateContext } from \"../range/provider\";\nimport { TCopyReducer, TReturnCopyReducer } from \"./types\";\n\nconst reducer: TCopyReducer = (state, action) => {\n switch (action.type) {\n case \"setRows\":\n return { ...state, rows: action.payload.rows };\n case \"setCols\":\n return { ...state, cols: action.payload.cols };\n case \"copied\":\n return { ...state, copiedAt: new Date() };\n default:\n return state;\n }\n};\n\nexport function useCopyReducer(initial: {\n rows: any[];\n cols: any[];\n onUpdateRowFunction?: (newRow: any, oldRow: any) => void;\n}): TReturnCopyReducer {\n const [state, dispatch] = useReducer(reducer, {\n ...initial,\n });\n const range = useRangeStateContext();\n\n const copy = useCallback(\n (options?: { enableDeprecatedCopy?: boolean }) => {\n if (!range.isSelecting) {\n return;\n }\n\n const startRowIndex =\n range.start.rowIndex <= range.end.rowIndex\n ? range.start.rowIndex\n : range.end.rowIndex;\n const endRowIndex =\n range.start.rowIndex >= range.end.rowIndex\n ? range.start.rowIndex\n : range.end.rowIndex;\n const startColIndex =\n range.start.colIndex <= range.end.colIndex\n ? range.start.colIndex\n : range.end.colIndex;\n const endColIndex =\n range.start.colIndex >= range.end.colIndex\n ? range.start.colIndex\n : range.end.colIndex;\n\n const copiedData = state.rows\n .slice(startRowIndex, endRowIndex + 1)\n .map((row) => {\n const copiedRow = [];\n for (let i = startColIndex; i <= endColIndex; i++) {\n const col = state.cols[i];\n\n if (col.type == \"number\" || col.type == \"string\") {\n copiedRow.push(row[col.key]);\n continue;\n } else if (col.type == \"select\") {\n const value = row[col.key];\n\n if (value === null || value === undefined || value === \"\") {\n copiedRow.push(\"\");\n } else {\n copiedRow.push(\n col.options.find((option) => option.value === row[col.key])!\n .label\n );\n }\n }\n }\n return copiedRow;\n });\n\n const copiedDataString = copiedData\n .map((row) => row.join(\"\\t\"))\n .join(\"\\n\");\n\n if (options?.enableDeprecatedCopy) {\n const textArea = document.createElement(\"textarea\");\n textArea.style.position = \"fixed\";\n textArea.style.top = \"0\";\n textArea.style.left = \"0\";\n textArea.style.width = \"2em\";\n textArea.style.height = \"2em\";\n textArea.style.padding = \"0\";\n textArea.style.border = \"none\";\n textArea.style.outline = \"none\";\n textArea.style.boxShadow = \"none\";\n textArea.style.background = \"transparent\";\n textArea.value = copiedDataString;\n document.body.appendChild(textArea);\n textArea.select();\n document.execCommand(\"copy\");\n document.body.removeChild(textArea);\n } else {\n navigator.clipboard.writeText(copiedDataString);\n }\n\n dispatch({ type: \"copied\" });\n },\n [range, state.rows, state.cols]\n );\n\n const setRows = useCallback((rows: any[]) => {\n dispatch({ type: \"setRows\", payload: { rows } });\n }, []);\n\n const states = useMemo(\n () => ({\n copiedAt: state.copiedAt,\n }),\n [state.copiedAt]\n );\n\n const actions = useMemo(\n () => ({\n copy,\n setRows,\n }),\n [copy, setRows]\n );\n\n return {\n states,\n actions,\n };\n}\n"],"names":["reducer","state","action","type","__assign","rows","payload","cols","copiedAt","Date","initial","_a","useReducer","dispatch","range","useRangeStateContext","copy","useCallback","options","isSelecting","startRowIndex","start","rowIndex","end","endRowIndex","startColIndex","colIndex","endColIndex","copiedDataString","slice","map","row","copiedRow","i","col","push","key","value","find","option","label","join","enableDeprecatedCopy","textArea","document","createElement","style","position","top","left","width","height","padding","border","outline","boxShadow","background","body","appendChild","select","execCommand","removeChild","navigator","clipboard","writeText","setRows","states","useMemo","actions"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../../edit/provider.js"),r=require("../../sheet/providers.js"),i=require("../../range/provider.js"),o=require("../../copy/provider.js"),
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../../edit/provider.js"),r=require("../../sheet/providers.js"),i=require("../../range/provider.js"),o=require("../../copy/provider.js"),u=require("../../id/provider.js"),a=function(e,t){var n,r=document.getElementById(t);if(r){var i=null===(n=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))||void 0===n?void 0:n.set;i&&i.call(r,e);var o=new Event("input",{bubbles:!0});r.dispatchEvent(o)}};exports.KeyboardSetting=function(s){var d=u.useTableIdGenerator(),p=n.useEditContext(),v=i.useRangeContext(),c=o.useCopyActionContext().copy,l=r.useColumnsContext()[v.isSelecting?v.start.colIndex:0];return t.useEffect((function(){var e=function(e){p.isEditing?"Escape"===e.key&&(e.preventDefault(),p.endEditing()):v.isSelecting&&("Enter"===e.key?(e.preventDefault(),v.moveDown()):"Escape"===e.key?(e.preventDefault(),v.reset()):"ArrowRight"===e.key?(e.preventDefault(),e.shiftKey?v.extendRight():v.moveRight()):"ArrowLeft"===e.key?(e.preventDefault(),e.shiftKey?v.extendLeft():v.moveLeft()):"ArrowUp"===e.key?(e.preventDefault(),e.shiftKey?v.extendUp():v.moveUp()):"ArrowDown"===e.key?(e.preventDefault(),e.shiftKey?v.extendDown():v.moveDown()):"F2"===e.key?(e.preventDefault(),p.startEditing()):e.ctrlKey&&"c"===e.key?(e.preventDefault(),c({enableDeprecatedCopy:null==s?void 0:s.enableDeprecatedCopy})):e.altKey||e.ctrlKey||!/^[a-zA-Z0-9]$/.test(e.key)?"Backspace"!==e.key&&"Delete"!==e.key||(e.preventDefault(),e.stopPropagation(),p.startEditing(),setTimeout((function(){a("",d.getEditorId())}),10)):(e.preventDefault(),e.stopPropagation(),p.startEditing(),setTimeout((function(){a(e.key,d.getEditorId())}),10)))};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[v,p.isEditing]),t.useEffect((function(){p.isEditing&&!l.editable&&p.endEditing()}),[p,l]),e.jsx(e.Fragment,{})};
|
|
3
3
|
//# sourceMappingURL=keyboard-setting.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),o=require("./hook.js"),i=require("../header/header.js"),s=require("../pagenation/providers.js"),t=require("../pagenation/components.js"),n=require("../filter/provider.js"),l=require("../filter/components.js");require("../sort/icon.js");var d=require("../sort/provider.js"),a=require("../sheet/providers.js"),c=require("../checkbox/provider.js"),x=require("../checkbox/components.js"),u=require("../edit/provider.js"),j=require("../table-property/provider.js"),
|
|
2
|
+
"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),o=require("./hook.js"),i=require("../header/header.js"),s=require("../pagenation/providers.js"),t=require("../pagenation/components.js"),n=require("../filter/provider.js"),l=require("../filter/components.js");require("../sort/icon.js");var d=require("../sort/provider.js"),a=require("../sheet/providers.js"),c=require("../checkbox/provider.js"),x=require("../checkbox/components.js"),u=require("../edit/provider.js"),j=require("../table-property/provider.js"),p=require("../operation/components/keyboard-setting.js"),h=require("../sheet/components.js"),g=require("../paste/provider.js"),v=require("../libs/conditional-formatting.js"),m=require("../edit/ui/editor.js"),b=require("../filter/hooks/selectedFilteringColumn/provider.js"),w=require("../range/provider.js"),q=require("../copy/provider.js"),y=require("../copy/components.js"),C=require("../id/provider.js");function k(e){var s=o.useTable(e),n=s.cols,d=s.rowMaps,a=s.pageRowIds,c=b.useFilteringColumnStateContext(),u=w.useRangeActionContext().reset,j=C.useTableIdGenerator();return r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end mb-1 mr-3",children:r.jsx(l.TableFilterRemoveButton,{children:r.jsx("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r.jsxs("div",{id:j.getTableId(),className:"relative h-full max-w-full max-h-[80vh] border border-gray-200 bg-white rounded-md overflow-auto",children:[r.jsxs("table",{className:"table",children:[r.jsx("thead",{children:r.jsxs("tr",{className:"sticky top-0 border-gray-200 z-20 bg-gray-200 text-gray-600 h-[32px]",onClick:function(e){e.stopPropagation(),u()},children:[e.checkbox&&r.jsx("th",{children:r.jsx(x.AllCheckbox,{rows:e.rows})}),n.map((function(e,o){return r.jsx(i.TableHeaderElement,{id:j.getTableColId({columnIndex:o}),col:e},e.key.toString())}))]})}),r.jsxs("tbody",{children:[!!c&&r.jsx("tr",{onClick:function(e){e.stopPropagation(),u()},children:r.jsx("td",{colSpan:n.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl z-20 p-0 overflow-hidden",children:r.jsx(l.TableFilterForm,{})})}),0===a.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:n.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),a.map((function(o,i){return r.jsx(h.Row,{existCheckbox:!!e.checkbox,rowIndex:i,dataString:d[o].stringValue,cols:e.cols,onClickRow:e.onClickRow,applyRowFormatting:e.applyRowFormatting,conditionalFormattingString:v.generateFormattingString(d[o].data,n,e.conditionalFormattings)},o)}))]})]}),r.jsx(w.TestRange,{}),r.jsx(m.Editor,{rowMaps:d,pageRowIds:a})]}),r.jsxs("div",{className:"mt-1",children:[r.jsx(t.DisplayRange,{}),r.jsx("div",{className:"mt-2",children:r.jsx(t.Pagenation,{})})]})]})}module.exports=function(o){var i,t,l,x;return r.jsx(C.TableIdGeneratorProvider,{id:o.id,children:r.jsx(n.FilterProvider,{children:r.jsx(d.SortProvider,{initialCondition:null===(i=o.initialCondition)||void 0===i?void 0:i.sort,children:r.jsx(s.PagenationProvider,{rowCount:o.rows.length,perPage:null===(l=null===(t=o.initialCondition)||void 0===t?void 0:t.pagenation)||void 0===l?void 0:l.rowCountPerPage,children:r.jsx(c.CheckboxProvider,{checkbox:o.checkbox,children:r.jsx(c.CheckboxStatusProvider,{checkboxCount:o.rows.length,children:r.jsx(a.ColumnsProvider,{cols:o.cols,errorHandler:o.errorHandler,children:r.jsx(u.EditProvider,{children:r.jsx(j.TablePropertyProvider,{children:r.jsx(w.RangeProvider,{children:r.jsxs(q.CopyProvider,{rows:o.rows,cols:o.cols,children:[r.jsx(y.CopiedMessage,{}),r.jsxs(g.PasteProvider,{rows:o.rows,cols:o.cols,onUpdateRowFunction:o.onUpdateRow,children:[r.jsx(p.KeyboardSetting,{enableDeprecatedCopy:null===(x=o.deprecatedOptions)||void 0===x?void 0:x.enableDeprecatedCopy}),r.jsx(k,e.__assign({},o))]})]})})})})})})})})})})})};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useState as t,useMemo as o,useEffect as r}from"react";import{InputArea as i}from"./parts/input-area.js";import{OptionsArea as u}from"./parts/options-area.js";import{SelectBoxFrame as a}from"./parts/frame.js";import{IdProvider as d}from"./id/provider.js";import{IdGenerator as l}from"./lib/id-generator.js";function c(c){var f,m,v,
|
|
1
|
+
import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useState as t,useMemo as o,useEffect as r}from"react";import{InputArea as i}from"./parts/input-area.js";import{OptionsArea as u}from"./parts/options-area.js";import{SelectBoxFrame as a}from"./parts/frame.js";import{IdProvider as d}from"./id/provider.js";import{IdGenerator as l}from"./lib/id-generator.js";function c(c){var s,f,m,v,p=t(null!==(s=c.value)&&void 0!==s?s:""),w=p[0],g=p[1],y=t(null!==(f=c.defaultIsOpen)&&void 0!==f&&f),h=y[0],L=y[1],x=t(""),E=x[0],b=x[1],k=t(void 0),I=k[0],C=k[1],S=function(e){g(e),c.onSelect(e),b(""),L(!1)},j=null!==(v=null===(m=c.options.find((function(e){return e.value===w})))||void 0===m?void 0:m.label)&&void 0!==v?v:"",B=o((function(){return c.options.filter((function(e){return e.searchText?e.searchText.toLowerCase().includes(E.toLowerCase()):e.searchLabel?e.searchLabel.toLowerCase().includes(E.toLowerCase()):void e.label.toLowerCase().includes(E.toLowerCase())}))}),[c.options,E]);r((function(){var e=function(e){var n=document.getElementById(l.generateIdSelectBoxFrame(c.id)),t=document.getElementById(l.generateIdSelectBoxOptionsArea(c.id)),o=e.target;o instanceof Node&&(null==n?void 0:n.contains(o))||o instanceof Node&&(null==t?void 0:t.contains(o))||(b(""),L(!1))};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[]),r((function(){if(h){var e=function(e){"ArrowDown"===e.key?(e.preventDefault(),C((function(e){return"number"==typeof e?Math.min(e+1,B.length-1):0}))):"ArrowUp"===e.key?(e.preventDefault(),C((function(e){return"number"==typeof e?Math.max(e-1,0):0}))):"Enter"===e.key&&(e.preventDefault(),"number"==typeof I&&S(B[I].value))};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}C(void 0);var n=document.getElementById(l.generateIdSelectBoxInputArea(c.id));if(n){var t=function(e){"ArrowDown"===e.key&&(e.preventDefault(),L(!0))};return n.addEventListener("keydown",t),function(){n.removeEventListener("keydown",t)}}}),[h,B,I,C]);var D=0===B.length?void 0:"number"==typeof I&&I<B.length?B[I].value:void 0;return e(d,{id:c.id,children:n(a,{isOpen:h,onToggle:function(){return L((function(e){return!e}))},children:[e(i,{inputRef:c.inputRef,isSelecting:h,selectedValue:j,searchText:E,onChangeSearchText:b}),h&&e(u,{options:B,value:w,onSelect:S,selectingValue:D})]})})}export{c as SelectBox};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/select-box/index.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { InputArea, OptionsArea, SelectBoxFrame } from \"./parts\";\nimport { Options } from \"./types\";\nimport { IdProvider } from \"./id/provider\";\nimport { IdGenerator } from \"./lib\";\n\ninterface IPropsSelectBox {\n id: string;\n inputRef?: React.RefObject<HTMLInputElement>;\n defaultIsOpen?: boolean;\n options: Options[];\n value?: string;\n onSelect: (value: string) => void;\n}\n\nexport function SelectBox(props: IPropsSelectBox) {\n const [value, setValue] = useState(props.value ?? \"\");\n const [isOpen, setIsOpen] = useState(props.defaultIsOpen ?? false);\n const [searchText, setSearchText] = useState(\"\");\n const [selectingIndex, setSelectingIndex] = useState<number | undefined>(\n undefined\n );\n\n const handleSelect = (value: string) => {\n setValue(value);\n props.onSelect(value);\n setSearchText(\"\");\n setIsOpen(false);\n };\n\n const label =\n props.options.find((option) => option.value === value)?.label ?? \"\";\n\n const searchedOptions = useMemo(\n () =>\n props.options.filter((option)
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/select-box/index.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { InputArea, OptionsArea, SelectBoxFrame } from \"./parts\";\nimport { Options } from \"./types\";\nimport { IdProvider } from \"./id/provider\";\nimport { IdGenerator } from \"./lib\";\n\ninterface IPropsSelectBox {\n id: string;\n inputRef?: React.RefObject<HTMLInputElement>;\n defaultIsOpen?: boolean;\n options: Options[];\n value?: string;\n onSelect: (value: string) => void;\n}\n\nexport function SelectBox(props: IPropsSelectBox) {\n const [value, setValue] = useState(props.value ?? \"\");\n const [isOpen, setIsOpen] = useState(props.defaultIsOpen ?? false);\n const [searchText, setSearchText] = useState(\"\");\n const [selectingIndex, setSelectingIndex] = useState<number | undefined>(\n undefined\n );\n\n const handleSelect = (value: string) => {\n setValue(value);\n props.onSelect(value);\n setSearchText(\"\");\n setIsOpen(false);\n };\n\n const label =\n props.options.find((option) => option.value === value)?.label ?? \"\";\n\n const searchedOptions = useMemo(\n () =>\n props.options.filter((option) => {\n if (option.searchText) {\n return option.searchText\n .toLowerCase()\n .includes(searchText.toLowerCase());\n } else if (option.searchLabel) {\n return option.searchLabel\n .toLowerCase()\n .includes(searchText.toLowerCase());\n } else {\n option.label.toLowerCase().includes(searchText.toLowerCase());\n }\n }),\n [props.options, searchText]\n );\n\n useEffect(() => {\n const onClickOutOfSelectBox = (e: MouseEvent) => {\n // SelectBox関連の要素を取得\n const frameElement = document.getElementById(\n IdGenerator.generateIdSelectBoxFrame(props.id)\n );\n const optionsElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOptionsArea(props.id)\n );\n\n // クリックされた要素を取得\n const ele = e.target;\n\n if (ele instanceof Node && frameElement?.contains(ele)) return;\n if (ele instanceof Node && optionsElement?.contains(ele)) return;\n\n setSearchText(\"\");\n setIsOpen(false);\n };\n\n document.addEventListener(\"mousedown\", onClickOutOfSelectBox);\n\n return () => {\n document.removeEventListener(\"mousedown\", onClickOutOfSelectBox);\n };\n }, []);\n\n useEffect(() => {\n if (!isOpen) {\n setSelectingIndex(undefined);\n\n const inputElement = document.getElementById(\n IdGenerator.generateIdSelectBoxInputArea(props.id)\n );\n\n if (inputElement) {\n // inputElementにフォーカスされている場合、ArrowDownを押すとOptionsAreaが開く\n const handleKeydown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setIsOpen(true);\n }\n };\n inputElement.addEventListener(\"keydown\", handleKeydown);\n\n return () => {\n inputElement.removeEventListener(\"keydown\", handleKeydown);\n };\n }\n } else {\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, searchedOptions.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 handleSelect(searchedOptions[selectingIndex].value);\n }\n }\n };\n document.addEventListener(\"keydown\", handleKeydown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown);\n };\n }\n }, [isOpen, searchedOptions, selectingIndex, setSelectingIndex]);\n\n const selectingValue =\n searchedOptions.length === 0\n ? undefined\n : typeof selectingIndex === \"number\" &&\n selectingIndex < searchedOptions.length\n ? searchedOptions[selectingIndex].value\n : undefined;\n\n return (\n <IdProvider id={props.id}>\n <SelectBoxFrame\n isOpen={isOpen}\n onToggle={() => setIsOpen((prev) => !prev)}\n >\n <InputArea\n inputRef={props.inputRef}\n isSelecting={isOpen}\n selectedValue={label}\n searchText={searchText}\n onChangeSearchText={setSearchText}\n />\n {isOpen && (\n <OptionsArea\n options={searchedOptions}\n value={value}\n onSelect={handleSelect}\n selectingValue={selectingValue}\n />\n )}\n </SelectBoxFrame>\n </IdProvider>\n );\n}\n"],"names":["SelectBox","props","_e","useState","_a","value","setValue","_f","_b","defaultIsOpen","isOpen","setIsOpen","_g","searchText","setSearchText","_h","undefined","selectingIndex","setSelectingIndex","handleSelect","onSelect","label","_d","_c","options","find","option","searchedOptions","useMemo","filter","toLowerCase","includes","searchLabel","useEffect","onClickOutOfSelectBox","e","frameElement","document","getElementById","IdGenerator","generateIdSelectBoxFrame","id","optionsElement","generateIdSelectBoxOptionsArea","ele","target","Node","contains","addEventListener","removeEventListener","handleKeydown_2","key","preventDefault","prev","Math","min","length","max","inputElement_1","generateIdSelectBoxInputArea","handleKeydown_1","selectingValue","_jsx","IdProvider","children","_jsxs","SelectBoxFrame","onToggle","InputArea","inputRef","isSelecting","selectedValue","onChangeSearchText","OptionsArea"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{useEffect as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useEffect as r}from"react";import{useIdContext as t}from"../id/provider.js";import{IdGenerator as l}from"../lib/id-generator.js";function o(o){var n=t();return r((function(){var e,r=document.getElementById(l.generateIdSelectBoxOption(n,null!==(e=o.selectingValue)&&void 0!==e?e:""));r&&r.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}),[o.selectingValue]),e("div",{id:l.generateIdSelectBoxOptionsArea(n),className:"absolute top-full left-0 w-full max-h-[40vh] overflow-auto border border-gray-300",children:o.options.map((function(r){var t,a;return e("div",{id:l.generateIdSelectBoxOption(n,null!==(t=r.value)&&void 0!==t?t:""),className:"hover:bg-gray-200 px-2 py-1 ".concat("string"==typeof o.selectingValue?o.selectingValue===r.value?"bg-gray-100":"bg-white":o.value===r.value?"bg-gray-100":"bg-white"),onClick:function(){return o.onSelect(r.value)},children:null!==(a=r.searchLabel)&&void 0!==a?a:r.label},r.value)}))})}export{o as OptionsArea};
|
|
2
2
|
//# sourceMappingURL=options-area.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"options-area.js","sources":["../../../../../src/select-box/parts/options-area.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Options } from \"../types\";\nimport { useIdContext } from \"../id/provider\";\nimport { IdGenerator } from \"../lib\";\n\ninterface IPropsSelectArea {\n options: Options[];\n value: string;\n onSelect: (value: string) => void;\n selectingValue?: string;\n}\n\nexport function OptionsArea(props: IPropsSelectArea) {\n const id = useIdContext();\n\n useEffect(() => {\n const optionElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOption(id, props.selectingValue ?? \"\")\n );\n\n if (!optionElement) return;\n\n optionElement.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"nearest\",\n });\n }, [props.selectingValue]);\n\n return (\n <div\n id={IdGenerator.generateIdSelectBoxOptionsArea(id)}\n className=\"absolute top-full left-0 w-full max-h-[40vh] overflow-auto border border-gray-300\"\n >\n {props.options.map((option) => (\n <div\n id={IdGenerator.generateIdSelectBoxOption(id, option.value ?? \"\")}\n className={`hover:bg-gray-200 px-2 py-1 ${\n typeof props.selectingValue === \"string\"\n ? props.selectingValue === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n : props.value === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n }`}\n key={option.value}\n onClick={() => props.onSelect(option.value)}\n >\n {option.label}\n </div>\n ))}\n </div>\n );\n}\n"],"names":["OptionsArea","props","id","useIdContext","useEffect","optionElement","document","getElementById","IdGenerator","generateIdSelectBoxOption","_a","selectingValue","scrollIntoView","behavior","block","inline","_jsx","generateIdSelectBoxOptionsArea","className","options","map","option","value","concat","onClick","onSelect","children","label"],"mappings":"gLAYM,SAAUA,EAAYC,GAC1B,IAAMC,EAAKC,IAgBX,OAdAC,GAAU,iBACFC,EAAgBC,SAASC,eAC7BC,EAAYC,0BAA0BP,UAAIQ,EAAAT,EAAMU,8BAAkB,KAG/DN,GAELA,EAAcO,eAAe,CAC3BC,SAAU,SACVC,MAAO,UACPC,OAAQ,WAEZ,GAAG,CAACd,EAAMU,iBAGRK,SACEd,GAAIM,EAAYS,+BAA+Bf,GAC/CgB,UAAU,6FAETjB,EAAMkB,QAAQC,KAAI,SAACC,
|
|
1
|
+
{"version":3,"file":"options-area.js","sources":["../../../../../src/select-box/parts/options-area.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Options } from \"../types\";\nimport { useIdContext } from \"../id/provider\";\nimport { IdGenerator } from \"../lib\";\n\ninterface IPropsSelectArea {\n options: Options[];\n value: string;\n onSelect: (value: string) => void;\n selectingValue?: string;\n}\n\nexport function OptionsArea(props: IPropsSelectArea) {\n const id = useIdContext();\n\n useEffect(() => {\n const optionElement = document.getElementById(\n IdGenerator.generateIdSelectBoxOption(id, props.selectingValue ?? \"\")\n );\n\n if (!optionElement) return;\n\n optionElement.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"nearest\",\n });\n }, [props.selectingValue]);\n\n return (\n <div\n id={IdGenerator.generateIdSelectBoxOptionsArea(id)}\n className=\"absolute top-full left-0 w-full max-h-[40vh] overflow-auto border border-gray-300\"\n >\n {props.options.map((option) => (\n <div\n id={IdGenerator.generateIdSelectBoxOption(id, option.value ?? \"\")}\n className={`hover:bg-gray-200 px-2 py-1 ${\n typeof props.selectingValue === \"string\"\n ? props.selectingValue === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n : props.value === option.value\n ? \"bg-gray-100\"\n : \"bg-white\"\n }`}\n key={option.value}\n onClick={() => props.onSelect(option.value)}\n >\n {option.searchLabel ?? option.label}\n </div>\n ))}\n </div>\n );\n}\n"],"names":["OptionsArea","props","id","useIdContext","useEffect","optionElement","document","getElementById","IdGenerator","generateIdSelectBoxOption","_a","selectingValue","scrollIntoView","behavior","block","inline","_jsx","generateIdSelectBoxOptionsArea","className","options","map","option","value","concat","onClick","onSelect","children","_b","searchLabel","label"],"mappings":"gLAYM,SAAUA,EAAYC,GAC1B,IAAMC,EAAKC,IAgBX,OAdAC,GAAU,iBACFC,EAAgBC,SAASC,eAC7BC,EAAYC,0BAA0BP,UAAIQ,EAAAT,EAAMU,8BAAkB,KAG/DN,GAELA,EAAcO,eAAe,CAC3BC,SAAU,SACVC,MAAO,UACPC,OAAQ,WAEZ,GAAG,CAACd,EAAMU,iBAGRK,SACEd,GAAIM,EAAYS,+BAA+Bf,GAC/CgB,UAAU,6FAETjB,EAAMkB,QAAQC,KAAI,SAACC,WAAW,OAC7BL,EACE,MAAA,CAAAd,GAAIM,EAAYC,0BAA0BP,EAAoB,QAAhBQ,EAAAW,EAAOC,aAAS,IAAAZ,EAAAA,EAAA,IAC9DQ,UAAW,+BACTK,OAAgC,iBAAzBtB,EAAMU,eACTV,EAAMU,iBAAmBU,EAAOC,MAC9B,cACA,WACFrB,EAAMqB,QAAUD,EAAOC,MACvB,cACA,YAGNE,QAAS,WAAM,OAAAvB,EAAMwB,SAASJ,EAAOC,MAAM,EAE1CI,SAAsB,QAAtBC,EAAAN,EAAOO,mBAAe,IAAAD,EAAAA,EAAAN,EAAOQ,OAHzBR,EAAOC,MAKf,KAGP"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import{useReducer as t,useCallback as n,useMemo as o}from"react";import{useRangeStateContext as r}from"../range/provider.js";var s=function(t,n){switch(n.type){case"setRows":return e(e({},t),{rows:n.payload.rows});case"setCols":return e(e({},t),{cols:n.payload.cols});case"copied":return e(e({},t),{copiedAt:new Date});default:return t}};function
|
|
1
|
+
import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import{useReducer as t,useCallback as n,useMemo as o}from"react";import{useRangeStateContext as r}from"../range/provider.js";var s=function(t,n){switch(n.type){case"setRows":return e(e({},t),{rows:n.payload.rows});case"setCols":return e(e({},t),{cols:n.payload.cols});case"copied":return e(e({},t),{copiedAt:new Date});default:return t}};function d(d){var a=t(s,e({},d)),c=a[0],i=a[1],l=r(),u=n((function(e){if(l.isSelecting){var t=l.start.rowIndex<=l.end.rowIndex?l.start.rowIndex:l.end.rowIndex,n=l.start.rowIndex>=l.end.rowIndex?l.start.rowIndex:l.end.rowIndex,o=l.start.colIndex<=l.end.colIndex?l.start.colIndex:l.end.colIndex,r=l.start.colIndex>=l.end.colIndex?l.start.colIndex:l.end.colIndex,s=c.rows.slice(t,n+1).map((function(e){for(var t=[],n=function(n){var o=c.cols[n];if("number"==o.type||"string"==o.type)return t.push(e[o.key]),"continue";if("select"==o.type){var r=e[o.key];null==r||""===r?t.push(""):t.push(o.options.find((function(t){return t.value===e[o.key]})).label)}},s=o;s<=r;s++)n(s);return t})).map((function(e){return e.join("\t")})).join("\n");if(null==e?void 0:e.enableDeprecatedCopy){var d=document.createElement("textarea");d.style.position="fixed",d.style.top="0",d.style.left="0",d.style.width="2em",d.style.height="2em",d.style.padding="0",d.style.border="none",d.style.outline="none",d.style.boxShadow="none",d.style.background="transparent",d.value=s,document.body.appendChild(d),d.select(),document.execCommand("copy"),document.body.removeChild(d)}else navigator.clipboard.writeText(s);i({type:"copied"})}}),[l,c.rows,c.cols]),p=n((function(e){i({type:"setRows",payload:{rows:e}})}),[]);return{states:o((function(){return{copiedAt:c.copiedAt}}),[c.copiedAt]),actions:o((function(){return{copy:u,setRows:p}}),[u,p])}}export{d as useCopyReducer};
|
|
2
2
|
//# sourceMappingURL=hooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.js","sources":["../../../../../src/table/copy/hooks.ts"],"sourcesContent":["import { useCallback, useMemo, useReducer } from \"react\";\nimport { useRangeStateContext } from \"../range/provider\";\nimport { TCopyReducer, TReturnCopyReducer } from \"./types\";\n\nconst reducer: TCopyReducer = (state, action) => {\n switch (action.type) {\n case \"setRows\":\n return { ...state, rows: action.payload.rows };\n case \"setCols\":\n return { ...state, cols: action.payload.cols };\n case \"copied\":\n return { ...state, copiedAt: new Date() };\n default:\n return state;\n }\n};\n\nexport function useCopyReducer(initial: {\n rows: any[];\n cols: any[];\n onUpdateRowFunction?: (newRow: any, oldRow: any) => void;\n}): TReturnCopyReducer {\n const [state, dispatch] = useReducer(reducer, {\n ...initial,\n });\n const range = useRangeStateContext();\n\n const copy = useCallback(() => {\n
|
|
1
|
+
{"version":3,"file":"hooks.js","sources":["../../../../../src/table/copy/hooks.ts"],"sourcesContent":["import { useCallback, useMemo, useReducer } from \"react\";\nimport { useRangeStateContext } from \"../range/provider\";\nimport { TCopyReducer, TReturnCopyReducer } from \"./types\";\n\nconst reducer: TCopyReducer = (state, action) => {\n switch (action.type) {\n case \"setRows\":\n return { ...state, rows: action.payload.rows };\n case \"setCols\":\n return { ...state, cols: action.payload.cols };\n case \"copied\":\n return { ...state, copiedAt: new Date() };\n default:\n return state;\n }\n};\n\nexport function useCopyReducer(initial: {\n rows: any[];\n cols: any[];\n onUpdateRowFunction?: (newRow: any, oldRow: any) => void;\n}): TReturnCopyReducer {\n const [state, dispatch] = useReducer(reducer, {\n ...initial,\n });\n const range = useRangeStateContext();\n\n const copy = useCallback(\n (options?: { enableDeprecatedCopy?: boolean }) => {\n if (!range.isSelecting) {\n return;\n }\n\n const startRowIndex =\n range.start.rowIndex <= range.end.rowIndex\n ? range.start.rowIndex\n : range.end.rowIndex;\n const endRowIndex =\n range.start.rowIndex >= range.end.rowIndex\n ? range.start.rowIndex\n : range.end.rowIndex;\n const startColIndex =\n range.start.colIndex <= range.end.colIndex\n ? range.start.colIndex\n : range.end.colIndex;\n const endColIndex =\n range.start.colIndex >= range.end.colIndex\n ? range.start.colIndex\n : range.end.colIndex;\n\n const copiedData = state.rows\n .slice(startRowIndex, endRowIndex + 1)\n .map((row) => {\n const copiedRow = [];\n for (let i = startColIndex; i <= endColIndex; i++) {\n const col = state.cols[i];\n\n if (col.type == \"number\" || col.type == \"string\") {\n copiedRow.push(row[col.key]);\n continue;\n } else if (col.type == \"select\") {\n const value = row[col.key];\n\n if (value === null || value === undefined || value === \"\") {\n copiedRow.push(\"\");\n } else {\n copiedRow.push(\n col.options.find((option) => option.value === row[col.key])!\n .label\n );\n }\n }\n }\n return copiedRow;\n });\n\n const copiedDataString = copiedData\n .map((row) => row.join(\"\\t\"))\n .join(\"\\n\");\n\n if (options?.enableDeprecatedCopy) {\n const textArea = document.createElement(\"textarea\");\n textArea.style.position = \"fixed\";\n textArea.style.top = \"0\";\n textArea.style.left = \"0\";\n textArea.style.width = \"2em\";\n textArea.style.height = \"2em\";\n textArea.style.padding = \"0\";\n textArea.style.border = \"none\";\n textArea.style.outline = \"none\";\n textArea.style.boxShadow = \"none\";\n textArea.style.background = \"transparent\";\n textArea.value = copiedDataString;\n document.body.appendChild(textArea);\n textArea.select();\n document.execCommand(\"copy\");\n document.body.removeChild(textArea);\n } else {\n navigator.clipboard.writeText(copiedDataString);\n }\n\n dispatch({ type: \"copied\" });\n },\n [range, state.rows, state.cols]\n );\n\n const setRows = useCallback((rows: any[]) => {\n dispatch({ type: \"setRows\", payload: { rows } });\n }, []);\n\n const states = useMemo(\n () => ({\n copiedAt: state.copiedAt,\n }),\n [state.copiedAt]\n );\n\n const actions = useMemo(\n () => ({\n copy,\n setRows,\n }),\n [copy, setRows]\n );\n\n return {\n states,\n actions,\n };\n}\n"],"names":["reducer","state","action","type","__assign","rows","payload","cols","copiedAt","Date","useCopyReducer","initial","_a","useReducer","dispatch","range","useRangeStateContext","copy","useCallback","options","isSelecting","startRowIndex","start","rowIndex","end","endRowIndex","startColIndex","colIndex","endColIndex","copiedDataString","slice","map","row","copiedRow","i","col","push","key","value","find","option","label","join","enableDeprecatedCopy","textArea","document","createElement","style","position","top","left","width","height","padding","border","outline","boxShadow","background","body","appendChild","select","execCommand","removeChild","navigator","clipboard","writeText","setRows","states","useMemo","actions"],"mappings":"iMAIA,IAAMA,EAAwB,SAACC,EAAOC,GACpC,OAAQA,EAAOC,MACb,IAAK,UACH,OAAYC,EAAAA,EAAA,CAAA,EAAAH,IAAOI,KAAMH,EAAOI,QAAQD,OAC1C,IAAK,UACH,OAAYD,EAAAA,EAAA,CAAA,EAAAH,IAAOM,KAAML,EAAOI,QAAQC,OAC1C,IAAK,SACH,OAAAH,EAAAA,EAAA,CAAA,EAAYH,GAAO,CAAAO,SAAU,IAAIC,OACnC,QACE,OAAOR,EAEb,EAEM,SAAUS,EAAeC,GAKvB,IAAAC,EAAoBC,EAAWb,EAChCI,EAAA,CAAA,EAAAO,IADEV,EAAKW,EAAA,GAAEE,OAGRC,EAAQC,IAERC,EAAOC,GACX,SAACC,GACC,GAAKJ,EAAMK,YAAX,CAIA,IAAMC,EACJN,EAAMO,MAAMC,UAAYR,EAAMS,IAAID,SAC9BR,EAAMO,MAAMC,SACZR,EAAMS,IAAID,SACVE,EACJV,EAAMO,MAAMC,UAAYR,EAAMS,IAAID,SAC9BR,EAAMO,MAAMC,SACZR,EAAMS,IAAID,SACVG,EACJX,EAAMO,MAAMK,UAAYZ,EAAMS,IAAIG,SAC9BZ,EAAMO,MAAMK,SACZZ,EAAMS,IAAIG,SACVC,EACJb,EAAMO,MAAMK,UAAYZ,EAAMS,IAAIG,SAC9BZ,EAAMO,MAAMK,SACZZ,EAAMS,IAAIG,SA4BVE,EA1Ba5B,EAAMI,KACtByB,MAAMT,EAAeI,EAAc,GACnCM,KAAI,SAACC,GAEJ,IADA,IAAMC,EAAY,cACTC,GACP,IAAMC,EAAMlC,EAAMM,KAAK2B,GAEvB,GAAgB,UAAZC,EAAIhC,MAAgC,UAAZgC,EAAIhC,YAC9B8B,EAAUG,KAAKJ,EAAIG,EAAIE,iBAElB,GAAgB,UAAZF,EAAIhC,KAAkB,CAC/B,IAAMmC,EAAQN,EAAIG,EAAIE,KAElBC,SAAmD,KAAVA,EAC3CL,EAAUG,KAAK,IAEfH,EAAUG,KACRD,EAAIhB,QAAQoB,MAAK,SAACC,GAAW,OAAAA,EAAOF,QAAUN,EAAIG,EAAIE,IAAzB,IAC1BI,MAGR,GAjBMP,EAAIR,EAAeQ,GAAKN,EAAaM,MAArCA,GAmBT,OAAOD,CACT,IAGCF,KAAI,SAACC,GAAQ,OAAAA,EAAIU,KAAK,SACtBA,KAAK,MAER,GAAIvB,aAAO,EAAPA,EAASwB,qBAAsB,CACjC,IAAMC,EAAWC,SAASC,cAAc,YACxCF,EAASG,MAAMC,SAAW,QAC1BJ,EAASG,MAAME,IAAM,IACrBL,EAASG,MAAMG,KAAO,IACtBN,EAASG,MAAMI,MAAQ,MACvBP,EAASG,MAAMK,OAAS,MACxBR,EAASG,MAAMM,QAAU,IACzBT,EAASG,MAAMO,OAAS,OACxBV,EAASG,MAAMQ,QAAU,OACzBX,EAASG,MAAMS,UAAY,OAC3BZ,EAASG,MAAMU,WAAa,cAC5Bb,EAASN,MAAQT,EACjBgB,SAASa,KAAKC,YAAYf,GAC1BA,EAASgB,SACTf,SAASgB,YAAY,QACrBhB,SAASa,KAAKI,YAAYlB,EAC3B,MACCmB,UAAUC,UAAUC,UAAUpC,GAGhCf,EAAS,CAAEX,KAAM,UAtEhB,CAuEH,GACA,CAACY,EAAOd,EAAMI,KAAMJ,EAAMM,OAGtB2D,EAAUhD,GAAY,SAACb,GAC3BS,EAAS,CAAEX,KAAM,UAAWG,QAAS,CAAED,KAAIA,IAC5C,GAAE,IAiBH,MAAO,CACL8D,OAhBaC,GACb,WAAM,MAAC,CACL5D,SAAUP,EAAMO,YAElB,CAACP,EAAMO,WAaP6D,QAVcD,GACd,WAAM,MAAC,CACLnD,KAAIA,EACJiD,QAAOA,KAET,CAACjD,EAAMiD,IAOX"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,Fragment as t}from"react/jsx-runtime";import{useEffect as r}from"react";import{useEditContext as n}from"../../edit/provider.js";import{useColumnsContext as i}from"../../sheet/providers.js";import{useRangeContext as o}from"../../range/provider.js";import{useCopyActionContext as p}from"../../copy/provider.js";import{useTableIdGenerator as a}from"../../id/provider.js";var d=function(e,t){var r,n=document.getElementById(t);if(n){var i=null===(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))||void 0===r?void 0:r.set;i&&i.call(n,e);var o=new Event("input",{bubbles:!0});n.dispatchEvent(o)}};function s(){var
|
|
2
|
+
import{jsx as e,Fragment as t}from"react/jsx-runtime";import{useEffect as r}from"react";import{useEditContext as n}from"../../edit/provider.js";import{useColumnsContext as i}from"../../sheet/providers.js";import{useRangeContext as o}from"../../range/provider.js";import{useCopyActionContext as p}from"../../copy/provider.js";import{useTableIdGenerator as a}from"../../id/provider.js";var d=function(e,t){var r,n=document.getElementById(t);if(n){var i=null===(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))||void 0===r?void 0:r.set;i&&i.call(n,e);var o=new Event("input",{bubbles:!0});n.dispatchEvent(o)}};function s(s){var v=a(),f=n(),u=o(),c=p().copy,l=i()[u.isSelecting?u.start.colIndex:0];return r((function(){var e=function(e){f.isEditing?"Escape"===e.key&&(e.preventDefault(),f.endEditing()):u.isSelecting&&("Enter"===e.key?(e.preventDefault(),u.moveDown()):"Escape"===e.key?(e.preventDefault(),u.reset()):"ArrowRight"===e.key?(e.preventDefault(),e.shiftKey?u.extendRight():u.moveRight()):"ArrowLeft"===e.key?(e.preventDefault(),e.shiftKey?u.extendLeft():u.moveLeft()):"ArrowUp"===e.key?(e.preventDefault(),e.shiftKey?u.extendUp():u.moveUp()):"ArrowDown"===e.key?(e.preventDefault(),e.shiftKey?u.extendDown():u.moveDown()):"F2"===e.key?(e.preventDefault(),f.startEditing()):e.ctrlKey&&"c"===e.key?(e.preventDefault(),c({enableDeprecatedCopy:null==s?void 0:s.enableDeprecatedCopy})):e.altKey||e.ctrlKey||!/^[a-zA-Z0-9]$/.test(e.key)?"Backspace"!==e.key&&"Delete"!==e.key||(e.preventDefault(),e.stopPropagation(),f.startEditing(),setTimeout((function(){d("",v.getEditorId())}),10)):(e.preventDefault(),e.stopPropagation(),f.startEditing(),setTimeout((function(){d(e.key,v.getEditorId())}),10)))};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[u,f.isEditing]),r((function(){f.isEditing&&!l.editable&&f.endEditing()}),[f,l]),e(t,{})}export{s as KeyboardSetting};
|
|
3
3
|
//# sourceMappingURL=keyboard-setting.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useTable as i}from"./hook.js";import{TableHeaderElement as t}from"../header/header.js";import{PagenationProvider as n}from"../pagenation/providers.js";import{DisplayRange as l,Pagenation as d}from"../pagenation/components.js";import{FilterProvider as s}from"../filter/provider.js";import{TableFilterRemoveButton as c,TableFilterForm as a}from"../filter/components.js";import"../sort/icon.js";import{SortProvider as
|
|
2
|
+
import{__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useTable as i}from"./hook.js";import{TableHeaderElement as t}from"../header/header.js";import{PagenationProvider as n}from"../pagenation/providers.js";import{DisplayRange as l,Pagenation as d}from"../pagenation/components.js";import{FilterProvider as s}from"../filter/provider.js";import{TableFilterRemoveButton as c,TableFilterForm as a}from"../filter/components.js";import"../sort/icon.js";import{SortProvider as p}from"../sort/provider.js";import{ColumnsProvider as m}from"../sheet/providers.js";import{CheckboxProvider as h,CheckboxStatusProvider as f}from"../checkbox/provider.js";import{AllCheckbox as g}from"../checkbox/components.js";import{EditProvider as u}from"../edit/provider.js";import{TablePropertyProvider as v}from"../table-property/provider.js";import{KeyboardSetting as b}from"../operation/components/keyboard-setting.js";import{Row as w}from"../sheet/components.js";import{PasteProvider as j}from"../paste/provider.js";import{generateFormattingString as x}from"../libs/conditional-formatting.js";import{Editor as y}from"../edit/ui/editor.js";import{useFilteringColumnStateContext as k}from"../filter/hooks/selectedFilteringColumn/provider.js";import{RangeProvider as C,useRangeActionContext as N,TestRange as R}from"../range/provider.js";import{CopyProvider as F}from"../copy/provider.js";import{CopiedMessage as I}from"../copy/components.js";import{TableIdGeneratorProvider as P,useTableIdGenerator as S}from"../id/provider.js";function D(i){var t,l,d,c;return r(P,{id:i.id,children:r(s,{children:r(p,{initialCondition:null===(t=i.initialCondition)||void 0===t?void 0:t.sort,children:r(n,{rowCount:i.rows.length,perPage:null===(d=null===(l=i.initialCondition)||void 0===l?void 0:l.pagenation)||void 0===d?void 0:d.rowCountPerPage,children:r(h,{checkbox:i.checkbox,children:r(f,{checkboxCount:i.rows.length,children:r(m,{cols:i.cols,errorHandler:i.errorHandler,children:r(u,{children:r(v,{children:r(C,{children:e(F,{rows:i.rows,cols:i.cols,children:[r(I,{}),e(j,{rows:i.rows,cols:i.cols,onUpdateRowFunction:i.onUpdateRow,children:[r(b,{enableDeprecatedCopy:null===(c=i.deprecatedOptions)||void 0===c?void 0:c.enableDeprecatedCopy}),r(T,o({},i))]})]})})})})})})})})})})})}function T(o){var n=i(o),s=n.cols,p=n.rowMaps,m=n.pageRowIds,h=k(),f=N().reset,u=S();return e("div",{className:"w-full",children:[r("div",{className:"flex justify-end mb-1 mr-3",children:r(c,{children:r("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),e("div",{id:u.getTableId(),className:"relative h-full max-w-full max-h-[80vh] border border-gray-200 bg-white rounded-md overflow-auto",children:[e("table",{className:"table",children:[r("thead",{children:e("tr",{className:"sticky top-0 border-gray-200 z-20 bg-gray-200 text-gray-600 h-[32px]",onClick:function(o){o.stopPropagation(),f()},children:[o.checkbox&&r("th",{children:r(g,{rows:o.rows})}),s.map((function(o,e){return r(t,{id:u.getTableColId({columnIndex:e}),col:o},o.key.toString())}))]})}),e("tbody",{children:[!!h&&r("tr",{onClick:function(o){o.stopPropagation(),f()},children:r("td",{colSpan:s.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl z-20 p-0 overflow-hidden",children:r(a,{})})}),0===m.length&&r("tr",{children:r("td",{colSpan:s.length,className:"py-5",children:r("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),m.map((function(e,i){return r(w,{existCheckbox:!!o.checkbox,rowIndex:i,dataString:p[e].stringValue,cols:o.cols,onClickRow:o.onClickRow,applyRowFormatting:o.applyRowFormatting,conditionalFormattingString:x(p[e].data,s,o.conditionalFormattings)},e)}))]})]}),r(R,{}),r(y,{rowMaps:p,pageRowIds:m})]}),e("div",{className:"mt-1",children:[r(l,{}),r("div",{className:"mt-2",children:r(d,{})})]})]})}export{D as default};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
+
interface Options {
|
|
4
|
+
/**
|
|
5
|
+
* The label is the string that will be displayed for the option.
|
|
6
|
+
*/
|
|
7
|
+
label: string;
|
|
8
|
+
/**
|
|
9
|
+
* The value is the value of the option and will not be displayed.
|
|
10
|
+
*/
|
|
11
|
+
value: string;
|
|
12
|
+
/**
|
|
13
|
+
* The searchLabel is the string that will be displayed in the list of options when the user is selecting an option.
|
|
14
|
+
* The difference between label and searchLabel is that label is the string displayed when the option is selected,
|
|
15
|
+
* while searchLabel is the string displayed in the list of options during selection.
|
|
16
|
+
* If searchLabel is undefined, the list of options will display the label.
|
|
17
|
+
*/
|
|
18
|
+
searchLabel?: string;
|
|
19
|
+
/**
|
|
20
|
+
* The searchText is the string used for searching and filtering the list of options.
|
|
21
|
+
* For example, in the case of Japanese options, you can use hiragana or katakana readings in searchText,
|
|
22
|
+
* allowing users to search using hiragana even if the displayed label is in kanji.
|
|
23
|
+
* If searchText is undefined, the search will use searchLabel if defined, otherwise it will use label.
|
|
24
|
+
*/
|
|
25
|
+
searchText?: string;
|
|
26
|
+
}
|
|
27
|
+
|
|
3
28
|
type TStringValidateOption = {
|
|
4
29
|
maxLength?: number;
|
|
5
30
|
minLength?: number;
|
|
@@ -62,10 +87,7 @@ type TNumberCellEditingCondition<T extends DataRecord> = ({
|
|
|
62
87
|
}));
|
|
63
88
|
type TSelectCellEditingCondition<T extends DataRecord> = ({
|
|
64
89
|
type: "select";
|
|
65
|
-
options:
|
|
66
|
-
value: string;
|
|
67
|
-
label: string;
|
|
68
|
-
}[];
|
|
90
|
+
options: Options[];
|
|
69
91
|
} & ({
|
|
70
92
|
editable?: false;
|
|
71
93
|
render?: (value: string, row: DataObject<T>) => React.ReactNode;
|
|
@@ -115,6 +137,9 @@ type TPropsTable<T extends DataRecord> = {
|
|
|
115
137
|
applyRowFormatting?: (row: DataObject<T>) => TailwindCssStyle;
|
|
116
138
|
conditionalFormattings?: TConditionalFormatting<T>[];
|
|
117
139
|
errorHandler?: (errors: TErrorValidation[]) => void;
|
|
140
|
+
deprecatedOptions?: {
|
|
141
|
+
enableDeprecatedCopy?: boolean;
|
|
142
|
+
};
|
|
118
143
|
} & TCheckboxProperty<T>;
|
|
119
144
|
|
|
120
145
|
declare function Table<T extends DataRecord>(props: TPropsTable<T>): react_jsx_runtime.JSX.Element;
|