@teppen/react-ui 0.7.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,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("./hook.js"),l=require("./cell.js"),s=require("./sort.js"),n=require("./header.js"),i=require("./page.js"),o=require("./filter.js"),a=require("react"),c=require("./filter-form.js");function d(d){var u=t.useTable(d),x=u.cols,j=u.rows,m=u.rowCount,h=u.sortKey,p=u.sortOrder,v=u.page,f=v.count,b=v.current,y=v.from,g=v.to,N=v.next,k=v.prev,C=v.jump,q=a.useState(!1),
|
|
2
|
+
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("./hook.js"),l=require("./cell.js"),s=require("./sort.js"),n=require("./header.js"),i=require("./page.js"),o=require("./filter.js"),a=require("react"),c=require("./filter-form.js");function d(d){var u=t.useTable(d),x=u.cols,j=u.rows,m=u.rowCount,h=u.sortKey,p=u.sortOrder,v=u.page,f=v.count,b=v.current,y=v.from,g=v.to,N=v.next,k=v.prev,C=v.jump,q=a.useState(!1),w=q[0],T=q[1];return r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end",children:r.jsx(o.TableFilterRemoveButton,{children:"remove all filters"})}),r.jsx("div",{className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:r.jsxs("table",{className:"table table-auto w-full",children:[r.jsx("thead",{children:r.jsx("tr",{className:"sticky top-0 border-gray-200 z-20",children:x.map((function(e){return r.jsx(n.TableHeaderElement,{label:e.label,sortConponent:"component"!==e.type?r.jsx(s.Sort,{onClick:e.onClick,isSortedByThis:h===e.key,sortOrder:p}):void 0,filterComponent:"component"!==e.type?r.jsx(o.TableFilter,{keyName:e.key,onClick:function(e){e.preventDefault(),T((function(e){return!e}))}}):void 0},e.key)}))})}),r.jsxs("tbody",{children:[w&&r.jsx("tr",{children:r.jsx("td",{colSpan:x.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl py-5 px-2 z-20",children:r.jsx("div",{className:"container max-w-[768px] mx-auto",children:r.jsxs("div",{className:"relative",children:[r.jsx("div",{className:"absolute top-0 right-0",children:r.jsx("button",{onClick:function(e){e.preventDefault(),T(!1)},children:"close"})}),r.jsx("div",{children:r.jsx(c.TableFilterForm,{cols:x})})]})})})}),0===j.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:x.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),j.map((function(t){var s;return r.jsx("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(s=j[0])||void 0===s?void 0:s.onClick)?"hover:cursor-pointer":""),onClick:t.onClick,"data-testid":t.id,children:x.map((function(s){return r.jsx(l.TableCell,e.__assign({},s,{columnKey:s.key,currentRecord:t,children:t[s.key]}))}))},t.id)}))]})]})}),r.jsxs("div",{className:"mt-1",children:[r.jsxs("p",{className:"text-center text-sm text-gray-600",children:[y+1," - ",g<m?g:m," of ",m]}),r.jsx("div",{className:"mt-2",children:r.jsx(i.Pagenation,{count:f,current:b,jump:C,next:N,prev:k})})]})]})}module.exports=function(t){return r.jsx(o.TableFilterProvider,{children:r.jsx(d,e.__assign({},t))})};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");exports.TableHeaderElement=function(t){return e.jsxs("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[80%] min-w-20",children:t.label})}),t.label&&
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");exports.TableHeaderElement=function(t){return e.jsxs("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[t.label&&e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis ".concat(t.filterComponent&&t.sortConponent?"w-[80%] min-w-20":t.filterComponent||t.sortConponent?"w-[90%] min-w-20":"min-w-10"," "),children:t.label})}),t.label&&e.jsxs("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[t.filterComponent&&t.filterComponent,t.sortConponent&&t.sortConponent]})]})};
|
|
2
2
|
//# sourceMappingURL=header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n label?: string;\n
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n label?: string;\n sortConponent?: JSX.Element;\n filterComponent?: JSX.Element;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n return (\n <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n {props.label && (\n <div className=\"px-2\">\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis ${\n props.filterComponent && props.sortConponent\n ? \"w-[80%] min-w-20\"\n : !props.filterComponent && !props.sortConponent\n ? \"min-w-10\"\n : \"w-[90%] min-w-20\"\n } `}\n >\n {props.label}\n </p>\n </div>\n )}\n\n {props.label && (\n <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n {props.filterComponent && props.filterComponent}\n {props.sortConponent && props.sortConponent}\n </div>\n )}\n </th>\n );\n}\n"],"names":["props","_jsxs","className","children","label","_jsx","jsx","concat","filterComponent","sortConponent"],"mappings":"2EAMM,SAA6BA,GACjC,OACEC,OAAI,KAAA,CAAAC,UAAW,8CACZC,SAAA,CAAAH,EAAMI,OACLC,EAAKC,IAAA,MAAA,CAAAJ,UAAU,OAAMC,SACnBE,MACE,IAAA,CAAAH,UAAW,iEAAAK,OACTP,EAAMQ,iBAAmBR,EAAMS,cAC3B,mBACCT,EAAMQ,iBAAoBR,EAAMS,cAEjC,mBADA,WACkB,cAGvBT,EAAMI,UAKZJ,EAAMI,OACLH,EAAAA,KAAA,MAAA,CAAKC,UAAU,oEACZC,SAAA,CAAAH,EAAMQ,iBAAmBR,EAAMQ,gBAC/BR,EAAMS,eAAiBT,EAAMS,mBAKxC"}
|
|
@@ -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 t}from"react/jsx-runtime";import{useTable as o}from"./hook.js";import{TableCell as l}from"./cell.js";import{Sort as n}from"./sort.js";import{TableHeaderElement as i}from"./header.js";import{Pagenation as c}from"./page.js";import{TableFilterProvider as a,TableFilterRemoveButton as d,TableFilter as s}from"./filter.js";import{useState as m}from"react";import{TableFilterForm as u}from"./filter-form.js";function p(t){return r(a,{children:r(f,e({},t))})}function f(a){var p=o(a),f=p.cols,h=p.rows,v=p.rowCount,y=p.sortKey,b=p.sortOrder,N=p.page,g=N.count,k=N.current,x=N.from,j=N.to,C=N.next,w=N.prev,D=N.jump,O=m(!1),S=O[0],
|
|
2
|
+
import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{useTable as o}from"./hook.js";import{TableCell as l}from"./cell.js";import{Sort as n}from"./sort.js";import{TableHeaderElement as i}from"./header.js";import{Pagenation as c}from"./page.js";import{TableFilterProvider as a,TableFilterRemoveButton as d,TableFilter as s}from"./filter.js";import{useState as m}from"react";import{TableFilterForm as u}from"./filter-form.js";function p(t){return r(a,{children:r(f,e({},t))})}function f(a){var p=o(a),f=p.cols,h=p.rows,v=p.rowCount,y=p.sortKey,b=p.sortOrder,N=p.page,g=N.count,k=N.current,x=N.from,j=N.to,C=N.next,w=N.prev,D=N.jump,O=m(!1),S=O[0],z=O[1];return t("div",{className:"w-full",children:[r("div",{className:"flex justify-end",children:r(d,{children:"remove all filters"})}),r("div",{className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:t("table",{className:"table table-auto w-full",children:[r("thead",{children:r("tr",{className:"sticky top-0 border-gray-200 z-20",children:f.map((function(e){return r(i,{label:e.label,sortConponent:"component"!==e.type?r(n,{onClick:e.onClick,isSortedByThis:y===e.key,sortOrder:b}):void 0,filterComponent:"component"!==e.type?r(s,{keyName:e.key,onClick:function(e){e.preventDefault(),z((function(e){return!e}))}}):void 0},e.key)}))})}),t("tbody",{children:[S&&r("tr",{children:r("td",{colSpan:f.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl py-5 px-2 z-20",children:r("div",{className:"container max-w-[768px] mx-auto",children:t("div",{className:"relative",children:[r("div",{className:"absolute top-0 right-0",children:r("button",{onClick:function(e){e.preventDefault(),z(!1)},children:"close"})}),r("div",{children:r(u,{cols:f})})]})})})}),0===h.length&&r("tr",{children:r("td",{colSpan:f.length,className:"py-5",children:r("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),h.map((function(t){var o;return r("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(o=h[0])||void 0===o?void 0:o.onClick)?"hover:cursor-pointer":""),onClick:t.onClick,"data-testid":t.id,children:f.map((function(o){return r(l,e({},o,{columnKey:o.key,currentRecord:t,children:t[o.key]}))}))},t.id)}))]})]})}),t("div",{className:"mt-1",children:[t("p",{className:"text-center text-sm text-gray-600",children:[x+1," - ",j<v?j:v," of ",v]}),r("div",{className:"mt-2",children:r(c,{count:g,current:k,jump:D,next:C,prev:w})})]})]})}export{p as default};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";function n(n){return e("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[t("div",{className:"px-2",children:t("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[80%] min-w-20",children:n.label})}),n.label&&
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";function n(n){return e("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[n.label&&t("div",{className:"px-2",children:t("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis ".concat(n.filterComponent&&n.sortConponent?"w-[80%] min-w-20":n.filterComponent||n.sortConponent?"w-[90%] min-w-20":"min-w-10"," "),children:n.label})}),n.label&&e("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[n.filterComponent&&n.filterComponent,n.sortConponent&&n.sortConponent]})]})}export{n as TableHeaderElement};
|
|
2
2
|
//# sourceMappingURL=header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n label?: string;\n
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n label?: string;\n sortConponent?: JSX.Element;\n filterComponent?: JSX.Element;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n return (\n <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n {props.label && (\n <div className=\"px-2\">\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis ${\n props.filterComponent && props.sortConponent\n ? \"w-[80%] min-w-20\"\n : !props.filterComponent && !props.sortConponent\n ? \"min-w-10\"\n : \"w-[90%] min-w-20\"\n } `}\n >\n {props.label}\n </p>\n </div>\n )}\n\n {props.label && (\n <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n {props.filterComponent && props.filterComponent}\n {props.sortConponent && props.sortConponent}\n </div>\n )}\n </th>\n );\n}\n"],"names":["TableHeaderElement","props","_jsxs","className","children","label","_jsx","concat","filterComponent","sortConponent"],"mappings":"kDAMM,SAAUA,EAAmBC,GACjC,OACEC,EAAI,KAAA,CAAAC,UAAW,8CACZC,SAAA,CAAAH,EAAMI,OACLC,EAAK,MAAA,CAAAH,UAAU,OAAMC,SACnBE,EACE,IAAA,CAAAH,UAAW,iEAAAI,OACTN,EAAMO,iBAAmBP,EAAMQ,cAC3B,mBACCR,EAAMO,iBAAoBP,EAAMQ,cAEjC,mBADA,WACkB,cAGvBR,EAAMI,UAKZJ,EAAMI,OACLH,EAAA,MAAA,CAAKC,UAAU,oEACZC,SAAA,CAAAH,EAAMO,iBAAmBP,EAAMO,gBAC/BP,EAAMQ,eAAiBR,EAAMQ,mBAKxC"}
|