balm-ui
Version:
A modular and customizable UI library based on Material Design and Vue 3
301 lines • 14.1 kB
JavaScript
/**
* @license
* Copyright 2019 Google Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
import { __assign, __awaiter, __extends, __generator } from "tslib";
import { MDCFoundation } from '../base/foundation';
import { cssClasses, SortValue, strings } from './constants';
/**
* The Foundation of data table component containing pure business logic, any
* logic requiring DOM manipulation are delegated to adapter methods.
*/
var MDCDataTableFoundation = /** @class */ (function (_super) {
__extends(MDCDataTableFoundation, _super);
function MDCDataTableFoundation(adapter) {
return _super.call(this, __assign(__assign({}, MDCDataTableFoundation.defaultAdapter), adapter)) || this;
}
Object.defineProperty(MDCDataTableFoundation, "defaultAdapter", {
get: function () {
return {
addClass: function () { return undefined; },
addClassAtRowIndex: function () { return undefined; },
getAttributeByHeaderCellIndex: function () { return ''; },
getHeaderCellCount: function () { return 0; },
getHeaderCellElements: function () { return []; },
getRowCount: function () { return 0; },
getRowElements: function () { return []; },
getRowIdAtIndex: function () { return ''; },
getRowIndexByChildElement: function () { return 0; },
getSelectedRowCount: function () { return 0; },
getTableContainerHeight: function () { return 0; },
getTableHeaderHeight: function () { return 0; },
isCheckboxAtRowIndexChecked: function () { return false; },
isHeaderRowCheckboxChecked: function () { return false; },
isRowsSelectable: function () { return false; },
notifyRowSelectionChanged: function () { return undefined; },
notifySelectedAll: function () { return undefined; },
notifySortAction: function () { return undefined; },
notifyUnselectedAll: function () { return undefined; },
notifyRowClick: function () { return undefined; },
registerHeaderRowCheckbox: function () { return undefined; },
registerRowCheckboxes: function () { return undefined; },
removeClass: function () { return undefined; },
removeClassAtRowIndex: function () { return undefined; },
removeClassNameByHeaderCellIndex: function () { return undefined; },
setAttributeAtRowIndex: function () { return undefined; },
setAttributeByHeaderCellIndex: function () { return undefined; },
setClassNameByHeaderCellIndex: function () { return undefined; },
setHeaderRowCheckboxChecked: function () { return undefined; },
setHeaderRowCheckboxIndeterminate: function () { return undefined; },
setProgressIndicatorStyles: function () { return undefined; },
setRowCheckboxCheckedAtIndex: function () { return undefined; },
setSortStatusLabelByHeaderCellIndex: function () { return undefined; },
};
},
enumerable: false,
configurable: true
});
/**
* Re-initializes header row checkbox and row checkboxes when selectable rows
* are added or removed from table. Use this if registering checkbox is
* synchronous.
*/
MDCDataTableFoundation.prototype.layout = function () {
if (this.adapter.isRowsSelectable()) {
this.adapter.registerHeaderRowCheckbox();
this.adapter.registerRowCheckboxes();
this.setHeaderRowCheckboxState();
}
};
/**
* Re-initializes header row checkbox and row checkboxes when selectable rows
* are added or removed from table. Use this if registering checkbox is
* asynchronous.
*/
MDCDataTableFoundation.prototype.layoutAsync = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!this.adapter.isRowsSelectable()) return [3 /*break*/, 3];
return [4 /*yield*/, this.adapter.registerHeaderRowCheckbox()];
case 1:
_a.sent();
return [4 /*yield*/, this.adapter.registerRowCheckboxes()];
case 2:
_a.sent();
this.setHeaderRowCheckboxState();
_a.label = 3;
case 3: return [2 /*return*/];
}
});
});
};
/**
* @return Returns array of row elements.
*/
MDCDataTableFoundation.prototype.getRows = function () {
return this.adapter.getRowElements();
};
/**
* @return Array of header cell elements.
*/
MDCDataTableFoundation.prototype.getHeaderCells = function () {
return this.adapter.getHeaderCellElements();
};
/**
* Sets selected row ids. Overwrites previously selected rows.
* @param rowIds Array of row ids that needs to be selected.
*/
MDCDataTableFoundation.prototype.setSelectedRowIds = function (rowIds) {
for (var rowIndex = 0; rowIndex < this.adapter.getRowCount(); rowIndex++) {
var rowId = this.adapter.getRowIdAtIndex(rowIndex);
var isSelected = false;
if (rowId && rowIds.indexOf(rowId) >= 0) {
isSelected = true;
}
this.adapter.setRowCheckboxCheckedAtIndex(rowIndex, isSelected);
this.selectRowAtIndex(rowIndex, isSelected);
}
this.setHeaderRowCheckboxState();
};
/**
* @return Returns array of all row ids.
*/
MDCDataTableFoundation.prototype.getRowIds = function () {
var rowIds = [];
for (var rowIndex = 0; rowIndex < this.adapter.getRowCount(); rowIndex++) {
rowIds.push(this.adapter.getRowIdAtIndex(rowIndex));
}
return rowIds;
};
/**
* @return Returns array of selected row ids.
*/
MDCDataTableFoundation.prototype.getSelectedRowIds = function () {
var selectedRowIds = [];
for (var rowIndex = 0; rowIndex < this.adapter.getRowCount(); rowIndex++) {
if (this.adapter.isCheckboxAtRowIndexChecked(rowIndex)) {
selectedRowIds.push(this.adapter.getRowIdAtIndex(rowIndex));
}
}
return selectedRowIds;
};
/**
* Handles header row checkbox change event.
*/
MDCDataTableFoundation.prototype.handleHeaderRowCheckboxChange = function () {
var isHeaderChecked = this.adapter.isHeaderRowCheckboxChecked();
for (var rowIndex = 0; rowIndex < this.adapter.getRowCount(); rowIndex++) {
this.adapter.setRowCheckboxCheckedAtIndex(rowIndex, isHeaderChecked);
this.selectRowAtIndex(rowIndex, isHeaderChecked);
}
if (isHeaderChecked) {
this.adapter.notifySelectedAll();
}
else {
this.adapter.notifyUnselectedAll();
}
};
/**
* Handles change event originated from row checkboxes.
*/
MDCDataTableFoundation.prototype.handleRowCheckboxChange = function (event) {
var rowIndex = this.adapter.getRowIndexByChildElement(event.target);
if (rowIndex === -1) {
return;
}
var selected = this.adapter.isCheckboxAtRowIndexChecked(rowIndex);
this.selectRowAtIndex(rowIndex, selected);
this.setHeaderRowCheckboxState();
var rowId = this.adapter.getRowIdAtIndex(rowIndex);
this.adapter.notifyRowSelectionChanged({ rowId: rowId, rowIndex: rowIndex, selected: selected });
};
/**
* Handles sort action on sortable header cell.
*/
MDCDataTableFoundation.prototype.handleSortAction = function (eventData) {
var columnId = eventData.columnId, columnIndex = eventData.columnIndex, headerCell = eventData.headerCell;
// Reset sort attributes / classes on other header cells.
for (var index = 0; index < this.adapter.getHeaderCellCount(); index++) {
if (index === columnIndex) {
continue;
}
this.adapter.removeClassNameByHeaderCellIndex(index, cssClasses.HEADER_CELL_SORTED);
this.adapter.removeClassNameByHeaderCellIndex(index, cssClasses.HEADER_CELL_SORTED_DESCENDING);
this.adapter.setAttributeByHeaderCellIndex(index, strings.ARIA_SORT, SortValue.NONE);
this.adapter.setSortStatusLabelByHeaderCellIndex(index, SortValue.NONE);
}
// Set appropriate sort attributes / classes on target header cell.
this.adapter.setClassNameByHeaderCellIndex(columnIndex, cssClasses.HEADER_CELL_SORTED);
var currentSortValue = this.adapter.getAttributeByHeaderCellIndex(columnIndex, strings.ARIA_SORT);
var sortValue = SortValue.NONE;
// Set to descending if sorted on ascending order.
if (currentSortValue === SortValue.ASCENDING) {
this.adapter.setClassNameByHeaderCellIndex(columnIndex, cssClasses.HEADER_CELL_SORTED_DESCENDING);
this.adapter.setAttributeByHeaderCellIndex(columnIndex, strings.ARIA_SORT, SortValue.DESCENDING);
sortValue = SortValue.DESCENDING;
// Set to ascending if sorted on descending order.
}
else if (currentSortValue === SortValue.DESCENDING) {
this.adapter.removeClassNameByHeaderCellIndex(columnIndex, cssClasses.HEADER_CELL_SORTED_DESCENDING);
this.adapter.setAttributeByHeaderCellIndex(columnIndex, strings.ARIA_SORT, SortValue.ASCENDING);
sortValue = SortValue.ASCENDING;
}
else {
// Set to ascending by default when not sorted.
this.adapter.setAttributeByHeaderCellIndex(columnIndex, strings.ARIA_SORT, SortValue.ASCENDING);
sortValue = SortValue.ASCENDING;
}
this.adapter.setSortStatusLabelByHeaderCellIndex(columnIndex, sortValue);
this.adapter.notifySortAction({
columnId: columnId,
columnIndex: columnIndex,
headerCell: headerCell,
sortValue: sortValue,
});
};
/**
* Handles data table row click event.
*/
MDCDataTableFoundation.prototype.handleRowClick = function (_a) {
var rowId = _a.rowId, row = _a.row;
this.adapter.notifyRowClick({
rowId: rowId,
row: row,
});
};
/**
* Shows progress indicator blocking only the table body content when in
* loading state.
*/
MDCDataTableFoundation.prototype.showProgress = function () {
var tableHeaderHeight = this.adapter.getTableHeaderHeight();
// Calculate the height of table content (Not scroll content) excluding
// header row height.
var height = this.adapter.getTableContainerHeight() - tableHeaderHeight;
var top = tableHeaderHeight;
this.adapter.setProgressIndicatorStyles({
height: height + "px",
top: top + "px",
});
this.adapter.addClass(cssClasses.IN_PROGRESS);
};
/**
* Hides progress indicator when data table is finished loading.
*/
MDCDataTableFoundation.prototype.hideProgress = function () {
this.adapter.removeClass(cssClasses.IN_PROGRESS);
};
/**
* Updates header row checkbox state based on number of rows selected.
*/
MDCDataTableFoundation.prototype.setHeaderRowCheckboxState = function () {
if (this.adapter.getSelectedRowCount() === 0) {
this.adapter.setHeaderRowCheckboxChecked(false);
this.adapter.setHeaderRowCheckboxIndeterminate(false);
}
else if (this.adapter.getSelectedRowCount() === this.adapter.getRowCount()) {
this.adapter.setHeaderRowCheckboxChecked(true);
this.adapter.setHeaderRowCheckboxIndeterminate(false);
}
else {
this.adapter.setHeaderRowCheckboxIndeterminate(true);
this.adapter.setHeaderRowCheckboxChecked(false);
}
};
/**
* Sets the attributes of row element based on selection state.
*/
MDCDataTableFoundation.prototype.selectRowAtIndex = function (rowIndex, selected) {
if (selected) {
this.adapter.addClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);
this.adapter.setAttributeAtRowIndex(rowIndex, strings.ARIA_SELECTED, 'true');
}
else {
this.adapter.removeClassAtRowIndex(rowIndex, cssClasses.ROW_SELECTED);
this.adapter.setAttributeAtRowIndex(rowIndex, strings.ARIA_SELECTED, 'false');
}
};
return MDCDataTableFoundation;
}(MDCFoundation));
export { MDCDataTableFoundation };
//# sourceMappingURL=foundation.js.map