react-cm-ui
Version:
React UI for Healthy Church
713 lines (603 loc) • 28.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _reactCustomScrollbars = _interopRequireDefault(require("react-custom-scrollbars"));
var _tableConstants = require("./tableConstants");
var _utils = _interopRequireDefault(require("../../utils/utils"));
var _tableBody = _interopRequireDefault(require("./tableBody"));
var _tableCell = _interopRequireDefault(require("./tableCell"));
var _tableHeader = _interopRequireDefault(require("./tableHeader"));
var _tableRow = _interopRequireDefault(require("./tableRow"));
var _tableHeaderCell = _interopRequireDefault(require("./tableHeaderCell"));
var _withStyles = _interopRequireDefault(require("../../styles/withStyles"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var propTypes = {
/**
* Basic (default) styling.
*/
basic: _propTypes["default"].bool,
/**
* If `true`, all columns will be divided.
*/
celled: _propTypes["default"].bool,
/**
* The content of the Table.
*/
children: _propTypes["default"].node,
/**
* Override or extend the styles applied to the Table.
*/
classes: _propTypes["default"].shape({
root: _propTypes["default"].string,
tableSticky: _propTypes["default"].string,
tableStickyColumns: _propTypes["default"].string
}),
/**
* Add additional classes to the Table.
*/
className: _propTypes["default"].string,
/**
* If `true`, applies `width: auto` to the Table.
*/
collapsing: _propTypes["default"].bool,
/**
* If `true`, the far left column is divided from the rest of the columns.
*/
definition: _propTypes["default"].bool,
/**
* If `true`, columns will be evenly spaced.
*/
fixed: _propTypes["default"].bool,
/**
* Change the font size of text in the Table.
*/
fontSize: _propTypes["default"].oneOf(_utils["default"].sizeEnums()),
/**
* Deprecated prop.
*/
fullWidth: _propTypes["default"].bool,
/**
* Add an id to the Table.
*/
id: _propTypes["default"].string,
/**
* Table rows and cells can be highlighted as if they have been selected.
*/
selectable: _propTypes["default"].bool,
/**
* Truncate copy within cells in the Table
*/
singleLine: _propTypes["default"].bool,
/**
* Change the cells vertical size in the Table.
*/
size: _propTypes["default"].oneOf(['l', 'large', 'm', 'medium', 's', 'small']),
/**
* Deprecated prop.
*/
stackable: _propTypes["default"].bool,
/**
* A table can have one or more columns defined as 'sticky' so that they stay fixed while the
* user horizontally scrolls to see the remaining columns.
*/
stickyColumnCount: _propTypes["default"].number,
/**
* Resizable cell default percentage width related to the Table container size.
*/
resizableColumnWidthPercentage: function resizableColumnWidthPercentage(props, propName, componentName) {
var propValue = props[propName];
var isValid = propValue ? propValue > 0 && propValue <= parseInt(_tableConstants.TH_RESIZABLE_MAX_WIDTH * 100, 10) : true;
if (!isValid) {
return new Error("Invalid prop value for ".concat(propName, " (").concat(propValue, ") supplied to ").concat(componentName, ". Validation failed."));
}
return null;
},
/**
* If `true` or `very`, the Table will bleed off the edge.
*/
stretch: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(['very'])]),
/**
* Deprecated prop.
*/
striped: _propTypes["default"].bool,
/**
* Supply any inline styles to the Table.
*/
style: _propTypes["default"].shape({}),
theme: _propTypes["default"].shape({
palette: _propTypes["default"].shape({})
})
};
var defaultProps = {
basic: true,
celled: false,
children: null,
classes: null,
className: null,
collapsing: false,
definition: false,
fixed: false,
fontSize: null,
fullWidth: false,
id: null,
selectable: false,
singleLine: false,
size: null,
stackable: null,
stickyColumnCount: 0,
resizableColumnWidthPercentage: null,
stretch: false,
striped: false,
style: null,
theme: null
};
var TABLE_HEADER_TYPE = 'TableHeader';
var STICKY_CELL_CLASS = 'sticky-cell';
var STICKY_CELL_RESIZABLE_CLASS = 'sticky-cell-resizable';
var STICKY_CELL_FIRST_OF_ROW_CLASS = 'sticky-cell-first-of-row';
var STICKY_CELL_LAST_OF_COLUMN_CLASS = 'sticky-cell-last-of-column';
var styles = function styles(_ref) {
var palette = _ref.palette,
shape = _ref.shape;
return {
root: {
backgroundColor: palette.background["default"],
border: "1px solid ".concat(palette.border.primary),
borderCollapse: 'separate',
borderRadius: shape.borderRadius,
borderSpacing: 0,
color: palette.text.primary,
margin: 'calc(2rem - .14285em) 0 1rem',
textAlign: 'left',
width: '100%',
'&:first-child': {
marginTop: 0
},
'&:last-child': {
marginBottom: 0
},
'&.table-basic': {
border: 0,
'& .table-header-cell, & .table-cell': {
backgroundColor: palette.background["default"]
}
},
'&.table-collapsing': {
width: 'auto'
},
'&.table-color-grey-xxlight': {
backgroundColor: palette.background.secondary
},
'&.table-fixed': {
tableLayout: 'fixed'
},
'&.table-single-line': {
whiteSpace: 'nowrap'
}
},
tableStickyColumns: {
'& .table-cell': {
backgroundColor: (0, _lodash.get)(palette, 'background.primary')
},
'& .table--scroll_container': {
position: 'relative',
overflow: 'auto',
height: 'auto'
},
'& .sticky-cell': {
position: 'sticky',
left: 0,
zIndex: 2
},
'& .table-header > tr': {
backgroundColor: function backgroundColor(_ref2) {
var basic = _ref2.basic;
return !basic && (0, _lodash.get)(palette, 'background.secondary');
}
},
'& td.sticky-cell-resizable': {
borderRight: "1px solid ".concat((0, _lodash.get)(palette, 'border.primary'))
}
},
tableSticky: {
marginBottom: '10px !important'
}
};
};
/**
* Tables display sets of data.
*/
var Table = /*#__PURE__*/function (_React$PureComponent) {
_inherits(Table, _React$PureComponent);
var _super = _createSuper(Table);
function Table() {
var _this;
_classCallCheck(this, Table);
_this = _super.call(this);
_this.state = {
adjacentStickyColumnsTotalWidth: 0,
stickyTableContainerWidth: 0
};
_this.applyStickyClassesToCells = _this.applyStickyClassesToCells.bind(_assertThisInitialized(_this));
_this.delayedSetScrollBarPosition = null;
_this.forceTableUpdate = _this.forceTableUpdate.bind(_assertThisInitialized(_this));
_this.parseChildren = _this.parseChildren.bind(_assertThisInitialized(_this));
_this.setResizableCellsWordWrapping = _this.setResizableCellsWordWrapping.bind(_assertThisInitialized(_this));
_this.setStickyCellsStylesOnScroll = _this.setStickyCellsStylesOnScroll.bind(_assertThisInitialized(_this));
_this.getStickyCellBorderStyle = _this.getStickyCellBorderStyle.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(Table, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
var tableStickyContainer = this.tableStickyContainer;
var stickyColumnCount = this.props.stickyColumnCount;
if (stickyColumnCount > 0) {
this.setStickyColumnPositions();
this.applyStickyClassesToCells();
this.setState({
stickyTableContainerWidth: tableStickyContainer.clientWidth
});
}
this.delayedSetStickyTableContainerWidth = stickyColumnCount > 0 && (0, _lodash.debounce)(function () {
_this2.setState({
stickyTableContainerWidth: tableStickyContainer.clientWidth
});
_this2.setStickyColumnPositions();
}, _tableConstants.DEBOUNCE_WAIT_TIME);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var prevChildren = prevProps.children,
prevStickyColumnCount = prevProps.stickyColumnCount;
var _this$props = this.props,
children = _this$props.children,
stickyColumnCount = _this$props.stickyColumnCount;
var shouldRunStickyHelperFunctions = stickyColumnCount > 0 && (prevChildren !== children || prevStickyColumnCount !== stickyColumnCount);
if (shouldRunStickyHelperFunctions) {
this.setStickyColumnPositions();
this.applyStickyClassesToCells();
}
}
}, {
key: "getStickyCellBorderStyle",
value: function getStickyCellBorderStyle() {
var palette = this.props.theme.palette;
var borderStyle = (0, _lodash.get)(palette, 'border.primary');
return "1px solid ".concat(borderStyle);
}
}, {
key: "setStickyColumnPositions",
value: function setStickyColumnPositions() {
var _this$props2 = this.props,
stickyColumnCount = _this$props2.stickyColumnCount,
definition = _this$props2.definition,
basic = _this$props2.basic,
fullWidth = _this$props2.fullWidth,
singleLine = _this$props2.singleLine,
celled = _this$props2.celled,
fixed = _this$props2.fixed,
palette = _this$props2.theme.palette;
if (stickyColumnCount > 0 && this.tableRef) {
var _this$tableRef$queryS;
var stickyCells = (_this$tableRef$queryS = this.tableRef.querySelectorAll(".table-cell:nth-child(-n+".concat(stickyColumnCount, ")"))) !== null && _this$tableRef$queryS !== void 0 ? _this$tableRef$queryS : null;
if (!(0, _lodash.isNil)(stickyCells)) {
var cellWidths = 0;
var cellCount = 0;
/**
* Reducing each left sticky column position will help to not have a separation
* between them, so the content behind won't be visible when scrolling
*/
var leftOverFloatSpace = 1;
var auxLeftOverFloatSpace = 0;
if (basic) {
leftOverFloatSpace = 4;
auxLeftOverFloatSpace = -1;
if (celled) {
leftOverFloatSpace = 4;
auxLeftOverFloatSpace = -1;
}
if (fixed || singleLine) {
leftOverFloatSpace = 4;
auxLeftOverFloatSpace = 1;
}
} else {
leftOverFloatSpace = 2;
auxLeftOverFloatSpace = 1;
if (celled) {
auxLeftOverFloatSpace = 2;
}
if (fixed || singleLine) {
leftOverFloatSpace = 3;
auxLeftOverFloatSpace = 2;
}
}
for (var rootIndex = 0; rootIndex < stickyCells.length; rootIndex += 1) {
cellCount += 1;
var shouldChangeInitialDefinitionCell = definition && !fullWidth && rootIndex === 0;
if (shouldChangeInitialDefinitionCell) {
stickyCells[rootIndex].style.backgroundColor = (0, _lodash.get)(palette, 'background.primary');
}
if (cellCount <= stickyColumnCount && cellCount > 1) {
cellWidths += stickyCells[rootIndex - 1].clientWidth;
/**
* This makes definition/fullwidth work
* otherwise we'd have big separation space between sticky columns
*/
if (definition && !basic) {
var isFirstHeaderColumn = rootIndex > 0 && cellCount > 0 && stickyCells[rootIndex].className.includes('header');
var definitionLeftOverflow = isFirstHeaderColumn ? 4 : 3;
stickyCells[rootIndex].style.left = "".concat(cellWidths - definitionLeftOverflow, "px");
} else {
cellWidths -= leftOverFloatSpace + (cellCount >= 3 ? auxLeftOverFloatSpace : 0);
stickyCells[rootIndex].style.left = "".concat(cellWidths, "px");
}
}
if (cellCount === stickyColumnCount) {
// used to get the max cell resizable width according to the table container
this.setState({
adjacentStickyColumnsTotalWidth: cellWidths
});
cellCount = 0;
cellWidths = 0;
}
}
}
}
}
}, {
key: "setResizableCellsWordWrapping",
value: function setResizableCellsWordWrapping(shouldBreakSpaces) {
var _this$tableRef$queryS2, _this$tableRef;
var stickyColumnCount = this.props.stickyColumnCount;
var stickyCells = (_this$tableRef$queryS2 = (_this$tableRef = this.tableRef) === null || _this$tableRef === void 0 ? void 0 : _this$tableRef.querySelectorAll(".table-cell:nth-child(".concat(stickyColumnCount, ")"))) !== null && _this$tableRef$queryS2 !== void 0 ? _this$tableRef$queryS2 : null;
if (!(0, _lodash.isNil)(stickyCells)) {
for (var i = 0; i < stickyCells.length; i += 1) {
stickyCells[i].style.whiteSpace = shouldBreakSpaces ? 'break-spaces' : 'nowrap';
}
this.setStickyColumnPositions();
}
}
}, {
key: "setStickyCellsStylesOnScroll",
value: function setStickyCellsStylesOnScroll(_ref3) {
var _this$tableRef$queryS3, _this$tableRef2;
var scrollLeft = _ref3.scrollLeft;
var _this$props3 = this.props,
basic = _this$props3.basic,
definition = _this$props3.definition,
fullWidth = _this$props3.fullWidth,
palette = _this$props3.theme.palette;
var stickyCellsFirstOfRow = (_this$tableRef$queryS3 = (_this$tableRef2 = this.tableRef) === null || _this$tableRef2 === void 0 ? void 0 : _this$tableRef2.querySelectorAll(".".concat(STICKY_CELL_FIRST_OF_ROW_CLASS))) !== null && _this$tableRef$queryS3 !== void 0 ? _this$tableRef$queryS3 : null;
if (!(0, _lodash.isNil)(stickyCellsFirstOfRow)) {
var stickyCellBorderStyle = this.getStickyCellBorderStyle();
var stickyCellBorderLeftStyle = scrollLeft > 0 && !basic ? stickyCellBorderStyle : '';
for (var i = 0; i < stickyCellsFirstOfRow.length; i += 1) {
stickyCellsFirstOfRow[i].style.borderLeft = stickyCellBorderLeftStyle;
var isInitalDefinitionCell = definition && !fullWidth && i === 0;
if (isInitalDefinitionCell) {
stickyCellsFirstOfRow[i].style.borderTop = (0, _lodash.get)(palette, 'background.primary');
stickyCellsFirstOfRow[i].style.boxShadow = '';
stickyCellsFirstOfRow[i].style.borderLeft = '';
stickyCellsFirstOfRow[i].style.borderRight = stickyCellBorderStyle;
}
}
}
}
}, {
key: "parseChildren",
value: function parseChildren(children) {
var _this3 = this;
var setResizableCellsWordWrapping = this.setResizableCellsWordWrapping;
var _this$props4 = this.props,
stickyColumnCount = _this$props4.stickyColumnCount,
fixed = _this$props4.fixed,
singleLine = _this$props4.singleLine,
resizableColumnWidthPercentage = _this$props4.resizableColumnWidthPercentage;
var _this$state = this.state,
adjacentStickyColumnsTotalWidth = _this$state.adjacentStickyColumnsTotalWidth,
stickyTableContainerWidth = _this$state.stickyTableContainerWidth;
var shouldHandleStickyBehavior = !fixed && !singleLine;
var parsedChildren = _react["default"].Children.map(children, function (child) {
if (child.type.name === TABLE_HEADER_TYPE) {
var tableHeaderRow = child.props.children;
var headerCells = tableHeaderRow.props.children;
var parsedHeaderCells = _react["default"].Children.map(headerCells, function (headerCell, index) {
var isResizable = shouldHandleStickyBehavior && index === stickyColumnCount - 1 && index !== headerCells.length - 1;
return _objectSpread(_objectSpread({}, headerCell), {}, {
props: _objectSpread(_objectSpread({}, headerCell.props), {}, {
isResizable: isResizable
}, isResizable && {
adjacentStickyColumnsTotalWidth: adjacentStickyColumnsTotalWidth,
stickyColumnCount: stickyColumnCount,
stickyTableContainerWidth: stickyTableContainerWidth,
shouldResetWhiteSpaceStyle: shouldHandleStickyBehavior,
forceTableUpdate: _this3.forceTableUpdate,
resizableColumnWidthPercentage: resizableColumnWidthPercentage,
setResizableCellsWordWrapping: setResizableCellsWordWrapping
})
});
});
var parsedTableHeaderRow = _objectSpread(_objectSpread({}, tableHeaderRow), {}, {
props: _objectSpread(_objectSpread({}, tableHeaderRow.props), {}, {
children: parsedHeaderCells
})
});
return _objectSpread(_objectSpread({}, child), {}, {
props: _objectSpread(_objectSpread({}, child.props), {}, {
children: _objectSpread({}, parsedTableHeaderRow)
})
});
}
return child;
});
return parsedChildren;
}
}, {
key: "applyStickyClassesToCells",
value: function applyStickyClassesToCells() {
var _this$tableRef$queryS4, _this$tableRef3;
var _this$props5 = this.props,
stickyColumnCount = _this$props5.stickyColumnCount,
definition = _this$props5.definition,
fullWidth = _this$props5.fullWidth;
var stickyCells = (_this$tableRef$queryS4 = (_this$tableRef3 = this.tableRef) === null || _this$tableRef3 === void 0 ? void 0 : _this$tableRef3.querySelectorAll(".table-cell:nth-child(-n+".concat(stickyColumnCount, ")"))) !== null && _this$tableRef$queryS4 !== void 0 ? _this$tableRef$queryS4 : null;
if (!(0, _lodash.isNil)(stickyCells)) {
for (var i = 0; i < stickyCells.length; i += 1) {
var stickyCell = stickyCells[i];
stickyCell.classList.add(STICKY_CELL_CLASS);
var isDefinitionInitalCell = definition && !fullWidth && i === 0;
if (isDefinitionInitalCell) {
stickyCell.style.boxShadow = '';
}
var isFirstRowCell = stickyColumnCount === 1 || (i + 1) % stickyColumnCount === 1;
if (isFirstRowCell) {
stickyCell.classList.add(STICKY_CELL_FIRST_OF_ROW_CLASS);
}
var isResizableCell = (i + 1) % stickyColumnCount === 0;
if (isResizableCell) {
stickyCell.classList.add(STICKY_CELL_RESIZABLE_CLASS);
}
var isLastColumnCell = stickyCells.length - i <= stickyColumnCount;
if (isLastColumnCell) {
stickyCell.classList.add(STICKY_CELL_LAST_OF_COLUMN_CLASS);
}
}
}
}
}, {
key: "forceTableUpdate",
value: function forceTableUpdate() {
this.forceUpdate();
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var _this$props6 = this.props,
basic = _this$props6.basic,
celled = _this$props6.celled,
children = _this$props6.children,
classes = _this$props6.classes,
className = _this$props6.className,
collapsing = _this$props6.collapsing,
definition = _this$props6.definition,
fixed = _this$props6.fixed,
fontSize = _this$props6.fontSize,
fullWidth = _this$props6.fullWidth,
id = _this$props6.id,
selectable = _this$props6.selectable,
singleLine = _this$props6.singleLine,
size = _this$props6.size,
stackable = _this$props6.stackable,
stickyColumnCount = _this$props6.stickyColumnCount,
stretch = _this$props6.stretch,
striped = _this$props6.striped,
style = _this$props6.style;
var shouldHandleStickyBehavior = !fixed && !singleLine;
var rootClasses = (0, _classnames["default"])('ui', classes.root, 'table', _defineProperty({
'table-basic': basic,
'table-celled': celled,
'table-collapsing': collapsing,
'table-definition': definition,
'table-fixed': fixed,
'table-font-size-large': fontSize === 'large',
'table-font-size-medium': fontSize === 'medium',
'table-font-size-small': fontSize === 'small',
'table-font-size-xlarge': fontSize === 'xlarge',
'table-font-size-xsmall': fontSize === 'xsmall',
'table-font-size-xxsmall': fontSize === 'xxsmall',
'table-full-width': fullWidth,
'table-selectable': selectable,
'table-single-line': singleLine,
'table-size-medium': size === 'm' || size === 'medium',
'table-size-small': size === 's' || size === 'small',
'table-stretch': stretch && stretch !== 'very',
'table-stretch-very': stretch === 'very',
'table-striped': striped,
'table-stackable': stackable,
'table-unstackable': stackable === false
}, classes.tableSticky, stickyColumnCount), className);
var tableChildren = stickyColumnCount > 0 ? this.parseChildren(children) : children;
var tableJsx = /*#__PURE__*/_react["default"].createElement("table", {
className: rootClasses,
id: id,
ref: function ref(_ref4) {
_this4.tableRef = _ref4;
},
style: style
}, tableChildren);
if (stickyColumnCount > 0) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: classes.tableStickyColumns,
ref: function ref(_ref5) {
_this4.tableStickyContainer = _ref5;
}
}, /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars["default"], {
className: "table--scroll_container",
autoHide: true,
onScrollFrame: this.setStickyCellsStylesOnScroll,
onUpdate: this.delayedSetStickyTableContainerWidth,
renderTrackHorizontal: function renderTrackHorizontal(props) {
return /*#__PURE__*/_react["default"].createElement("div", _extends({}, props, {
style: _objectSpread({
position: 'absolute',
height: 6,
right: 2,
bottom: 2,
left: 2,
borderRadius: 3
}, !shouldHandleStickyBehavior && {
display: 'none'
})
}));
},
renderView: function renderView(props) {
return /*#__PURE__*/_react["default"].createElement("div", _extends({}, props, {
style: _objectSpread(_objectSpread({}, props.style), {}, {
// if we don't set this the table doesn't appear
position: 'relative'
})
}));
}
}, tableJsx));
}
return tableJsx;
}
}]);
return Table;
}(_react["default"].PureComponent);
Table.Body = _tableBody["default"];
Table.Cell = _tableCell["default"];
Table.Header = _tableHeader["default"];
Table.HeaderCell = _tableHeaderCell["default"];
Table.Row = _tableRow["default"];
Table.propTypes = propTypes;
Table.defaultProps = defaultProps;
var _default = (0, _withStyles["default"])(styles, {
withTheme: true
})(Table);
exports["default"] = _default;