@krowdy-ui/views
Version:
React components that implement Google's Material Design.
258 lines (245 loc) • 8.45 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["columns", "rowHeight", "headerHeight", "onRowClick", "rowCount", "rows", "isRowLoaded", "loadMoreRows", "threshold", "minimumBatchSize", "children"],
_excluded2 = ["key"],
_excluded3 = ["height", "width", "columns", "rows", "onRowClick", "rowCount"];
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import { Paper, TableCell } from '@material-ui/core';
import { AutoSizer, Column, Table, InfiniteLoader } from 'react-virtualized';
import { Typography } from '@krowdy-ui/core';
var useStyles = makeStyles(function (theme) {
return {
flexContainer: {
alignItems: 'center',
boxSizing: 'border-box',
display: 'flex',
justifyContent: 'space-between'
},
noClick: {
cursor: 'initial'
},
selected: {
backgroundColor: theme.palette.primary[50]
},
table: {
// temporary right-to-left patch, waiting for
// https://github.com/bvaughn/react-virtualized/issues/454
'& .ReactVirtualized__Table__headerRow': {
backgroundColor: theme.palette.secondary[50],
display: 'flex',
flip: false,
justifyContent: 'space-between',
paddingRight: '0px !important'
}
},
tableCell: {
flex: 1
},
tableRow: {
borderBottom: '1px solid rgba(224, 224, 224, 1)',
boxSizing: 'border-box',
cursor: 'pointer'
},
tableRowHover: {
'&:hover': {
backgroundColor: theme.palette.primary[50]
}
}
};
});
var StyledTableCell = withStyles(function (theme) {
return {
body: {
fontSize: 14
},
head: {
backgroundColor: theme.palette.secondary[50],
color: theme.palette.grey[800]
}
};
})(TableCell);
var VirtualizedTable = function VirtualizedTable(props) {
var columns = props.columns,
_props$rowHeight = props.rowHeight,
rowHeight = _props$rowHeight === void 0 ? 48 : _props$rowHeight,
_props$headerHeight = props.headerHeight,
headerHeight = _props$headerHeight === void 0 ? 48 : _props$headerHeight,
onRowClick = props.onRowClick,
_props$rowCount = props.rowCount,
rowCount = _props$rowCount === void 0 ? 100000 : _props$rowCount,
rows = props.rows,
_props$isRowLoaded = props.isRowLoaded,
isRowLoaded = _props$isRowLoaded === void 0 ? function () {} : _props$isRowLoaded,
_props$loadMoreRows = props.loadMoreRows,
loadMoreRows = _props$loadMoreRows === void 0 ? function () {} : _props$loadMoreRows,
_props$threshold = props.threshold,
threshold = _props$threshold === void 0 ? 15 : _props$threshold,
_props$minimumBatchSi = props.minimumBatchSize,
minimumBatchSize = _props$minimumBatchSi === void 0 ? 10 : _props$minimumBatchSi,
children = props.children,
tableProps = _objectWithoutProperties(props, _excluded);
var classes = useStyles();
var getRowClassName = function getRowClassName(_ref) {
var index = _ref.index;
var checked = false;
if (index > -1) {
var _rows$index = rows[index],
rowChecked = _rows$index.checked,
selected = _rows$index.selected;
checked = rowChecked || selected;
}
return clsx(classes.tableRow, classes.flexContainer, index !== -1 && onRowClick != null && classes.tableRowHover, checked && classes.selected);
};
var cellRenderer = function cellRenderer(_ref2) {
var cellData = _ref2.cellData,
columnIndex = _ref2.columnIndex,
rowData = _ref2.rowData;
var _columns$columnIndex = columns[columnIndex],
numeric = _columns$columnIndex.numeric,
Component = _columns$columnIndex.rowComponent;
return /*#__PURE__*/React.createElement(TableCell, {
align: columnIndex != null && numeric || false ? 'right' : 'left',
className: clsx(classes.tableCell, classes.flexContainer, onRowClick == null && classes.noClick),
component: "div",
style: {
height: rowHeight
},
variant: "body"
}, /*#__PURE__*/React.createElement(Typography, {
style: {
fontSize: 12
},
variant: "body2"
}, Component ? /*#__PURE__*/React.createElement(Component, {
rowData: rowData,
value: cellData
}) : cellData));
};
var _headerRenderer = function headerRenderer(data) {
var label = data.label,
columnIndex = data.columnIndex;
var _columns$columnIndex2 = columns[columnIndex],
numeric = _columns$columnIndex2.numeric,
Component = _columns$columnIndex2.columnComponent;
return /*#__PURE__*/React.createElement(StyledTableCell, {
align: numeric || false ? 'right' : 'left',
className: clsx(classes.tableCell, classes.flexContainer, classes.noClick),
component: "div",
style: {
height: headerHeight
},
variant: "head"
}, /*#__PURE__*/React.createElement(Typography, {
style: {
fontSize: 14
},
variant: "h5"
}, Component ? /*#__PURE__*/React.createElement(Component, {
value: label
}) : label));
};
return /*#__PURE__*/React.createElement(InfiniteLoader, {
children: children,
isRowLoaded: isRowLoaded,
loadMoreRows: loadMoreRows,
minimumBatchSize: minimumBatchSize,
rowCount: rowCount,
threshold: threshold
}, function (_ref3) {
var onRowsRendered = _ref3.onRowsRendered,
registerChild = _ref3.registerChild;
return /*#__PURE__*/React.createElement(AutoSizer, null, function (_ref4) {
var height = _ref4.height,
width = _ref4.width;
return /*#__PURE__*/React.createElement(Table, _extends({
className: classes.table,
gridStyle: {
direction: 'inherit'
},
headerHeight: headerHeight,
height: height,
onRowClick: onRowClick,
onRowsRendered: onRowsRendered,
ref: registerChild,
rowCount: rowCount,
rowHeight: rowHeight,
width: width
}, tableProps, {
rowClassName: getRowClassName
}), columns.map(function (_ref5, index) {
var key = _ref5.key,
other = _objectWithoutProperties(_ref5, _excluded2);
return /*#__PURE__*/React.createElement(Column, _extends({
cellRenderer: cellRenderer,
className: classes.flexContainer,
dataKey: key,
headerRenderer: function headerRenderer(headerProps) {
return _headerRenderer(_extends({}, headerProps, {
columnIndex: index
}));
},
key: key
}, other));
}));
});
});
};
process.env.NODE_ENV !== "production" ? VirtualizedTable.propTypes = {
columns: PropTypes.arrayOf(PropTypes.shape({
key: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
numeric: PropTypes.bool,
width: PropTypes.number
})).isRequired,
headerHeight: PropTypes.number,
onRowClick: PropTypes.func,
rowHeight: PropTypes.number
} : void 0;
var TableInfinity = function TableInfinity(_ref6) {
var _ref6$height = _ref6.height,
height = _ref6$height === void 0 ? 400 : _ref6$height,
_ref6$width = _ref6.width,
width = _ref6$width === void 0 ? '100%' : _ref6$width,
columns = _ref6.columns,
rows = _ref6.rows,
onRowClick = _ref6.onRowClick,
rowCount = _ref6.rowCount,
rest = _objectWithoutProperties(_ref6, _excluded3);
var classes = useMainStyles({
height: height,
width: width
});
return /*#__PURE__*/React.createElement(Paper, {
className: classes.paper,
square: true
}, /*#__PURE__*/React.createElement(VirtualizedTable, _extends({
columns: columns,
onRowClick: onRowClick,
rowCount: rowCount,
rowLength: rows.length,
rows: rows
}, rest, {
rowGetter: function rowGetter(_ref7) {
var index = _ref7.index;
return rows[index];
}
})));
};
var useMainStyles = makeStyles(function () {
return {
paper: {
height: function height(_ref8) {
var _height = _ref8.height;
return _height;
},
width: function width(_ref9) {
var _width = _ref9.width;
return _width;
}
}
};
});
export default TableInfinity;