fix(filterRows): Show/hide rows using setStyle and removeStyle

netchampfaris · netchampfaris · commit 4f57bb1b6437 · 2018-09-23T14:45:12.000+05:30
Finding row elements and adding/removing classes on them is slower and unreliable
diff --git a/src/rowmanager.js b/src/rowmanager.js
@@ -14,7 +14,8 @@ export default class RowManager {
             'fireEvent',
             'wrapper',
             'bodyScrollable',
-            'bodyRenderer'
+            'bodyRenderer',
+            'style'
         ]);
 
         this.bindEvents();
@@ -176,18 +177,16 @@ export default class RowManager {
 
     hideRows(rowIndices) {
         rowIndices = ensureArray(rowIndices);
-        rowIndices.map(rowIndex => {
-            const $tr = this.getRow$(rowIndex);
-            $tr.classList.add('dt-row--hide');
+        const selector = rowIndices.map(this.selector).join(',');
+        this.style.setStyle(selector, {
+            display: 'none'
         });
     }
 
     showRows(rowIndices) {
         rowIndices = ensureArray(rowIndices);
-        rowIndices.map(rowIndex => {
-            const $tr = this.getRow$(rowIndex);
-            $tr.classList.remove('dt-row--hide');
-        });
+        const selector = rowIndices.map(this.selector).join(',');
+        this.style.removeStyle(selector);
     }
 
     openSingleNode(rowIndex) {
diff --git a/src/style.js b/src/style.js
@@ -60,14 +60,14 @@ export default class Style {
             return;
         }
 
+        selector = selector.trim();
+        if (!selector) return;
+
         this._styleRulesMap = this._styleRulesMap || {};
         const prefixedSelector = this._getPrefixedSelector(selector);
 
         if (this._styleRulesMap[prefixedSelector]) {
-            // find and remove
-            const index = Array.from(this.stylesheet.cssRules)
-                .findIndex(rule => rule.selectorText === prefixedSelector);
-            this.stylesheet.deleteRule(index);
+            this.removeStyle(selector);
 
             // merge with old styleobject
             styleObject = Object.assign({}, this._styleRulesMap[prefixedSelector], styleObject);
@@ -80,6 +80,28 @@ export default class Style {
         this.stylesheet.insertRule(ruleString);
     }
 
+    removeStyle(selector) {
+        if (selector.includes(',')) {
+            selector.split(',')
+                .map(s => s.trim())
+                .forEach(selector => {
+                    this.removeStyle(selector);
+                });
+            return;
+        }
+
+        selector = selector.trim();
+        if (!selector) return;
+
+        // find and remove
+        const prefixedSelector = this._getPrefixedSelector(selector);
+        const index = Array.from(this.stylesheet.cssRules)
+            .findIndex(rule => rule.selectorText === prefixedSelector);
+
+        if (index === -1) return;
+        this.stylesheet.deleteRule(index);
+    }
+
     _getPrefixedSelector(selector) {
         return `.${this.scopeClass} ${selector}`;
     }
