@react-to-styled/table
Version:
Table component with React and styled-components
333 lines (324 loc) • 12.5 kB
JavaScript
;
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