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