UNPKG

@react-to-styled/table

Version:

Table component with React and styled-components

58 lines (56 loc) 5.31 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-to-styled/essentials"),t=require("@react-to-styled/loader"),a=require("react"),l=require("styled-components");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(a),o=r(l);const d=(e,t,a=1)=>{let l=e;const r=[];for(;l<=t;)r.push(l),l+=a;return r},s=({onPagination:e,currentPage:t=1,totalRecords:l,pageLimit:r,isFetching:o})=>{const[s,f]=a.useState(1),[p,b]=a.useState([1]);return a.useEffect((()=>{f(Math.ceil(l/r)),b((()=>{if(s>9){const e=Math.max(2,t-2),a=Math.min(s-1,t+2);let l=d(e,a);const r=e>2&&t>5,n=s-a>1&&s-t>4,o=7-(l.length+1);switch(!0){case r&&!n:l=["LEFT",1,"...",...d(e-o,e-1),...l,s];break;case!r&&n:{const e=d(a+1,a+o);l=[1,...l,...e,"...",s,"RIGHT"];break}default:l=["LEFT",1,"...",...l,"...",s,"RIGHT"]}return[...l]}return d(1,s)})())}),[l,s,t,r]),n.default.createElement(n.default.Fragment,null,p.length>1&&!o&&n.default.createElement(i,{"data-element":"pagination",className:"rts-table__paginator"},n.default.createElement(c,null,p.length&&p.map(((a,l)=>"LEFT"===a?n.default.createElement(u,{key:l,className:"rts-table__paginator--item"},n.default.createElement(m,{onClick:a=>(a.preventDefault(),void e(t-4-1)),className:"rts-table__paginator--link"},"<<")):"..."===a?n.default.createElement("span",{key:l},"..."):"RIGHT"===a?n.default.createElement(u,{key:l,className:"rts-table__paginator--item"},n.default.createElement(m,{onClick:a=>(a.preventDefault(),void e(t+4+1)),className:"rts-table__paginator--link"},">>")):n.default.createElement(u,{key:l,className:"rts-table__paginator--item"},n.default.createElement(m,{active:t===a,disabled:t===a,onClick:t=>(t=>a=>{a.preventDefault(),e(t)})(a)(t),className:"rts-table__paginator--link"},a)))))))},i=o.default.nav` text-align: center; border-bottom: 1px solid ${e.Colors.borderColor}; `,c=o.default.ul` display: inline-block; `,u=o.default.li` display: inline-block; vertical-align: middle; `,m=o.default.a` font-size: 1rem; color: ${e.Colors.textColor}; cursor: pointer; display: flex; padding: 0 5px; border: 1px solid transparent; ${e=>e.disabled&&"pointer-events: none;"}; ${t=>t.active&&`\n color: ${e.Colors.paginatorActiveBorder};\n cursor: default;\n border: 1px solid ${e.Colors.paginatorActiveBorder};\n border-radius: 5px;\n `}; `,f=({columns:e,rowData:t,rowIndex:l,...r})=>{const[o,d]=a.useState(!1),[s,i]=a.useState({}),c=e=>{i({...e}),d(!!e)},u=n.default.createElement("tr",{...r},Object.values(e).map((({Cell:a},r)=>a?n.default.createElement(x,{isFirst:0===r,isLast:--Object.keys(e).length===r,key:r},n.default.createElement(a,{onRowExpand:c,data:t,index:l})):null)));return n.default.createElement(n.default.Fragment,null,u,o&&n.default.createElement("tr",null,Object.values(e).map((({ExpandedCell:a},r)=>a?n.default.createElement(h,{colSpan:Object.values(e).length,key:r},n.default.createElement(a,{data:{...s,...t},index:l})):null))))},p=o.default.div` display: flex; flex-direction: column; border: 1px solid ${e.Colors.borderColor}; background-color: ${e.Colors.background}; border-bottom: 0; font-family: ${e.Fonts.OpenSans}, serif; > table { width: 100%; border-collapse: collapse; } `,b=o.default.table` table-layout: fixed; border-spacing: 0; `,g=o.default.div` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; max-width: 100%; `,E=o.default(g)` color: ${e.Colors.textColor}; font-weight: normal; text-transform: uppercase; vertical-align: middle; `,x=o.default.td` ${({width:t,isFirst:a,isLast:l})=>`\n border-bottom: 1px solid ${e.Colors.borderColor};\n padding: 1rem 0;\n ${"number"==typeof t?`width: ${t}px;`:`width: ${t||""};`}\n ${a?"padding-left: 1.4rem;":"padding-left: 0.7rem;"}\n ${l?"padding-right: 1.4rem;":"padding-right: 0.7rem;"}\n `} `,h=o.default.td` padding: 0; `,_=o.default(x)` display: flex; justify-content: center; width: 100%; text-align: center; margin: auto; `,y=o.default.thead` background-color: ${e.Colors.grayBackground}; `;exports.Column=x,exports.LoadingColumn=_,exports.Paginator=s,exports.Table=({data:e,columns:a,paginationProps:l,isLoading:r,...o})=>n.default.createElement(p,{"data-element":"tableWrapper",className:"rts-table__container"},n.default.createElement(b,{"data-element":"table",...o},n.default.createElement(y,{className:"rts-table__header"},n.default.createElement("tr",null,a&&Object.values(a).map((({header:e,width:t},l)=>e&&!r?n.default.createElement(x,{width:t,isFirst:0===l,isLast:Object.keys(a).length-1===l,key:l,className:"rts-table__column"},n.default.createElement(E,null,e)):0===l&&r?n.default.createElement(x,{width:"100%",isFirst:!0,isLast:!0,key:l,className:"rts-table__column"},n.default.createElement(E,null," ")):null)))),n.default.createElement("tbody",null,r?n.default.createElement("tr",null,n.default.createElement(_,{className:"rts-table__column--loading"},n.default.createElement(t.Loader,null))):null==e?void 0:e.map(((e,t)=>n.default.createElement(f,{key:t,columns:a,rowIndex:t,rowData:e,className:"rts-table__row"}))))),l&&n.default.createElement(s,{...l,isFetching:r})),exports.TruncatedText=g; //# sourceMappingURL=table.production.min.js.map