From 3eda3af868603f6ea216540427d8e60ca0136a43 Mon Sep 17 00:00:00 2001 From: Chris Dhanaraj Date: Mon, 8 May 2017 15:16:41 +0200 Subject: [PATCH] fix(tables): update refreshRows with prefixed functions (#66) * fix(tables): update refreshRows with prefixed functions * fix(tables): realised more of v6 was missing * fix(deps): rolling this fix up in here as well --- package.json | 4 +- src/components/data-table/data-table.js | 77 +++++++++++++++---------- 2 files changed, 46 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index bc9a372ae156..b71053d71552 100644 --- a/package.json +++ b/package.json @@ -29,11 +29,9 @@ "style guide" ], "dependencies": { + "carbon-icons": "5.1.2", "lodash.debounce": "^4.0.8" }, - "peerDependencies": { - "carbon-icons": "5.1.2" - }, "devDependencies": { "adaro": "1.0.4", "babel-core": "^6.22.0", diff --git a/src/components/data-table/data-table.js b/src/components/data-table/data-table.js index 5eef55ea4380..f787065b8933 100644 --- a/src/components/data-table/data-table.js +++ b/src/components/data-table/data-table.js @@ -1,10 +1,12 @@ import mixin from '../../globals/js/misc/mixin'; import createComponent from '../../globals/js/mixins/create-component'; -import initComponentBySearch from '../../globals/js/mixins/init-component-by-search'; +import initComponentBySearch + from '../../globals/js/mixins/init-component-by-search'; import eventedState from '../../globals/js/mixins/evented-state'; import eventMatches from '../../globals/js/misc/event-matches'; -class DataTable extends mixin(createComponent, initComponentBySearch, eventedState) { +class DataTable + extends mixin(createComponent, initComponentBySearch, eventedState) { /** * Data Table * @extends CreateComponent @@ -24,17 +26,13 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta super(element, options); this.container = element.parentNode; // requires the immediate parent to be the container - this.expandCells = [...this.element.querySelectorAll(this.options.selectorExpandCells)]; - this.expandableRows = [...this.element.querySelectorAll(this.options.selectorExpandableRows)]; - this.parentRows = [...this.element.querySelectorAll(this.options.selectorParentRows)]; this.tableBody = this.element.querySelector(this.options.selectorTableBody); + this.expandCells = []; + this.expandableRows = []; + this.parentRows = []; + this.overflowInitialized = false; - if (!this.tableBody) { - throw new Error('Cannot find the table body.'); - } - - this._zebraStripe(); - this._initExpandableRows(); + this.refreshRows(); this.element.addEventListener('click', (evt) => { const eventElement = eventMatches(evt, this.options.eventTrigger); @@ -62,8 +60,8 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta */ _toggleState = (element, evt) => { const data = element.dataset; - const label = (data.label) ? data.label : ''; - const previousValue = (data.previousValue) ? data.previousValue : ''; + const label = data.label ? data.label : ''; + const previousValue = data.previousValue ? data.previousValue : ''; const initialEvt = evt; this.changeState({ group: data.event, @@ -72,48 +70,57 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta previousValue, initialEvt, }); - } + }; /** * Zebra stripes - done in javascript to handle expandable rows */ - _zebraStripe = () => { - this.parentRows.forEach((item, index) => { + _zebraStripe = (parentRows) => { + parentRows.forEach((item, index) => { if (index % 2 === 0) { item.classList.add(this.options.classParentRowEven); if (item.nextElementSibling && item.nextElementSibling.classList.contains(this.options.classExpandableRow)) { item.nextElementSibling.classList.add(this.options.classExpandableRowEven); } + } else { + item.classList.remove(this.options.classParentRowEven); } }); } + /** * Find all expandable rows and remove them from the DOM */ - _initExpandableRows = () => { - this.expandableRows.forEach((item) => { + _initExpandableRows = (expandableRows) => { + expandableRows.forEach((item) => { item.classList.remove(this.options.classExpandableRowHidden); this.tableBody.removeChild(item); }); - } + }; /** * On trigger, insert the expandable row back in */ _toggleRowExpand = (detail) => { const element = detail.element; - const parent = eventMatches(detail.initialEvt, this.options.eventParentContainer); + const parent = eventMatches( + detail.initialEvt, + this.options.eventParentContainer, + ); const index = this.expandCells.indexOf(element); - if (element.dataset.previousValue === undefined || element.dataset.previousValue === 'expanded') { + if ( + element.dataset.previousValue === undefined || + element.dataset.previousValue === 'expanded' + ) { element.dataset.previousValue = 'collapsed'; this.tableBody.insertBefore(this.expandableRows[index], this.parentRows[index + 1]); } else { this.tableBody.removeChild(parent.nextElementSibling); element.dataset.previousValue = 'expanded'; } - } + }; /** * On trigger, flip the sort icon @@ -128,22 +135,28 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta element.dataset.previousValue = 'descending'; element.classList.remove(this.options.classTableSortAscending); } - } + }; /** * On trigger, check all checkboxes */ _toggleSelectAll = (detail) => { const { element, previousValue } = detail; - const inputs = [...this.element.querySelectorAll(this.options.selectorCheckbox)]; + const inputs = [ + ...this.element.querySelectorAll(this.options.selectorCheckbox), + ]; if (!previousValue || previousValue === 'toggled') { - inputs.forEach((item) => { item.checked = true; }); // eslint-disable-line no-param-reassign + inputs.forEach((item) => { + item.checked = true; // eslint-disable-line no-param-reassign + }); element.dataset.previousValue = 'off'; } else { - inputs.forEach((item) => { item.checked = false; }); // eslint-disable-line no-param-reassign + inputs.forEach((item) => { + item.checked = false; // eslint-disable-line no-param-reassign + }); element.dataset.previousValue = 'toggled'; } - } + }; /** * On fire, create the parent child rows + striping @@ -161,16 +174,16 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta if (newExpandableRows.length > 0) { const diffExpandableRows = diffParentRows.map(newRow => newRow.nextElementSibling); const mergedExpandableRows = [...this.expandableRows, ...diffExpandableRows]; - this.initExpandableRows(diffExpandableRows); + this._initExpandableRows(diffExpandableRows); this.expandableRows = mergedExpandableRows; } - this.zebraStripe(newParentRows); + this._zebraStripe(newParentRows); } else { - this.zebraStripe(newParentRows); + this._zebraStripe(newParentRows); if (newExpandableRows.length > 0) { - this.initExpandableRows(newExpandableRows); + this._initExpandableRows(newExpandableRows); this.expandableRows = newExpandableRows; } } @@ -207,7 +220,7 @@ class DataTable extends mixin(createComponent, initComponentBySearch, eventedSta eventAfterSelectAll: 'responsive-table-aftertoggleselectall', eventTrigger: '[data-event]', eventParentContainer: '[data-parent-row]', - } + }; } export default DataTable;