/** * @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 { MDCFoundation } from "@material/base/foundation"; import { MDCDataTableAdapter } from "./adapter"; import { cssClasses, strings } from "./constants"; export class MDCDataTableFoundation extends MDCFoundation { static get defaultAdapter(): MDCDataTableAdapter { return { addClassAtRowIndex: () => undefined, getRowCount: () => 0, getRowElements: () => [], getRowIdAtIndex: () => "", getRowIndexByChildElement: () => 0, getSelectedRowCount: () => 0, isCheckboxAtRowIndexChecked: () => false, isHeaderRowCheckboxChecked: () => false, isRowsSelectable: () => false, notifyRowSelectionChanged: () => undefined, notifySelectedAll: () => undefined, notifyUnselectedAll: () => undefined, registerHeaderRowCheckbox: () => undefined, registerRowCheckboxes: () => undefined, removeClassAtRowIndex: () => undefined, setAttributeAtRowIndex: () => undefined, setHeaderRowCheckboxChecked: () => undefined, setHeaderRowCheckboxIndeterminate: () => undefined, setRowCheckboxCheckedAtIndex: () => undefined, }; } constructor(adapter?: Partial) { super({ ...MDCDataTableFoundation.defaultAdapter, ...adapter }); } /** * Re-initializes header row checkbox and row checkboxes when selectable rows are added or removed from table. * Use this if registering checkbox is synchronous. */ layout() { 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. */ async layoutAsync(): Promise { if (this.adapter_.isRowsSelectable()) { await this.adapter_.registerHeaderRowCheckbox(); await this.adapter_.registerRowCheckboxes(); this.setHeaderRowCheckboxState_(); } } /** * @return Returns array of row elements. */ getRows(): Element[] { return this.adapter_.getRowElements(); } /** * Sets selected row ids. Overwrites previously selected rows. * @param rowIds Array of row ids that needs to be selected. */ setSelectedRowIds(rowIds: string[]) { for (let rowIndex = 0; rowIndex < this.adapter_.getRowCount(); rowIndex++) { const rowId = this.adapter_.getRowIdAtIndex(rowIndex); let 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 selected row ids. */ getSelectedRowIds(): Array { const selectedRowIds: Array = []; for (let 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. */ handleHeaderRowCheckboxChange() { const isHeaderChecked = this.adapter_.isHeaderRowCheckboxChecked(); for (let 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. */ handleRowCheckboxChange(event: Event) { const rowIndex = this.adapter_.getRowIndexByChildElement( event.target as HTMLInputElement ); if (rowIndex === -1) { return; } const selected = this.adapter_.isCheckboxAtRowIndexChecked(rowIndex); this.selectRowAtIndex_(rowIndex, selected); this.setHeaderRowCheckboxState_(); const rowId = this.adapter_.getRowIdAtIndex(rowIndex); this.adapter_.notifyRowSelectionChanged({ rowId, rowIndex, selected }); } /** * Updates header row checkbox state based on number of rows selected. */ private setHeaderRowCheckboxState_() { if (this.adapter_.getSelectedRowCount() === this.adapter_.getRowCount()) { this.adapter_.setHeaderRowCheckboxChecked(true); this.adapter_.setHeaderRowCheckboxIndeterminate(false); } else if (this.adapter_.getSelectedRowCount() === 0) { this.adapter_.setHeaderRowCheckboxIndeterminate(false); this.adapter_.setHeaderRowCheckboxChecked(false); } else { this.adapter_.setHeaderRowCheckboxIndeterminate(true); this.adapter_.setHeaderRowCheckboxChecked(false); } } /** * Sets the attributes of row element based on selection state. */ private selectRowAtIndex_(rowIndex: number, selected: boolean) { 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" ); } } }