angular2-data-table
Version:
angular2-data-table is a Angular2 component for presenting large and complex data.
154 lines • 6.83 kB
JavaScript
"use strict";
var core_1 = require('@angular/core');
var types_1 = require('../../types');
var utils_1 = require('../../utils');
var DataTableHeaderComponent = (function () {
function DataTableHeaderComponent() {
this.sort = new core_1.EventEmitter();
this.reorder = new core_1.EventEmitter();
this.resize = new core_1.EventEmitter();
this.select = new core_1.EventEmitter();
}
Object.defineProperty(DataTableHeaderComponent.prototype, "headerHeight", {
get: function () {
return this._headerHeight;
},
set: function (val) {
if (val !== 'auto') {
this._headerHeight = val + "px";
}
else {
this._headerHeight = val;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableHeaderComponent.prototype, "columns", {
get: function () {
return this._columns;
},
set: function (val) {
this._columns = val;
var colsByPin = utils_1.columnsByPin(val);
this.columnsByPin = utils_1.columnsByPinArr(val);
this.columnGroupWidths = utils_1.columnGroupWidths(colsByPin, val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableHeaderComponent.prototype, "headerWidth", {
get: function () {
if (this.scrollbarH) {
return this.innerWidth + 'px';
}
return '100%';
},
enumerable: true,
configurable: true
});
DataTableHeaderComponent.prototype.trackByGroups = function (index, colGroup) {
return colGroup.type;
};
DataTableHeaderComponent.prototype.onColumnResized = function (width, column) {
if (width <= column.minWidth) {
width = column.minWidth;
}
else if (width >= column.maxWidth) {
width = column.maxWidth;
}
this.resize.emit({
column: column,
prevValue: column.width,
newValue: width
});
};
DataTableHeaderComponent.prototype.onColumnReordered = function (_a) {
var prevIndex = _a.prevIndex, newIndex = _a.newIndex, model = _a.model;
this.reorder.emit({
column: model,
prevValue: prevIndex,
newValue: newIndex
});
};
DataTableHeaderComponent.prototype.onSort = function (_a) {
var column = _a.column, prevValue = _a.prevValue, newValue = _a.newValue;
var sorts = this.calcNewSorts(column, prevValue, newValue);
this.sort.emit({
sorts: sorts,
column: column,
prevValue: prevValue,
newValue: newValue
});
};
DataTableHeaderComponent.prototype.calcNewSorts = function (column, prevValue, newValue) {
var idx = 0;
var sorts = this.sorts.map(function (s, i) {
s = Object.assign({}, s);
if (s.prop === column.prop)
idx = i;
return s;
});
if (newValue === undefined) {
sorts.splice(idx, 1);
}
else if (prevValue) {
sorts[idx].dir = newValue;
}
else {
if (this.sortType === types_1.SortType.single) {
sorts.splice(0, this.sorts.length);
}
sorts.push({ dir: newValue, prop: column.prop });
}
return sorts;
};
DataTableHeaderComponent.prototype.stylesByGroup = function (group) {
var widths = this.columnGroupWidths;
var offsetX = this.offsetX;
var styles = {
width: widths[group] + "px"
};
if (group === 'center') {
utils_1.translateXY(styles, offsetX * -1, 0);
}
else if (group === 'right') {
var totalDiff = widths.total - this.innerWidth;
var offset = totalDiff * -1;
utils_1.translateXY(styles, offset, 0);
}
return styles;
};
DataTableHeaderComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'datatable-header',
template: "\n <div\n orderable\n (reorder)=\"onColumnReordered($event)\"\n [style.width.px]=\"columnGroupWidths.total\"\n class=\"datatable-header-inner\">\n <div\n *ngFor=\"let colGroup of columnsByPin; trackBy: trackByGroups\"\n [class]=\"'datatable-row-' + colGroup.type\"\n [ngStyle]=\"stylesByGroup(colGroup.type)\">\n <datatable-header-cell\n *ngFor=\"let column of colGroup.columns; trackBy: column?.$$id\"\n resizeable\n [resizeEnabled]=\"column.resizeable\"\n (resize)=\"onColumnResized($event, column)\"\n long-press\n (longPress)=\"drag = true\"\n (longPressEnd)=\"drag = false\"\n draggable\n [dragX]=\"column.draggable && drag\"\n [dragY]=\"false\"\n [dragModel]=\"column\"\n [headerHeight]=\"headerHeight\"\n [column]=\"column\"\n [sortType]=\"sortType\"\n [sorts]=\"sorts\"\n [selectionType]=\"selectionType\"\n [sortAscendingIcon]=\"sortAscendingIcon\"\n [sortDescendingIcon]=\"sortDescendingIcon\"\n (sort)=\"onSort($event)\"\n (select)=\"select.emit($event)\">\n </datatable-header-cell>\n </div>\n </div>\n ",
host: {
class: 'datatable-header'
}
},] },
];
/** @nocollapse */
DataTableHeaderComponent.ctorParameters = function () { return []; };
DataTableHeaderComponent.propDecorators = {
'sortAscendingIcon': [{ type: core_1.Input },],
'sortDescendingIcon': [{ type: core_1.Input },],
'scrollbarH': [{ type: core_1.Input },],
'innerWidth': [{ type: core_1.Input },],
'offsetX': [{ type: core_1.Input },],
'sorts': [{ type: core_1.Input },],
'sortType': [{ type: core_1.Input },],
'allRowsSelected': [{ type: core_1.Input },],
'selectionType': [{ type: core_1.Input },],
'headerHeight': [{ type: core_1.HostBinding, args: ['style.height',] }, { type: core_1.Input },],
'columns': [{ type: core_1.Input },],
'sort': [{ type: core_1.Output },],
'reorder': [{ type: core_1.Output },],
'resize': [{ type: core_1.Output },],
'select': [{ type: core_1.Output },],
'headerWidth': [{ type: core_1.HostBinding, args: ['style.width',] },],
};
return DataTableHeaderComponent;
}());
exports.DataTableHeaderComponent = DataTableHeaderComponent;
//# sourceMappingURL=header.component.js.map