@teppen/react-ui 1.3.0 → 1.3.2
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/table/base.js +1 -1
- package/dist/cjs/src/table/cell.js +1 -1
- package/dist/cjs/src/table/constant.js +2 -0
- package/dist/cjs/src/table/constant.js.map +1 -0
- package/dist/cjs/src/table/header/header.js +2 -0
- package/dist/cjs/src/table/header/header.js.map +1 -0
- package/dist/cjs/src/table/header/resize-col-width-hook.js +2 -0
- package/dist/cjs/src/table/header/resize-col-width-hook.js.map +1 -0
- package/dist/esm/src/table/base.js +1 -1
- package/dist/esm/src/table/cell.js +1 -1
- package/dist/esm/src/table/constant.js +2 -0
- package/dist/esm/src/table/constant.js.map +1 -0
- package/dist/esm/src/table/header/header.js +2 -0
- package/dist/esm/src/table/header/header.js.map +1 -0
- package/dist/esm/src/table/header/resize-col-width-hook.js +2 -0
- package/dist/esm/src/table/header/resize-col-width-hook.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/package.json +1 -1
- package/dist/cjs/src/table/header.js +0 -2
- package/dist/cjs/src/table/header.js.map +0 -1
- package/dist/esm/src/table/header.js +0 -2
- package/dist/esm/src/table/header.js.map +0 -1
|
@@ -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"),t=require("react"),o=require("./hook.js"),n=require("./cell.js"),s=require("./header.js"),
|
|
2
|
+
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react"),o=require("./hook.js"),n=require("./cell.js"),s=require("./header/header.js"),i=require("./pagenation/providers.js"),l=require("./pagenation/components.js"),c=require("./filter/provider.js"),a=require("./filter/components.js");require("./sort/icon.js");var d=require("./sort/provider.js"),u=require("./sheet/providers.js"),x=require("./edit/provider.js"),h=require("./checkbox/provider.js"),j=require("./checkbox/components.js");function v(e){var i=o.useTable(e),d=i.cols,h=i.rows,v=x.useFocusContext(),f=v.isFocus,m=v.isEditing,p=v.edit,b=v.moveLeft,g=v.moveRight,y=v.moveUp,k=v.moveDown,w=v.unfocus,C=v.setMaxRowNumber,q=c.useFilterContext().selectedFilterKey;return t.useEffect((function(){var e=function(e){f&&!m&&("Enter"===e.key?(e.preventDefault(),k()):"Escape"===e.key?(e.preventDefault(),w()):"ArrowRight"===e.key?(e.preventDefault(),g()):"ArrowLeft"===e.key?(e.preventDefault(),b()):"ArrowUp"===e.key?(e.preventDefault(),y()):"ArrowDown"===e.key?(e.preventDefault(),k()):"F2"===e.key&&p())};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[m,f]),t.useEffect((function(){C(h.length-1)}),[h.length]),r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end mb-1 mr-3",children:r.jsx(a.TableFilterRemoveButton,{children:r.jsx("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r.jsx("div",{id:"table-frame",className:"relative h-full max-w-full max-h-[80vh] border border-gray-200 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]",children:[e.checkbox&&r.jsx("th",{children:r.jsx(j.AllCheckbox,{rows:e.rows})}),d.map((function(e){return r.jsx(s.TableHeaderElement,{columnKey:e.key},e.key)}))]})}),r.jsxs("tbody",{children:[!!q&&r.jsx("tr",{children:r.jsx("td",{colSpan:d.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(a.TableFilterForm,{})})}),0===h.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:d.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),h.map((function(t,o){return r.jsx(u.RowProvider,{row:t,children:r.jsxs("tr",{className:"relative border border-gray-200 after:absolute after:w-full after:h-full after:top-0 after:left-0 after:pointer-events-none after:hover:bg-gray-500/10 ".concat(e.onClickRow?"hover:cursor-pointer":""," ").concat(e.applyRowFormatting?e.applyRowFormatting(t):""),onClick:function(r){r.preventDefault(),e.onClickRow&&e.onClickRow(t)},"data-testid":t.id,children:[e.checkbox&&r.jsx("td",{children:r.jsx(j.Checkbox,{})}),d.map((function(e,t){return r.jsx(u.CellProvider,{columnKey:e.key,rowIndex:o,colIndex:t,children:r.jsx(n.TableCell,{})},e.key)}))]})},t.id)}))]})]})}),r.jsxs("div",{className:"mt-1",children:[r.jsx(l.DisplayRange,{}),r.jsx("div",{className:"mt-2",children:r.jsx(l.Pagenation,{})})]})]})}module.exports=function(t){var o;return r.jsx(c.FilterProvider,{children:r.jsx(d.SortProvider,{initialCondition:null===(o=t.initialCondition)||void 0===o?void 0:o.sort,children:r.jsx(i.PagenationProvider,{rowCount:t.rows.length,children:r.jsx(h.CheckboxProvider,{checkbox:t.checkbox,children:r.jsx(h.CheckboxStatusProvider,{checkboxCount:t.rows.length,children:r.jsx(u.ColumnsProvider,{cols:t.cols,children:r.jsx(x.FocusProvider,{columnCount:t.cols.length,children:r.jsx(v,e.__assign({},t))})})})})})})})};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./edit-icon.js"),r=require("./cancel-icon.js"),
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./edit-icon.js"),r=require("./cancel-icon.js"),o=require("./sheet/providers.js"),l=require("./edit/provider.js"),u=require("./hook.js"),i=require("../../node_modules/react-intersection-observer/index.js"),a=t.forwardRef((function(t,n){return e.jsxs("div",{className:"flex justify-between gap-1 w-full items-center",children:[e.jsx("input",{ref:n,className:"w-full py-1 px-2 bg-white text-gray-900",type:"text",value:t.value,onChange:t.onChange,onBlur:t.onBlur,onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(t.reset(),t.endEditing())}}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),t.reset(),t.endEditing()},children:e.jsx(r.CancelIcon,{size:16})})]})}));function s(){var n=o.useCellContext(),r=o.useColumnContext(n.columnKey),i=o.useRowContext(),s=l.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,d=c.callbackAfterBlur,v=t.useState(i[n.columnKey]),x=v[0],p=v[1];if(!r.editable||"string"!==r.type)throw new Error("Invalid condition");return e.jsx(a,{ref:f,value:x,onChange:function(e){e.preventDefault(),p(e.target.value)},onBlur:function(e){e.preventDefault(),x!==i[n.columnKey]?!function(){var e,t,n;return(null===(e=r.constraints)||void 0===e?void 0:e.maxLength)&&x.length>r.constraints.maxLength?(alert("最大文字数(".concat(r.constraints.maxLength,")を超過しています。(現在").concat(x.length,"文字)")),!1):(null===(t=r.constraints)||void 0===t?void 0:t.minLength)&&x.length<r.constraints.minLength?(alert("最小文字数(".concat(r.constraints.minLength,")を下回っています。(現在").concat(x.length,"文字)")),!1):!((null===(n=r.constraints)||void 0===n?void 0:n.pattern)&&!new RegExp(r.constraints.pattern).test(x)&&(alert("パターンに一致しません。(パターン".concat(r.constraints.pattern,")")),1))}()?setTimeout((function(){e.target.focus()}),100):(r.onCellBlur(n.columnKey,x,i,s),d()):s()},reset:function(){return p(i[n.columnKey].toString())},endEditing:s})}function c(){var n=o.useCellContext(),r=o.useColumnContext(n.columnKey),i=o.useRowContext(),s=l.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,d=c.callbackAfterBlur,v=t.useState(n.value.toString()),x=v[0],p=v[1];if(!r.editable||"number"!==r.type)throw new Error("Invalid condition");return e.jsx(a,{ref:f,value:x,onChange:function(e){e.preventDefault(),""!==e.target.value?"-"!==e.target.value&&"0-"!==e.target.value?e.target.value.match(/^-?[0-9]+\.$/)?p(e.target.value):isNaN(Number(e.target.value))||p(Number(e.target.value).toString()):p("-0"):p("0")},onBlur:function(e){e.preventDefault(),Number(x)!==n.value?!function(){var e,t,n=parseInt(x);return(null===(e=r.constraints)||void 0===e?void 0:e.max)&&n>r.constraints.max?(alert("最大値(".concat(r.constraints.max,")を超過しています。(入力値:").concat(n,")")),!1):!((null===(t=r.constraints)||void 0===t?void 0:t.min)&&n<r.constraints.min&&(alert("最小値(".concat(r.constraints.min,")を下回っています。(入力値:").concat(n,")")),1))}()?setTimeout((function(){e.target.focus()}),100):(r.onCellBlur(n.columnKey,Number(x),i,s),d()):s()},reset:function(){return p(n.value.toString())},endEditing:s})}function f(){var n=o.useCellContext(),i=o.useColumnContext(n.columnKey),a=o.useRowContext(),s=l.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,d=c.callbackAfterBlur,v=t.useState(n.value),x=v[0],p=v[1];if(!i.editable||"select"!==i.type)throw new Error("Invalid condition");return e.jsxs("div",{className:"flex justify-between gap-1 w-full items-center",children:[e.jsxs("select",{ref:f,className:"w-full py-1 px-2 bg-white text-gray-900",value:x,onChange:function(e){e.preventDefault(),p(e.target.value)},onBlur:function(e){e.preventDefault(),x!==n.value?(i.onCellBlur(n.columnKey,x,a,s),d()):s()},onKeyDown:function(e){"Enter"===e.key&&e.preventDefault()},onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(p(n.value),s())},children:[i.allowEmpty&&e.jsx("option",{value:"",children:""==n.value?"-- 未選択 --":"-- 選択解除 --"},"TEPPEN/ReactUI Empty Option"),i.options.map((function(t){return e.jsx("option",{value:t.value,children:t.label},t.value)}))]}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),p(n.value),s()},children:e.jsx(r.CancelIcon,{size:16})})]})}var d=t.memo((function(){var t=o.useCellContext(),r=l.useFocusContext().focusAndEdit;return e.jsx("button",{className:"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200",onClick:function(e){e.preventDefault(),r(t.rowIndex,t.colIndex)},children:e.jsx(n.EditIcon,{size:12})})}));exports.TableCell=function(){var n=u.useCell(),r=n.cell,l=n.isFocus,a=n.isEditing,v=n.onClickCellToFocus,x=n.onDoubleClickCellToEdit,p=n.preventPropagation,g=o.useRowContext(),m=t.useRef(null),h=i.useInView({root:document.querySelector("#table-frame"),rootMargin:"-60px -30px -30px -30px",threshold:1}),C=h.inView,y=h.ref;return t.useEffect((function(){var e;l&&!C&&m.current&&(null===(e=m.current)||void 0===e||e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}),[l,C,m]),e.jsx("td",{ref:y,className:"".concat(l?"outline outline-1 -outline-offset-1 outline-gray-400":""),children:e.jsxs("div",{ref:m,className:"relative",children:[e.jsxs("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default ".concat(l&&a?"opacity-0":""),onClick:v,children:[r.render?r.render(r.value,g):e.jsx("div",{onDoubleClick:x,children:e.jsx("p",{className:"text-left whitespace-nowrap",children:r.label})}),r.editable&&e.jsx(d,{})]}),r.editable&&l&&a&&e.jsxs("div",{className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:p,children:["string"===r.type&&e.jsx(s,{}),"number"===r.type&&e.jsx(c,{}),"select"===r.type&&e.jsx(f,{})]})]})})};
|
|
3
3
|
//# sourceMappingURL=cell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constant.js","sources":["../../../../src/table/constant.ts"],"sourcesContent":["export const DEFAULT_MIN_COL_WIDTH = 50;\nexport const DEFAULT_COL_WIDTH = 100;\n"],"names":[],"mappings":"uCACiC,kCADI"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("../filter/provider.js");var i=require("../filter/components.js"),s=require("../sheet/providers.js"),t=require("../sort/components.js");require("../sort/provider.js");var r=require("./resize-col-width-hook.js");exports.TableHeaderElement=function(l){var o=s.useColumnContext(l.columnKey),n=r.useResizeColWidthHook({initialWidth:o.initialWidth,minWidth:o.minWidth}),a=n.colWidth,d=n.onMouseDownResizeWidth;return e.jsxs("th",{className:"relative",style:{minWidth:a},children:[e.jsxs("div",{className:"flex justify-between items-center bg-gray-200 text-gray-600 h-[32px] min-w-fit",children:[e.jsx("div",{className:"px-2",children:o.label&&e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20",children:o.label})}),e.jsxs("div",{className:"flex items-center gap-1 px-1",children:[!o.disableSort&&e.jsx(t.SortButton,{columnKey:l.columnKey}),!o.disableFilter&&e.jsx(i.TableFilter,{columnKey:l.columnKey})]})]}),e.jsx("div",{className:"absolute top-0 right-0 grid place-items-end py-1 w-[4px] h-full cursor-col-resize",onMouseDown:d,children:e.jsx("div",{className:"w-[1px] h-full bg-white"})})]})};
|
|
2
|
+
//# sourceMappingURL=header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../../../src/table/header/header.tsx"],"sourcesContent":["import { TableFilter } from \"../filter\";\nimport { useColumnContext } from \"../sheet\";\nimport { SortButton } from \"../sort\";\nimport { useResizeColWidthHook } from \"./resize-col-width-hook\";\n\ntype TPropsTableHeader = {\n columnKey: string;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n const col = useColumnContext(props.columnKey);\n const { colWidth, onMouseDownResizeWidth } = useResizeColWidthHook({\n initialWidth: col.initialWidth,\n minWidth: col.minWidth,\n });\n\n return (\n <th className=\"relative\" style={{ minWidth: colWidth }}>\n <div\n className={`flex justify-between items-center bg-gray-200 text-gray-600 h-[32px] min-w-fit`}\n >\n <div className=\"px-2\">\n {col.label && (\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20`}\n >\n {col.label}\n </p>\n )}\n </div>\n\n <div className=\"flex items-center gap-1 px-1\">\n {!col.disableSort && <SortButton columnKey={props.columnKey} />}\n {!col.disableFilter && <TableFilter columnKey={props.columnKey} />}\n </div>\n </div>\n <div\n className=\"absolute top-0 right-0 grid place-items-end py-1 w-[4px] h-full cursor-col-resize\"\n onMouseDown={onMouseDownResizeWidth}\n >\n <div className={`w-[1px] h-full bg-white`} />\n </div>\n </th>\n );\n}\n"],"names":["props","col","useColumnContext","columnKey","_a","useResizeColWidthHook","initialWidth","minWidth","colWidth","onMouseDownResizeWidth","_jsxs","className","style","children","_jsx","label","disableSort","jsx","SortButton","disableFilter","TableFilter","onMouseDown"],"mappings":"sSASM,SAA6BA,GACjC,IAAMC,EAAMC,EAAAA,iBAAiBF,EAAMG,WAC7BC,EAAuCC,EAAAA,sBAAsB,CACjEC,aAAcL,EAAIK,aAClBC,SAAUN,EAAIM,WAFRC,EAAQJ,EAAAI,SAAEC,2BAKlB,OACEC,EAAAA,WAAIC,UAAU,WAAWC,MAAO,CAAEL,SAAUC,aAC1CE,EAAAA,KACE,MAAA,CAAAC,UAAW,iFAAgFE,SAAA,CAE3FC,EAAAA,WAAKH,UAAU,OACZE,SAAAZ,EAAIc,OACHD,MACE,IAAA,CAAAH,UAAW,iFAAgFE,SAE1FZ,EAAIc,UAKXL,OAAK,MAAA,CAAAC,UAAU,+BACZE,SAAA,EAACZ,EAAIe,aAAeF,EAACG,IAAAC,cAAWf,UAAWH,EAAMG,aAChDF,EAAIkB,eAAiBL,EAACG,IAAAG,EAAWA,YAAC,CAAAjB,UAAWH,EAAMG,kBAGzDW,aACEH,UAAU,oFACVU,YAAaZ,EAAsBI,SAEnCC,aAAKH,UAAW,gCAIxB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("react"),t=require("../constant.js");exports.useResizeColWidthHook=function(o){var n,u=e.useState(null!==(n=null==o?void 0:o.initialWidth)&&void 0!==n?n:t.DEFAULT_COL_WIDTH),i=u[0],d=u[1],l=e.useCallback((function(e){var n=e.clientX,u=i;document.body.style.cursor="col-resize",document.body.style.userSelect="none";var l=function(e){var i,l,s=u+(e.clientX-n);d(s>(null!==(i=null==o?void 0:o.minWidth)&&void 0!==i?i:t.DEFAULT_MIN_COL_WIDTH)?s:null!==(l=null==o?void 0:o.minWidth)&&void 0!==l?l:t.DEFAULT_MIN_COL_WIDTH)},s=function(){document.removeEventListener("mousemove",l),document.removeEventListener("mouseup",s),document.body.style.cursor="default",document.body.style.userSelect="auto"};document.addEventListener("mousemove",l),document.addEventListener("mouseup",s)}),[i,null==o?void 0:o.minWidth]);return{colWidth:i,onMouseDownResizeWidth:l}};
|
|
2
|
+
//# sourceMappingURL=resize-col-width-hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resize-col-width-hook.js","sources":["../../../../../src/table/header/resize-col-width-hook.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { DEFAULT_COL_WIDTH, DEFAULT_MIN_COL_WIDTH } from \"../constant\";\n\nexport function useResizeColWidthHook(options?: {\n initialWidth?: number;\n minWidth?: number;\n}) {\n const [colWidth, setColWidth] = useState(\n options?.initialWidth ?? DEFAULT_COL_WIDTH\n );\n\n const cursorStyle = \"col-resize\";\n\n const onMouseDownResizeWidth: React.MouseEventHandler<HTMLDivElement> =\n useCallback(\n (e) => {\n const startX = e.clientX;\n const startWidth = colWidth;\n\n document.body.style.cursor = cursorStyle;\n document.body.style.userSelect = \"none\";\n\n const onMouseMove = (moveEvent: MouseEvent) => {\n const newWidth = startWidth + (moveEvent.clientX - startX);\n setColWidth(\n newWidth > (options?.minWidth ?? DEFAULT_MIN_COL_WIDTH)\n ? newWidth\n : options?.minWidth ?? DEFAULT_MIN_COL_WIDTH\n );\n };\n\n const onMouseUp = () => {\n document.removeEventListener(\"mousemove\", onMouseMove);\n document.removeEventListener(\"mouseup\", onMouseUp);\n document.body.style.cursor = \"default\";\n document.body.style.userSelect = \"auto\";\n };\n\n document.addEventListener(\"mousemove\", onMouseMove);\n document.addEventListener(\"mouseup\", onMouseUp);\n },\n [colWidth, options?.minWidth]\n );\n\n return {\n colWidth,\n onMouseDownResizeWidth,\n };\n}\n"],"names":["options","_b","useState","_a","initialWidth","DEFAULT_COL_WIDTH","colWidth","setColWidth","onMouseDownResizeWidth","useCallback","e","startX","clientX","startWidth","document","body","style","cursor","userSelect","onMouseMove","moveEvent","newWidth","minWidth","DEFAULT_MIN_COL_WIDTH","onMouseUp","removeEventListener","addEventListener"],"mappings":"8FAGM,SAAgCA,SAI9BC,EAA0BC,EAAAA,SACL,QAAzBC,EAAAH,eAAAA,EAASI,oBAAgB,IAAAD,EAAAA,EAAAE,EAAiBA,mBADrCC,OAAUC,OAMXC,EACJC,eACE,SAACC,GACC,IAAMC,EAASD,EAAEE,QACXC,EAAaP,EAEnBQ,SAASC,KAAKC,MAAMC,OARN,aASdH,SAASC,KAAKC,MAAME,WAAa,OAEjC,IAAMC,EAAc,SAACC,WACbC,EAAWR,GAAcO,EAAUR,QAAUD,GACnDJ,EACEc,GAA6B,UAAjBrB,aAAO,EAAPA,EAASsB,gBAAQ,IAAAnB,EAAAA,EAAIoB,yBAC7BF,EACiB,QAAjBpB,EAAAD,aAAO,EAAPA,EAASsB,gBAAQ,IAAArB,EAAAA,EAAIsB,EAAAA,sBAE7B,EAEMC,EAAY,WAChBV,SAASW,oBAAoB,YAAaN,GAC1CL,SAASW,oBAAoB,UAAWD,GACxCV,SAASC,KAAKC,MAAMC,OAAS,UAC7BH,SAASC,KAAKC,MAAME,WAAa,MACnC,EAEAJ,SAASY,iBAAiB,YAAaP,GACvCL,SAASY,iBAAiB,UAAWF,EACtC,GACD,CAAClB,EAAUN,aAAO,EAAPA,EAASsB,WAGxB,MAAO,CACLhB,SAAQA,EACRE,uBAAsBA,EAE1B"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as
|
|
2
|
+
import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import{useEffect as t}from"react";import{useTable as n}from"./hook.js";import{TableCell as i}from"./cell.js";import{TableHeaderElement as l}from"./header/header.js";import{PagenationProvider as c}from"./pagenation/providers.js";import{DisplayRange as a,Pagenation as d}from"./pagenation/components.js";import{FilterProvider as s,useFilterContext as m}from"./filter/provider.js";import{TableFilterRemoveButton as h,TableFilterForm as f}from"./filter/components.js";import"./sort/icon.js";import{SortProvider as p}from"./sort/provider.js";import{ColumnsProvider as u,RowProvider as v,CellProvider as y}from"./sheet/providers.js";import{FocusProvider as g,useFocusContext as w}from"./edit/provider.js";import{CheckboxProvider as k,CheckboxStatusProvider as b}from"./checkbox/provider.js";import{AllCheckbox as x,Checkbox as j}from"./checkbox/components.js";function N(o){var t;return r(s,{children:r(p,{initialCondition:null===(t=o.initialCondition)||void 0===t?void 0:t.sort,children:r(c,{rowCount:o.rows.length,children:r(k,{checkbox:o.checkbox,children:r(b,{checkboxCount:o.rows.length,children:r(u,{cols:o.cols,children:r(g,{columnCount:o.cols.length,children:r(D,e({},o))})})})})})})})}function D(e){var c=n(e),s=c.cols,p=c.rows,u=w(),g=u.isFocus,k=u.isEditing,b=u.edit,N=u.moveLeft,D=u.moveRight,C=u.moveUp,R=u.moveDown,A=u.unfocus,E=u.setMaxRowNumber,F=m().selectedFilterKey;return t((function(){var e=function(e){g&&!k&&("Enter"===e.key?(e.preventDefault(),R()):"Escape"===e.key?(e.preventDefault(),A()):"ArrowRight"===e.key?(e.preventDefault(),D()):"ArrowLeft"===e.key?(e.preventDefault(),N()):"ArrowUp"===e.key?(e.preventDefault(),C()):"ArrowDown"===e.key?(e.preventDefault(),R()):"F2"===e.key&&b())};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[k,g]),t((function(){E(p.length-1)}),[p.length]),o("div",{className:"w-full",children:[r("div",{className:"flex justify-end mb-1 mr-3",children:r(h,{children:r("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r("div",{id:"table-frame",className:"relative h-full max-w-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:o("table",{className:"table",children:[r("thead",{children:o("tr",{className:"sticky top-0 border-gray-200 z-20 bg-gray-200 text-gray-600 h-[32px]",children:[e.checkbox&&r("th",{children:r(x,{rows:e.rows})}),s.map((function(e){return r(l,{columnKey:e.key},e.key)}))]})}),o("tbody",{children:[!!F&&r("tr",{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(f,{})})}),0===p.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"})})}),p.map((function(t,n){return r(v,{row:t,children:o("tr",{className:"relative border border-gray-200 after:absolute after:w-full after:h-full after:top-0 after:left-0 after:pointer-events-none after:hover:bg-gray-500/10 ".concat(e.onClickRow?"hover:cursor-pointer":""," ").concat(e.applyRowFormatting?e.applyRowFormatting(t):""),onClick:function(r){r.preventDefault(),e.onClickRow&&e.onClickRow(t)},"data-testid":t.id,children:[e.checkbox&&r("td",{children:r(j,{})}),s.map((function(e,o){return r(y,{columnKey:e.key,rowIndex:n,colIndex:o,children:r(i,{})},e.key)}))]})},t.id)}))]})]})}),o("div",{className:"mt-1",children:[r(a,{}),r("div",{className:"mt-2",children:r(d,{})})]})]})}export{N as default};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as n,memo as r,useRef as o,useEffect as i,useState as l}from"react";import{EditIcon as a}from"./edit-icon.js";import{CancelIcon as u}from"./cancel-icon.js";import{useCellContext as c,useRowContext as s,useColumnContext as f}from"./sheet/providers.js";import{useFocusContext as v}from"./edit/provider.js";import{useCell as d,useCellFocus as
|
|
2
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as n,memo as r,useRef as o,useEffect as i,useState as l}from"react";import{EditIcon as a}from"./edit-icon.js";import{CancelIcon as u}from"./cancel-icon.js";import{useCellContext as c,useRowContext as s,useColumnContext as f}from"./sheet/providers.js";import{useFocusContext as v}from"./edit/provider.js";import{useCell as d,useCellFocus as p}from"./hook.js";import{useInView as m}from"../../node_modules/react-intersection-observer/index.js";var g=n((function(n,r){return e("div",{className:"flex justify-between gap-1 w-full items-center",children:[t("input",{ref:r,className:"w-full py-1 px-2 bg-white text-gray-900",type:"text",value:n.value,onChange:n.onChange,onBlur:n.onBlur,onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(n.reset(),n.endEditing())}}),t("button",{onMouseDown:function(e){e.preventDefault(),n.reset(),n.endEditing()},children:t(u,{size:16})})]})}));function h(){var e=c(),n=f(e.columnKey),r=s(),o=v().finishEditing,i=p(),a=i.ref,u=i.callbackAfterBlur,d=l(r[e.columnKey]),m=d[0],h=d[1];if(!n.editable||"string"!==n.type)throw new Error("Invalid condition");return t(g,{ref:a,value:m,onChange:function(e){e.preventDefault(),h(e.target.value)},onBlur:function(t){t.preventDefault(),m!==r[e.columnKey]?!function(){var e,t,r;return(null===(e=n.constraints)||void 0===e?void 0:e.maxLength)&&m.length>n.constraints.maxLength?(alert("最大文字数(".concat(n.constraints.maxLength,")を超過しています。(現在").concat(m.length,"文字)")),!1):(null===(t=n.constraints)||void 0===t?void 0:t.minLength)&&m.length<n.constraints.minLength?(alert("最小文字数(".concat(n.constraints.minLength,")を下回っています。(現在").concat(m.length,"文字)")),!1):!((null===(r=n.constraints)||void 0===r?void 0:r.pattern)&&!new RegExp(n.constraints.pattern).test(m)&&(alert("パターンに一致しません。(パターン".concat(n.constraints.pattern,")")),1))}()?setTimeout((function(){t.target.focus()}),100):(n.onCellBlur(e.columnKey,m,r,o),u()):o()},reset:function(){return h(r[e.columnKey].toString())},endEditing:o})}function y(){var e=c(),n=f(e.columnKey),r=s(),o=v().finishEditing,i=p(),a=i.ref,u=i.callbackAfterBlur,d=l(e.value.toString()),m=d[0],h=d[1];if(!n.editable||"number"!==n.type)throw new Error("Invalid condition");return t(g,{ref:a,value:m,onChange:function(e){e.preventDefault(),""!==e.target.value?"-"!==e.target.value&&"0-"!==e.target.value?e.target.value.match(/^-?[0-9]+\.$/)?h(e.target.value):isNaN(Number(e.target.value))||h(Number(e.target.value).toString()):h("-0"):h("0")},onBlur:function(t){t.preventDefault(),Number(m)!==e.value?!function(){var e,t,r=parseInt(m);return(null===(e=n.constraints)||void 0===e?void 0:e.max)&&r>n.constraints.max?(alert("最大値(".concat(n.constraints.max,")を超過しています。(入力値:").concat(r,")")),!1):!((null===(t=n.constraints)||void 0===t?void 0:t.min)&&r<n.constraints.min&&(alert("最小値(".concat(n.constraints.min,")を下回っています。(入力値:").concat(r,")")),1))}()?setTimeout((function(){t.target.focus()}),100):(n.onCellBlur(e.columnKey,Number(m),r,o),u()):o()},reset:function(){return h(e.value.toString())},endEditing:o})}function b(){var n=c(),r=f(n.columnKey),o=s(),i=v().finishEditing,a=p(),d=a.ref,m=a.callbackAfterBlur,g=l(n.value),h=g[0],y=g[1];if(!r.editable||"select"!==r.type)throw new Error("Invalid condition");return e("div",{className:"flex justify-between gap-1 w-full items-center",children:[e("select",{ref:d,className:"w-full py-1 px-2 bg-white text-gray-900",value:h,onChange:function(e){e.preventDefault(),y(e.target.value)},onBlur:function(e){e.preventDefault(),h!==n.value?(r.onCellBlur(n.columnKey,h,o,i),m()):i()},onKeyDown:function(e){"Enter"===e.key&&e.preventDefault()},onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(y(n.value),i())},children:[r.allowEmpty&&t("option",{value:"",children:""==n.value?"-- 未選択 --":"-- 選択解除 --"},"TEPPEN/ReactUI Empty Option"),r.options.map((function(e){return t("option",{value:e.value,children:e.label},e.value)}))]}),t("button",{onMouseDown:function(e){e.preventDefault(),y(n.value),i()},children:t(u,{size:16})})]})}var w=r((function(){var e=c(),n=v().focusAndEdit;return t("button",{className:"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200",onClick:function(t){t.preventDefault(),n(e.rowIndex,e.colIndex)},children:t(a,{size:12})})}));function x(){var n=d(),r=n.cell,l=n.isFocus,a=n.isEditing,u=n.onClickCellToFocus,c=n.onDoubleClickCellToEdit,f=n.preventPropagation,v=s(),p=o(null),g=m({root:document.querySelector("#table-frame"),rootMargin:"-60px -30px -30px -30px",threshold:1}),x=g.inView,E=g.ref;return i((function(){var e;l&&!x&&p.current&&(null===(e=p.current)||void 0===e||e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}),[l,x,p]),t("td",{ref:E,className:"".concat(l?"outline outline-1 -outline-offset-1 outline-gray-400":""),children:e("div",{ref:p,className:"relative",children:[e("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default ".concat(l&&a?"opacity-0":""),onClick:u,children:[r.render?r.render(r.value,v):t("div",{onDoubleClick:c,children:t("p",{className:"text-left whitespace-nowrap",children:r.label})}),r.editable&&t(w,{})]}),r.editable&&l&&a&&e("div",{className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:f,children:["string"===r.type&&t(h,{}),"number"===r.type&&t(y,{}),"select"===r.type&&t(b,{})]})]})})}export{x as TableCell};
|
|
3
3
|
//# sourceMappingURL=cell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constant.js","sources":["../../../../src/table/constant.ts"],"sourcesContent":["export const DEFAULT_MIN_COL_WIDTH = 50;\nexport const DEFAULT_COL_WIDTH = 100;\n"],"names":["DEFAULT_MIN_COL_WIDTH","DEFAULT_COL_WIDTH"],"mappings":"AAAO,IAAMA,EAAwB,GACxBC,EAAoB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as e,jsx as i}from"react/jsx-runtime";import"../filter/provider.js";import{TableFilter as t}from"../filter/components.js";import{useColumnContext as r}from"../sheet/providers.js";import{SortButton as o}from"../sort/components.js";import"../sort/provider.js";import{useResizeColWidthHook as l}from"./resize-col-width-hook.js";function s(s){var n=r(s.columnKey),m=l({initialWidth:n.initialWidth,minWidth:n.minWidth}),a=m.colWidth,c=m.onMouseDownResizeWidth;return e("th",{className:"relative",style:{minWidth:a},children:[e("div",{className:"flex justify-between items-center bg-gray-200 text-gray-600 h-[32px] min-w-fit",children:[i("div",{className:"px-2",children:n.label&&i("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20",children:n.label})}),e("div",{className:"flex items-center gap-1 px-1",children:[!n.disableSort&&i(o,{columnKey:s.columnKey}),!n.disableFilter&&i(t,{columnKey:s.columnKey})]})]}),i("div",{className:"absolute top-0 right-0 grid place-items-end py-1 w-[4px] h-full cursor-col-resize",onMouseDown:c,children:i("div",{className:"w-[1px] h-full bg-white"})})]})}export{s as TableHeaderElement};
|
|
2
|
+
//# sourceMappingURL=header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../../../src/table/header/header.tsx"],"sourcesContent":["import { TableFilter } from \"../filter\";\nimport { useColumnContext } from \"../sheet\";\nimport { SortButton } from \"../sort\";\nimport { useResizeColWidthHook } from \"./resize-col-width-hook\";\n\ntype TPropsTableHeader = {\n columnKey: string;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n const col = useColumnContext(props.columnKey);\n const { colWidth, onMouseDownResizeWidth } = useResizeColWidthHook({\n initialWidth: col.initialWidth,\n minWidth: col.minWidth,\n });\n\n return (\n <th className=\"relative\" style={{ minWidth: colWidth }}>\n <div\n className={`flex justify-between items-center bg-gray-200 text-gray-600 h-[32px] min-w-fit`}\n >\n <div className=\"px-2\">\n {col.label && (\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20`}\n >\n {col.label}\n </p>\n )}\n </div>\n\n <div className=\"flex items-center gap-1 px-1\">\n {!col.disableSort && <SortButton columnKey={props.columnKey} />}\n {!col.disableFilter && <TableFilter columnKey={props.columnKey} />}\n </div>\n </div>\n <div\n className=\"absolute top-0 right-0 grid place-items-end py-1 w-[4px] h-full cursor-col-resize\"\n onMouseDown={onMouseDownResizeWidth}\n >\n <div className={`w-[1px] h-full bg-white`} />\n </div>\n </th>\n );\n}\n"],"names":["TableHeaderElement","props","col","useColumnContext","columnKey","_a","useResizeColWidthHook","initialWidth","minWidth","colWidth","onMouseDownResizeWidth","_jsxs","className","style","children","_jsx","label","disableSort","SortButton","disableFilter","TableFilter","onMouseDown"],"mappings":"iVASM,SAAUA,EAAmBC,GACjC,IAAMC,EAAMC,EAAiBF,EAAMG,WAC7BC,EAAuCC,EAAsB,CACjEC,aAAcL,EAAIK,aAClBC,SAAUN,EAAIM,WAFRC,EAAQJ,EAAAI,SAAEC,2BAKlB,OACEC,QAAIC,UAAU,WAAWC,MAAO,CAAEL,SAAUC,aAC1CE,EACE,MAAA,CAAAC,UAAW,iFAAgFE,SAAA,CAE3FC,SAAKH,UAAU,OACZE,SAAAZ,EAAIc,OACHD,EACE,IAAA,CAAAH,UAAW,iFAAgFE,SAE1FZ,EAAIc,UAKXL,EAAK,MAAA,CAAAC,UAAU,+BACZE,SAAA,EAACZ,EAAIe,aAAeF,EAACG,GAAWd,UAAWH,EAAMG,aAChDF,EAAIiB,eAAiBJ,EAACK,EAAY,CAAAhB,UAAWH,EAAMG,kBAGzDW,SACEH,UAAU,oFACVS,YAAaX,EAAsBI,SAEnCC,SAAKH,UAAW,gCAIxB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useState as e,useCallback as o}from"react";import{DEFAULT_COL_WIDTH as n,DEFAULT_MIN_COL_WIDTH as t}from"../constant.js";function i(i){var u,d=e(null!==(u=null==i?void 0:i.initialWidth)&&void 0!==u?u:n),l=d[0],r=d[1],m=o((function(e){var o=e.clientX,n=l;document.body.style.cursor="col-resize",document.body.style.userSelect="none";var u=function(e){var u,d,l=n+(e.clientX-o);r(l>(null!==(u=null==i?void 0:i.minWidth)&&void 0!==u?u:t)?l:null!==(d=null==i?void 0:i.minWidth)&&void 0!==d?d:t)},d=function(){document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",d),document.body.style.cursor="default",document.body.style.userSelect="auto"};document.addEventListener("mousemove",u),document.addEventListener("mouseup",d)}),[l,null==i?void 0:i.minWidth]);return{colWidth:l,onMouseDownResizeWidth:m}}export{i as useResizeColWidthHook};
|
|
2
|
+
//# sourceMappingURL=resize-col-width-hook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resize-col-width-hook.js","sources":["../../../../../src/table/header/resize-col-width-hook.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { DEFAULT_COL_WIDTH, DEFAULT_MIN_COL_WIDTH } from \"../constant\";\n\nexport function useResizeColWidthHook(options?: {\n initialWidth?: number;\n minWidth?: number;\n}) {\n const [colWidth, setColWidth] = useState(\n options?.initialWidth ?? DEFAULT_COL_WIDTH\n );\n\n const cursorStyle = \"col-resize\";\n\n const onMouseDownResizeWidth: React.MouseEventHandler<HTMLDivElement> =\n useCallback(\n (e) => {\n const startX = e.clientX;\n const startWidth = colWidth;\n\n document.body.style.cursor = cursorStyle;\n document.body.style.userSelect = \"none\";\n\n const onMouseMove = (moveEvent: MouseEvent) => {\n const newWidth = startWidth + (moveEvent.clientX - startX);\n setColWidth(\n newWidth > (options?.minWidth ?? DEFAULT_MIN_COL_WIDTH)\n ? newWidth\n : options?.minWidth ?? DEFAULT_MIN_COL_WIDTH\n );\n };\n\n const onMouseUp = () => {\n document.removeEventListener(\"mousemove\", onMouseMove);\n document.removeEventListener(\"mouseup\", onMouseUp);\n document.body.style.cursor = \"default\";\n document.body.style.userSelect = \"auto\";\n };\n\n document.addEventListener(\"mousemove\", onMouseMove);\n document.addEventListener(\"mouseup\", onMouseUp);\n },\n [colWidth, options?.minWidth]\n );\n\n return {\n colWidth,\n onMouseDownResizeWidth,\n };\n}\n"],"names":["useResizeColWidthHook","options","_b","useState","_a","initialWidth","DEFAULT_COL_WIDTH","colWidth","setColWidth","onMouseDownResizeWidth","useCallback","e","startX","clientX","startWidth","document","body","style","cursor","userSelect","onMouseMove","moveEvent","newWidth","minWidth","DEFAULT_MIN_COL_WIDTH","onMouseUp","removeEventListener","addEventListener"],"mappings":"gIAGM,SAAUA,EAAsBC,SAI9BC,EAA0BC,EACL,QAAzBC,EAAAH,eAAAA,EAASI,oBAAgB,IAAAD,EAAAA,EAAAE,GADpBC,OAAUC,OAMXC,EACJC,GACE,SAACC,GACC,IAAMC,EAASD,EAAEE,QACXC,EAAaP,EAEnBQ,SAASC,KAAKC,MAAMC,OARN,aASdH,SAASC,KAAKC,MAAME,WAAa,OAEjC,IAAMC,EAAc,SAACC,WACbC,EAAWR,GAAcO,EAAUR,QAAUD,GACnDJ,EACEc,GAA6B,UAAjBrB,aAAO,EAAPA,EAASsB,gBAAQ,IAAAnB,EAAAA,EAAIoB,GAC7BF,EACiB,QAAjBpB,EAAAD,aAAO,EAAPA,EAASsB,gBAAQ,IAAArB,EAAAA,EAAIsB,EAE7B,EAEMC,EAAY,WAChBV,SAASW,oBAAoB,YAAaN,GAC1CL,SAASW,oBAAoB,UAAWD,GACxCV,SAASC,KAAKC,MAAMC,OAAS,UAC7BH,SAASC,KAAKC,MAAME,WAAa,MACnC,EAEAJ,SAASY,iBAAiB,YAAaP,GACvCL,SAASY,iBAAiB,UAAWF,EACtC,GACD,CAAClB,EAAUN,aAAO,EAAPA,EAASsB,WAGxB,MAAO,CACLhB,SAAQA,EACRE,uBAAsBA,EAE1B"}
|
package/dist/index.d.ts
CHANGED
|
@@ -51,6 +51,8 @@ type TTableColumn<T extends DataRecord> = {
|
|
|
51
51
|
label?: string;
|
|
52
52
|
disableSort?: boolean;
|
|
53
53
|
disableFilter?: boolean;
|
|
54
|
+
initialWidth?: number;
|
|
55
|
+
minWidth?: number;
|
|
54
56
|
} & TCellEditingCondition<T>;
|
|
55
57
|
type TCheckboxProperty<T extends DataRecord> = {
|
|
56
58
|
checkbox?: {
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("./filter/provider.js");var r=require("./filter/components.js"),t=require("./sheet/providers.js"),s=require("./sort/components.js");require("./sort/provider.js"),exports.TableHeaderElement=function(l){var i=t.useColumnContext(l.columnKey);return e.jsxs("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[i.label&&e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20",children:i.label})}),e.jsxs("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[!i.disableSort&&e.jsx(s.SortButton,{columnKey:l.columnKey}),!i.disableFilter&&e.jsx(r.TableFilter,{columnKey:l.columnKey})]})]})};
|
|
2
|
-
//# sourceMappingURL=header.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["import { TableFilter } from \"./filter\";\nimport { useColumnContext } from \"./sheet\";\nimport { SortButton } from \"./sort\";\n\ntype TPropsTableHeader = {\n columnKey: string;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n const col = useColumnContext(props.columnKey);\n\n return (\n <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n {col.label && (\n <div className=\"px-2\">\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20`}\n >\n {col.label}\n </p>\n </div>\n )}\n\n <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n {!col.disableSort && <SortButton columnKey={props.columnKey} />}\n {!col.disableFilter && <TableFilter columnKey={props.columnKey} />}\n </div>\n </th>\n );\n}\n"],"names":["props","col","useColumnContext","columnKey","_jsxs","className","children","label","_jsx","jsx","jsxs","disableSort","SortButton","disableFilter","TableFilter"],"mappings":"qPAQM,SAA6BA,GACjC,IAAMC,EAAMC,EAAAA,iBAAiBF,EAAMG,WAEnC,OACEC,OAAA,KAAA,CAAIC,UAAW,8CAA6CC,SAAA,CACzDL,EAAIM,OACHC,MAAA,MAAA,CAAKH,UAAU,OACbC,SAAAE,EAAAC,IAAA,IAAA,CACEJ,UAAW,iFAAgFC,SAE1FL,EAAIM,UAKXH,EAAAM,KAAA,MAAA,CAAKL,UAAU,oEACZC,SAAA,EAACL,EAAIU,aAAeH,EAAAA,IAACI,EAAUA,WAAC,CAAAT,UAAWH,EAAMG,aAChDF,EAAIY,eAAiBL,EAACC,IAAAK,EAAWA,aAACX,UAAWH,EAAMG,iBAI7D"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import"./filter/provider.js";import{TableFilter as t}from"./filter/components.js";import{useColumnContext as o}from"./sheet/providers.js";import{SortButton as l}from"./sort/components.js";import"./sort/provider.js";function i(i){var s=o(i.columnKey);return e("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[s.label&&r("div",{className:"px-2",children:r("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20",children:s.label})}),e("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[!s.disableSort&&r(l,{columnKey:i.columnKey}),!s.disableFilter&&r(t,{columnKey:i.columnKey})]})]})}export{i as TableHeaderElement};
|
|
2
|
-
//# sourceMappingURL=header.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["import { TableFilter } from \"./filter\";\nimport { useColumnContext } from \"./sheet\";\nimport { SortButton } from \"./sort\";\n\ntype TPropsTableHeader = {\n columnKey: string;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n const col = useColumnContext(props.columnKey);\n\n return (\n <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n {col.label && (\n <div className=\"px-2\">\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20`}\n >\n {col.label}\n </p>\n </div>\n )}\n\n <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n {!col.disableSort && <SortButton columnKey={props.columnKey} />}\n {!col.disableFilter && <TableFilter columnKey={props.columnKey} />}\n </div>\n </th>\n );\n}\n"],"names":["TableHeaderElement","props","col","useColumnContext","columnKey","_jsxs","className","children","label","_jsx","disableSort","SortButton","disableFilter","TableFilter"],"mappings":"yQAQM,SAAUA,EAAmBC,GACjC,IAAMC,EAAMC,EAAiBF,EAAMG,WAEnC,OACEC,EAAA,KAAA,CAAIC,UAAW,8CAA6CC,SAAA,CACzDL,EAAIM,OACHC,EAAA,MAAA,CAAKH,UAAU,OACbC,SAAAE,EAAA,IAAA,CACEH,UAAW,iFAAgFC,SAE1FL,EAAIM,UAKXH,EAAA,MAAA,CAAKC,UAAU,oEACZC,SAAA,EAACL,EAAIQ,aAAeD,EAACE,EAAW,CAAAP,UAAWH,EAAMG,aAChDF,EAAIU,eAAiBH,EAACI,GAAYT,UAAWH,EAAMG,iBAI7D"}
|