choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
316 lines (248 loc) • 11.6 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _classnames = _interopRequireDefault(require("classnames"));
var _omit = _interopRequireDefault(require("lodash/omit"));
var _dataset = require("choerodon-ui/dataset");
var _UnitConvertor = require("../../../lib/_util/UnitConvertor");
var _Column = require("./Column");
var _TableContext = _interopRequireDefault(require("./TableContext"));
var _utils = require("./utils");
var _enum = require("./enum");
var _TableCellInner = _interopRequireDefault(require("./TableCellInner"));
var _treeUtils = require("../_util/treeUtils");
var _TableGroupCellInner = _interopRequireDefault(require("./TableGroupCellInner"));
var _AggregationTree = require("./AggregationTree");
var _AggregationTreeGroups = _interopRequireDefault(require("./AggregationTreeGroups"));
function getRowSpan(group, tableStore) {
if (tableStore.headerTableGroups.length) {
var subGroups = group.subGroups,
subHGroups = group.subHGroups;
if (subHGroups) {
return _dataset.IteratorHelper.iteratorReduce(subHGroups.values(), function (rowSpan, group) {
return Math.max(rowSpan, group.records.length);
}, 0);
}
return subGroups.reduce(function (rowSpan, subGroup) {
return rowSpan + (subGroup.subGroups.length ? getRowSpan(subGroup, tableStore) : 0) + subGroup.records.length;
}, 0);
}
return group.expandedRecords.length;
}
var TableCell = function TableCell(props) {
var _classNames3;
var columnGroup = props.columnGroup,
record = props.record,
isDragging = props.isDragging,
provided = props.provided,
colSpan = props.colSpan,
className = props.className,
children = props.children,
disabled = props.disabled,
inView = props.inView,
groupPath = props.groupPath,
rowIndex = props.rowIndex;
var column = columnGroup.column,
key = columnGroup.key;
var _useContext = (0, _react.useContext)(_TableContext["default"]),
tableStore = _useContext.tableStore,
prefixCls = _useContext.prefixCls,
dataSet = _useContext.dataSet,
expandIconAsCell = _useContext.expandIconAsCell,
tableAggregation = _useContext.aggregation,
rowHeight = _useContext.rowHeight;
var cellPrefix = "".concat(prefixCls, "-cell");
var tableColumnOnCell = tableStore.getConfig('tableColumnOnCell');
var __tableGroup = column.__tableGroup;
var _ref = __tableGroup && groupPath && groupPath.find(function (_ref3) {
var _ref4 = (0, _slicedToArray2["default"])(_ref3, 1),
path = _ref4[0];
return path.name === __tableGroup.name;
}) || [undefined, false],
_ref2 = (0, _slicedToArray2["default"])(_ref, 2),
group = _ref2[0],
isLast = _ref2[1];
var _ref5 = group || !groupPath || !groupPath.length ? [undefined, false] : groupPath[groupPath.length - 1],
_ref6 = (0, _slicedToArray2["default"])(_ref5, 1),
rowGroup = _ref6[0];
var getInnerNode = (0, _react.useCallback)(function (col, onCellStyle, inAggregation, headerGroup) {
return record ? /*#__PURE__*/_react["default"].createElement(_TableCellInner["default"], {
column: col,
record: record,
style: onCellStyle,
disabled: disabled,
inAggregation: inAggregation,
prefixCls: cellPrefix,
colSpan: colSpan,
headerGroup: headerGroup,
rowGroup: rowGroup
}, children) : undefined;
}, [record, disabled, children, cellPrefix, colSpan, rowGroup]);
var aggregationTreeRenderer = (0, _react.useCallback)(function (_ref7) {
var colGroup = _ref7.colGroup,
style = _ref7.style;
return getInnerNode(colGroup.column, style, true, colGroup.headerGroup);
}, [getInnerNode]);
var style = column.style,
lock = column.lock,
onCell = column.onCell,
aggregation = column.aggregation;
var columnLock = (0, _utils.isStickySupport)() && (0, _utils.getColumnLock)(lock);
var baseStyle = function () {
if (columnLock) {
if (columnLock === _enum.ColumnLock.left) {
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
left: (0, _UnitConvertor.pxToRem)(columnGroup.left, true)
});
}
if (columnLock === _enum.ColumnLock.right) {
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
right: (0, _UnitConvertor.pxToRem)(colSpan && colSpan > 1 ? 0 : columnGroup.right, true)
});
}
}
return style;
}();
var baseClassName = (0, _classnames["default"])(cellPrefix, (0, _defineProperty2["default"])({}, "".concat(cellPrefix, "-fix-").concat(columnLock), columnLock));
if (!record) {
return /*#__PURE__*/_react["default"].createElement("td", {
className: baseClassName,
style: baseStyle,
"data-index": key,
colSpan: colSpan
});
}
var indexInGroup = group ? group.expandedRecords.indexOf(record) : -1;
var groupCell = indexInGroup === 0 || tableStore.virtual && indexInGroup > -1 && tableStore.virtualStartIndex === rowIndex;
if (group && !groupCell) {
return null;
}
var getAggregationTreeGroups = function getAggregationTreeGroups($aggregation) {
if ($aggregation) {
var childrenInAggregation = columnGroup.childrenInAggregation;
if (childrenInAggregation) {
var groups = childrenInAggregation.columns;
return (0, _AggregationTree.groupedAggregationTree)({
rowGroup: __tableGroup ? group : rowGroup,
headerGroup: columnGroup.headerGroup,
record: record,
groups: groups,
column: column,
renderer: aggregationTreeRenderer
});
}
}
};
var groupRowSpan = groupCell && group ? getRowSpan(group, tableStore) - indexInGroup : undefined;
var rowSpan = groupRowSpan === 1 ? undefined : groupRowSpan;
var renderInnerNode = function renderInnerNode($aggregation, onCellStyle) {
if (expandIconAsCell && children) {
return /*#__PURE__*/_react["default"].createElement("span", {
className: (0, _classnames["default"])("".concat(cellPrefix, "-inner"), (0, _defineProperty2["default"])({}, "".concat(cellPrefix, "-inner-row-height-fixed"), rowHeight !== 'auto')),
style: (0, _objectSpread2["default"])({
textAlign: 'center'
}, onCellStyle)
}, children);
}
var aggregationList = getAggregationTreeGroups($aggregation);
if (groupCell && group && __tableGroup) {
return /*#__PURE__*/_react["default"].createElement(_TableGroupCellInner["default"], {
rowSpan: rowSpan,
group: group,
column: column
}, aggregationList);
}
if (aggregationList) {
var _column$renderer = column.renderer,
renderer = _column$renderer === void 0 ? _Column.defaultAggregationRenderer : _column$renderer;
var treeGroups = /*#__PURE__*/_react["default"].createElement(_AggregationTreeGroups["default"], {
trees: aggregationList
});
return /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(cellPrefix, "-inner")
}, renderer({
text: treeGroups,
record: record,
dataSet: dataSet,
aggregation: tableAggregation,
headerGroup: columnGroup.headerGroup,
rowGroup: rowGroup,
aggregationTree: aggregationList
}));
}
return getInnerNode(column, onCellStyle, undefined, columnGroup.headerGroup);
};
var scope = groupCell ? 'row' : undefined;
var TCell = scope ? 'th' : 'td';
var isBuiltInColumn = tableStore.isBuiltInColumn(column);
var columnOnCell = !isBuiltInColumn && (onCell || tableColumnOnCell);
var cellExternalProps = typeof columnOnCell === 'function' ? columnOnCell({
dataSet: dataSet,
record: record,
column: column
}) : {};
if (inView === false || columnGroup.inView === false) {
var hasEditor = aggregation ? (0, _treeUtils.treeSome)(column.children || [], function (node) {
return !!(0, _utils.getEditorByColumnAndRecord)(node, record);
}) : !!(0, _utils.getEditorByColumnAndRecord)(column, record);
var emptyCellProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
colSpan: colSpan,
rowSpan: rowSpan,
'data-index': key
}, cellExternalProps), {}, {
className: (0, _classnames["default"])(baseClassName, cellExternalProps.className),
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, baseStyle), cellExternalProps.style),
scope: scope
});
if (hasEditor) {
emptyCellProps.onFocus = function (e) {
tableStore.activeEmptyCell = e.target;
};
emptyCellProps.onBlur = function () {
delete tableStore.activeEmptyCell;
};
emptyCellProps.tabIndex = 0;
}
return /*#__PURE__*/_react["default"].createElement(TCell, (0, _extends2["default"])({}, emptyCellProps));
}
var cellStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, baseStyle), cellExternalProps.style), provided && {
cursor: 'move'
});
var classString = (0, _classnames["default"])(baseClassName, (_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, "".concat(cellPrefix, "-aggregation"), aggregation), (0, _defineProperty2["default"])(_classNames3, "".concat(cellPrefix, "-last-group"), groupCell && isLast), _classNames3), column.className, className, cellExternalProps.className);
var widthDraggingStyle = function widthDraggingStyle() {
var draggingStyle = {};
if (isDragging) {
var dom = tableStore.node.element.querySelector(".".concat(prefixCls, "-tbody .").concat(prefixCls, "-cell[data-index=\"").concat(key, "\"]"));
if (dom) {
draggingStyle.width = dom.clientWidth;
draggingStyle.whiteSpace = 'nowrap';
}
}
return draggingStyle;
}; // 只有全局属性时候的样式可以继承给下级满足对td的样式能够一致表现
var onCellStyle = !isBuiltInColumn && tableColumnOnCell === columnOnCell && typeof tableColumnOnCell === 'function' ? (0, _omit["default"])(cellExternalProps.style, ['width', 'height']) : undefined;
return /*#__PURE__*/_react["default"].createElement(TCell, (0, _extends2["default"])({
colSpan: colSpan,
rowSpan: rowSpan
}, cellExternalProps, {
className: classString,
"data-index": key
}, provided && provided.dragHandleProps, {
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _omit["default"])(cellStyle, ['width', 'height'])), widthDraggingStyle()),
scope: scope
}), renderInnerNode(aggregation, onCellStyle));
};
TableCell.displayName = 'TableCell';
var _default = (0, _mobxReactLite.observer)(TableCell);
exports["default"] = _default;
//# sourceMappingURL=TableCell.js.map