UNPKG

choerodon-ui

Version:

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

278 lines (229 loc) 10.5 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["default"] = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); 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 _classnames = _interopRequireDefault(require("classnames")); var _noop = _interopRequireDefault(require("lodash/noop")); var _ColumnResizeHandler = _interopRequireDefault(require("./ColumnResizeHandler")); var _utils = require("./utils"); var _Cell = _interopRequireDefault(require("./Cell")); var _TableContext = _interopRequireDefault(require("./TableContext")); var _excluded = ["className", "width", "dataKey", "headerHeight", "children", "left", "sortable", "classPrefix", "sortColumn", "sortType", "groupHeader"]; var propTypeKeys = ['index', 'sortColumn', 'dataIndex', 'sortType', 'sortable', 'resizable', 'minWidth', 'onColumnResizeStart', 'onColumnResizeEnd', 'onResize', 'onColumnResizeMove', 'onSortColumn', 'flexGrow', 'fixed', 'children', 'onMouseEnterHandler', 'onMouseLeaveHandler']; var HeaderCell = /*#__PURE__*/function (_React$PureComponent) { (0, _inherits2["default"])(HeaderCell, _React$PureComponent); var _super = (0, _createSuper2["default"])(HeaderCell); function HeaderCell(props) { var _this; (0, _classCallCheck2["default"])(this, HeaderCell); _this = _super.call(this, props); _this.handleColumnResizeStart = function (columnWidth) { var _this$props = _this.props, _this$props$left = _this$props.left, left = _this$props$left === void 0 ? 0 : _this$props$left, fixed = _this$props.fixed, onColumnResizeStart = _this$props.onColumnResizeStart, _this$props$resizeLef = _this$props.resizeLeft, resizeLeft = _this$props$resizeLef === void 0 ? 0 : _this$props$resizeLef; if (onColumnResizeStart) { onColumnResizeStart(columnWidth, left + resizeLeft, !!fixed); } }; _this.handleColumnResizeMove = function (width) { var left = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; var fixed = arguments.length > 2 ? arguments[2] : undefined; var _this$props2 = _this.props, _this$props2$onColumn = _this$props2.onColumnResizeMove, onColumnResizeMove = _this$props2$onColumn === void 0 ? _noop["default"] : _this$props2$onColumn, _this$props2$resizeLe = _this$props2.resizeLeft, resizeLeft = _this$props2$resizeLe === void 0 ? 0 : _this$props2$resizeLe; onColumnResizeMove(width, left + resizeLeft, fixed); }; _this.handleColumnResizeEnd = function (columnWidth, cursorDelta) { var _this$props3 = _this.props, dataKey = _this$props3.dataKey, index = _this$props3.index, onColumnResizeEnd = _this$props3.onColumnResizeEnd, onResize = _this$props3.onResize; _this.setState({ columnWidth: columnWidth }); if (onColumnResizeEnd) { onColumnResizeEnd(columnWidth, cursorDelta, dataKey, index); } if (onResize) { onResize(columnWidth, dataKey); } }; _this.handleClick = function () { var _this$props4 = _this.props, sortable = _this$props4.sortable, onSortColumn = _this$props4.onSortColumn, dataKey = _this$props4.dataKey; if (sortable && onSortColumn) { onSortColumn(dataKey); } }; _this.handleShowMouseArea = function (columnWidth) { var _this$props5 = _this.props, _this$props5$onMouseE = _this$props5.onMouseEnterHandler, onMouseEnterHandler = _this$props5$onMouseE === void 0 ? _noop["default"] : _this$props5$onMouseE, fixed = _this$props5.fixed, _this$props5$left = _this$props5.left, left = _this$props5$left === void 0 ? 0 : _this$props5$left, _this$props5$resizeLe = _this$props5.resizeLeft, resizeLeft = _this$props5$resizeLe === void 0 ? 0 : _this$props5$resizeLe; onMouseEnterHandler(columnWidth, left + resizeLeft, !!fixed); }; // @ts-ignore _this.addPrefix = function (name) { return (0, _utils.prefix)(_this.props.classPrefix)(name); }; _this.state = { width: props.width, flexGrow: props.flexGrow, columnWidth: (0, _utils.isNullOrUndefined)(props.flexGrow) ? props.width : 0 }; return _this; } (0, _createClass2["default"])(HeaderCell, [{ key: "renderResizeSpanner", value: function renderResizeSpanner() { var _this2 = this; var _this$props6 = this.props, resizable = _this$props6.resizable, _this$props6$left = _this$props6.left, left = _this$props6$left === void 0 ? 0 : _this$props6$left, onMouseLeaveHandler = _this$props6.onMouseLeaveHandler, fixed = _this$props6.fixed, headerHeight = _this$props6.headerHeight, minWidth = _this$props6.minWidth, groupCount = _this$props6.groupCount, children = _this$props6.children, style = _this$props6.style; var _this$state$columnWid = this.state.columnWidth, columnWidth = _this$state$columnWid === void 0 ? 0 : _this$state$columnWid; if (!resizable) { return null; } var defaultColumnWidth = columnWidth; // 处理组合列第一列拖拽柄定位问题 if (groupCount && groupCount > 1) { defaultColumnWidth = children ? children.props.children[0].props.width : undefined; } return /*#__PURE__*/React.createElement(_ColumnResizeHandler["default"], { defaultColumnWidth: defaultColumnWidth, key: columnWidth, columnLeft: left, columnFixed: fixed, height: headerHeight ? headerHeight - 1 : undefined, minWidth: minWidth, style: { top: style ? style.top : 0 }, onColumnResizeMove: this.handleColumnResizeMove, onColumnResizeStart: function onColumnResizeStart() { return _this2.handleColumnResizeStart(defaultColumnWidth); }, onColumnResizeEnd: this.handleColumnResizeEnd, onMouseEnterHandler: function onMouseEnterHandler() { return _this2.handleShowMouseArea(defaultColumnWidth); }, onMouseLeaveHandler: onMouseLeaveHandler }); } }, { key: "renderSortColumn", value: function renderSortColumn() { var _this$props7 = this.props, sortable = _this$props7.sortable, sortColumn = _this$props7.sortColumn, _this$props7$sortType = _this$props7.sortType, sortType = _this$props7$sortType === void 0 ? '' : _this$props7$sortType, dataKey = _this$props7.dataKey, groupHeader = _this$props7.groupHeader; if (sortable && !groupHeader) { var iconClasses = (0, _classnames["default"])(this.addPrefix('icon-sort icon'), (0, _defineProperty2["default"])({}, this.addPrefix("icon-sort-".concat(sortType)), sortColumn === dataKey)); return /*#__PURE__*/React.createElement("span", { className: this.addPrefix('sort-wrapper') }, /*#__PURE__*/React.createElement("i", { className: iconClasses })); } return null; } }, { key: "render", value: function render() { var _this$props8 = this.props, className = _this$props8.className, width = _this$props8.width, dataKey = _this$props8.dataKey, headerHeight = _this$props8.headerHeight, children = _this$props8.children, left = _this$props8.left, sortable = _this$props8.sortable, classPrefix = _this$props8.classPrefix, sortColumn = _this$props8.sortColumn, sortType = _this$props8.sortType, groupHeader = _this$props8.groupHeader, rest = (0, _objectWithoutProperties2["default"])(_this$props8, _excluded); var classes = (0, _classnames["default"])(classPrefix, className, (0, _defineProperty2["default"])({}, this.addPrefix('sortable'), sortable)); var unhandledProps = (0, _utils.getUnhandledProps)(propTypeKeys, rest); var ariaSort; if (sortColumn === dataKey) { ariaSort = 'other'; if (sortType === 'asc') { ariaSort = 'ascending'; } else if (sortType === 'desc') { ariaSort = 'descending'; } } return /*#__PURE__*/React.createElement("div", { className: classes }, /*#__PURE__*/React.createElement(_Cell["default"], (0, _extends2["default"])({ "aria-sort": ariaSort }, unhandledProps, { width: width, dataKey: dataKey, left: left, headerHeight: headerHeight, isHeaderCell: true, onClick: !groupHeader ? this.handleClick : null }), children, this.renderSortColumn()), this.renderResizeSpanner()); } }], [{ key: "contextType", get: function get() { return _TableContext["default"]; } }, { key: "getDerivedStateFromProps", value: function getDerivedStateFromProps(nextProps, prevState) { if (nextProps.width !== prevState.width || nextProps.flexGrow !== prevState.flexGrow) { return { width: nextProps.width, flexGrow: nextProps.flexGrow, columnWidth: (0, _utils.isNullOrUndefined)(nextProps.flexGrow) ? nextProps.width : 0 }; } return null; } }]); return HeaderCell; }(React.PureComponent); HeaderCell.defaultProps = { classPrefix: (0, _utils.defaultClassPrefix)('performance-table-cell-header') }; var _default = HeaderCell; exports["default"] = _default; //# sourceMappingURL=HeaderCell.js.map