component.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. /**
  2. * @license
  3. * Copyright 2019 Google Inc.
  4. *
  5. * Permission is hereby granted, free of charge, to any person obtaining a copy
  6. * of this software and associated documentation files (the "Software"), to deal
  7. * in the Software without restriction, including without limitation the rights
  8. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9. * copies of the Software, and to permit persons to whom the Software is
  10. * furnished to do so, subject to the following conditions:
  11. *
  12. * The above copyright notice and this permission notice shall be included in
  13. * all copies or substantial portions of the Software.
  14. *
  15. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  16. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  17. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  18. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  19. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  20. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  21. * THE SOFTWARE.
  22. */
  23. import { __extends, __values } from "tslib";
  24. import { MDCComponent } from '@material/base/component';
  25. import { MDCCheckbox } from '@material/checkbox/component';
  26. import { closest } from '@material/dom/ponyfill';
  27. import { MDCLinearProgress } from '@material/linear-progress/component';
  28. import { cssClasses, dataAttributes, events, messages, selectors, SortValue } from './constants';
  29. import { MDCDataTableFoundation } from './foundation';
  30. /** MDC Data Table */
  31. var MDCDataTable = /** @class */ (function (_super) {
  32. __extends(MDCDataTable, _super);
  33. function MDCDataTable() {
  34. return _super !== null && _super.apply(this, arguments) || this;
  35. }
  36. MDCDataTable.attachTo = function (root) {
  37. return new MDCDataTable(root);
  38. };
  39. MDCDataTable.prototype.initialize = function (checkboxFactory) {
  40. if (checkboxFactory === void 0) { checkboxFactory = function (el) { return new MDCCheckbox(el); }; }
  41. this.checkboxFactory = checkboxFactory;
  42. };
  43. MDCDataTable.prototype.initialSyncWithDOM = function () {
  44. var _this = this;
  45. this.headerRow =
  46. this.root.querySelector("." + cssClasses.HEADER_ROW);
  47. this.handleHeaderRowCheckboxChange = function () {
  48. _this.foundation.handleHeaderRowCheckboxChange();
  49. };
  50. this.headerRow.addEventListener('change', this.handleHeaderRowCheckboxChange);
  51. this.headerRowClickListener = function (event) {
  52. _this.handleHeaderRowClick(event);
  53. };
  54. this.headerRow.addEventListener('click', this.headerRowClickListener);
  55. this.content =
  56. this.root.querySelector("." + cssClasses.CONTENT);
  57. this.handleContentClick = function (event) {
  58. var dataRowEl = closest(event.target, selectors.ROW);
  59. if (!dataRowEl)
  60. return;
  61. _this.foundation.handleRowClick({
  62. rowId: _this.getRowIdByRowElement(dataRowEl),
  63. row: dataRowEl,
  64. altKey: event.altKey,
  65. ctrlKey: event.ctrlKey,
  66. metaKey: event.metaKey,
  67. shiftKey: event.shiftKey,
  68. });
  69. };
  70. this.content.addEventListener('click', this.handleContentClick);
  71. this.handleRowCheckboxChange = function (event) {
  72. _this.foundation.handleRowCheckboxChange(event);
  73. };
  74. this.content.addEventListener('change', this.handleRowCheckboxChange);
  75. this.layout();
  76. };
  77. /**
  78. * Re-initializes header row checkbox and row checkboxes when selectable rows
  79. * are added or removed from table.
  80. */
  81. MDCDataTable.prototype.layout = function () {
  82. this.foundation.layout();
  83. };
  84. /**
  85. * @return Returns array of header row cell elements.
  86. */
  87. MDCDataTable.prototype.getHeaderCells = function () {
  88. return Array.from(this.root.querySelectorAll(selectors.HEADER_CELL));
  89. };
  90. /**
  91. * @return Returns array of row elements.
  92. */
  93. MDCDataTable.prototype.getRows = function () {
  94. return this.foundation.getRows();
  95. };
  96. /**
  97. * @return Returns array of selected row ids.
  98. */
  99. MDCDataTable.prototype.getSelectedRowIds = function () {
  100. return this.foundation.getSelectedRowIds();
  101. };
  102. /**
  103. * Sets selected row ids. Overwrites previously selected rows.
  104. * @param rowIds Array of row ids that needs to be selected.
  105. */
  106. MDCDataTable.prototype.setSelectedRowIds = function (rowIds) {
  107. this.foundation.setSelectedRowIds(rowIds);
  108. };
  109. /**
  110. * Shows progress indicator when data table is in loading state.
  111. */
  112. MDCDataTable.prototype.showProgress = function () {
  113. this.getLinearProgress().open();
  114. this.foundation.showProgress();
  115. };
  116. /**
  117. * Hides progress indicator after data table is finished loading.
  118. */
  119. MDCDataTable.prototype.hideProgress = function () {
  120. this.foundation.hideProgress();
  121. this.getLinearProgress().close();
  122. };
  123. MDCDataTable.prototype.destroy = function () {
  124. var e_1, _a;
  125. if (this.handleHeaderRowCheckboxChange) {
  126. this.headerRow.removeEventListener('change', this.handleHeaderRowCheckboxChange);
  127. }
  128. if (this.headerRowClickListener) {
  129. this.headerRow.removeEventListener('click', this.headerRowClickListener);
  130. }
  131. if (this.handleRowCheckboxChange) {
  132. this.content.removeEventListener('change', this.handleRowCheckboxChange);
  133. }
  134. if (this.headerRowCheckbox) {
  135. this.headerRowCheckbox.destroy();
  136. }
  137. if (this.rowCheckboxList) {
  138. try {
  139. for (var _b = __values(this.rowCheckboxList), _c = _b.next(); !_c.done; _c = _b.next()) {
  140. var checkbox = _c.value;
  141. checkbox.destroy();
  142. }
  143. }
  144. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  145. finally {
  146. try {
  147. if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
  148. }
  149. finally { if (e_1) throw e_1.error; }
  150. }
  151. }
  152. if (this.handleContentClick) {
  153. this.content.removeEventListener('click', this.handleContentClick);
  154. }
  155. };
  156. MDCDataTable.prototype.getDefaultFoundation = function () {
  157. var _this = this;
  158. // DO NOT INLINE this variable. For backward compatibility, foundations take
  159. // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
  160. // methods, we need a separate, strongly typed adapter variable.
  161. // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
  162. var adapter = {
  163. addClass: function (className) {
  164. _this.root.classList.add(className);
  165. },
  166. removeClass: function (className) {
  167. _this.root.classList.remove(className);
  168. },
  169. getHeaderCellElements: function () { return _this.getHeaderCells(); },
  170. getHeaderCellCount: function () { return _this.getHeaderCells().length; },
  171. getAttributeByHeaderCellIndex: function (index, attribute) {
  172. return _this.getHeaderCells()[index].getAttribute(attribute);
  173. },
  174. setAttributeByHeaderCellIndex: function (index, attribute, value) {
  175. _this.safeSetAttribute(_this.getHeaderCells()[index], attribute, value);
  176. },
  177. setClassNameByHeaderCellIndex: function (index, className) {
  178. _this.getHeaderCells()[index].classList.add(className);
  179. },
  180. removeClassNameByHeaderCellIndex: function (index, className) {
  181. _this.getHeaderCells()[index].classList.remove(className);
  182. },
  183. notifySortAction: function (data) {
  184. _this.emit(events.SORTED, data, /** shouldBubble */ true);
  185. },
  186. getTableContainerHeight: function () {
  187. var tableContainer = _this.root.querySelector("." + cssClasses.TABLE_CONTAINER);
  188. if (!tableContainer) {
  189. throw new Error('MDCDataTable: Table container element not found.');
  190. }
  191. return tableContainer.getBoundingClientRect().height;
  192. },
  193. getTableHeaderHeight: function () {
  194. var tableHeader = _this.root.querySelector(selectors.HEADER_ROW);
  195. if (!tableHeader) {
  196. throw new Error('MDCDataTable: Table header element not found.');
  197. }
  198. return tableHeader.getBoundingClientRect().height;
  199. },
  200. setProgressIndicatorStyles: function (styles) {
  201. var progressIndicator = _this.root.querySelector(selectors.PROGRESS_INDICATOR);
  202. if (!progressIndicator) {
  203. throw new Error('MDCDataTable: Progress indicator element not found.');
  204. }
  205. progressIndicator.style.setProperty('height', styles.height);
  206. progressIndicator.style.setProperty('top', styles.top);
  207. },
  208. addClassAtRowIndex: function (rowIndex, className) {
  209. _this.getRows()[rowIndex].classList.add(className);
  210. },
  211. getRowCount: function () { return _this.getRows().length; },
  212. getRowElements: function () {
  213. return Array.from(_this.root.querySelectorAll(selectors.ROW));
  214. },
  215. getRowIdAtIndex: function (rowIndex) {
  216. return _this.getRows()[rowIndex].getAttribute(dataAttributes.ROW_ID);
  217. },
  218. getRowIndexByChildElement: function (el) {
  219. return _this.getRows().indexOf(closest(el, selectors.ROW));
  220. },
  221. getSelectedRowCount: function () {
  222. return _this.root.querySelectorAll(selectors.ROW_SELECTED)
  223. .length;
  224. },
  225. isCheckboxAtRowIndexChecked: function (rowIndex) {
  226. return _this.rowCheckboxList[rowIndex].checked;
  227. },
  228. isHeaderRowCheckboxChecked: function () { return _this.headerRowCheckbox.checked; },
  229. isRowsSelectable: function () {
  230. return !!_this.root.querySelector(selectors.ROW_CHECKBOX) ||
  231. !!_this.root.querySelector(selectors.HEADER_ROW_CHECKBOX);
  232. },
  233. notifyRowSelectionChanged: function (data) {
  234. _this.emit(events.ROW_SELECTION_CHANGED, {
  235. row: _this.getRowByIndex(data.rowIndex),
  236. rowId: _this.getRowIdByIndex(data.rowIndex),
  237. rowIndex: data.rowIndex,
  238. selected: data.selected,
  239. },
  240. /** shouldBubble */ true);
  241. },
  242. notifySelectedAll: function () {
  243. _this.emit(events.SELECTED_ALL, {}, /** shouldBubble */ true);
  244. },
  245. notifyUnselectedAll: function () {
  246. _this.emit(events.UNSELECTED_ALL, {}, /** shouldBubble */ true);
  247. },
  248. notifyRowClick: function (data) {
  249. _this.emit(events.ROW_CLICK, data, /** shouldBubble */ true);
  250. },
  251. registerHeaderRowCheckbox: function () {
  252. if (_this.headerRowCheckbox) {
  253. _this.headerRowCheckbox.destroy();
  254. }
  255. var checkboxEl = _this.root.querySelector(selectors.HEADER_ROW_CHECKBOX);
  256. _this.headerRowCheckbox = _this.checkboxFactory(checkboxEl);
  257. },
  258. registerRowCheckboxes: function () {
  259. if (_this.rowCheckboxList) {
  260. _this.rowCheckboxList.forEach(function (checkbox) {
  261. checkbox.destroy();
  262. });
  263. }
  264. _this.rowCheckboxList = [];
  265. _this.getRows().forEach(function (rowEl) {
  266. var checkbox = _this.checkboxFactory(rowEl.querySelector(selectors.ROW_CHECKBOX));
  267. _this.rowCheckboxList.push(checkbox);
  268. });
  269. },
  270. removeClassAtRowIndex: function (rowIndex, className) {
  271. _this.getRows()[rowIndex].classList.remove(className);
  272. },
  273. setAttributeAtRowIndex: function (rowIndex, attr, value) {
  274. _this.safeSetAttribute(_this.getRows()[rowIndex], attr, value);
  275. },
  276. setHeaderRowCheckboxChecked: function (checked) {
  277. _this.headerRowCheckbox.checked = checked;
  278. },
  279. setHeaderRowCheckboxIndeterminate: function (indeterminate) {
  280. _this.headerRowCheckbox.indeterminate = indeterminate;
  281. },
  282. setRowCheckboxCheckedAtIndex: function (rowIndex, checked) {
  283. _this.rowCheckboxList[rowIndex].checked = checked;
  284. },
  285. setSortStatusLabelByHeaderCellIndex: function (columnIndex, sortValue) {
  286. var headerCell = _this.getHeaderCells()[columnIndex];
  287. var sortStatusLabel = headerCell.querySelector(selectors.SORT_STATUS_LABEL);
  288. if (!sortStatusLabel)
  289. return;
  290. sortStatusLabel.textContent =
  291. _this.getSortStatusMessageBySortValue(sortValue);
  292. },
  293. };
  294. return new MDCDataTableFoundation(adapter);
  295. };
  296. MDCDataTable.prototype.getRowByIndex = function (index) {
  297. return this.getRows()[index];
  298. };
  299. MDCDataTable.prototype.getRowIdByIndex = function (index) {
  300. return this.getRowByIndex(index).getAttribute(dataAttributes.ROW_ID);
  301. };
  302. MDCDataTable.prototype.handleHeaderRowClick = function (event) {
  303. var headerCell = closest(event.target, selectors.HEADER_CELL_WITH_SORT);
  304. if (!headerCell) {
  305. return;
  306. }
  307. var columnId = headerCell.getAttribute(dataAttributes.COLUMN_ID);
  308. var columnIndex = this.getHeaderCells().indexOf(headerCell);
  309. if (columnIndex === -1) {
  310. return;
  311. }
  312. this.foundation.handleSortAction({ columnId: columnId, columnIndex: columnIndex, headerCell: headerCell });
  313. };
  314. MDCDataTable.prototype.getSortStatusMessageBySortValue = function (sortValue) {
  315. switch (sortValue) {
  316. case SortValue.ASCENDING:
  317. return messages.SORTED_IN_ASCENDING;
  318. case SortValue.DESCENDING:
  319. return messages.SORTED_IN_DESCENDING;
  320. default:
  321. return '';
  322. }
  323. };
  324. MDCDataTable.prototype.getLinearProgressElement = function () {
  325. var el = this.root.querySelector("." + cssClasses.LINEAR_PROGRESS);
  326. if (!el) {
  327. throw new Error('MDCDataTable: linear progress element is not found.');
  328. }
  329. return el;
  330. };
  331. MDCDataTable.prototype.getLinearProgress = function () {
  332. if (!this.linearProgress) {
  333. var el = this.getLinearProgressElement();
  334. this.linearProgress = new MDCLinearProgress(el);
  335. }
  336. return this.linearProgress;
  337. };
  338. MDCDataTable.prototype.getRowIdByRowElement = function (rowElement) {
  339. return rowElement.getAttribute(dataAttributes.ROW_ID);
  340. };
  341. return MDCDataTable;
  342. }(MDCComponent));
  343. export { MDCDataTable };
  344. //# sourceMappingURL=component.js.map