@krowdy-ui/views
Version:
React components that implement Google's Material Design.
274 lines (252 loc) • 9.33 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _styles = require("@material-ui/core/styles");
var _core = require("@material-ui/core");
var _reactVirtualized = require("react-virtualized");
var _core2 = require("@krowdy-ui/core");
var _excluded = ["columns", "rowHeight", "headerHeight", "onRowClick", "rowCount", "rows", "isRowLoaded", "loadMoreRows", "threshold", "minimumBatchSize", "children"],
_excluded2 = ["key"],
_excluded3 = ["height", "width", "columns", "rows", "onRowClick", "rowCount"];
var useStyles = (0, _styles.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 = (0, _styles.withStyles)(function (theme) {
return {
body: {
fontSize: 14
},
head: {
backgroundColor: theme.palette.secondary[50],
color: theme.palette.grey[800]
}
};
})(_core.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 = (0, _objectWithoutProperties2["default"])(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 (0, _clsx["default"])(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["default"].createElement(_core.TableCell, {
align: columnIndex != null && numeric || false ? 'right' : 'left',
className: (0, _clsx["default"])(classes.tableCell, classes.flexContainer, onRowClick == null && classes.noClick),
component: "div",
style: {
height: rowHeight
},
variant: "body"
}, /*#__PURE__*/_react["default"].createElement(_core2.Typography, {
style: {
fontSize: 12
},
variant: "body2"
}, Component ? /*#__PURE__*/_react["default"].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["default"].createElement(StyledTableCell, {
align: numeric || false ? 'right' : 'left',
className: (0, _clsx["default"])(classes.tableCell, classes.flexContainer, classes.noClick),
component: "div",
style: {
height: headerHeight
},
variant: "head"
}, /*#__PURE__*/_react["default"].createElement(_core2.Typography, {
style: {
fontSize: 14
},
variant: "h5"
}, Component ? /*#__PURE__*/_react["default"].createElement(Component, {
value: label
}) : label));
};
return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.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["default"].createElement(_reactVirtualized.AutoSizer, null, function (_ref4) {
var height = _ref4.height,
width = _ref4.width;
return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.Table, (0, _extends2["default"])({
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 = (0, _objectWithoutProperties2["default"])(_ref5, _excluded2);
return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.Column, (0, _extends2["default"])({
cellRenderer: cellRenderer,
className: classes.flexContainer,
dataKey: key,
headerRenderer: function headerRenderer(headerProps) {
return _headerRenderer((0, _extends2["default"])({}, headerProps, {
columnIndex: index
}));
},
key: key
}, other));
}));
});
});
};
process.env.NODE_ENV !== "production" ? VirtualizedTable.propTypes = {
columns: _propTypes["default"].arrayOf(_propTypes["default"].shape({
key: _propTypes["default"].string.isRequired,
label: _propTypes["default"].string.isRequired,
numeric: _propTypes["default"].bool,
width: _propTypes["default"].number
})).isRequired,
headerHeight: _propTypes["default"].number,
onRowClick: _propTypes["default"].func,
rowHeight: _propTypes["default"].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 = (0, _objectWithoutProperties2["default"])(_ref6, _excluded3);
var classes = useMainStyles({
height: height,
width: width
});
return /*#__PURE__*/_react["default"].createElement(_core.Paper, {
className: classes.paper,
square: true
}, /*#__PURE__*/_react["default"].createElement(VirtualizedTable, (0, _extends2["default"])({
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 = (0, _styles.makeStyles)(function () {
return {
paper: {
height: function height(_ref8) {
var _height = _ref8.height;
return _height;
},
width: function width(_ref9) {
var _width = _ref9.width;
return _width;
}
}
};
});
var _default = TableInfinity;
exports["default"] = _default;