ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
693 lines (692 loc) • 32.6 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
import React from 'react';
import { Call, IsFunc, HasValue, DebounceClass } from 'basic-helper';
import classnames from 'classnames';
import MapperFilter from './mapper-filter';
import { Icon } from '../icon';
var isStringNumRegex = /\d+,?/;
var exec = new DebounceClass().exec;
var tdSpecClassMapper = {
checkbox: 'check-td'
};
var scrollLeftClass = 'scroll-to-left';
var scrollRightClass = 'scroll-at-right';
var breakWordClass = 'break-word';
var autoWidthClass = 'auto-width';
var tdMaxWidth = 400;
var moneyFormat = function (text) { return (HasValue(text) ? text.toLocaleString('en-US') : '-'); };
var defaultSortIgnores = ['action', 'checkbox'];
/**
* 提供一个快速的表格数据渲染容器，不需要关注具体如何渲染，只需要传入对应的数据和过滤器
*
* @export
* @class Table
* @extends {MapperFilter}
*/
var Table = /** @class */ (function (_super) {
__extends(Table, _super);
function Table(props) {
var _this = _super.call(this, props) || this;
_this.excludeFilterField = ['action', 'checkbox'];
_this.firstTDDOMs = {};
_this.firstRowNodes = {};
_this.sameSortTime = 0;
_this.fixedLeftGroup = [];
_this.fixedRightGroup = [];
_this.columnHeightInfo = {};
// componentDidUpdate() {
// // this.calcSize();
// }
/**
* 清除所有已选择的内容
*
* @memberof TableBody
* @public
*/
_this.clearCheckeds = function () {
_this.toggleAllItems(false);
};
_this.handleClickToHighlight = function (e, rowIdx) {
// if (e.currentTarget !== e.target) return;
_this.setState(function (_a) {
var highlightRow = _a.highlightRow;
var nextState = __assign({}, highlightRow);
nextState[rowIdx] = !nextState[rowIdx];
return {
highlightRow: nextState
};
});
};
_this.toggleSelectItem = function (item, idx) {
var checkedItems = _this.state.checkedItems;
var nextCheckedItems = __assign({}, checkedItems);
if (nextCheckedItems[idx]) {
delete nextCheckedItems[idx];
}
else {
nextCheckedItems[idx] = item;
}
_this.selectItems(nextCheckedItems, idx);
};
_this.getCheckbox = function (str, item, mapper, idx) {
var checkedItems = _this.state.checkedItems;
var checked = !!checkedItems[idx];
return (React.createElement("input", { type: "checkbox", checked: checked, onChange: function (e) { return _this.toggleSelectItem(item, idx); } }));
};
_this.getKeyMapper = function () {
var needCheck = _this.props.needCheck;
var columns = _this.getColumns();
var result = columns;
if (needCheck) {
var fixedLeft = columns[0].fixed === 'left';
var checkExtend = Object.assign({}, fixedLeft ? { fixed: 'left' } : {}, {
key: 'checkbox',
// w: checkWidth,
filter: _this.getCheckbox
});
result = __spreadArrays([checkExtend], columns);
}
_this.saveFixedGroup(result);
return result;
};
_this.saveFixedGroup = function (columns) {
if (_this.hadSaved)
return;
_this.hadSaved = true;
var _a = _this.props, _b = _a.fixedRightKeys, fixedRightKeys = _b === void 0 ? [] : _b, _c = _a.fixedLeftKeys, fixedLeftKeys = _c === void 0 ? [] : _c;
columns.forEach(function (item, idx) {
var key = item.key, fixed = item.fixed;
var nextItem = __assign(__assign({}, item), { idx: idx });
switch (true) {
case fixedLeftKeys.indexOf(key) !== -1:
case fixed === 'left':
_this.fixedLeftGroup.push(nextItem);
break;
case fixedRightKeys.indexOf(key) !== -1:
case fixed === 'right':
_this.fixedRightGroup.push(nextItem);
break;
}
});
};
_this.setTableContainerClass = function (isAutoWidth) {
if (_this.tableContainer)
_this.tableContainer.classList.toggle(autoWidthClass, isAutoWidth);
};
_this.resetTableDOMInfo = function () {
_this.tableContainerWidth = _this.tableContainer.offsetWidth;
};
_this.resizeCalcSize = function () {
if (!_this.tableContainer)
return;
var tableWidth = _this.state.tableWidth;
if (tableWidth !== 'auto' && tableWidth < _this.tableContainer.offsetWidth) {
_this.setTableContainerClass(true);
_this.setState({
tableWidth: 'auto',
isAutoWidth: true
}, function () { return _this.calcSize(_this.firstRowNodes); });
}
else {
_this.calcSize(_this.firstRowNodes);
}
setTimeout(function () {
_this.resetTableDOMInfo();
}, 100);
};
_this.onChangeRecords = function () {
setTimeout(function () {
_this.reSaveFirstRow();
_this.resizeCalcSize();
}, 10);
};
_this.isHidden = function (el) { return el && el.offsetParent === null; };
_this.initTableContainer = function (e) {
_this.tableContainer = e;
if (e) {
_this.tableContainerWidth = e.offsetWidth;
setTimeout(function () {
e.classList.add('ready');
if (e && _this.state.tableWidth === 'auto') {
e.classList.add(scrollRightClass);
}
}, 100);
}
_this.calcSize(_this.firstRowNodes);
};
_this.clearWatch = function () {
_this.desplayWatcher && clearTimeout(_this.desplayWatcher);
};
_this.saveContainer = function (e) {
/** 检测表格元素是否被隐藏了，如果被隐藏了，则设置监听器监听显示变化 */
_this.clearWatch();
var isHide = _this.isHidden(e);
var _a = _this.props, records = _a.records, watcherTimer = _a.watcherTimer;
var hasRecord = records.length > 0;
if (!hasRecord || isHide) {
_this.desplayWatcher = setTimeout(function () {
_this.saveContainer(e);
}, watcherTimer);
}
else {
_this.initTableContainer(e);
_this.desplayWatcher = null;
}
};
_this.getRowKey = function (record, idx) {
var rowKey = _this.props.rowKey;
var key;
if (rowKey) {
if (IsFunc(rowKey)) {
key = rowKey(record, idx);
}
else if (typeof rowKey == 'string') {
key = record[rowKey] || idx;
}
}
else {
key = idx;
exec(function () { return console.warn('需要设置 rowKey，为每一行设置唯一 key'); }, 1000);
}
return key;
};
_this.saveCell = function (idx, isMain, rowKey) { return function (tdDOM) {
if (tdDOM && tdDOM.offsetWidth >= tdMaxWidth)
tdDOM.classList.add(breakWordClass);
if (tdDOM && isMain && idx === 0) {
_this.columnHeightInfo[rowKey] = tdDOM.offsetHeight;
}
if (tdDOM && !isMain) {
// eslint-disable-next-line no-param-reassign
tdDOM.style.height = _this.columnHeightInfo[rowKey] + "px";
}
}; };
// eslint-disable-next-line consistent-return
_this.checkRightAlign = function (mapperItem) {
var _a = _this.props.alignRightTypes, alignRightTypes = _a === void 0 ? [] : _a;
for (var _i = 0, alignRightTypes_1 = alignRightTypes; _i < alignRightTypes_1.length; _i++) {
var rightAlignItem = alignRightTypes_1[_i];
// eslint-disable-next-line no-prototype-builtins
if (mapperItem.hasOwnProperty(rightAlignItem)) {
return true;
// eslint-disable-next-line no-continue
}
continue;
}
};
_this.handleHoverRow = function (idx) {
_this.setState({
hoveringRow: idx
});
};
_this.renderRow = function (options) {
var clickToHighlight = _this.props.clickToHighlight;
var records = options.records, other = __rest(options, ["records"]);
var _a = _this.state, hoveringRow = _a.hoveringRow, highlightRow = _a.highlightRow;
return records.map(function (record, idx) {
if (!record)
return;
var _a = record._highlight, _highlight = _a === void 0 ? '' : _a;
var key = _this.getRowKey(record, idx);
var isHighlight = !!highlightRow[idx];
var isHoving = hoveringRow === idx;
// eslint-disable-next-line consistent-return
return (React.createElement("tr", { key: key, onMouseEnter: function () { return _this.handleHoverRow(idx); }, onClick: clickToHighlight ? function (e) { return _this.handleClickToHighlight(e, idx); } : undefined, className: "" + _highlight + (isHoving ? ' hovering' : '') + (isHighlight ? ' highlight' : '') }, _this.renderCell(__assign({ rowKey: key, record: record, parentIdx: idx }, other))));
});
};
_this.calcTableWidth = function (columns) {
var headerWidthMapper = _this.state.headerWidthMapper;
if (headerWidthMapper.length === 0)
return null;
var res = 0;
columns.forEach(function (mapper, _idx) {
var idx = mapper.idx;
var __idx = idx || _idx;
// if(fixed == 'right') {
// console.log([[...headerWidthMapper].reverse()], idx)
// res += [[...headerWidthMapper].reverse()][idx];
// } else {
res += headerWidthMapper[__idx];
// }
});
return res;
};
_this.renderTableHeader = function (options) {
var needInnerSort = _this.props.needInnerSort;
var _a = _this.state, headerWidthMapper = _a.headerWidthMapper, sortField = _a.sortField, sortOutsideField = _a.sortOutsideField, isDescInner = _a.isDescInner, isDescOutside = _a.isDescOutside;
var columns = options.columns, isAllCheck = options.isAllCheck;
var style = {
width: _this.calcTableWidth(columns) || undefined
};
var isDesc = typeof isDescOutside == 'undefined' ? isDescInner : isDescOutside;
return (React.createElement("div", { key: "tableHead", className: "__table-scroll", style: style },
React.createElement("table", { className: "table nomargin table-header" },
React.createElement("thead", null,
React.createElement("tr", null, columns.map(function (item, _idx) {
if (!item)
return;
// const { key, w } = item;
// const cellWidth = w || headerWidthMapper[idx];
var key = item.key, idx = item.idx, onSort = item.onSort;
var __idx = idx || _idx;
var cellWidth = headerWidthMapper[__idx];
var needSort = needInnerSort || onSort;
var isRightAlign = _this.checkRightAlign(item);
var title;
if (key === 'checkbox') {
title = (React.createElement("input", { type: "checkbox", checked: isAllCheck, onChange: function (e) { return _this.toggleAllItems(e.target.checked); } }));
}
else {
title = _this.titleFilter(item, __idx);
}
var isOrdering = onSort ? sortOutsideField === key : sortField === key;
var canOrder = needSort && !_this.ignoreFilter(key);
var sortTip = canOrder && (React.createElement("span", { className: "sort-caret-group " + (isDesc ? 'desc' : 'asc') },
React.createElement("span", { className: "caret up", style: {
transform: "rotate(180deg)"
} }),
React.createElement("span", { className: "caret down" })));
var clickHandlerForTh = needSort ? {
onClick: function () {
if (IsFunc(onSort)) {
var _isDesc = onSort(item, isDescOutside);
_this.setState({
isDescOutside: !!_isDesc,
sortOutsideField: key
});
}
else {
_this.orderRecord(key);
}
}
} : {};
var _className = classnames(isOrdering && (isDesc ? '_desc' : '_asc'), canOrder && '_order _btn', isRightAlign && 'right');
// eslint-disable-next-line consistent-return
return (React.createElement("th", __assign({ className: _className, key: key }, clickHandlerForTh, { style: {
width: cellWidth
} }),
title,
sortTip));
}))))));
};
_this.reSaveFirstRow = function () {
_this.firstRowNodes = _this.mainTableBody ? _this.mainTableBody.querySelectorAll('tbody tr:first-child td') : null;
};
_this.saveTableBody = function (t) {
_this.mainTableBody = t;
_this.firstRowNodes = t ? t.querySelectorAll('tbody tr:first-child td') : null;
t && _this.calcSize(_this.firstRowNodes);
};
_this.hasFixedGroup = function () { return _this.leftFixedTable || _this.rightFixedTable; };
_this.renderTableBody = function (options) {
var _a = _this.props, height = _a.height, needCount = _a.needCount;
var _b = _this.state, tableWidth = _b.tableWidth, isAutoWidth = _b.isAutoWidth;
var hasRecord = options.hasRecord, columns = options.columns, ref = options.ref, main = options.main;
// const hasFixedTable = this.hasFixedGroup();
/** 统计字段，每一次统计都是一个新对象 */
var statistics = {
_highlight: 'theme',
id: 'statistics'
};
var style = Object.assign({}, {
height: height,
width: isAutoWidth ? tableWidth : _this.calcTableWidth(columns)
});
return hasRecord ? (React.createElement("div", { key: "tableBody", onScroll: _this.handleTableScroll, ref: ref, className: "__table-scroll", style: style },
React.createElement("table", { className: "table nomargin table-body", ref: main ? _this.saveTableBody : null },
React.createElement("tbody", null, _this.renderRow(__assign(__assign({}, options), { needCount: needCount,
/** 在渲染 body 的时候会做数据统计，以 statistics 对象做记录 */
statistics: statistics }))),
needCount && (React.createElement("tfoot", null, _this.renderRow(__assign(__assign({}, options), { records: [statistics], needAction: false, filter: moneyFormat }))))))) : main && (React.createElement("span", { className: "no-record-tip" },
React.createElement(Icon, { n: "noData" }),
React.createElement("span", { className: "text" }, _this.$T_UKE('暂无记录'))));
};
_this.renderTable = function (options, key) {
var className = options.className, style = options.style;
var tableHeader = _this.renderTableHeader(options);
var tableBody = _this.renderTableBody(options);
return (React.createElement("div", { key: key, style: style, className: "__table-scroll-container " + (className || '') },
tableHeader,
tableBody));
};
_this.saveDOM = function (ref) { return function (e) {
_this[ref] = e;
}; };
_this.saveLeftFixed = function (e) {
_this.leftFixedTable = e;
};
_this.saveRightFixed = function (e) {
_this.rightFixedTable = e;
};
_this.saveMainTable = function (e) {
_this.mainTable = e;
};
_this.renderFixedGroup = function (options) {
var hasLeft = _this.fixedLeftGroup.length > 0;
var hasRight = _this.fixedRightGroup.length > 0;
var leftFixedTable = hasLeft && _this.renderTable(__assign(__assign({}, options), { className: 'table-fixed left', columns: _this.fixedLeftGroup, ref: _this.saveLeftFixed }), 'table-fixed-left');
var rightFixedTable = hasRight && _this.renderTable(__assign(__assign({}, options), { className: 'table-fixed right', ref: _this.saveRightFixed, columns: _this.fixedRightGroup }), 'table-fixed-right');
return !hasLeft && !hasRight ? null : [
leftFixedTable, rightFixedTable
];
};
_this.renderMainTable = function (options) { return _this.renderTable(__assign(__assign({}, options), { main: true, ref: _this.saveMainTable }), 'mainTable'); };
_this.handleTableScroll = function (e) {
var target = e.target;
if (e.currentTarget !== target)
return;
var currScrollOffset = target.scrollTop;
if (currScrollOffset === _this.lastScrollTop)
return;
var _a = _this, rightFixedTable = _a.rightFixedTable, leftFixedTable = _a.leftFixedTable, mainTable = _a.mainTable;
if (target !== leftFixedTable && leftFixedTable) {
leftFixedTable.scrollTop = currScrollOffset;
}
if (target !== rightFixedTable && rightFixedTable) {
rightFixedTable.scrollTop = currScrollOffset;
}
if (target !== mainTable && mainTable) {
mainTable.scrollTop = currScrollOffset;
}
_this.lastScrollTop = currScrollOffset;
_this.scrollY = currScrollOffset;
};
_this.handleScrollHor = function (e) {
// this.calcScroll(e, 'scrollLeft');
var target = e.target;
if (e.currentTarget !== target)
return;
var scrollLeft = target.scrollLeft;
if (scrollLeft === _this.lastScrollTop)
return;
var tableWidth = _this.state.tableWidth;
var scrollLeftEndPoint = typeof tableWidth == 'number' ? tableWidth - _this.tableContainerWidth : 0;
if (scrollLeft > 0) {
target.classList.add(scrollLeftClass);
}
else {
target.classList.remove(scrollLeftClass);
}
if (scrollLeft === scrollLeftEndPoint) {
target.classList.add(scrollRightClass);
}
else {
target.classList.remove(scrollRightClass);
}
_this.lastScrollLeft = scrollLeft;
_this.scrollX = scrollLeft;
};
_this.state = {
headerWidthMapper: [],
tableWidth: 'auto',
sortField: '',
sortOutsideField: '',
isDescInner: false,
isDescOutside: undefined,
hoveringRow: undefined,
isAutoWidth: undefined,
highlightRow: {},
checkedItems: {},
};
return _this;
}
Table.prototype.componentDidMount = function () {
window.addEventListener('resize', this.resizeCalcSize);
if (this.props.whenCheckAction) {
console.warn('whenCheckAction 即将废弃，请使用 checkedOverlay');
}
// this.calcSize();
};
Table.prototype.componentWillUnmount = function () {
window.removeEventListener('resize', this.resizeCalcSize);
this.clearWatch();
};
Table.prototype.toggleAllItems = function (allCheck) {
var checkedItems = this.state.checkedItems;
var nextCheckedItems = __assign({}, checkedItems);
if (!allCheck) {
nextCheckedItems = {};
}
else {
this.props.records.forEach(function (item, idx) { nextCheckedItems[idx] = item; });
}
this.selectItems(nextCheckedItems);
};
Table.prototype.selectItems = function (nextState, idx) {
var onCheck = this.props.onCheck;
this.checkedItems = nextState;
this.setState({
checkedItems: nextState
});
Call(onCheck, nextState, idx);
};
Table.prototype.calcSize = function (firstRowNodes) {
if (!this.tableContainer || !firstRowNodes)
return;
// if(Object.keys(this.firstTDDOMs).length === 0) return;
var cellsLen = firstRowNodes.length;
var headerWidthMapper = this.state.headerWidthMapper;
var nextHeaderWidthMapper = [];
var nextContainerWidth = 0;
for (var i = 0; i < cellsLen; i++) {
var currCell = firstRowNodes[i];
var currCellWidth = currCell.offsetWidth || headerWidthMapper[i];
if (currCellWidth) {
nextHeaderWidthMapper[i] = currCellWidth;
nextContainerWidth += nextHeaderWidthMapper[i];
}
}
if (nextHeaderWidthMapper.join(',') !== headerWidthMapper.join(',')) {
var tableContainerWidth = this.tableContainer.offsetWidth;
var isTableMoreContainer = nextContainerWidth > tableContainerWidth;
var isAutoWidth = !isTableMoreContainer;
this.setTableContainerClass(isAutoWidth);
this.setState({
headerWidthMapper: nextHeaderWidthMapper,
// tableWidth: nextContainerWidth
tableWidth: isTableMoreContainer ? nextContainerWidth : 'auto',
isAutoWidth: !isTableMoreContainer
});
}
};
Table.prototype.ignoreFilter = function (str) {
return defaultSortIgnores.concat(this.props.sortIgnores || []).indexOf(str) !== -1;
};
Table.prototype.recordsOrderFilter = function () {
var _a = this.state, sortField = _a.sortField, isDescInner = _a.isDescInner;
var records = this.props.records;
if (!sortField)
return records;
var result = __spreadArrays(records);
result.sort(function (itemPrev, itemNext) {
var sortTargetPrev = itemPrev[sortField];
var sortTargetNext = itemNext[sortField];
var res;
if (typeof sortTargetPrev == 'string') {
res = sortTargetPrev.localeCompare(sortTargetNext);
}
else if (typeof sortTargetPrev == 'number') {
res = sortTargetPrev - +sortTargetNext;
}
return isDescInner ? res : res * -1;
});
return result;
};
Table.prototype.orderRecord = function (_orderKey) {
var _this = this;
var orderKey = _orderKey;
if (this.ignoreFilter(orderKey))
return;
this.setState(function (_a) {
var isDescInner = _a.isDescInner, sortField = _a.sortField;
var _isDesc = isDescInner;
if (sortField === orderKey) {
_this.sameSortTime += 1;
if (_this.sameSortTime === 2) {
_isDesc = false;
orderKey = '';
_this.sameSortTime = 0;
}
else {
_isDesc = !_isDesc;
}
}
else {
_this.sameSortTime = 0;
_isDesc = false;
}
return {
sortField: orderKey,
isDescInner: _isDesc
};
});
};
Table.prototype.renderCell = function (options) {
var _this = this;
var record = options.record, parentIdx = options.parentIdx, needCount = options.needCount, rowKey = options.rowKey, columns = options.columns, _a = options.needAction, needAction = _a === void 0 ? true : _a, filter = options.filter, statistics = options.statistics, main = options.main;
if (!record)
return null;
// const columns = this.getKeyMapper();
var keyMapperLen = columns.length;
var result = [];
var _loop_1 = function (_idx) {
var mapperItem = columns[_idx];
// eslint-disable-next-line no-continue
if (!mapperItem)
return "continue";
var key = mapperItem.key, className = mapperItem.className, _a = mapperItem.count, count = _a === void 0 ? true : _a;
var isRightAlign = this_1.checkRightAlign(mapperItem);
var currText = record[key];
var needFilter = needAction || this_1.excludeFilterField.indexOf(key) === -1;
/** 优先使用 options 传入的 filter 作为过滤器，其次为 this.mapperFilter */
var filterRes = '-';
if (IsFunc(filter)) {
filterRes = filter(currText);
}
else if (needFilter) {
filterRes = this_1.mapperFilter(mapperItem, record, parentIdx);
}
if (needCount) {
/**
* 进入统计流程
* 1. 判断原始值 currText 是否为数字
* 2. 判断当前记录是否需要纳入统计 count
*/
var isNum = !isNaN(+currText) || isStringNumRegex.test(currText);
if (count && isNum) {
// 这里是处理累加的逻辑，如果为字符串的字段，则先把逗号去除
var isNumbTxt = +(("" + filterRes).replace(',', ''));
if (!isNaN(isNumbTxt) && typeof isNumbTxt === 'number') {
statistics[key] = (statistics[key] || 0) + isNumbTxt;
}
}
}
var tdKey = rowKey + "_" + key;
// let style = {};
var _className = (tdSpecClassMapper[key] || '') + " " + (className || '') + " " + (isRightAlign ? 'right' : '');
var tdDOM = (React.createElement("td", { ref: function (e) { return _this.saveCell(_idx, main, rowKey)(e); },
// style={mapperItem.w ? {width: mapperItem.w, whiteSpace: 'pre-wrap'} : style}
className: _className, key: tdKey }, filterRes));
result.push(tdDOM);
};
var this_1 = this;
for (var _idx = 0; _idx < keyMapperLen; _idx++) {
_loop_1(_idx);
}
return result;
};
Table.prototype.render = function () {
var _this = this;
var _a = this.props, whenCheckAction = _a.whenCheckAction, needCheck = _a.needCheck, checkedOverlay = _a.checkedOverlay;
var checkedItems = this.state.checkedItems;
var records = this.recordsOrderFilter();
var hasRecord = records.length > 0;
var columns = this.getKeyMapper();
var checkedItemLen = Object.keys(checkedItems).length;
var hasChecked = checkedItemLen > 0;
var isAllCheck = hasRecord && (checkedItemLen === records.length);
var _checkedOverlay = checkedOverlay || whenCheckAction;
var renderTableConfig = {
hasRecord: hasRecord,
columns: columns,
records: records,
isAllCheck: isAllCheck
};
var mainTable = this.renderMainTable(renderTableConfig);
var fixedGroup = this.renderFixedGroup(renderTableConfig);
var extendDOM = needCheck && _checkedOverlay && (React.createElement("div", { className: "checked-actions" + (hasChecked ? ' show' : '') },
React.createElement("span", { className: "mr10" },
React.createElement("span", { className: "mr10" },
this.$T_UKE('已选'),
" ",
React.createElement("span", { className: "t_theme" }, checkedItemLen),
" ",
this.$T_UKE('项')),
React.createElement("span", { className: "link", onClick: this.clearCheckeds }, this.$T_UKE('清除'))),
typeof _checkedOverlay === 'function' ? _checkedOverlay({
checkedItems: checkedItems, clearCheckeds: this.clearCheckeds
}) : _checkedOverlay));
return (React.createElement("div", { className: "__table", onMouseLeave: function (e) { return _this.handleHoverRow(null); } },
extendDOM,
React.createElement("div", { className: "table-render", onScroll: this.handleScrollHor, ref: this.saveContainer },
mainTable,
fixedGroup)));
};
Table.defaultProps = {
sortIgnores: [],
fixedLeftKeys: [],
fixedRightKeys: [],
alignRightTypes: ['money'],
needCheck: false,
clickToHighlight: false,
height: 'auto',
needInnerSort: false,
watcherTimer: 1000,
fixHead: true,
checkWidth: 30,
needCount: false,
};
return Table;
}(MapperFilter));
export default Table;