chowa
Version:
UI component library based on React
216 lines (215 loc) • 12.7 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 PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const spin_1 = require("../spin");
const table_column_1 = require("./table-column");
const table_base_1 = require("./table-base");
const table_fixed_1 = require("./table-fixed");
const react_dnd_1 = require("react-dnd");
const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
const tool_1 = require("./tool");
class Table extends React.PureComponent {
constructor(props) {
super(props);
const data = tool_1.perfectDataIndex(props.data);
this.state = Object.assign(Object.assign({}, this.compileColums(props)), { realColumnsWidthMap: {}, realRowsHeightMap: [], selfLoading: props.loading, renderData: data, expanedVisibleMap: {}, filterInfo: undefined, sorterInfo: undefined, headerHeight: 0, contentScrollTop: 0, footerHeight: 0, scrollXStart: true, scrollXEnd: true, selfSelectedIndexs: props.selectedIndexs, highlightRowIndex: -1 });
[
'updateRenderData',
'rowDragSorter',
'columnDragSorter'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (!utils_1.isEqual(preProps.data, this.props.data)) {
this.setState({
renderData: tool_1.perfectDataIndex(this.props.data),
expanedVisibleMap: {}
});
}
if (!utils_1.isEqual(preProps.columns, this.props.columns) || !utils_1.isEqual(preProps.children, this.props.children)) {
this.setState(Object.assign({}, this.compileColums(this.props)));
}
if (preProps.loading !== this.props.loading) {
this.setState({
selfLoading: this.props.loading
});
}
if (!utils_1.isEqual(preProps.selectedIndexs, this.props.selectedIndexs)) {
this.setState({
selfSelectedIndexs: this.props.selectedIndexs
});
}
}
updateRenderData(params) {
this.setState(Object.assign({}, params));
}
rowDragSorter(dragIndex, dropIndex) {
const sortData = [].concat(this.state.renderData);
const dragRecord = sortData[dragIndex];
const dropRecord = sortData[dropIndex];
const replaceIndex = dropIndex > dragIndex ? dropIndex - 1 : dropIndex;
sortData.splice(dragIndex, 1);
if (dragIndex > dropIndex) {
sortData.splice(replaceIndex, 1, dragRecord, dropRecord);
}
else {
sortData.splice(replaceIndex, 1, dropRecord, dragRecord);
}
this.setState({
renderData: sortData
});
if (this.props.onRowDragEnd) {
this.props.onRowDragEnd(sortData, dragRecord);
}
}
columnDragSorter(dragIndex, dropIndex, parentIndexs) {
const columns = tool_1.cloneColumns(this.state.renderColumns);
let sortColumns = columns;
parentIndexs.forEach((index) => {
sortColumns = sortColumns[index].children;
});
const dragColumn = sortColumns[dragIndex];
const dropColumn = sortColumns[dropIndex];
const replaceIndex = dropIndex > dragIndex ? dropIndex - 1 : dropIndex;
sortColumns.splice(dragIndex, 1);
if (dragIndex > dropIndex) {
sortColumns.splice(replaceIndex, 1, dragColumn, dropColumn);
}
else {
sortColumns.splice(replaceIndex, 1, dropColumn, dragColumn);
}
this.setState({
renderColumns: columns,
renderDataIndexs: tool_1.compileColumnsDataIndexs(columns)
});
if (this.props.onColumDragEnd) {
this.props.onColumDragEnd(columns, dragColumn);
}
}
compileColums(props) {
const { children, columns } = props;
const renderColumns = Array.isArray(columns)
? tool_1.perfectPropsColumns(columns)
: tool_1.transformReactNodeToColumns(children);
const renderDataIndexs = tool_1.compileColumnsDataIndexs(renderColumns);
const customColumnsWidthMap = tool_1.compileColumnsWidthMap(renderColumns, renderDataIndexs);
const leftFixedColums = tool_1.compileLeftFixedColumns(renderColumns);
const leftFixedDataIndexs = tool_1.compileColumnsDataIndexs(leftFixedColums);
const rightFixedColums = tool_1.compileRightFixedColumns(renderColumns);
const rightFixedDataIndexs = tool_1.compileColumnsDataIndexs(rightFixedColums);
return {
renderColumns,
renderDataIndexs,
customColumnsWidthMap,
leftFixedColums,
leftFixedDataIndexs,
rightFixedDataIndexs,
rightFixedColums
};
}
renderTable() {
const { showHeader, fixedHeader, scrollHeight, resizeable, className, style, bordered, striped, align, size, headerRowAttr, selectable, onSelect, onDeSelect, onSelectAll, onDeSelectAll, accordion, expandedRowRender, expandedOpenNode, expandedCloseNode, onExpandedVisibleChange, rowAttr, highlightRow, noDataDescription, noDataImg, noDataImgStyle, footer, draggable } = this.props;
const { renderColumns, renderDataIndexs, leftFixedColums, leftFixedDataIndexs, rightFixedColums, rightFixedDataIndexs, expanedVisibleMap, customColumnsWidthMap, realColumnsWidthMap, realRowsHeightMap, selfLoading, filterInfo, sorterInfo, renderData, selfSelectedIndexs, highlightRowIndex, headerHeight, contentScrollTop, footerHeight, scrollXStart, scrollXEnd } = this.state;
const expanded = !draggable && utils_1.isExist(expandedRowRender);
const withFooter = utils_1.isExist(footer);
const withLeftFixed = !draggable && utils_1.isExist(leftFixedDataIndexs) && utils_1.isExist(renderData);
const withRightFixed = !draggable && utils_1.isExist(rightFixedDataIndexs) && utils_1.isExist(renderData);
const columnsWidthMap = Object.assign(Object.assign({}, customColumnsWidthMap), realColumnsWidthMap);
const wrapperClass = classnames_1.default({
[utils_1.preClass('table-wrapper')]: true,
[className]: utils_1.isExist(className)
});
const tableClass = classnames_1.default({
[utils_1.preClass('table')]: true,
[utils_1.preClass(`table-${size}`)]: size !== 'default',
[utils_1.preClass('table-fixed-header')]: fixedHeader,
[utils_1.preClass('table-bordered')]: bordered,
[utils_1.preClass('table-striped')]: striped,
[utils_1.preClass('table-draggable')]: draggable,
[utils_1.preClass('table-with-header')]: showHeader,
[utils_1.preClass('table-with-footer')]: utils_1.isExist(footer)
});
return (React.createElement("section", { className: wrapperClass, style: style },
React.createElement(spin_1.default, { loading: selfLoading },
React.createElement("div", { className: tableClass },
React.createElement(table_base_1.default, { striped: striped, expanded: expanded, selectable: selectable, columns: renderColumns, columnsWidthMap: columnsWidthMap, showHeader: showHeader, fixedHeader: fixedHeader, scrollHeight: scrollHeight, dataIndexs: renderDataIndexs, data: renderData, globalAlign: align, resizeable: resizeable, headerRowAttr: headerRowAttr, filterInfo: filterInfo, sorterInfo: sorterInfo, onSelectAll: onSelectAll, onDeSelectAll: onDeSelectAll, onSelect: onSelect, onDeSelect: onDeSelect, selectedIndexs: selfSelectedIndexs, expanedVisibleMap: expanedVisibleMap, accordion: accordion, expandedRowRender: expandedRowRender, expandedOpenNode: expandedOpenNode, expandedCloseNode: expandedCloseNode, onExpandedVisibleChange: onExpandedVisibleChange, rowAttr: rowAttr, highlightRow: highlightRow, highlightRowIndex: highlightRowIndex, noDataDescription: noDataDescription, noDataImg: noDataImg, noDataImgStyle: noDataImgStyle, footer: footer, updateTable: this.updateRenderData, scrollTop: contentScrollTop, draggable: draggable, rowDragSorter: this.rowDragSorter, columnDragSorter: this.columnDragSorter }),
withLeftFixed &&
React.createElement(table_fixed_1.default, { headerHeight: headerHeight, footerHeight: footerHeight, scrollTop: contentScrollTop, fixed: 'left', fixedHeader: fixedHeader, dataIndexs: leftFixedDataIndexs, columns: leftFixedColums, striped: striped, expanded: expanded, selectable: selectable, columnsWidthMap: columnsWidthMap, rowsHeightMap: realRowsHeightMap, showHeader: showHeader, data: renderData, globalAlign: align, resizeable: resizeable, headerRowAttr: headerRowAttr, filterInfo: filterInfo, sorterInfo: sorterInfo, onSelectAll: onSelectAll, onDeSelectAll: onDeSelectAll, onSelect: onSelect, onDeSelect: onDeSelect, selectedIndexs: selfSelectedIndexs, expanedVisibleMap: expanedVisibleMap, accordion: accordion, expandedRowRender: expandedRowRender, expandedOpenNode: expandedOpenNode, expandedCloseNode: expandedCloseNode, onExpandedVisibleChange: onExpandedVisibleChange, rowAttr: rowAttr, highlightRow: highlightRow, highlightRowIndex: highlightRowIndex, scrollHeight: scrollHeight, updateTable: this.updateRenderData, active: !scrollXStart, withFooter: withFooter }),
withRightFixed &&
React.createElement(table_fixed_1.default, { headerHeight: headerHeight, footerHeight: footerHeight, scrollTop: contentScrollTop, fixed: 'right', fixedHeader: fixedHeader, dataIndexs: rightFixedDataIndexs, columns: rightFixedColums, striped: striped, expanded: expanded, selectable: selectable, columnsWidthMap: columnsWidthMap, rowsHeightMap: realRowsHeightMap, showHeader: showHeader, data: renderData, globalAlign: align, resizeable: resizeable, headerRowAttr: headerRowAttr, filterInfo: filterInfo, sorterInfo: sorterInfo, onSelectAll: onSelectAll, onDeSelectAll: onDeSelectAll, onSelect: onSelect, onDeSelect: onDeSelect, selectedIndexs: selfSelectedIndexs, expanedVisibleMap: expanedVisibleMap, accordion: accordion, expandedRowRender: expandedRowRender, expandedOpenNode: expandedOpenNode, expandedCloseNode: expandedCloseNode, onExpandedVisibleChange: onExpandedVisibleChange, rowAttr: rowAttr, highlightRow: highlightRow, highlightRowIndex: highlightRowIndex, updateTable: this.updateRenderData, scrollHeight: scrollHeight, active: !scrollXEnd, withFooter: withFooter })))));
}
render() {
const { draggable } = this.props;
if (!draggable) {
return this.renderTable();
}
return (React.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.default }, this.renderTable()));
}
}
Table.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
size: PropTypes.oneOf(['default', 'small', 'large']),
align: PropTypes.oneOf(['left', 'right', 'center']),
loading: PropTypes.bool,
data: PropTypes.array,
bordered: PropTypes.bool,
striped: PropTypes.bool,
fixedHeader: PropTypes.bool,
scrollHeight: PropTypes.number,
columns: PropTypes.array,
resizeable: PropTypes.bool,
showHeader: PropTypes.bool,
headerRowAttr: PropTypes.func,
selectable: PropTypes.bool,
selectedIndexs: PropTypes.array,
onSelect: PropTypes.func,
onDeSelect: PropTypes.func,
onSelectAll: PropTypes.func,
onDeSelectAll: PropTypes.func,
accordion: PropTypes.bool,
expandedRowRender: PropTypes.func,
expandedOpenNode: PropTypes.node,
expandedCloseNode: PropTypes.node,
onExpandedVisibleChange: PropTypes.func,
rowAttr: PropTypes.func,
highlightRow: PropTypes.bool,
footer: PropTypes.node,
noDataDescription: PropTypes.node,
noDataImg: PropTypes.string,
noDataImgStyle: PropTypes.object,
draggable: PropTypes.bool,
onRowDragEnd: PropTypes.func,
onColumDragEnd: PropTypes.func
};
Table.defaultProps = {
align: 'left',
size: 'default',
loading: false,
data: [],
bordered: false,
striped: false,
fixedHeader: false,
scrollHeight: 420,
resizeable: false,
showHeader: true,
selectedIndexs: [],
selectable: false,
accordion: false,
draggable: false
};
Table.Column = table_column_1.default;
exports.default = Table;