choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
254 lines (214 loc) • 9.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["width", "left", "style", "className", "firstColumn", "lastColumn", "isHeaderCell", "headerHeight", "align", "children", "rowData", "dataKey", "rowIndex", "renderCell", "hidden", "wordWrap", "classPrefix", "depth", "verticalAlign", "expanded", "onClick", "onCell", "rowSpan", "fixed", "hasChildren"];
import * as React from 'react';
import { runInAction } from 'mobx';
import isString from 'lodash/isString';
import isNumber from 'lodash/isNumber';
import classNames from 'classnames';
import { LAYER_WIDTH } from './constants';
import { defaultClassPrefix, getUnhandledProps, isNullOrUndefined, prefix } from './utils';
import TableContext from './TableContext';
import { ColumnPropTypeKeys } from './Column';
import isEmpty from '../_util/isEmpty';
export var propTypeKeys = ['align', 'verticalAlign', 'className', 'classPrefix', 'dataKey', 'isHeaderCell', 'width', 'height', 'left', 'headerHeight', 'style', 'firstColumn', 'lastColumn', 'hasChildren', 'children', 'rowKey', 'rowIndex', 'rowData', 'depth', 'onTreeToggle', 'renderTreeToggle', 'renderCell', 'wordWrap', 'hidden', 'treeCol', 'expanded', 'groupHeader', 'groupCount', 'isDragging'];
var Cell = /*#__PURE__*/function (_React$PureComponent) {
_inherits(Cell, _React$PureComponent);
var _super = _createSuper(Cell);
function Cell() {
var _this;
_classCallCheck(this, Cell);
_this = _super.apply(this, arguments); // @ts-ignore
_this.addPrefix = function (name) {
return prefix(_this.props.classPrefix)(name);
};
_this.handleExpandClick = function (event) {
var _this$props = _this.props,
rowKey = _this$props.rowKey,
rowIndex = _this$props.rowIndex,
rowData = _this$props.rowData,
onTreeToggle = _this$props.onTreeToggle;
if (onTreeToggle) {
onTreeToggle(rowKey, rowIndex, rowData, event);
}
};
return _this;
}
_createClass(Cell, [{
key: "isTreeCol",
value: function isTreeCol() {
var _this$props2 = this.props,
treeCol = _this$props2.treeCol,
firstColumn = _this$props2.firstColumn;
var _this$context = this.context,
hasCustomTreeCol = _this$context.hasCustomTreeCol,
isTree = _this$context.isTree;
if (treeCol) {
return true;
}
if (!hasCustomTreeCol && firstColumn && isTree) {
return true;
}
return false;
}
}, {
key: "getHeight",
value: function getHeight() {
var _this$props3 = this.props,
height = _this$props3.height,
rowData = _this$props3.rowData; // @ts-ignore
return typeof height === 'function' ? height(rowData) : height;
}
}, {
key: "renderTreeNodeExpandIcon",
value: function renderTreeNodeExpandIcon() {
var _this$props4 = this.props,
rowData = _this$props4.rowData,
renderTreeToggle = _this$props4.renderTreeToggle,
hasChildren = _this$props4.hasChildren,
expanded = _this$props4.expanded;
var expandButton = /*#__PURE__*/React.createElement("i", {
className: this.addPrefix('expand-icon icon')
});
if (this.isTreeCol() && hasChildren) {
return /*#__PURE__*/React.createElement("span", {
role: "button",
tabIndex: -1,
className: this.addPrefix('expand-wrapper'),
onClick: this.handleExpandClick
}, renderTreeToggle ? renderTreeToggle(expandButton, rowData, expanded) : expandButton);
}
return null;
}
}, {
key: "render",
value: function render() {
var _classNames;
var _this$props5 = this.props,
width = _this$props5.width,
left = _this$props5.left,
style = _this$props5.style,
className = _this$props5.className,
firstColumn = _this$props5.firstColumn,
lastColumn = _this$props5.lastColumn,
isHeaderCell = _this$props5.isHeaderCell,
headerHeight = _this$props5.headerHeight,
align = _this$props5.align,
children = _this$props5.children,
rowData = _this$props5.rowData,
dataKey = _this$props5.dataKey,
rowIndex = _this$props5.rowIndex,
renderCell = _this$props5.renderCell,
hidden = _this$props5.hidden,
wordWrap = _this$props5.wordWrap,
classPrefix = _this$props5.classPrefix,
depth = _this$props5.depth,
verticalAlign = _this$props5.verticalAlign,
expanded = _this$props5.expanded,
onClick = _this$props5.onClick,
onCell = _this$props5.onCell,
rowSpan = _this$props5.rowSpan,
fixed = _this$props5.fixed,
hasChildren = _this$props5.hasChildren,
rest = _objectWithoutProperties(_this$props5, _excluded);
var _this$context2 = this.context,
tableStore = _this$context2.tableStore,
tableWidth = _this$context2.tableWidth;
var cellExternalProps = (typeof onCell === 'function' ? onCell({
rowData: rowData,
dataKey: dataKey,
rowIndex: rowIndex
}) : {}) || {};
var cellHidden = hidden || cellExternalProps.hidden;
var cellRowSpan = rowSpan || cellExternalProps.rowSpan;
if (cellHidden || cellRowSpan === 0) {
if (!isHeaderCell && rowData && cellRowSpan === 0 && fixed) {
runInAction(function () {
tableStore.rowZIndex.push(rowIndex);
});
}
return null;
}
var classes = classNames(classPrefix, className, cellExternalProps.className, (_classNames = {}, _defineProperty(_classNames, this.addPrefix('expanded'), expanded && this.isTreeCol()), _defineProperty(_classNames, this.addPrefix('first'), firstColumn), _defineProperty(_classNames, this.addPrefix('last'), lastColumn && (left || 0) + (width || 0) >= tableWidth), _classNames));
var rtl = this.context.rtl;
var nextHeight = isHeaderCell ? headerHeight : this.getHeight();
if (cellExternalProps.rowSpan) {
nextHeight = cellExternalProps.rowSpan * (nextHeight || 1);
}
var styles = _objectSpread(_objectSpread(_objectSpread({}, style), cellExternalProps.style), {}, _defineProperty({
width: width,
height: nextHeight,
zIndex: depth
}, rtl ? 'right' : 'left', left)); //By moving style from cell content to Cell, it breaks UI behaviours.
// for example, check box are not showing in the middle of the cell anymore.
var contentStyles = _defineProperty({
width: width,
height: nextHeight,
textAlign: align
}, rtl ? 'paddingRight' : 'paddingLeft', this.isTreeCol() ? depth * LAYER_WIDTH + (hasChildren ? 8 : 36) : null);
if (verticalAlign) {
contentStyles.display = 'table-cell';
contentStyles.verticalAlign = verticalAlign;
} // @ts-ignore
var cellContent = isNullOrUndefined(children) && rowData ? rowData[dataKey] : children;
if (typeof children === 'function') {
var getChildren = children;
cellContent = getChildren(rowData, rowIndex);
} // fix unable to get propTypes after gatsby is compiled
var unhandledProps = getUnhandledProps(propTypeKeys, getUnhandledProps(ColumnPropTypeKeys, rest));
var cell = renderCell ? renderCell(cellContent) : cellContent;
var searchText = tableStore.searchText,
highlightRowIndexs = tableStore.highlightRowIndexs;
if (isEmpty(cell)) {
cell = tableStore.getConfig('renderEmpty')('Output');
}
if (isNumber(cell)) cell = String(cell);
if (isString(cell) && searchText) {
var index = cell.indexOf(searchText);
var beforeStr = cell.substr(0, index);
var afterStr = cell.substr(index + searchText.length);
if (index > -1) {
highlightRowIndexs.push(rowIndex);
}
cell = index > -1 ? /*#__PURE__*/React.createElement("span", null, beforeStr, /*#__PURE__*/React.createElement("span", {
className: this.addPrefix('letter-highlight')
}, searchText), afterStr) : /*#__PURE__*/React.createElement("span", null, cell);
}
var content = wordWrap ? /*#__PURE__*/React.createElement("div", {
className: this.addPrefix('wrap')
}, this.renderTreeNodeExpandIcon(), cell) : /*#__PURE__*/React.createElement(React.Fragment, null, this.renderTreeNodeExpandIcon(), cell);
return /*#__PURE__*/React.createElement("div", _extends({
role: isHeaderCell ? 'columnheader' : 'gridcell'
}, unhandledProps, {
onClick: onClick,
className: classes,
style: styles
}), /*#__PURE__*/React.createElement("div", {
className: this.addPrefix('content'),
style: contentStyles
}, content));
}
}], [{
key: "contextType",
get: function get() {
return TableContext;
}
}]);
return Cell;
}(React.PureComponent);
Cell.defaultProps = {
classPrefix: defaultClassPrefix('performance-table-cell'),
headerHeight: 36,
depth: 0,
height: 36,
width: 0,
left: 0
};
export default Cell;
//# sourceMappingURL=Cell.js.map