zent
Version:
一套前端设计语言和基于React的实现
153 lines (152 loc) • 7.77 kB
JavaScript
import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PureComponent } from 'react';
import classnames from 'classnames';
import ColGroup from './ColGroup';
import isNil from '../utils/isNil';
import ToolTip from '../tooltip';
import Icon from '../icon';
var sortToolTipMap = new Map([
['', '取消排序'],
['asc', '点击升序'],
['desc', '点击降序'],
]);
var Header = (function (_super) {
__extends(Header, _super);
function Header(props) {
var _this = _super.call(this, props) || this;
_this.getSortInfo = function (column, props) {
var sortBy = props.sortBy, _a = props.sortType, sortType = _a === void 0 ? '' : _a, _b = props.defaultSortType, defaultSortType = _b === void 0 ? 'desc' : _b;
var name = column.name;
var newSortType;
if (name === sortBy) {
if (sortType === '') {
newSortType = defaultSortType;
}
else if (sortType === defaultSortType) {
newSortType = defaultSortType === 'asc' ? 'desc' : 'asc';
}
else {
newSortType = '';
}
}
if (name !== sortBy) {
newSortType = defaultSortType;
}
return {
sortBy: name,
sortType: newSortType,
sortTooltip: sortToolTipMap.get(newSortType),
};
};
_this.getChildrenAndEvents = function (column, props) {
var _a;
var prefix = props.prefix, sortBy = props.sortBy, sortType = props.sortType, onChange = props.onChange;
var cn = classnames(prefix + "-grid-thead-sort", (_a = {},
_a[prefix + "-grid-thead-sort-" + sortType] = sortType && column.name === sortBy,
_a));
if (column.needSort) {
var _b = _this.getSortInfo(column, props), sortBy_1 = _b.sortBy, sortType_1 = _b.sortType, sortTooltip = _b.sortTooltip;
return {
children: (_jsx(ToolTip, __assign({ title: sortTooltip, position: "top-center", cushion: 12 }, { children: _jsxs("div", __assign({ className: prefix + "-grid-thead-sort-btn", "data-zv": '10.0.17' }, { children: [column.title, _jsxs("span", __assign({ className: cn, "data-zv": '10.0.17' }, { children: [_jsx(Icon, { type: "caret-up", className: "caret-up" }, void 0), _jsx(Icon, { type: "caret-down", className: "caret-down" }, void 0)] }), void 0)] }), void 0) }), void 0)),
onClick: function () { return onChange({ sortBy: sortBy_1, sortType: sortType_1 }); },
};
}
return {
children: column.title,
};
};
_this.getHeaderRows = function (passProps, columns, currentRow, rows) {
if (currentRow === void 0) { currentRow = 0; }
if (rows === void 0) { rows = []; }
var props = passProps || _this.props;
var prefix = props.prefix, propsColumns = props.columns;
columns = columns || propsColumns;
rows[currentRow] = rows[currentRow] || [];
(columns || []).forEach(function (column, index) {
var _a;
if (column.rowSpan && rows.length < column.rowSpan) {
while (rows.length < column.rowSpan) {
rows.push([]);
}
}
var name = column.name, key = column.key, className = column.className, colSpan = column.colSpan, rowSpan = column.rowSpan, nowrap = column.nowrap, noWrap = column.noWrap, textAlign = column.textAlign, width = column.width;
var cell = __assign({ key: name || key || index, className: classnames(prefix + "-grid-th", className, (_a = {},
_a[prefix + "-grid-text-align-" + textAlign] = textAlign,
_a[prefix + "-grid-nowrap"] = noWrap !== null && noWrap !== void 0 ? noWrap : nowrap,
_a[prefix + "-grid-th-selection"] = ['selection-column', 'selection-column-single'].indexOf(key) !== -1,
_a[prefix + "-grid-th-expand"] = key === 'expand-column',
_a[prefix + "-grid-th-sortable"] = column.needSort,
_a[prefix + "-grid-th-break-word"] = typeof width !== undefined,
_a)) }, _this.getChildrenAndEvents(column, props));
if (column.children) {
_this.getHeaderRows(props, column.children, currentRow + 1, rows);
}
if (typeof colSpan === 'number') {
cell.colSpan = colSpan;
}
if (typeof rowSpan === 'number') {
cell.rowSpan = rowSpan;
}
if (cell.colSpan !== 0) {
rows[currentRow].push(cell);
}
});
return rows.filter(function (row) { return row.length > 0; });
};
_this.subscribe = function () {
var store = _this.props.store;
_this.unsubscribe = store.subscribe('columns', function () {
_this.setState({ rows: _this.getHeaderRows() });
});
};
_this.state = {
rows: _this.getHeaderRows(props),
};
return _this;
}
Header.prototype.componentDidMount = function () {
this.subscribe();
};
Header.prototype.componentWillReceiveProps = function (nextProps) {
if (nextProps.columns !== this.props.columns ||
nextProps.sortType !== this.props.sortType ||
nextProps.sortBy !== this.props.sortBy) {
this.setState({
rows: this.getHeaderRows(nextProps),
});
}
};
Header.prototype.componentWillUnmount = function () {
if (this.unsubscribe) {
this.unsubscribe();
}
};
Header.prototype.renderThead = function () {
var _a = this.props, prefix = _a.prefix, fixed = _a.fixed, fixedColumnsHeadRowsHeight = _a.fixedColumnsHeadRowsHeight;
var rows = this.state.rows;
var headerHeight = fixedColumnsHeadRowsHeight[0];
var rowsLen = rows.length;
return (_jsx("thead", __assign({ className: prefix + "-grid-thead", "data-zv": '10.0.17' }, { children: (rows || []).map(function (row, index) {
var height = fixed && headerHeight
? headerHeight / rowsLen
: undefined;
return (_jsx("tr", __assign({ className: prefix + "-grid-tr", style: {
height: height,
}, "data-zv": '10.0.17' }, { children: row.map(function (_a) {
var key = _a.key, props = __rest(_a, ["key"]);
return (_jsx("th", __assign({}, props, { "data-zv": '10.0.17' }), key));
}) }), index));
}) }), void 0));
};
Header.prototype.render = function () {
var _a = this.props, scroll = _a.scroll, fixed = _a.fixed, prefix = _a.prefix, columns = _a.columns, size = _a.size;
var headerStyle = {};
if (!fixed && !isNil(scroll.x)) {
headerStyle.width = scroll.x;
}
return scroll.y ? (_jsxs("table", __assign({ className: prefix + "-grid-table " + prefix + "-grid-table-" + size, style: headerStyle, "data-zv": '10.0.17' }, { children: [_jsx(ColGroup, { columns: columns }, void 0), this.renderThead()] }), void 0)) : (this.renderThead());
};
return Header;
}(PureComponent));
export default Header;