UNPKG

@react-to-styled/table

Version:

Table component with React and styled-components

333 lines (324 loc) 12.5 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var essentials = require('@react-to-styled/essentials'); var loader = require('@react-to-styled/loader'); var React = require('react'); var styled = require('styled-components'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var React__default = /*#__PURE__*/_interopDefaultLegacy(React); var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled); const LEFT_PAGE = 'LEFT'; const RIGHT_PAGE = 'RIGHT'; const BLANK_PAGE = '...'; const range = (from, to, step = 1)=>{ let i = from; const range1 = []; while(i <= to){ range1.push(i); i += step; } return range1; }; const Paginator = ({ onPagination , currentPage =1 , totalRecords , pageLimit , isFetching , })=>{ const pageNeighbours = 2; const [totalPages, setTotalPages] = React.useState(1); const [pages, setPages] = React.useState([ 1 ]); const handleClick = (page)=>(evt)=>{ evt.preventDefault(); onPagination(page); } ; const handleMoveLeft = (evt)=>{ evt.preventDefault(); onPagination(currentPage - pageNeighbours * 2 - 1); }; const handleMoveRight = (evt)=>{ evt.preventDefault(); onPagination(currentPage + pageNeighbours * 2 + 1); }; const fetchPageNumbers = ()=>{ const totalNumbers = pageNeighbours * 2 + 3; const totalBlocks = totalNumbers + 2; if (totalPages > totalBlocks) { const startPage = Math.max(2, currentPage - pageNeighbours); const endPage = Math.min(totalPages - 1, currentPage + pageNeighbours); let pagesI = range(startPage, endPage); const hasLeftSpill = startPage > 2 && currentPage > 5; const hasRightSpill = totalPages - endPage > 1 && totalPages - currentPage > 4; const spillOffset = totalNumbers - (pagesI.length + 1); switch(true){ case hasLeftSpill && !hasRightSpill: { const extraPages = range(startPage - spillOffset, startPage - 1); pagesI = [ LEFT_PAGE, 1, BLANK_PAGE, ...extraPages, ...pagesI, totalPages, ]; break; } case !hasLeftSpill && hasRightSpill: { const extraPages = range(endPage + 1, endPage + spillOffset); pagesI = [ 1, ...pagesI, ...extraPages, BLANK_PAGE, totalPages, RIGHT_PAGE, ]; break; } case hasLeftSpill && hasRightSpill: default: { pagesI = [ LEFT_PAGE, 1, BLANK_PAGE, ...pagesI, BLANK_PAGE, totalPages, RIGHT_PAGE, ]; break; } } return [ ...pagesI ]; } return range(1, totalPages); }; React.useEffect(()=>{ setTotalPages(Math.ceil(totalRecords / pageLimit)); setPages(fetchPageNumbers()); }, [ totalRecords, totalPages, currentPage, pageLimit ]); return /*#__PURE__*/ React__default["default"].createElement(React__default["default"].Fragment, null, pages.length > 1 && !isFetching && /*#__PURE__*/ React__default["default"].createElement(PaginatorWrapper, { "data-element": "pagination", className: "rts-table__paginator" }, /*#__PURE__*/ React__default["default"].createElement(StyledPaginator, null, pages.length && pages.map((page, index)=>{ if (page === LEFT_PAGE) { return /*#__PURE__*/ React__default["default"].createElement(PaginatorItem, { key: index, className: "rts-table__paginator--item" }, /*#__PURE__*/ React__default["default"].createElement(PaginatorAction, { onClick: (event)=>handleMoveLeft(event) , className: "rts-table__paginator--link" }, '<<')); } if (page === BLANK_PAGE) { return /*#__PURE__*/ React__default["default"].createElement("span", { key: index }, "..."); } if (page === RIGHT_PAGE) { return /*#__PURE__*/ React__default["default"].createElement(PaginatorItem, { key: index, className: "rts-table__paginator--item" }, /*#__PURE__*/ React__default["default"].createElement(PaginatorAction, { onClick: (event)=>handleMoveRight(event) , className: "rts-table__paginator--link" }, '>>')); } return /*#__PURE__*/ React__default["default"].createElement(PaginatorItem, { key: index, className: "rts-table__paginator--item" }, /*#__PURE__*/ React__default["default"].createElement(PaginatorAction, { active: currentPage === page, disabled: currentPage === page, onClick: (event)=>handleClick(page)(event) , className: "rts-table__paginator--link" }, page)); })))); }; const PaginatorWrapper = styled__default["default"].nav` text-align: center; border-bottom: 1px solid ${essentials.Colors.borderColor}; `; const StyledPaginator = styled__default["default"].ul` display: inline-block; `; const PaginatorItem = styled__default["default"].li` display: inline-block; vertical-align: middle; `; const PaginatorAction = styled__default["default"].a` font-size: 1rem; color: ${essentials.Colors.textColor}; cursor: pointer; display: flex; padding: 0 5px; border: 1px solid transparent; ${(props)=>props.disabled && 'pointer-events: none;' }; ${(props)=>props.active && ` color: ${essentials.Colors.paginatorActiveBorder}; cursor: default; border: 1px solid ${essentials.Colors.paginatorActiveBorder}; border-radius: 5px; ` }; `; const Row = ({ columns , rowData , rowIndex , ...props })=>{ const [isRowExpanded, setIsRowExpanded] = React.useState(false); const [expandedRowData, setExpandedRowData] = React.useState({}); const onRowExpand = (data)=>{ setExpandedRowData({ ...data }); if (data) { setIsRowExpanded(true); } else { setIsRowExpanded(false); } }; const Row1 = /*#__PURE__*/ React__default["default"].createElement("tr", { ...props }, Object.values(columns).map(({ Cell }, index)=>{ if (!Cell) { return null; } return /*#__PURE__*/ React__default["default"].createElement(Column, { isFirst: index === 0, isLast: --Object.keys(columns).length === index, key: index }, /*#__PURE__*/ React__default["default"].createElement(Cell, { onRowExpand: onRowExpand, data: rowData, index: rowIndex })); })); return /*#__PURE__*/ React__default["default"].createElement(React__default["default"].Fragment, null, Row1, isRowExpanded && /*#__PURE__*/ React__default["default"].createElement("tr", null, Object.values(columns).map(({ ExpandedCell }, index)=>{ if (!ExpandedCell) { return null; } return /*#__PURE__*/ React__default["default"].createElement(ExpandedColumn, { colSpan: Object.values(columns).length, key: index }, /*#__PURE__*/ React__default["default"].createElement(ExpandedCell, { data: { ...expandedRowData, ...rowData }, index: rowIndex })); }))); }; const Table = ({ data , columns , paginationProps , isLoading , ...props })=>{ return /*#__PURE__*/ React__default["default"].createElement(Wrapper, { "data-element": "tableWrapper", className: "rts-table__container" }, /*#__PURE__*/ React__default["default"].createElement(TableWrapper, { "data-element": "table", ...props }, /*#__PURE__*/ React__default["default"].createElement(THead, { className: "rts-table__header" }, /*#__PURE__*/ React__default["default"].createElement("tr", null, columns && Object.values(columns).map(({ header , width }, index)=>{ if (header && !isLoading) { return /*#__PURE__*/ React__default["default"].createElement(Column, { width: width, isFirst: index === 0, isLast: Object.keys(columns).length - 1 === index, key: index, className: "rts-table__column" }, /*#__PURE__*/ React__default["default"].createElement(TableHeaderText, null, header)); } if (index === 0 && isLoading) { return /*#__PURE__*/ React__default["default"].createElement(Column, { width: "100%", isFirst: true, isLast: true, key: index, className: "rts-table__column" }, /*#__PURE__*/ React__default["default"].createElement(TableHeaderText, null, " ")); } return null; }))), /*#__PURE__*/ React__default["default"].createElement("tbody", null, isLoading ? /*#__PURE__*/ React__default["default"].createElement("tr", null, /*#__PURE__*/ React__default["default"].createElement(LoadingColumn, { className: "rts-table__column--loading" }, /*#__PURE__*/ React__default["default"].createElement(loader.Loader, null))) : data == null ? void 0 : data.map((rowData, rowIndex)=>/*#__PURE__*/ React__default["default"].createElement(Row, { key: rowIndex, columns: columns, rowIndex: rowIndex, rowData: rowData, className: "rts-table__row" }) ))), paginationProps && /*#__PURE__*/ React__default["default"].createElement(Paginator, { ...paginationProps, isFetching: isLoading })); }; const Wrapper = styled__default["default"].div` display: flex; flex-direction: column; border: 1px solid ${essentials.Colors.borderColor}; background-color: ${essentials.Colors.background}; border-bottom: 0; font-family: ${essentials.Fonts.OpenSans}, serif; > table { width: 100%; border-collapse: collapse; } `; const TableWrapper = styled__default["default"].table` table-layout: fixed; border-spacing: 0; `; const TruncatedText = styled__default["default"].div` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; max-width: 100%; `; const TableHeaderText = styled__default["default"](TruncatedText)` color: ${essentials.Colors.textColor}; font-weight: normal; text-transform: uppercase; vertical-align: middle; `; const Column = styled__default["default"].td` ${({ width , isFirst , isLast })=>{ return ` border-bottom: 1px solid ${essentials.Colors.borderColor}; padding: 1rem 0; ${typeof width === 'number' ? `width: ${width}px;` : `width: ${width || ''};`} ${isFirst ? 'padding-left: 1.4rem;' : 'padding-left: 0.7rem;'} ${isLast ? 'padding-right: 1.4rem;' : 'padding-right: 0.7rem;'} `; }} `; const ExpandedColumn = styled__default["default"].td` padding: 0; `; const LoadingColumn = styled__default["default"](Column)` display: flex; justify-content: center; width: 100%; text-align: center; margin: auto; `; //TODO@all new color put it in variables const THead = styled__default["default"].thead` background-color: ${essentials.Colors.grayBackground}; `; exports.Column = Column; exports.LoadingColumn = LoadingColumn; exports.Paginator = Paginator; exports.Table = Table; exports.TruncatedText = TruncatedText; //# sourceMappingURL=table.development.js.map