@stokr/components-library
Version:
STOKR - Components Library
135 lines (134 loc) • 6.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ComponentScroll = _interopRequireDefault(require("../../ComponentScroll/ComponentScroll"));
var _Table2 = require("./Table.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const OptionalScroll = _ref => {
let {
children,
maxHeight,
noScroll,
onScroll
} = _ref;
if (noScroll) {
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children);
}
return /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, {
autoHeight: maxHeight !== 0,
autoHeightMax: maxHeight || undefined,
offset: 4,
barPadding: 8,
topPadding: 48,
handleScroll: onScroll
}, children);
};
OptionalScroll.propTypes = {
children: _propTypes.default.node.isRequired,
maxHeight: _propTypes.default.number.isRequired,
noScroll: _propTypes.default.bool.isRequired,
onScroll: _propTypes.default.func.isRequired
};
class Table extends _react.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "onResize", () => {
clearTimeout(this.resizeTimeout);
this.resizeTimeout = setTimeout(this.setColumnsWidth, 200);
});
_defineProperty(this, "setColumnsWidth", () => {
const headColumns = this.headTableEl.children[0].children[0].children;
const bodyColumns = this.bodyTableEl.children[0].children[0].children;
Array.prototype.forEach.call(bodyColumns, (column, columnKey) => {
bodyColumns[columnKey].style.width = '';
});
this.headTableEl.style.width = '';
Array.prototype.forEach.call(bodyColumns, (column, columnKey) => {
headColumns[columnKey].style.width = "".concat(column.offsetWidth, "px");
bodyColumns[columnKey].style.width = "".concat(column.offsetWidth, "px");
});
this.headTableEl.style.width = "".concat(this.bodyTableEl.offsetWidth, "px");
});
_defineProperty(this, "onScroll", e => {
if (!e) return;
this.headTableWrapperEl.scrollLeft = e.target.scrollLeft;
});
}
componentDidMount() {
this.setColumnsWidth();
window.addEventListener('resize', this.onResize);
}
componentWillUnmount() {
clearTimeout(this.resizeTimeout);
window.removeEventListener('resize', this.onResize);
}
render() {
const {
columns,
data,
maxHeight,
noScroll
} = this.props;
const columnsProps = {};
columns.map(column => {
columnsProps[column.key] = {
width: column.width,
align: column.align,
marginLeft: column.marginLeft
};
return column;
});
return /*#__PURE__*/_react.default.createElement(_Table2.Container, null, /*#__PURE__*/_react.default.createElement(_Table2.HeadWrapper, {
ref: el => {
this.headTableWrapperEl = el;
}
}, /*#__PURE__*/_react.default.createElement(_Table2.StyledTable, {
ref: el => {
this.headTableEl = el;
}
}, /*#__PURE__*/_react.default.createElement(_Table2.Head, null, /*#__PURE__*/_react.default.createElement(_Table2.Row, null, columns.map(column => /*#__PURE__*/_react.default.createElement(_Table2.Column, {
key: column.key,
align: column.align
}, column.label)))))), /*#__PURE__*/_react.default.createElement(_Table2.TableWrapper, null, /*#__PURE__*/_react.default.createElement(OptionalScroll, {
maxHeight: maxHeight,
noScroll: noScroll,
onScroll: this.onScroll
}, /*#__PURE__*/_react.default.createElement(_Table2.StyledTable, {
ref: el => {
this.bodyTableEl = el;
}
}, /*#__PURE__*/_react.default.createElement(_Table2.Head, {
hidden: true
}, /*#__PURE__*/_react.default.createElement(_Table2.Row, null, columns.map(column => /*#__PURE__*/_react.default.createElement(_Table2.Column, {
key: column.key,
colWidth: column.width,
minWidth: column.minWidth,
maxWidth: column.maxWidth,
align: column.align
}, column.label)))), /*#__PURE__*/_react.default.createElement(_Table2.Body, null, data.map(row => /*#__PURE__*/_react.default.createElement(_Table2.Row, {
key: row.id
}, Object.keys(row).map(columnKey => columnsProps[columnKey] && /*#__PURE__*/_react.default.createElement(_Table2.Column, {
key: columnKey,
align: columnsProps[columnKey].align
}, row[columnKey])))))))));
}
}
Table.propTypes = {
columns: _propTypes.default.arrayOf(Object).isRequired,
data: _propTypes.default.arrayOf(Object).isRequired,
maxHeight: _propTypes.default.number,
noScroll: _propTypes.default.bool
};
Table.defaultProps = {
maxHeight: 500,
noScroll: false
};
var _default = exports.default = Table;