@teppen/react-ui 0.2.0 → 0.3.0
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/hook.js +1 -1
- package/dist/cjs/src/table/hook.js.map +1 -1
- package/dist/cjs/src/table/page.js +2 -0
- package/dist/cjs/src/table/page.js.map +1 -0
- package/dist/esm/src/table/base.js +1 -1
- package/dist/esm/src/table/hook.js +1 -1
- package/dist/esm/src/table/hook.js.map +1 -1
- package/dist/esm/src/table/page.js +2 -0
- package/dist/esm/src/table/page.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("./hook.js"),
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("./hook.js"),t=require("./cell.js"),s=require("./sort.js"),l=require("./header.js"),o=require("./page.js");module.exports=function(n){var a=r.useTable(n),i=a.cols,c=a.rows,d=a.sortKey,u=a.sortOrder,h=a.page,j=h.count,x=h.current,m=h.from,b=h.to,v=h.next,p=h.prev,y=h.jump;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:e.jsxs("table",{className:"table table-auto w-full",children:[e.jsx("thead",{children:e.jsx("tr",{className:"sticky top-0 border-gray-200",children:i.map((function(r){return e.jsx(l.TableHeaderElement,{label:r.label,sortConponent:e.jsx(s.Sort,{onClick:r.onClick,isSortedByThis:d===r.key,sortOrder:u})},r.key)}))})}),e.jsx("tbody",{children:c.map((function(r){var s;return e.jsx("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(s=c[0])||void 0===s?void 0:s.onClick)?"hover:cursor-pointer":""),onClick:r.onClick,"data-testid":r.id,children:i.map((function(s){return e.jsx("td",{children:e.jsx(t.TableCell,{children:r[s.key]},s.key)},s.key)}))},r.id)}))})]})}),e.jsxs("div",{className:"mt-1",children:[e.jsxs("p",{className:"text-center text-sm text-gray-600",children:[m+1," - ",b<n.rows.length?b:n.rows.length," of"," ",n.rows.length]}),e.jsx("div",{className:"mt-2",children:e.jsx(o.Pagenation,{count:j,current:x,jump:y,next:v,prev:p})})]})]})};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react");exports.useTable=function(
|
|
1
|
+
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react"),o=require("./page.js");exports.useTable=function(t){var n=r.useState({key:"id",order:"ASC"}),u=n[0],s=n[1],a=o.usePageReducer({perPage:50,currentPage:1,rowCount:t.rows.length}),c=a.currentPage,i=a.pageCount,y=a.from,d=a.to,k=a.next,p=a.prev,g=a.jump,l=t.cols,C=t.rows,f=r.useMemo((function(){return e.__spreadArray([],C,!0).sort((function(e,r){return e[u.key]<r[u.key]?"ASC"===u.order?-1:1:e[u.key]>r[u.key]?"ASC"===u.order?1:-1:0}))}),[C,u.key,u.order]),m=r.useMemo((function(){return f.slice(y,d)}),[y,d,f]);return{cols:l.map((function(r){return e.__assign(e.__assign({},r),{onClick:function(e){e.preventDefault(),u.key===r.key?s({key:r.key,order:"ASC"===u.order?"DESC":"ASC"}):s({key:r.key,order:"ASC"})}})})),rows:m,sortKey:u.key,sortOrder:u.order,page:{from:y,to:d,count:i,current:c,next:k,prev:p,jump:g}}};
|
|
2
2
|
//# sourceMappingURL=hook.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { DataObject, TPropsTable } from \"./type\";\n\ntype State = {\n key: string;\n order: \"ASC\" | \"DESC\";\n};\n\nexport function useTable<T extends DataObject>(props: TPropsTable<T>) {\n const [key, changeKey] = useState<State>({ key: \"id\", order: \"ASC\" });\n const { cols, rows } = props;\n\n const sortedRows = [...rows].sort((a, b) => {\n
|
|
1
|
+
{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { DataObject, TPropsTable } from \"./type\";\nimport { usePageReducer } from \"./page\";\n\ntype State = {\n key: string;\n order: \"ASC\" | \"DESC\";\n};\n\nexport function useTable<T extends DataObject>(props: TPropsTable<T>) {\n const [key, changeKey] = useState<State>({ key: \"id\", order: \"ASC\" });\n const { currentPage, pageCount, from, to, next, prev, jump } = usePageReducer(\n {\n perPage: 50,\n currentPage: 1,\n rowCount: props.rows.length,\n }\n );\n\n const { cols, rows } = props;\n\n const sortedRows = useMemo(\n () =>\n [...rows].sort((a, b) => {\n if (a[key.key] < b[key.key]) {\n return key.order === \"ASC\" ? -1 : 1;\n }\n if (a[key.key] > b[key.key]) {\n return key.order === \"ASC\" ? 1 : -1;\n }\n return 0;\n }),\n [rows, key.key, key.order]\n );\n\n const pagedRows = useMemo(\n () => sortedRows.slice(from, to),\n [from, to, sortedRows]\n );\n\n const colsWithSort = cols.map((col) => ({\n ...col,\n onClick: (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n if (key.key === col.key) {\n changeKey({\n key: col.key,\n order: key.order === \"ASC\" ? \"DESC\" : \"ASC\",\n });\n } else {\n changeKey({ key: col.key, order: \"ASC\" });\n }\n },\n }));\n\n return {\n cols: colsWithSort,\n rows: pagedRows,\n sortKey: key.key,\n sortOrder: key.order,\n page: {\n from,\n to,\n count: pageCount,\n current: currentPage,\n next,\n prev,\n jump,\n },\n };\n}\n"],"names":["props","_a","useState","key","order","changeKey","_b","usePageReducer","perPage","currentPage","rowCount","rows","length","pageCount","from","to","next","prev","jump","cols","sortedRows","useMemo","__spreadArray","sort","a","b","pagedRows","slice","map","col","onClick","e","preventDefault","sortKey","sortOrder","page","count","current"],"mappings":"+HASM,SAAyCA,GACvC,IAAAC,EAAmBC,EAAAA,SAAgB,CAAEC,IAAK,KAAMC,MAAO,QAAtDD,OAAKE,OACNC,EAAyDC,EAAAA,eAC7D,CACEC,QAAS,GACTC,YAAa,EACbC,SAAUV,EAAMW,KAAKC,SAJjBH,EAAWH,EAAAG,YAAEI,EAASP,EAAAO,UAAEC,EAAIR,EAAAQ,KAAEC,EAAET,EAAAS,GAAEC,EAAIV,EAAAU,KAAEC,EAAIX,EAAAW,KAAEC,EAAIZ,EAAAY,KAQlDC,EAAenB,EAAKmB,KAAdR,EAASX,EAAKW,KAEtBS,EAAaC,EAAAA,SACjB,WACE,OAAAC,EAAAA,cAAA,GAAIX,GAAM,GAAAY,MAAK,SAACC,EAAGC,GACjB,OAAID,EAAErB,EAAIA,KAAOsB,EAAEtB,EAAIA,KACA,QAAdA,EAAIC,OAAmB,EAAI,EAEhCoB,EAAErB,EAAIA,KAAOsB,EAAEtB,EAAIA,KACA,QAAdA,EAAIC,MAAkB,GAAK,EAE7B,CACT,GARA,GASF,CAACO,EAAMR,EAAIA,IAAKA,EAAIC,QAGhBsB,EAAYL,EAAOA,SACvB,WAAM,OAAAD,EAAWO,MAAMb,EAAMC,EAAG,GAChC,CAACD,EAAMC,EAAIK,IAkBb,MAAO,CACLD,KAhBmBA,EAAKS,KAAI,SAACC,GAAQ,gCAClCA,GAAG,CACNC,QAAS,SAACC,GACRA,EAAEC,iBACE7B,EAAIA,MAAQ0B,EAAI1B,IAClBE,EAAU,CACRF,IAAK0B,EAAI1B,IACTC,MAAqB,QAAdD,EAAIC,MAAkB,OAAS,QAGxCC,EAAU,CAAEF,IAAK0B,EAAI1B,IAAKC,MAAO,OAErC,GACA,IAIAO,KAAMe,EACNO,QAAS9B,EAAIA,IACb+B,UAAW/B,EAAIC,MACf+B,KAAM,CACJrB,KAAIA,EACJC,GAAEA,EACFqB,MAAOvB,EACPwB,QAAS5B,EACTO,KAAIA,EACJC,KAAIA,EACJC,KAAIA,GAGV"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react");function n(r,t){switch(t.type){case"setRowCount":return e.__assign(e.__assign({},r),{rowCount:t.payload.rouCount});case"setPerPage":return e.__assign(e.__assign({},r),{perPage:t.payload.perPage});case"next":return r.currentPage===Math.ceil(r.rowCount/r.perPage)?r:e.__assign(e.__assign({},r),{currentPage:r.currentPage+1});case"prev":return 1===r.currentPage?r:e.__assign(e.__assign({},r),{currentPage:r.currentPage-1});case"jump":return t.payload.pageNumber<1||t.payload.pageNumber>Math.ceil(r.rowCount/r.perPage)||r.currentPage===t.payload.pageNumber?r:e.__assign(e.__assign({},r),{currentPage:t.payload.pageNumber});default:return r}}var u={perPage:50,currentPage:1,rowCount:0};var a=t.memo((function(e){return r.jsxs("div",{className:"flex justify-center gap-2",children:[r.jsx("button",{className:"text-sm",onClick:function(){return e.jump(1)},disabled:1===e.current,children:"≪"}),r.jsx("button",{className:"text-sm",onClick:function(){return e.prev()},disabled:1===e.current,children:"<"}),Array.from({length:e.count},(function(e,r){return r+1})).filter((function(r){return e.current-2<=r&&r<=e.current+2})).map((function(t){return r.jsx("button",{className:"text-sm ".concat(e.current===t?"text-blue-600":""),onClick:function(){return e.jump(t)},children:t},t)})),r.jsx("button",{className:"text-sm",onClick:function(){return e.next()},disabled:e.current===e.count,children:">"}),r.jsx("button",{className:"text-sm",onClick:function(){return e.jump(e.count)},disabled:e.current===e.count,children:"≫"})]})}));exports.Pagenation=a,exports.usePageReducer=function(e){var r=t.useReducer(n,null!=e?e:u),a=r[0],c=r[1],s=t.useCallback((function(){return c({type:"next"})}),[c]),o=t.useCallback((function(){return c({type:"prev"})}),[c]),i=t.useCallback((function(e){return c({type:"jump",payload:{pageNumber:e}})}),[c]);return{perPage:a.perPage,currentPage:a.currentPage,rowCount:a.rowCount,pageCount:Math.ceil(a.rowCount/a.perPage),from:(a.currentPage-1)*a.perPage,to:a.currentPage*a.perPage,next:s,prev:o,jump:i}};
|
|
2
|
+
//# sourceMappingURL=page.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"page.js","sources":["../../../../src/table/page.tsx"],"sourcesContent":["import { memo, useCallback, useReducer } from \"react\";\n\ntype TPage = {\n perPage: number;\n currentPage: number;\n rowCount: number;\n};\n\ntype TPageMoveAction =\n | { type: \"setRowCount\"; payload: { rouCount: number } }\n | { type: \"setPerPage\"; payload: { perPage: number } }\n | {\n type: \"next\";\n }\n | {\n type: \"prev\";\n }\n | {\n type: \"jump\";\n payload: { pageNumber: number };\n };\n\nfunction pageReducer(state: TPage, action: TPageMoveAction): TPage {\n switch (action.type) {\n case \"setRowCount\":\n return {\n ...state,\n rowCount: action.payload.rouCount,\n };\n case \"setPerPage\":\n return {\n ...state,\n perPage: action.payload.perPage,\n };\n case \"next\":\n if (state.currentPage === Math.ceil(state.rowCount / state.perPage)) {\n return state;\n }\n\n return {\n ...state,\n currentPage: state.currentPage + 1,\n };\n case \"prev\":\n if (state.currentPage === 1) {\n return state;\n }\n\n return {\n ...state,\n currentPage: state.currentPage - 1,\n };\n case \"jump\":\n if (\n action.payload.pageNumber < 1 ||\n action.payload.pageNumber > Math.ceil(state.rowCount / state.perPage) ||\n state.currentPage === action.payload.pageNumber\n ) {\n return state;\n }\n\n return {\n ...state,\n currentPage: action.payload.pageNumber,\n };\n default:\n return state;\n }\n}\n\nconst InitialPageState: TPage = {\n perPage: 50,\n currentPage: 1,\n rowCount: 0,\n};\n\nexport function usePageReducer(initialState?: TPage) {\n const [state, dispatch] = useReducer(\n pageReducer,\n initialState ?? InitialPageState\n );\n\n const next = useCallback(() => dispatch({ type: \"next\" }), [dispatch]);\n const prev = useCallback(() => dispatch({ type: \"prev\" }), [dispatch]);\n const jump = useCallback(\n (pageNumber: number) => dispatch({ type: \"jump\", payload: { pageNumber } }),\n [dispatch]\n );\n\n return {\n perPage: state.perPage,\n currentPage: state.currentPage,\n rowCount: state.rowCount,\n pageCount: Math.ceil(state.rowCount / state.perPage),\n from: (state.currentPage - 1) * state.perPage,\n to: state.currentPage * state.perPage,\n next,\n prev,\n jump,\n };\n}\n\ntype TPropsPagenation = {\n count: number;\n current: number;\n jump: (pageNumber: number) => void;\n next: () => void;\n prev: () => void;\n};\n\nexport const Pagenation = memo(function TablePagenation(\n props: TPropsPagenation\n) {\n return (\n <div className=\"flex justify-center gap-2\">\n <button\n className=\"text-sm\"\n onClick={() => props.jump(1)}\n disabled={props.current === 1}\n >\n ≪\n </button>\n <button\n className=\"text-sm\"\n onClick={() => props.prev()}\n disabled={props.current === 1}\n >\n <\n </button>\n {Array.from({ length: props.count }, (_, i) => i + 1)\n .filter((i) => props.current - 2 <= i && i <= props.current + 2)\n .map((i) => (\n <button\n key={i}\n className={`text-sm ${props.current === i ? \"text-blue-600\" : \"\"}`}\n onClick={() => props.jump(i)}\n >\n {i}\n </button>\n ))}\n <button\n className=\"text-sm\"\n onClick={() => props.next()}\n disabled={props.current === props.count}\n >\n >\n </button>\n <button\n className=\"text-sm\"\n onClick={() => props.jump(props.count)}\n disabled={props.current === props.count}\n >\n ≫\n </button>\n </div>\n );\n});\n"],"names":["pageReducer","state","action","type","__assign","rowCount","payload","rouCount","perPage","currentPage","Math","ceil","pageNumber","InitialPageState","Pagenation","memo","props","_jsxs","jsxs","className","_jsx","jsx","onClick","jump","disabled","current","prev","children","Array","from","length","count","_","i","filter","map","concat","next","initialState","_a","useReducer","dispatch","useCallback","pageCount","to"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{
|
|
2
|
+
import{jsxs as r,Fragment as e,jsx 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 a}from"./header.js";import{Pagenation as i}from"./page.js";function c(c){var d=o(c),s=d.cols,m=d.rows,h=d.sortKey,u=d.sortOrder,p=d.page,f=p.count,v=p.current,y=p.from,b=p.to,k=p.next,g=p.prev,j=p.jump;return r(e,{children:[t("div",{className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:r("table",{className:"table table-auto w-full",children:[t("thead",{children:t("tr",{className:"sticky top-0 border-gray-200",children:s.map((function(r){return t(a,{label:r.label,sortConponent:t(n,{onClick:r.onClick,isSortedByThis:h===r.key,sortOrder:u})},r.key)}))})}),t("tbody",{children:m.map((function(r){var e;return t("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(e=m[0])||void 0===e?void 0:e.onClick)?"hover:cursor-pointer":""),onClick:r.onClick,"data-testid":r.id,children:s.map((function(e){return t("td",{children:t(l,{children:r[e.key]},e.key)},e.key)}))},r.id)}))})]})}),r("div",{className:"mt-1",children:[r("p",{className:"text-center text-sm text-gray-600",children:[y+1," - ",b<c.rows.length?b:c.rows.length," of"," ",c.rows.length]}),t("div",{className:"mt-2",children:t(i,{count:f,current:v,jump:j,next:k,prev:g})})]})]})}export{c as default};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__spreadArray as r,__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{useState as o}from"react";function
|
|
1
|
+
import{__spreadArray as r,__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{useState as o,useMemo as t}from"react";import{usePageReducer as n}from"./page.js";function u(u){var c=o({key:"id",order:"ASC"}),s=c[0],i=c[1],k=n({perPage:50,currentPage:1,rowCount:u.rows.length}),p=k.currentPage,y=k.pageCount,d=k.from,f=k.to,m=k.next,a=k.prev,C=k.jump,l=u.cols,g=u.rows,S=t((function(){return r([],g,!0).sort((function(r,e){return r[s.key]<e[s.key]?"ASC"===s.order?-1:1:r[s.key]>e[s.key]?"ASC"===s.order?1:-1:0}))}),[g,s.key,s.order]),A=t((function(){return S.slice(d,f)}),[d,f,S]);return{cols:l.map((function(r){return e(e({},r),{onClick:function(e){e.preventDefault(),s.key===r.key?i({key:r.key,order:"ASC"===s.order?"DESC":"ASC"}):i({key:r.key,order:"ASC"})}})})),rows:A,sortKey:s.key,sortOrder:s.order,page:{from:d,to:f,count:y,current:p,next:m,prev:a,jump:C}}}export{u as useTable};
|
|
2
2
|
//# sourceMappingURL=hook.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { DataObject, TPropsTable } from \"./type\";\n\ntype State = {\n key: string;\n order: \"ASC\" | \"DESC\";\n};\n\nexport function useTable<T extends DataObject>(props: TPropsTable<T>) {\n const [key, changeKey] = useState<State>({ key: \"id\", order: \"ASC\" });\n const { cols, rows } = props;\n\n const sortedRows = [...rows].sort((a, b) => {\n
|
|
1
|
+
{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { DataObject, TPropsTable } from \"./type\";\nimport { usePageReducer } from \"./page\";\n\ntype State = {\n key: string;\n order: \"ASC\" | \"DESC\";\n};\n\nexport function useTable<T extends DataObject>(props: TPropsTable<T>) {\n const [key, changeKey] = useState<State>({ key: \"id\", order: \"ASC\" });\n const { currentPage, pageCount, from, to, next, prev, jump } = usePageReducer(\n {\n perPage: 50,\n currentPage: 1,\n rowCount: props.rows.length,\n }\n );\n\n const { cols, rows } = props;\n\n const sortedRows = useMemo(\n () =>\n [...rows].sort((a, b) => {\n if (a[key.key] < b[key.key]) {\n return key.order === \"ASC\" ? -1 : 1;\n }\n if (a[key.key] > b[key.key]) {\n return key.order === \"ASC\" ? 1 : -1;\n }\n return 0;\n }),\n [rows, key.key, key.order]\n );\n\n const pagedRows = useMemo(\n () => sortedRows.slice(from, to),\n [from, to, sortedRows]\n );\n\n const colsWithSort = cols.map((col) => ({\n ...col,\n onClick: (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n if (key.key === col.key) {\n changeKey({\n key: col.key,\n order: key.order === \"ASC\" ? \"DESC\" : \"ASC\",\n });\n } else {\n changeKey({ key: col.key, order: \"ASC\" });\n }\n },\n }));\n\n return {\n cols: colsWithSort,\n rows: pagedRows,\n sortKey: key.key,\n sortOrder: key.order,\n page: {\n from,\n to,\n count: pageCount,\n current: currentPage,\n next,\n prev,\n jump,\n },\n };\n}\n"],"names":["useTable","props","_a","useState","key","order","changeKey","_b","usePageReducer","perPage","currentPage","rowCount","rows","length","pageCount","from","to","next","prev","jump","cols","sortedRows","useMemo","__spreadArray","sort","a","b","pagedRows","slice","map","col","onClick","e","preventDefault","sortKey","sortOrder","page","count","current"],"mappings":"6KASM,SAAUA,EAA+BC,GACvC,IAAAC,EAAmBC,EAAgB,CAAEC,IAAK,KAAMC,MAAO,QAAtDD,OAAKE,OACNC,EAAyDC,EAC7D,CACEC,QAAS,GACTC,YAAa,EACbC,SAAUV,EAAMW,KAAKC,SAJjBH,EAAWH,EAAAG,YAAEI,EAASP,EAAAO,UAAEC,EAAIR,EAAAQ,KAAEC,EAAET,EAAAS,GAAEC,EAAIV,EAAAU,KAAEC,EAAIX,EAAAW,KAAEC,EAAIZ,EAAAY,KAQlDC,EAAenB,EAAKmB,KAAdR,EAASX,EAAKW,KAEtBS,EAAaC,GACjB,WACE,OAAAC,EAAA,GAAIX,GAAM,GAAAY,MAAK,SAACC,EAAGC,GACjB,OAAID,EAAErB,EAAIA,KAAOsB,EAAEtB,EAAIA,KACA,QAAdA,EAAIC,OAAmB,EAAI,EAEhCoB,EAAErB,EAAIA,KAAOsB,EAAEtB,EAAIA,KACA,QAAdA,EAAIC,MAAkB,GAAK,EAE7B,CACT,GARA,GASF,CAACO,EAAMR,EAAIA,IAAKA,EAAIC,QAGhBsB,EAAYL,GAChB,WAAM,OAAAD,EAAWO,MAAMb,EAAMC,EAAG,GAChC,CAACD,EAAMC,EAAIK,IAkBb,MAAO,CACLD,KAhBmBA,EAAKS,KAAI,SAACC,GAAQ,cAClCA,GAAG,CACNC,QAAS,SAACC,GACRA,EAAEC,iBACE7B,EAAIA,MAAQ0B,EAAI1B,IAClBE,EAAU,CACRF,IAAK0B,EAAI1B,IACTC,MAAqB,QAAdD,EAAIC,MAAkB,OAAS,QAGxCC,EAAU,CAAEF,IAAK0B,EAAI1B,IAAKC,MAAO,OAErC,GACA,IAIAO,KAAMe,EACNO,QAAS9B,EAAIA,IACb+B,UAAW/B,EAAIC,MACf+B,KAAM,CACJrB,KAAIA,EACJC,GAAEA,EACFqB,MAAOvB,EACPwB,QAAS5B,EACTO,KAAIA,EACJC,KAAIA,EACJC,KAAIA,GAGV"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import{memo as n,useReducer as u,useCallback as a}from"react";function c(r,t){switch(t.type){case"setRowCount":return e(e({},r),{rowCount:t.payload.rouCount});case"setPerPage":return e(e({},r),{perPage:t.payload.perPage});case"next":return r.currentPage===Math.ceil(r.rowCount/r.perPage)?r:e(e({},r),{currentPage:r.currentPage+1});case"prev":return 1===r.currentPage?r:e(e({},r),{currentPage:r.currentPage-1});case"jump":return t.payload.pageNumber<1||t.payload.pageNumber>Math.ceil(r.rowCount/r.perPage)||r.currentPage===t.payload.pageNumber?r:e(e({},r),{currentPage:t.payload.pageNumber});default:return r}}var o={perPage:50,currentPage:1,rowCount:0};function p(e){var r=u(c,null!=e?e:o),t=r[0],n=r[1],p=a((function(){return n({type:"next"})}),[n]),i=a((function(){return n({type:"prev"})}),[n]),l=a((function(e){return n({type:"jump",payload:{pageNumber:e}})}),[n]);return{perPage:t.perPage,currentPage:t.currentPage,rowCount:t.rowCount,pageCount:Math.ceil(t.rowCount/t.perPage),from:(t.currentPage-1)*t.perPage,to:t.currentPage*t.perPage,next:p,prev:i,jump:l}}var i=n((function(e){return r("div",{className:"flex justify-center gap-2",children:[t("button",{className:"text-sm",onClick:function(){return e.jump(1)},disabled:1===e.current,children:"≪"}),t("button",{className:"text-sm",onClick:function(){return e.prev()},disabled:1===e.current,children:"<"}),Array.from({length:e.count},(function(e,r){return r+1})).filter((function(r){return e.current-2<=r&&r<=e.current+2})).map((function(r){return t("button",{className:"text-sm ".concat(e.current===r?"text-blue-600":""),onClick:function(){return e.jump(r)},children:r},r)})),t("button",{className:"text-sm",onClick:function(){return e.next()},disabled:e.current===e.count,children:">"}),t("button",{className:"text-sm",onClick:function(){return e.jump(e.count)},disabled:e.current===e.count,children:"≫"})]})}));export{i as Pagenation,p as usePageReducer};
|
|
2
|
+
//# sourceMappingURL=page.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"page.js","sources":["../../../../src/table/page.tsx"],"sourcesContent":["import { memo, useCallback, useReducer } from \"react\";\n\ntype TPage = {\n perPage: number;\n currentPage: number;\n rowCount: number;\n};\n\ntype TPageMoveAction =\n | { type: \"setRowCount\"; payload: { rouCount: number } }\n | { type: \"setPerPage\"; payload: { perPage: number } }\n | {\n type: \"next\";\n }\n | {\n type: \"prev\";\n }\n | {\n type: \"jump\";\n payload: { pageNumber: number };\n };\n\nfunction pageReducer(state: TPage, action: TPageMoveAction): TPage {\n switch (action.type) {\n case \"setRowCount\":\n return {\n ...state,\n rowCount: action.payload.rouCount,\n };\n case \"setPerPage\":\n return {\n ...state,\n perPage: action.payload.perPage,\n };\n case \"next\":\n if (state.currentPage === Math.ceil(state.rowCount / state.perPage)) {\n return state;\n }\n\n return {\n ...state,\n currentPage: state.currentPage + 1,\n };\n case \"prev\":\n if (state.currentPage === 1) {\n return state;\n }\n\n return {\n ...state,\n currentPage: state.currentPage - 1,\n };\n case \"jump\":\n if (\n action.payload.pageNumber < 1 ||\n action.payload.pageNumber > Math.ceil(state.rowCount / state.perPage) ||\n state.currentPage === action.payload.pageNumber\n ) {\n return state;\n }\n\n return {\n ...state,\n currentPage: action.payload.pageNumber,\n };\n default:\n return state;\n }\n}\n\nconst InitialPageState: TPage = {\n perPage: 50,\n currentPage: 1,\n rowCount: 0,\n};\n\nexport function usePageReducer(initialState?: TPage) {\n const [state, dispatch] = useReducer(\n pageReducer,\n initialState ?? InitialPageState\n );\n\n const next = useCallback(() => dispatch({ type: \"next\" }), [dispatch]);\n const prev = useCallback(() => dispatch({ type: \"prev\" }), [dispatch]);\n const jump = useCallback(\n (pageNumber: number) => dispatch({ type: \"jump\", payload: { pageNumber } }),\n [dispatch]\n );\n\n return {\n perPage: state.perPage,\n currentPage: state.currentPage,\n rowCount: state.rowCount,\n pageCount: Math.ceil(state.rowCount / state.perPage),\n from: (state.currentPage - 1) * state.perPage,\n to: state.currentPage * state.perPage,\n next,\n prev,\n jump,\n };\n}\n\ntype TPropsPagenation = {\n count: number;\n current: number;\n jump: (pageNumber: number) => void;\n next: () => void;\n prev: () => void;\n};\n\nexport const Pagenation = memo(function TablePagenation(\n props: TPropsPagenation\n) {\n return (\n <div className=\"flex justify-center gap-2\">\n <button\n className=\"text-sm\"\n onClick={() => props.jump(1)}\n disabled={props.current === 1}\n >\n ≪\n </button>\n <button\n className=\"text-sm\"\n onClick={() => props.prev()}\n disabled={props.current === 1}\n >\n <\n </button>\n {Array.from({ length: props.count }, (_, i) => i + 1)\n .filter((i) => props.current - 2 <= i && i <= props.current + 2)\n .map((i) => (\n <button\n key={i}\n className={`text-sm ${props.current === i ? \"text-blue-600\" : \"\"}`}\n onClick={() => props.jump(i)}\n >\n {i}\n </button>\n ))}\n <button\n className=\"text-sm\"\n onClick={() => props.next()}\n disabled={props.current === props.count}\n >\n >\n </button>\n <button\n className=\"text-sm\"\n onClick={() => props.jump(props.count)}\n disabled={props.current === props.count}\n >\n ≫\n </button>\n </div>\n );\n});\n"],"names":["pageReducer","state","action","type","__assign","rowCount","payload","rouCount","perPage","currentPage","Math","ceil","pageNumber","InitialPageState","usePageReducer","initialState","_a","useReducer","dispatch","next","useCallback","prev","jump","pageCount","from","to","Pagenation","memo","props","_jsxs","className","_jsx","onClick","disabled","current","children","Array","length","count","_","i","filter","map","concat"],"mappings":"iLAsBA,SAASA,EAAYC,EAAcC,GACjC,OAAQA,EAAOC,MACb,IAAK,cACH,OACKC,EAAAA,EAAA,CAAA,EAAAH,IACHI,SAAUH,EAAOI,QAAQC,WAE7B,IAAK,aACH,OACKH,EAAAA,EAAA,CAAA,EAAAH,IACHO,QAASN,EAAOI,QAAQE,UAE5B,IAAK,OACH,OAAIP,EAAMQ,cAAgBC,KAAKC,KAAKV,EAAMI,SAAWJ,EAAMO,SAClDP,EAIJG,EAAAA,EAAA,CAAA,EAAAH,IACHQ,YAAaR,EAAMQ,YAAc,IAErC,IAAK,OACH,OAA0B,IAAtBR,EAAMQ,YACDR,EAIJG,EAAAA,EAAA,CAAA,EAAAH,IACHQ,YAAaR,EAAMQ,YAAc,IAErC,IAAK,OACH,OACEP,EAAOI,QAAQM,WAAa,GAC5BV,EAAOI,QAAQM,WAAaF,KAAKC,KAAKV,EAAMI,SAAWJ,EAAMO,UAC7DP,EAAMQ,cAAgBP,EAAOI,QAAQM,WAE9BX,EAIJG,EAAAA,EAAA,CAAA,EAAAH,IACHQ,YAAaP,EAAOI,QAAQM,aAEhC,QACE,OAAOX,EAEb,CAEA,IAAMY,EAA0B,CAC9BL,QAAS,GACTC,YAAa,EACbJ,SAAU,GAGN,SAAUS,EAAeC,GACvB,IAAAC,EAAoBC,EACxBjB,EACAe,QAAAA,EAAgBF,GAFXZ,OAAOiB,OAKRC,EAAOC,GAAY,WAAM,OAAAF,EAAS,CAAEf,KAAM,QAAjB,GAA4B,CAACe,IACtDG,EAAOD,GAAY,WAAM,OAAAF,EAAS,CAAEf,KAAM,QAAjB,GAA4B,CAACe,IACtDI,EAAOF,GACX,SAACR,GAAuB,OAAAM,EAAS,CAAEf,KAAM,OAAQG,QAAS,CAAEM,WAAUA,OACtE,CAACM,IAGH,MAAO,CACLV,QAASP,EAAMO,QACfC,YAAaR,EAAMQ,YACnBJ,SAAUJ,EAAMI,SAChBkB,UAAWb,KAAKC,KAAKV,EAAMI,SAAWJ,EAAMO,SAC5CgB,MAAOvB,EAAMQ,YAAc,GAAKR,EAAMO,QACtCiB,GAAIxB,EAAMQ,YAAcR,EAAMO,QAC9BW,KAAIA,EACJE,KAAIA,EACJC,KAAIA,EAER,KAUaI,EAAaC,GAAK,SAC7BC,GAEA,OACEC,EAAK,MAAA,CAAAC,UAAU,sCACbC,EACE,SAAA,CAAAD,UAAU,UACVE,QAAS,WAAM,OAAAJ,EAAMN,KAAK,EAAE,EAC5BW,SAA4B,IAAlBL,EAAMM,uBAIlBH,EAAA,SAAA,CACED,UAAU,UACVE,QAAS,WAAM,OAAAJ,EAAMP,MAAM,EAC3BY,SAA4B,IAAlBL,EAAMM,QAGTC,SAAA,MACRC,MAAMZ,KAAK,CAAEa,OAAQT,EAAMU,QAAS,SAACC,EAAGC,GAAM,OAAAA,EAAI,CAAC,IACjDC,QAAO,SAACD,GAAM,OAAAZ,EAAMM,QAAU,GAAKM,GAAKA,GAAKZ,EAAMM,QAAU,CAA/C,IACdQ,KAAI,SAACF,GAAM,OACVT,EAAA,SAAA,CAEED,UAAW,WAAWa,OAAAf,EAAMM,UAAYM,EAAI,gBAAkB,IAC9DR,QAAS,WAAM,OAAAJ,EAAMN,KAAKkB,EAAX,EAEdL,SAAAK,GAJIA,EAMR,IACHT,EACE,SAAA,CAAAD,UAAU,UACVE,QAAS,WAAM,OAAAJ,EAAMT,MAAM,EAC3Bc,SAAUL,EAAMM,UAAYN,EAAMU,MAAKH,SAAA,MAIzCJ,EACE,SAAA,CAAAD,UAAU,UACVE,QAAS,WAAM,OAAAJ,EAAMN,KAAKM,EAAMU,MAAM,EACtCL,SAAUL,EAAMM,UAAYN,EAAMU,MAAKH,SAAA,QAM/C"}
|