UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

279 lines (221 loc) 10.7 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"]; var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"]; Object.defineProperty(exports, "__esModule", { value: true }); exports.propTypeKeys = exports["default"] = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper")); var React = _interopRequireWildcard(require("react")); var _mobx = require("mobx"); var _isString = _interopRequireDefault(require("lodash/isString")); var _isNumber = _interopRequireDefault(require("lodash/isNumber")); var _classnames = _interopRequireDefault(require("classnames")); var _constants = require("./constants"); var _utils = require("./utils"); var _TableContext = _interopRequireDefault(require("./TableContext")); var _Column = require("./Column"); var _isEmpty = _interopRequireDefault(require("../_util/isEmpty")); 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"]; 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']; exports.propTypeKeys = propTypeKeys; var Cell = /*#__PURE__*/function (_React$PureComponent) { (0, _inherits2["default"])(Cell, _React$PureComponent); var _super = (0, _createSuper2["default"])(Cell); function Cell() { var _this; (0, _classCallCheck2["default"])(this, Cell); _this = _super.apply(this, arguments); // @ts-ignore _this.addPrefix = function (name) { return (0, _utils.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; } (0, _createClass2["default"])(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 = (0, _objectWithoutProperties2["default"])(_this$props5, _excluded); var tableStore = this.context.tableStore; 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) { (0, _mobx.runInAction)(function () { tableStore.rowZIndex.push(rowIndex); }); } return null; } var classes = (0, _classnames["default"])(classPrefix, className, cellExternalProps.className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, this.addPrefix('expanded'), expanded && this.isTreeCol()), (0, _defineProperty2["default"])(_classNames, this.addPrefix('first'), firstColumn), (0, _defineProperty2["default"])(_classNames, this.addPrefix('last'), lastColumn), _classNames)); var rtl = this.context.rtl; var nextHeight = isHeaderCell ? headerHeight : this.getHeight(); if (cellExternalProps.rowSpan) { nextHeight = cellExternalProps.rowSpan * (nextHeight || 1); } var styles = (0, _objectSpread3["default"])((0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, style), cellExternalProps.style), {}, (0, _defineProperty2["default"])({ 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 = (0, _defineProperty2["default"])({ width: width, height: nextHeight, textAlign: align }, rtl ? 'paddingRight' : 'paddingLeft', this.isTreeCol() ? depth * _constants.LAYER_WIDTH + (hasChildren ? 8 : 36) : null); if (verticalAlign) { contentStyles.display = 'table-cell'; contentStyles.verticalAlign = verticalAlign; } // @ts-ignore var cellContent = (0, _utils.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 = (0, _utils.getUnhandledProps)(propTypeKeys, (0, _utils.getUnhandledProps)(_Column.ColumnPropTypeKeys, rest)); var cell = renderCell ? renderCell(cellContent) : cellContent; var searchText = tableStore.searchText, highlightRowIndexs = tableStore.highlightRowIndexs; if ((0, _isEmpty["default"])(cell)) { cell = tableStore.getConfig('renderEmpty')('Output'); } if ((0, _isNumber["default"])(cell)) cell = String(cell); if ((0, _isString["default"])(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", (0, _extends2["default"])({ 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["default"]; } }]); return Cell; }(React.PureComponent); Cell.defaultProps = { classPrefix: (0, _utils.defaultClassPrefix)('performance-table-cell'), headerHeight: 36, depth: 0, height: 36, width: 0, left: 0 }; var _default = Cell; exports["default"] = _default; //# sourceMappingURL=Cell.js.map