Updates .eslint to forbid for of loops | Fixes liferay#1031

.eslintrc

@@ -5,5 +5,11 @@
 		"es6": true,
 		"jest": true
 	},
-	"extends": "liferay"
+  "extends": "liferay",
+  "plugins": [
+    "no-for-of-loops"
+  ],
+  "rules": {
+    "no-for-of-loops/no-for-of-loops": 2
+  }
 }

package.json

@@ -27,6 +27,7 @@
     "cross-env": "^5.1.3",
     "eslint": "^4.10.0",
     "eslint-config-liferay": "^2.0.8",
+    "eslint-plugin-no-for-of-loops": "1.0.0",
     "eslint-plugin-react": "^7.4.0",
     "http-server": "^0.9.0",
     "husky": "^0.14.2",

packages/clay-dataset-display/src/ClayDatasetDisplay.js

@@ -26,11 +26,15 @@ class ClayDatasetDisplay extends ClayComponent {
 		let totalItems = 0;
 
 		if (this.items) {
-			for (let item of this.items) {
+			for (let i = 0, l = this.items.length; i < l; i++) {
+				const item = this.items[i];
+
 				if (item.items) {
 					totalItems += item.items.length;
 
-					for (let childrenItem of item.items) {
+					for (let j = 0, k = item.items.length; j < k; j++) {
+						const childrenItem = item.items[j];
+
 						if (childrenItem.selected) {
 							selectedItems.push(childrenItem);
 						}
@@ -55,13 +59,24 @@ class ClayDatasetDisplay extends ClayComponent {
 	 * @private
 	 */
 	_deselectAllItems() {
-		for (let item of this._selectedItems) {
-			item.selected = false;
-		}
+		this._selectedItems.map(item => (item.selected = false));
 
 		this._selectedItems = [];
 	}
 
+	/**
+	 * Flattens an array of items.
+	 * @param {Array} items
+	 * @return {Array}
+	 */
+	_flattenItems(items) {
+		return items.reduce((list, value) => {
+			return list.concat(
+				Array.isArray(value) ? this._flattenItems(value) : value
+			);
+		}, []);
+	}
+
 	/**
 	 * Returns the selected items.
 	 * @private
@@ -151,7 +166,13 @@ class ClayDatasetDisplay extends ClayComponent {
 		let itemId = event.target.getAttribute('value');
 
 		if (!checkedStatus) {
-			for (let [index, item] of this._selectedItems.entries()) {
+			const entries = Object.entries(this._selectedItems);
+
+			for (let i = 0, l = entries.length; i < l; i++) {
+				const entry = entries[i];
+				const index = entry[0];
+				let item = entry[1];
+
 				if (
 					item[
 						this.views[this.selectedView].schema.inputValueField
@@ -166,9 +187,13 @@ class ClayDatasetDisplay extends ClayComponent {
 			let found = false;
 
 			if (this.items) {
-				for (let item of this.items) {
+				for (let i = 0, l = this.items.length; i < l; i++) {
+					const item = this.items[i];
+
 					if (item.items) {
-						for (let childrenItem of item.items) {
+						for (let j = 0, k = item.items.length; j < k; j++) {
+							const childrenItem = item.items[j];
+
 							if (
 								childrenItem[
 									this.views[this.selectedView].schema
@@ -249,12 +274,12 @@ class ClayDatasetDisplay extends ClayComponent {
 
 		this.views[this.selectedView].active = false;
 
-		const views = this.views.entries();
+		for (let i = 0, l = this.views.length; i < l; i++) {
+			const view = this.views[i];
 
-		for (let [index, view] of views) {
 			if (view === item) {
-				this.views[index].active = true;
-				this.selectedView = index;
+				this.views[i].active = true;
+				this.selectedView = i;
 				break;
 			}
 		}
@@ -266,23 +291,19 @@ class ClayDatasetDisplay extends ClayComponent {
 	 * @private
 	 */
 	_selectAllItems() {
-		let selectedItems = [];
-
-		for (let item of this.items) {
-			if (item.items) {
-				for (let childrenItem of item.items) {
-					childrenItem.selected = true;
-
-					selectedItems.push(childrenItem);
-				}
+		const selectedItems = this.items.map(item => {
+			if (Array.isArray(item.items)) {
+				return item.items.map(item => {
+					item.selected = true;
+					return item;
+				});
 			} else {
 				item.selected = true;
-
-				selectedItems.push(item);
+				return item;
 			}
-		}
+		});
 
-		this._selectedItems = selectedItems;
+		this._selectedItems = this._flattenItems(selectedItems);
 	}
 }
 

packages/clay-dataset-display/src/__tests__/ClayDatasetDisplay.js

@@ -868,4 +868,44 @@ describe('ClayDatasetDisplay', function() {
 
 		expect(component).toMatchSnapshot();
 	});
+
+	it('should select and unselect all items', () => {
+		let totalItems = 0;
+		defaultConfig.items.map(item => {
+			if (Array.isArray(item.items)) {
+				item.items.map(item => totalItems++);
+			} else {
+				totalItems++;
+			}
+		});
+
+		component = new ClayDatasetDisplay(defaultConfig);
+
+		expect(component).toMatchSnapshot();
+
+		const checkbox = component.refs.managementToolbar.refs.selectPageCheckbox.element.querySelector(
+			'input[type="checkbox"]'
+		);
+
+		checkbox.click();
+
+		jest.runAllTimers();
+
+		expect(component).toMatchSnapshot();
+
+		let selectedItems = component.getSelectedItems().length;
+
+		expect(selectedItems).toBeGreaterThan(0);
+		expect(selectedItems).toEqual(totalItems);
+
+		checkbox.click();
+
+		jest.runAllTimers();
+
+		expect(component).toMatchSnapshot();
+
+		selectedItems = component.getSelectedItems().length;
+
+		expect(selectedItems).toBe(0);
+	});
 });