choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
261 lines (206 loc) • 9.56 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _isObject = _interopRequireDefault(require("lodash/isObject"));
var _classnames = _interopRequireDefault(require("classnames"));
var _TableHeaderCell = _interopRequireDefault(require("./TableHeaderCell"));
var _TableContext = _interopRequireDefault(require("./TableContext"));
var _enum = require("./enum");
var _utils = require("./utils");
var _TableHeaderRow = _interopRequireDefault(require("./TableHeaderRow"));
var _ExpandIcon = _interopRequireDefault(require("./ExpandIcon"));
var TableHeader = function TableHeader(props) {
var _classNames;
var lock = props.lock;
var _useContext = (0, _react.useContext)(_TableContext["default"]),
prefixCls = _useContext.prefixCls,
border = _useContext.border,
tableStore = _useContext.tableStore,
dataSet = _useContext.dataSet;
var columnResizable = tableStore.columnResizable,
columnResizing = tableStore.columnResizing,
columnGroups = tableStore.columnGroups,
comboBarStatus = tableStore.comboBarStatus,
rowHeight = tableStore.rowHeight;
var columns = columnGroups.columns;
var headerRows = (0, _utils.getTableHeaderRows)(lock ? columns.filter(function (group) {
return group.lock === lock;
}) : columns);
var _useState = (0, _react.useState)(),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
isHeaderHover = _useState2[0],
setIsHeaderHover = _useState2[1];
var nodeRef = (0, _react.useRef)(null);
var getHeaderNode = (0, _react.useCallback)(function () {
return nodeRef.current;
}, [nodeRef]);
var handleTheadMouseEnter = (0, _react.useCallback)(function () {
setIsHeaderHover(true);
}, []);
var handleTheadMouseLeave = (0, _react.useCallback)(function () {
setIsHeaderHover(false);
}, []);
var isExpanded = tableStore.isBodyExpanded;
var handleExpandChange = (0, _react.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["default"].createElement(_ExpandIcon["default"], {
prefixCls: prefixCls,
expandable: true,
onChange: handleExpandChange,
expanded: isExpanded
});
}
};
var expandIconColumnIndex = tableStore.props.bodyExpandable ? lock === _enum.ColumnLock.right ? columnGroups.leafs.filter(function (group) {
return group.column.lock !== _enum.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 !== _enum.ColumnLock.left;
var lastColumnClassName = notLockLeft ? "".concat(prefixCls, "-cell-last") : undefined;
var hasPlaceholder = tableStore.overflowY && rowIndex === 0 && notLockLeft;
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
};
if (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;
}
return /*#__PURE__*/_react["default"].createElement(_TableHeaderCell["default"], (0, _extends2["default"])({}, cellProps, {
scope: children ? 'colgroup' : 'col'
}), !isSearchTr ? rowIndex === headerRows.length - 1 && hasExpandIcon(index) ? renderExpandIcon() : undefined : !notRenderThKey.includes(String(key)) && getQueryFields({
width: '100%'
}).find(function (field) {
return field.key === key;
}));
}
return undefined;
});
if (hasPlaceholder) {
var placeHolderProps = {
key: 'fixed-column',
rowSpan: headerRows.length
};
var classList = ["".concat(prefixCls, "-cell"), lastColumnClassName];
if ((0, _utils.isStickySupport)() && tableStore.overflowX) {
placeHolderProps.style = tableStore.isAnyColumnsRightLock ? {
right: 0
} : {};
classList.push("".concat(prefixCls, "-cell-fix-right"));
}
placeHolderProps.className = classList.join(' ');
tds.push( /*#__PURE__*/_react["default"].createElement("th", (0, _extends2["default"])({}, placeHolderProps), "\xA0"));
}
return /*#__PURE__*/_react["default"].createElement(_TableHeaderRow["default"], {
key: rowKey,
rowIndex: rowIndex,
rows: headerRows,
lock: lock
}, tds);
}
return /*#__PURE__*/_react["default"].createElement("tr", {
key: rowKey
});
});
};
var getQueryFields = function getQueryFields(extraStyle) {
var queryFields = dataSet.props.queryFields;
var queryDataSet = dataSet.queryDataSet;
var result = [];
if (queryDataSet) {
var fields = queryDataSet.fields;
return (0, _toConsumableArray2["default"])(fields.entries()).reduce(function (list, _ref) {
var _ref2 = (0, _slicedToArray2["default"])(_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__*/(0, _react.isValidElement)(element) ? /*#__PURE__*/(0, _react.cloneElement)(element, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
placeholder: field.get('label')
}, _props), {}, {
style: {
height: rowHeight
}
})) : /*#__PURE__*/(0, _react.cloneElement)((0, _utils.getEditorByField)(field), (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
placeholder: field.get('label')
}, _props), {}, {
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _props.style || {}), extraStyle), {}, {
height: rowHeight
})
}, (0, _isObject["default"])(element) ? element : {})));
}
return list;
}, result);
}
return result;
};
var theadProps = {
ref: nodeRef,
className: (0, _classnames["default"])("".concat(prefixCls, "-thead"), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-column-resizing"), columnResizing), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-column-resizable"), columnResizable), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-thead-hover"), isHeaderHover || columnResizing), _classNames))
};
if (!(0, _utils.isStickySupport)() && !border && tableStore.overflowX) {
theadProps.onMouseEnter = handleTheadMouseEnter;
theadProps.onMouseLeave = handleTheadMouseLeave;
}
return /*#__PURE__*/_react["default"].createElement("thead", (0, _extends2["default"])({}, theadProps), getTrs(), comboBarStatus && getTrs(true));
};
TableHeader.displayName = 'TableHeader';
var _default = (0, _mobxReactLite.observer)(TableHeader);
exports["default"] = _default;
//# sourceMappingURL=TableHeader.js.map