chowa
Version:
UI component library based on React
154 lines (153 loc) • 8.29 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const classnames_1 = require("classnames");
const resize_observer_polyfill_1 = require("resize-observer-polyfill");
const utils_1 = require("../utils");
const table_col_group_1 = require("./table-col-group");
const table_header_1 = require("./table-header");
const table_body_1 = require("./table-body");
const table_footer_1 = require("./table-footer");
class TableBase extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
clientWidth: 0,
contentWidth: 0
};
[
'updateTableSize',
'onContentScroll',
'onClientScroll'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidMount() {
this.resizeObserver = new resize_observer_polyfill_1.default(this.updateTableSize);
this.resizeObserver.observe(this.tableEle);
}
componentWillUnmount() {
this.resizeObserver.unobserve(this.tableEle);
this.resizeObserver.disconnect();
}
componentDidUpdate(preProps) {
if (preProps.scrollTop !== this.props.scrollTop) {
this.bodyEle.scrollTop = this.props.scrollTop;
}
}
updateTableSize() {
const { showHeader, footer, dataIndexs, selectable, expanded, data } = this.props;
const headerHeight = showHeader ? utils_1.doms.rect(this.headerEle).height : 0;
const footerHeight = utils_1.isExist(footer) ? utils_1.doms.rect(this.footerEle).height : 0;
const clientWidth = utils_1.doms.rect(this.tableEle).width;
const contentWidth = utils_1.doms.rect(this.contentEle).width;
const scrollXStart = contentWidth <= clientWidth
? true
: this.tableEle.scrollLeft === 0;
const scrollXEnd = contentWidth <= clientWidth
? true
: this.tableEle.scrollLeft + clientWidth === contentWidth;
const realColumnsWidthMap = {};
const realRowsHeightMap = [];
if (utils_1.isExist(data)) {
const cells = this.contentEle.querySelector('tbody').querySelector('tr').childNodes;
const start = selectable ? 1 : 0;
const end = expanded ? cells.length - 1 : cells.length;
for (let i = start; i < end; i++) {
const cell = cells[i];
const index = i - start;
realColumnsWidthMap[dataIndexs[index]] = utils_1.doms.rect(cell).width;
}
if (selectable) {
realColumnsWidthMap[utils_1.preClass('table-selection-cell')]
= utils_1.doms.rect(cells[0]).width;
}
if (expanded) {
realColumnsWidthMap[utils_1.preClass('table-expanded-cell')]
= utils_1.doms.rect(cells[cells.length - 1]).width;
}
this.contentEle.querySelector('tbody').querySelectorAll('tr').forEach((rowEle, index) => {
if (expanded && index % 2 === 1) {
return;
}
realRowsHeightMap.push(utils_1.doms.rect(rowEle).height);
});
}
this.setState({
clientWidth,
contentWidth
});
this.props.updateTable({
headerHeight,
footerHeight,
realColumnsWidthMap,
realRowsHeightMap,
scrollXStart,
scrollXEnd
});
}
onClientScroll() {
const { clientWidth, contentWidth } = this.state;
const scrollXStart = contentWidth <= clientWidth
? true
: this.tableEle.scrollLeft === 0;
const scrollXEnd = contentWidth <= clientWidth
? true
: this.tableEle.scrollLeft + clientWidth === contentWidth;
this.props.updateTable({
scrollXStart,
scrollXEnd
});
}
onContentScroll() {
this.props.updateTable({
contentScrollTop: this.bodyEle.scrollTop
});
}
render() {
const { expanded, striped, selectable, columns, columnsWidthMap, showHeader, fixedHeader, scrollHeight, dataIndexs, data, globalAlign, resizeable, headerRowAttr, filterInfo, sorterInfo, onSelectAll, onDeSelectAll, onSelect, onDeSelect, selectedIndexs, expanedVisibleMap, accordion, expandedRowRender, expandedOpenNode, expandedCloseNode, onExpandedVisibleChange, rowAttr, highlightRow, highlightRowIndex, noDataDescription, noDataImg, noDataImgStyle, footer, updateTable, draggable, rowDragSorter, columnDragSorter } = this.props;
const { contentWidth, clientWidth } = this.state;
const baseClass = classnames_1.default({
[utils_1.preClass('table-base')]: true,
[utils_1.preClass('table-scroll-x')]: contentWidth > clientWidth
});
const scrollStyle = Object.assign({}, (contentWidth > clientWidth ? { width: contentWidth } : {}));
const bodyStyle = Object.assign(Object.assign({}, (fixedHeader ? { maxHeight: scrollHeight } : {})), scrollStyle);
const colGroupControl = (React.createElement(table_col_group_1.default, { dataIndexs: dataIndexs, columnsWidthMap: columnsWidthMap, selectable: selectable, expanded: expanded }));
return (React.createElement("div", { className: baseClass, ref: (ele) => {
this.tableEle = ele;
}, onScroll: this.onClientScroll },
showHeader &&
React.createElement("div", { className: utils_1.preClass('table-header-wrapper'), style: scrollStyle },
React.createElement("table", { ref: (ele) => {
this.headerEle = ele;
} },
colGroupControl,
React.createElement(table_header_1.default, { dataIndexs: dataIndexs, data: data, updateTable: updateTable, columns: columns, columnsWidthMap: columnsWidthMap, globalAlign: globalAlign, resizeable: resizeable, headerRowAttr: headerRowAttr, filterInfo: filterInfo, sorterInfo: sorterInfo, selectable: selectable, onSelectAll: onSelectAll, onDeSelectAll: onDeSelectAll, selectedIndexs: selectedIndexs, expanded: expanded, draggable: draggable, columnDragSorter: columnDragSorter }))),
React.createElement("div", { className: utils_1.preClass('table-body-wrapper'), style: bodyStyle, onScroll: this.onContentScroll, ref: (ele) => {
this.bodyEle = ele;
} },
React.createElement("table", { ref: (ele) => {
this.contentEle = ele;
} },
colGroupControl,
React.createElement(table_body_1.default, { data: data, globalAlign: globalAlign, dataIndexs: dataIndexs, columns: columns, selectable: selectable, selectedIndexs: selectedIndexs, onSelect: onSelect, onDeSelect: onDeSelect, updateTable: updateTable, expanedVisibleMap: expanedVisibleMap, accordion: accordion, expandedRowRender: expandedRowRender, expandedOpenNode: expandedOpenNode, expandedCloseNode: expandedCloseNode, onExpandedVisibleChange: onExpandedVisibleChange, rowAttr: rowAttr, highlightRow: highlightRow, highlightRowIndex: highlightRowIndex, noDataDescription: noDataDescription, noDataImg: noDataImg, noDataImgStyle: noDataImgStyle, draggable: draggable, rowDragSorter: rowDragSorter, striped: striped, expanded: expanded }))),
utils_1.isExist(footer) &&
React.createElement("div", { className: utils_1.preClass('table-footer-wrapper'), style: scrollStyle, ref: (ele) => {
this.footerEle = ele;
} },
React.createElement("table", null,
colGroupControl,
React.createElement(table_footer_1.default, { footer: footer, withSelection: selectable, withExpanded: expanded, dataIndexs: dataIndexs })))));
}
}
exports.default = TableBase;