chowa
Version:
UI component library based on React
126 lines (125 loc) • 6.98 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.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const i18n_1 = require("../i18n");
const tool_1 = require("./tool");
const checkbox_1 = require("../checkbox");
const transition_1 = require("../transition");
const table_row_default_wrapper_1 = require("./table-row-default-wrapper");
const table_row_drag_wrapper_1 = require("./table-row-drag-wrapper");
class TableBodyRow extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
expandedInAnim: false
};
[
'onMouseLeaveHandler',
'onMouseEnterHandler',
'onSelectionChange',
'updateExpandedVisible',
'onExpandedHide'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
onExpandedHide() {
this.setState({
expandedInAnim: false
});
}
onSelectionChange(e) {
const { selectedIndexs, index, updateTable, onSelect, onDeSelect, record } = this.props;
const selfSelectedIndexs = [].concat(selectedIndexs);
if (e.target.checked) {
selfSelectedIndexs.push(index);
if (onSelect) {
onSelect(record);
}
}
else {
selfSelectedIndexs.splice(selectedIndexs.indexOf(index), 1);
if (onDeSelect) {
onDeSelect(record);
}
}
updateTable({ selfSelectedIndexs });
}
updateExpandedVisible() {
const { expanedVisibleMap, onExpandedVisibleChange, index, updateTable, record, accordion } = this.props;
const visible = !expanedVisibleMap[index];
if (onExpandedVisibleChange) {
onExpandedVisibleChange(visible, record);
}
updateTable({
expanedVisibleMap: accordion
? Object.assign(Object.assign({}, expanedVisibleMap), { [index]: visible }) : { [index]: visible }
});
if (visible) {
this.setState({ expandedInAnim: visible });
}
}
onMouseEnterHandler() {
const { updateTable, index } = this.props;
updateTable({ highlightRowIndex: index });
}
onMouseLeaveHandler() {
this.props.updateTable({ highlightRowIndex: -1 });
}
render() {
const { index, renderDataIndex, highlightRowIndex, globalAlign, record, dataIndexs, rowAttr, highlightRow, selectable, selectedIndexs, columns, expanedVisibleMap, expandedRowRender, expandedOpenNode, expandedCloseNode, fixed, height, draggable, rowDragSorter, expanded, striped } = this.props;
const { expandedInAnim } = this.state;
const rowClass = classnames_1.default({
[utils_1.preClass('table-dark-row')]: striped && renderDataIndex % 2 === 0,
[utils_1.preClass('table-highlight-row')]: highlightRow && index === highlightRowIndex
});
const expandedRowClass = classnames_1.default({
[utils_1.preClass('table-expanded-row')]: true,
[utils_1.preClass('table-highlight-row')]: highlightRow && index === highlightRowIndex
});
const expandedVisible = expanded && expanedVisibleMap[index] === true;
const fragments = [];
const Wrapper = draggable ? table_row_drag_wrapper_1.default : table_row_default_wrapper_1.default;
const wrapperAtrr = Object.assign(Object.assign({ onMouseLeave: highlightRow ? this.onMouseLeaveHandler : undefined, onMouseEnter: highlightRow ? this.onMouseEnterHandler.bind(this, index) : undefined }, tool_1.attrMerge(rowAttr ? rowAttr(index, record) : {}, rowClass, utils_1.isExist(height) ? { height } : {})), (draggable ? {
renderDataIndex,
rowDragSorter
} : {}));
fragments.push(React.createElement(Wrapper, Object.assign({ key: index }, wrapperAtrr),
selectable && fixed !== 'right' &&
React.createElement("td", { rowSpan: expandedVisible || expandedInAnim ? 2 : 1, key: `${index}-selection`, className: utils_1.preClass('table-align-center') },
React.createElement(checkbox_1.default, { className: utils_1.preClass('table-checkbox'), onChange: this.onSelectionChange, checked: selectedIndexs.includes(index) })),
dataIndexs.map((dataIndex, key) => {
const column = tool_1.getColumnByDataIndex(columns, dataIndex);
const { align, cellAttr, render } = column;
const rearAlign = align || globalAlign;
const colClass = classnames_1.default({
[utils_1.preClass(`table-align-${rearAlign}`)]: rearAlign !== 'left'
});
return (React.createElement("td", Object.assign({ key: key, className: colClass }, tool_1.attrMerge(cellAttr ? cellAttr(dataIndex, record) : {}, colClass)), render ? render(record[dataIndex], dataIndex, record) : record[dataIndex]));
}),
expanded && fixed !== 'left' &&
React.createElement("td", { key: `${index}-expanded`, className: utils_1.preClass('table-align-center') },
React.createElement("span", { className: utils_1.preClass('table-expanded-btn'), onClick: this.updateExpandedVisible }, expandedVisible
? React.createElement(i18n_1.I18nReceiver, { module: 'Table' }, (i18n) => expandedCloseNode || i18n.expandedCloseNode)
: React.createElement(i18n_1.I18nReceiver, { module: 'Table' }, (i18n) => expandedOpenNode || i18n.expandedOpenNode)))));
if (expanded) {
fragments.push(React.createElement("tr", Object.assign({ key: `${index}-expanded`, onMouseLeave: highlightRow ? this.onMouseLeaveHandler : undefined, onMouseEnter: highlightRow ? this.onMouseEnterHandler.bind(this, index) : undefined }, tool_1.attrMerge(rowAttr ? rowAttr(index, record) : {}, expandedRowClass, expandedVisible || expandedInAnim ? {} : { display: 'none' })),
React.createElement("td", { colSpan: dataIndexs.length + 1 },
React.createElement(transition_1.default, { visible: expandedVisible, onHide: this.onExpandedHide, appear: utils_1.preClass('slide-down-appear'), leave: utils_1.preClass('slide-down-leave'), enter: utils_1.preClass('slide-down-enter') },
React.createElement("div", { className: utils_1.preClass('table-expanded-wrapper') },
React.createElement("div", { className: utils_1.preClass('table-expanded') }, expandedRowRender(record)))))));
}
return fragments;
}
}
exports.default = TableBodyRow;