retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 3.37 kB
JavaScript
import{__rest as e}from"../../_virtual/_tslib.js";import{forwardRef as i,useState as r,useEffect as a,useCallback as o,useMemo as s,Fragment as t}from"react";import{jsxs as n,jsx as l}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as c}from"../../utils/classNames.js";import d from"../../constants/commonClassNames.js";import g from"../../assets/svg/arrow_icon.svg.js";import{TableContainer as m,TableHeader as b,Tr as h,TableHeaderCell as p,TableCell as u,TableWrapper as v,PaginationContainer as y,PaginationIcon as j,PaginationButton as k,PaginationInfo as N}from"./Table.styled.js";const $=i(((i,$)=>{var{id:w,className:f,children:x,columnWidths:O,columnAlign:A="left",color:C="greyscale",sortable:z=!1,headers:H=[],data:P=[],striped:S=!1,bordered:_=!0,paginationOptions:R={pageSize:10,initialPage:1},maxHeight:T,pagination:W=!1,onRowClick:D,sx:E}=i,M=e(i,["id","className","children","columnWidths","columnAlign","color","sortable","headers","data","striped","bordered","paginationOptions","maxHeight","pagination","onRowClick","sx"]);const q=!!D,[B,F]=r(P),[G,I]=r(null),[J,K]=r(R&&R.initialPage||1),L=W?Math.ceil(P.length/(R?R.pageSize:P.length)):1;a((()=>{let e=[...P];null!==G&&e.sort(((e,i)=>e[G.key]<i[G.key]?"ascending"===G.direction?-1:1:e[G.key]>i[G.key]?"ascending"===G.direction?1:-1:0)),F(e)}),[G,P]);const Q=o((e=>{if(!z)return;let i="ascending";G&&G.key===e&&"ascending"===G.direction&&(i="descending"),I({key:e,direction:i})}),[z,G]);null!==G&&B.sort(((e,i)=>e[G.key]<i[G.key]?"ascending"===G.direction?-1:1:e[G.key]>i[G.key]?"ascending"===G.direction?1:-1:0));const U=s((()=>W&&R?B.slice((J-1)*R.pageSize,J*R.pageSize):B),[W,R,J,B]);return n(t,{children:[l(v,Object.assign({$maxHeight:T,className:"table-wrapper"},{children:n(m,Object.assign({$color:C,$bordered:_,$maxHeight:T,className:c("table-root",f,d),ref:$,id:w,sx:E},M,{children:[l(b,Object.assign({className:"retro-table-header"},{children:l(h,Object.assign({$color:C},{children:H.map(((e,i)=>l(p,Object.assign({className:"retro-table-header-cell",$color:C,$sortable:z,onClick:()=>Q(i),sortDirection:i===(null==G?void 0:G.key)?null==G?void 0:G.direction:void 0,width:O&&Array.isArray(O)?O[i]:void 0,align:Array.isArray(A)?A[i]:A},{children:e}),`retro-header-${i}`)))}),void 0)}),void 0),l("tbody",{children:U.map(((e,i)=>l(h,Object.assign({className:"retro-table-row",$color:C,$striped:S,$isRowClickEnabled:q,onClick:()=>null==D?void 0:D(e),sx:{cursor:q?"pointer":"inherit"}},{children:e.map(((e,r)=>l(u,Object.assign({className:"retro-table-cell",width:O&&Array.isArray(O)?O[r]:void 0,align:Array.isArray(A)?A[r]:A},{children:e}),`retro-cell-${i}-${r}`)))}),`retro-row-${i}`)))},void 0)]}),void 0)}),void 0),W&&n(y,Object.assign({$bordered:_,className:c("table-pagination",d)},{children:[l(k,Object.assign({disabled:1===J,onClick:()=>K(J-1),className:"retro-pagination-button"},{children:l(j,{$disabled:1===J,className:"retro-pagination-arrow retro-arrow-left",alt:"Previous page",src:g},void 0)}),void 0),n(N,{children:["Page ",J," of ",L]},void 0),l(k,Object.assign({disabled:J===L,onClick:()=>K(J+1),className:"retro-pagination-button"},{children:l(j,{$disabled:J===L,className:"retro-pagination-arrow retro-arrow-right",alt:"Next page",src:g},void 0)}),void 0)]}),void 0)]},void 0)}));$.displayName="Table";export{$ as Table};