choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
259 lines (220 loc) • 9.42 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { cloneElement, isValidElement, useCallback, useContext, useRef, useState } from 'react';
import { observer } from 'mobx-react-lite';
import isObject from 'lodash/isObject';
import classNames from 'classnames';
import TableHeaderCell from './TableHeaderCell';
import TableVirtualHeaderCell from './TableVirtualHeaderCell';
import TableContext from './TableContext';
import { ColumnLock } from './enum';
import { getEditorByField, getTableHeaderRows, isStickySupport } from './utils';
import TableHeaderRow from './TableHeaderRow';
import ExpandIcon from './ExpandIcon';
var TableHeader = function TableHeader(props) {
var _classNames;
var lock = props.lock,
queryFields = props.queryFields;
var _useContext = useContext(TableContext),
prefixCls = _useContext.prefixCls,
border = _useContext.border,
tableStore = _useContext.tableStore,
dataSet = _useContext.dataSet,
fullColumnWidth = _useContext.fullColumnWidth;
var columnResizable = tableStore.columnResizable,
columnResizing = tableStore.columnResizing,
columnGroups = tableStore.columnGroups,
comboBarStatus = tableStore.comboBarStatus,
rowHeight = tableStore.rowHeight,
isRenderRange = tableStore.isRenderRange;
var columns = columnGroups.columns;
var needIntersection = tableStore.isFixedRowHeight && tableStore.virtual && tableStore.overflowX;
var headerRows = getTableHeaderRows(lock ? columns.filter(function (group) {
return group.lock === lock;
}) : columns);
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
isHeaderHover = _useState2[0],
setIsHeaderHover = _useState2[1];
var nodeRef = useRef(null);
var getHeaderNode = useCallback(function () {
return nodeRef.current;
}, [nodeRef]);
var handleTheadMouseEnter = useCallback(function () {
setIsHeaderHover(true);
}, []);
var handleTheadMouseLeave = useCallback(function () {
setIsHeaderHover(false);
}, []);
var isExpanded = tableStore.isBodyExpanded;
var handleExpandChange = useCallback(function () {
tableStore.setBodyExpanded(!isExpanded);
}, [tableStore, isExpanded]);
var renderExpandIcon = function renderExpandIcon() {
var record = dataSet.get(0);
if (record) {
var expandIcon = tableStore.expandIcon;
if (typeof expandIcon === 'function') {
return expandIcon({
prefixCls: prefixCls,
expanded: isExpanded,
expandable: true,
needIndentSpaced: false,
onExpand: handleExpandChange,
record: record
});
}
return /*#__PURE__*/React.createElement(ExpandIcon, {
prefixCls: prefixCls,
expandable: true,
onChange: handleExpandChange,
expanded: isExpanded
});
}
};
var expandIconColumnIndex = tableStore.props.bodyExpandable ? lock === ColumnLock.right ? columnGroups.leafs.filter(function (group) {
return group.column.lock !== ColumnLock.right;
}).length : 0 : -1;
var hasExpandIcon = function hasExpandIcon(columnIndex) {
return expandIconColumnIndex > -1 && columnIndex + expandIconColumnIndex === tableStore.expandIconColumnIndex;
};
var getTrs = function getTrs(isSearchTr) {
var notRenderThKey = ['__selection-column__', '__combo-column__'];
return headerRows.map(function (row, rowIndex) {
var length = row.length;
var rowKey = String(rowIndex);
if (length) {
var notLockLeft = lock !== ColumnLock.left;
var lastColumnClassName = notLockLeft ? "".concat(prefixCls, "-cell-last") : undefined;
var hasPlaceholder = tableStore.overflowY && rowIndex === 0 && notLockLeft;
var useEmptyColumn = !fullColumnWidth && rowIndex === 0 && notLockLeft && !tableStore.overflowX && !tableStore.hasEmptyWidthColumn;
var tds = row.map(function (col, index) {
if (!col.hidden) {
var key = col.key,
rowSpan = col.rowSpan,
colSpan = col.colSpan,
children = col.children;
var cellProps = {
key: key,
columnGroup: col,
getHeaderNode: getHeaderNode,
rowIndex: rowIndex,
isSearchCell: isSearchTr,
scope: children ? 'colgroup' : 'col',
isRenderCell: isRenderRange(index, headerRows.length > 1)
};
if (!useEmptyColumn && notLockLeft && !hasPlaceholder && index === length - 1 && columnGroups.lastLeaf === col.lastLeaf) {
cellProps.className = lastColumnClassName;
}
if (isSearchTr) {
cellProps.className = "".concat(cellProps.className, " ").concat(prefixCls, "-thead-inline-search");
}
if (rowSpan > 1 || children) {
cellProps.rowSpan = rowSpan;
}
if (colSpan > 1 || children) {
cellProps.colSpan = colSpan;
}
var icon = !isSearchTr ? rowIndex === headerRows.length - 1 && hasExpandIcon(index) ? renderExpandIcon() : undefined : !notRenderThKey.includes(String(key)) && getQueryFields({
width: '100%'
}).find(function (field) {
return field.key === key;
});
if (needIntersection) {
return /*#__PURE__*/React.createElement(TableVirtualHeaderCell, _extends({}, cellProps), icon);
}
return /*#__PURE__*/React.createElement(TableHeaderCell, _extends({}, cellProps), icon);
}
return undefined;
});
if (useEmptyColumn) {
tds.push( /*#__PURE__*/React.createElement("th", {
key: "empty-column",
className: "".concat(prefixCls, "-cell ").concat(lastColumnClassName),
rowSpan: headerRows.length,
style: {
lineHeight: 1
}
}));
}
if (hasPlaceholder) {
var placeHolderProps = {
key: 'fixed-column',
rowSpan: headerRows.length,
style: {
lineHeight: 1
}
};
var classList = ["".concat(prefixCls, "-cell"), lastColumnClassName];
if (isStickySupport() && tableStore.overflowX) {
if (tableStore.isAnyColumnsRightLock) {
placeHolderProps.style.right = 0;
}
classList.push("".concat(prefixCls, "-cell-fix-right"));
}
placeHolderProps.className = classList.join(' ');
tds.push( /*#__PURE__*/React.createElement("th", _extends({}, placeHolderProps), "\xA0"));
}
return /*#__PURE__*/React.createElement(TableHeaderRow, {
key: rowKey,
rowIndex: rowIndex,
rows: headerRows,
lock: lock
}, tds);
}
return /*#__PURE__*/React.createElement("tr", {
key: rowKey
});
});
};
var getQueryFields = function getQueryFields(extraStyle) {
var queryDataSet = dataSet.queryDataSet;
var result = [];
if (queryDataSet) {
var fields = queryDataSet.fields;
return _toConsumableArray(fields.entries()).reduce(function (list, _ref) {
var _ref2 = _slicedToArray(_ref, 2),
name = _ref2[0],
field = _ref2[1];
if (!field.get('bind')) {
var _props = {
key: name,
name: name,
dataSet: queryDataSet
};
var element = queryFields[name];
list.push( /*#__PURE__*/isValidElement(element) ? /*#__PURE__*/cloneElement(element, _objectSpread(_objectSpread({
placeholder: field.get('label')
}, _props), {}, {
style: {
height: rowHeight
}
})) : /*#__PURE__*/cloneElement(getEditorByField(field), _objectSpread(_objectSpread({
placeholder: field.get('label')
}, _props), {}, {
style: _objectSpread(_objectSpread(_objectSpread({}, _props.style || {}), extraStyle), {}, {
height: rowHeight
})
}, isObject(element) ? element : {})));
}
return list;
}, result);
}
return result;
};
var theadProps = {
ref: nodeRef,
className: classNames("".concat(prefixCls, "-thead"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-column-resizing"), columnResizing), _defineProperty(_classNames, "".concat(prefixCls, "-column-resizable"), columnResizable), _defineProperty(_classNames, "".concat(prefixCls, "-thead-hover"), isHeaderHover || columnResizing), _classNames))
};
if (!isStickySupport() && !border && tableStore.overflowX) {
theadProps.onMouseEnter = handleTheadMouseEnter;
theadProps.onMouseLeave = handleTheadMouseLeave;
}
return /*#__PURE__*/React.createElement("thead", _extends({}, theadProps), getTrs(), comboBarStatus && getTrs(true));
};
TableHeader.displayName = 'TableHeader';
export default observer(TableHeader);
//# sourceMappingURL=TableHeader.js.map