chowa
Version:
UI component library based on React
161 lines (160 loc) • 7.81 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 utils_1 = require("../utils");
const tool_1 = require("./tool");
const table_filter_1 = require("./table-filter");
const table_sorter_1 = require("./table-sorter");
const table_column_default_wrapper_1 = require("./table-column-default-wrapper");
const table_column_drag_wrapper_1 = require("./table-column-drag-wrapper");
const checkbox_1 = require("../checkbox");
class TableHeader extends React.PureComponent {
constructor(props) {
super(props);
this.dragStartX = 0;
this.state = {
headerRows: this.compileHeaderRows(props.columns)
};
[
'onCellResize',
'onResizeMove',
'onResizeEnd',
'onSelectionChange'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
onSelectionChange(e) {
if (e.target.checked) {
this.props.updateTable({
selfSelectedIndexs: this.props.data.map((record) => {
return record.index;
})
});
if (this.props.onSelectAll) {
this.props.onSelectAll();
}
}
else {
this.props.updateTable({
selfSelectedIndexs: []
});
if (this.props.onDeSelectAll) {
this.props.onDeSelectAll();
}
}
}
componentDidUpdate(preProps) {
if (!utils_1.isEqual(preProps.columns, this.props.columns)) {
this.setState({
headerRows: this.compileHeaderRows(this.props.columns)
});
}
}
onResizeMove(e) {
const { columnsWidthMap, updateTable } = this.props;
const width = this.dragDataIndexWidth + e.pageX - this.dragStartX;
updateTable({
realColumnsWidthMap: Object.assign(Object.assign({}, columnsWidthMap), { [this.dragDataIndex]: width < tool_1.columnMinSize ? tool_1.columnMinSize : width })
});
}
onResizeEnd() {
utils_1.doms.off(document.body, 'mousemove', this.onResizeMove);
utils_1.doms.off(document.body, 'mouseup', this.onResizeEnd);
this.dragStartX = 0;
this.dragDataIndex = undefined;
this.dragDataIndexWidth = 0;
}
onCellResize(dataIndex, e) {
this.dragStartX = e.pageX;
this.dragDataIndex = dataIndex;
this.dragDataIndexWidth = utils_1.doms.rect(e.target.parentNode).width;
utils_1.doms.on(document.body, 'mousemove', this.onResizeMove);
utils_1.doms.on(document.body, 'mouseup', this.onResizeEnd);
}
compileHeaderRows(columns, rows = []) {
const row = {
tier: 0,
tiers: [],
cells: [],
columns: []
};
let nextRowColums = [];
columns.forEach((column, index) => {
const tier = tool_1.computedColumnTier(column);
const parentIndexs = column.parentIndexs || [];
row.columns.push(Object.assign(Object.assign({}, column), { parentIndexs }));
row.tiers.push(tier);
row.cells.push(tool_1.computedColumnAmountCell(column));
if (tier > row.tier) {
row.tier = tier;
}
if (column.children.length > 0) {
const children = [].concat(column.children).map((headerColumn) => {
headerColumn.parentIndexs = parentIndexs.concat(index);
return headerColumn;
});
nextRowColums = nextRowColums.concat(children);
}
});
rows.push(row);
if (nextRowColums.length > 0) {
this.compileHeaderRows(nextRowColums, rows);
}
return rows;
}
renderRow(row, key, amount) {
const { headerRowAttr, globalAlign, resizeable, dataIndexs, filterInfo, sorterInfo, data, updateTable, selectable, expanded, selectedIndexs, fixed, headerHeight, draggable, columnDragSorter } = this.props;
const rowStyle = Object.assign({}, (headerHeight > 0 ? { height: Math.floor(headerHeight / amount) } : {}));
return (React.createElement("tr", Object.assign({ key: key }, tool_1.attrMerge(headerRowAttr ? headerRowAttr(key) : {}, undefined, rowStyle)),
key === 0 && selectable && fixed !== 'right' &&
React.createElement("th", { rowSpan: row.tier, className: utils_1.preClass('table-align-center') },
React.createElement("div", { className: utils_1.preClass('table-header-column') },
React.createElement(checkbox_1.default, { className: utils_1.preClass('table-checkbox'), onChange: this.onSelectionChange, indeterminate: selectedIndexs.length > 0 && selectedIndexs.length < data.length, checked: data.length === selectedIndexs.length }))),
row.columns.map((column, index) => {
const { title, headerCellAttr, dataIndex, align, className, filterable, filters, filterMultiple, filterMethod, sortable, sorted, sortMode, sortMethod, parentIndexs } = column;
const cellResizeAble = resizeable
&& dataIndexs.includes(dataIndex)
&& dataIndexs.indexOf(dataIndex) + 1 < dataIndexs.length;
const rearAlign = align || globalAlign;
const Wrapper = draggable ? table_column_drag_wrapper_1.default : table_column_default_wrapper_1.default;
const cellClass = classnames_1.default({
[utils_1.preClass(`table-align-${rearAlign}`)]: rearAlign !== 'left',
[utils_1.preClass('table-cloumn-with-filter')]: filterable,
[utils_1.preClass('table-cloumn-with-sort')]: sortable,
[className]: utils_1.isExist(className)
});
const wrappAttr = Object.assign(Object.assign({ rowSpan: row.tier + 1 - row.tiers[index], colSpan: row.cells[index] }, tool_1.attrMerge(headerCellAttr ? headerCellAttr(dataIndex) : {}, cellClass)), (draggable ? {
parentIndexs,
index,
columnDragSorter
} : {}));
return (React.createElement(Wrapper, Object.assign({ key: dataIndex }, wrappAttr),
title,
filterable &&
React.createElement(table_filter_1.default, { updateTable: updateTable, filterMethod: filterMethod, filters: filters, filterMultiple: filterMultiple, dataIndex: dataIndex, activeFilter: filterInfo }),
sortable &&
React.createElement(table_sorter_1.default, { sorted: sorted, sortMode: sortMode, sortMethod: sortMethod, updateTable: updateTable, dataIndex: dataIndex, activeSorter: sorterInfo }),
cellResizeAble &&
React.createElement("span", { onMouseDown: this.onCellResize.bind(this, dataIndex), className: utils_1.preClass('table-cell-resize') })));
}),
key === 0 && expanded && fixed !== 'left' && React.createElement("th", { rowSpan: row.tier })));
}
render() {
const { headerRows } = this.state;
const amount = headerRows.length;
return (React.createElement("thead", { key: 'table-header' }, headerRows.map((row, key) => {
return this.renderRow(row, key, amount);
})));
}
}
exports.default = TableHeader;