@progress/kendo-react-grid
Version:
KendoReact Grid package
140 lines • 6.82 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
import * as React from 'react';
import { normalize } from '../interfaces/GridSortSettings';
import { ColumnResizer } from '../drag/ColumnResizer';
import { ColumnDraggable } from '../drag/ColumnDraggable';
import { GridHeaderCell } from './GridHeaderCell';
import { ColumnMenu } from '../columnMenu/ColumnMenu';
/**
* @hidden
*/
var sortSeqMap = {
true: { 'asc': 'desc', 'desc': '', '': 'asc' },
false: { 'asc': 'desc', 'desc': 'asc', '': 'asc' }
};
/**
* @hidden
*/
var ariaSortMap = {
'none': '',
'asc': 'ascending',
'desc': 'descending'
};
/**
* @hidden
*/
var HeaderRow = /** @class */ (function (_super) {
__extends(HeaderRow, _super);
function HeaderRow(props) {
var _this = _super.call(this, props) || this;
_this._element = null;
_this.cells = function (rowIndexes) { return rowIndexes.map(function (columnIndex, index) {
var column = _this.props.columns[columnIndex];
var sortable = _this.props.sortable && column.sortable;
var sortIndex = _this.props.sort ? _this.props.sort.findIndex(function (s) { return s.field === column.field; }) : -1;
var sortDir = sortIndex >= 0 ? ((_this.props.sort)[sortIndex].dir || 'none') : 'none';
var headerCellProps = {
field: column.field,
onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined,
selectionChange: _this.props.selectionChange,
title: column.title,
selectionValue: column.headerSelectionValue,
render: _this.props.cellRender,
children: _this.sortIcon(sortIndex),
key: 1
};
var className = (column.kFirst ? 'k-first ' : '') + _this.cellClass(column.field, column.headerClassName);
var columnMenu = column.columnMenu || _this.props.columnMenu;
var style = (column.left !== undefined) ? {
position: 'sticky',
left: column.left,
right: column.right,
zIndex: 1,
background: '#f6f6f6',
borderRightWidth: column.rightBorder ? '1px' : ''
} : {};
return (React.createElement("th", { "aria-sort": ariaSortMap[sortDir], key: index, colSpan: column.colSpan, rowSpan: column.rowSpan, className: className, style: style }, [
column.children.length === 0 && columnMenu &&
React.createElement(ColumnMenu, { key: 0, column: {
field: column.field,
filter: column.filter
}, sortable: sortable && _this.props.sortable, sort: _this.props.sort, onSortChange: _this.props.sortChange, filter: _this.props.filter, filterable: _this.props.filterable && column.filterable, onFilterChange: _this.props.filterChange, render: columnMenu }),
column.headerCell &&
React.createElement(column.headerCell, __assign({}, headerCellProps)) ||
React.createElement(GridHeaderCell, __assign({}, headerCellProps)),
_this.props.columnResize && _this.props.columnResize.resizable && column.resizable &&
React.createElement(ColumnResizer, { key: 2, resize: function (e, element, end) {
return _this.props.columnResize &&
_this.props.columnResize.dragHandler(e, column, element, end);
} })
]));
}); };
_this.cellClick = _this.cellClick.bind(_this);
return _this;
}
Object.defineProperty(HeaderRow.prototype, "element", {
get: function () {
return this._element;
},
enumerable: true,
configurable: true
});
HeaderRow.prototype.cellClick = function (e, column) {
e.preventDefault();
if (!this.props.sortChange) {
return;
}
var _a = normalize(this.props.sortable || false, column.sortable || false), allowUnsort = _a.allowUnsort, mode = _a.mode;
var oldDescriptor = (this.props.sort || []).filter(function (d) { return d.field === column.field; })[0];
var dir = sortSeqMap[allowUnsort][oldDescriptor && oldDescriptor.dir || ''];
var newDescriptor = (mode === 'single') ?
[] : (this.props.sort || []).filter(function (d) { return d.field !== column.field; });
if (dir !== '' && column.field) {
newDescriptor.push({ field: column.field, dir: dir });
}
this.props.sortChange(newDescriptor, e);
};
HeaderRow.prototype.cellClass = function (field, headerClassName) {
var customClass = headerClassName ? ' ' + headerClassName : '';
if (this.props.sort &&
this.props.sort.filter(function (descriptor) { return descriptor.field === field; }).length > 0) {
return 'k-header k-sorted' + customClass;
}
return 'k-header' + customClass;
};
HeaderRow.prototype.sortIcon = function (sortIndex) {
if (!this.props.sort) {
return null;
}
return sortIndex >= 0 && [
React.createElement("span", { key: 1, className: 'k-icon k-i-sort-' + this.props.sort[sortIndex].dir + '-sm' }),
this.props.sort.length > 1 && React.createElement("span", { key: 2, className: "k-sort-order" }, sortIndex + 1)
];
};
HeaderRow.prototype.render = function () {
var _this = this;
return this.props.columnsMap.map(function (rowIndexes, i) {
return _this.props.pressHandler && (React.createElement(ColumnDraggable, { key: i, pressHandler: _this.props.pressHandler, dragHandler: _this.props.dragHandler, releaseHandler: _this.props.releaseHandler }, _this.cells(rowIndexes))) || React.createElement("tr", null, _this.cells(rowIndexes));
});
};
return HeaderRow;
}(React.Component));
export { HeaderRow };
//# sourceMappingURL=HeaderRow.js.map