From 7eaabcbfe038f0c05d59b9c2e0c42e18b74cfc40 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Wed, 31 Oct 2018 19:09:40 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Reimplement=20tree=20node?=
 =?UTF-8?q?=20toggle=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Earlier, rows were hidden using style. Now, since we are using
hyperlist, it is better to refresh the whole list.
---
 index.html           |  1 -
 src/body-renderer.js | 10 ++++++---
 src/cellmanager.js   |  5 ++++-
 src/columnmanager.js |  3 +--
 src/datamanager.js   |  1 +
 src/datatable.js     |  1 +
 src/rowmanager.js    | 48 ++++++++++++++++++++++----------------------
 src/style.css        |  1 +
 src/utils.js         |  5 +++++
 9 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index c84d59b..1e4bc63 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,6 @@
 
 	</section>
 
-	<script src="./node_modules/clusterize.js/clusterize.js"></script>
 	<script src="./node_modules/sortablejs/Sortable.js"></script>
 	<script src="./dist/frappe-datatable.js"></script>
 	<script>
diff --git a/src/body-renderer.js b/src/body-renderer.js
index 844ce95..9ccffc9 100644
--- a/src/body-renderer.js
+++ b/src/body-renderer.js
@@ -9,7 +9,10 @@ export default class BodyRenderer {
         this.rowmanager = instance.rowmanager;
         this.cellmanager = instance.cellmanager;
         this.bodyScrollable = instance.bodyScrollable;
+        this.bodyDiv = $('.dt-body', this.bodyScrollable);
         this.log = instance.log;
+
+        this.bindEvents();
     }
 
     renderRows(rows) {
@@ -23,7 +26,8 @@ export default class BodyRenderer {
                 return el.children[0];
             }
         };
-        this.hyperlist.refresh($('.dt-body', this.bodyScrollable), config);
+        this.hyperlist.refresh(this.bodyDiv, config);
+        this.visibleRows = rows.map(row => row.meta.rowIndex);
     }
 
     render() {
@@ -41,8 +45,8 @@ export default class BodyRenderer {
         };
 
         if (!this.hyperlist) {
-            this.bodyScrollable.innerHTML = '<div class="dt-body"></div>';
-            this.hyperlist = new HyperList($('.dt-body', this.bodyScrollable), config);
+            this.hyperlist = new HyperList(this.bodyDiv, config);
+            this.visibleRows = rows.map(row => row.meta.rowIndex);
         } else {
             this.renderRows(rows);
         }
diff --git a/src/cellmanager.js b/src/cellmanager.js
index 4f1be22..5600c2f 100644
--- a/src/cellmanager.js
+++ b/src/cellmanager.js
@@ -736,6 +736,8 @@ export default class CellManager {
             isFilter
         });
 
+        const row = this.datamanager.getRow(rowIndex);
+
         const isBodyCell = !(isHeader || isFilter);
 
         const className = [
@@ -745,7 +747,8 @@ export default class CellManager {
             isBodyCell ? 'dt-cell--row-' + rowIndex : '',
             isHeader ? 'dt-cell--header' : '',
             isHeader ? `dt-cell--header-${colIndex}` : '',
-            isFilter ? 'dt-cell--filter' : ''
+            isFilter ? 'dt-cell--filter' : '',
+            isBodyCell && row.meta.isTreeNodeClose ? 'dt-cell--tree-close' : ''
         ].join(' ');
 
         return `
diff --git a/src/columnmanager.js b/src/columnmanager.js
index 7e7b909..0bbddf7 100644
--- a/src/columnmanager.js
+++ b/src/columnmanager.js
@@ -286,8 +286,7 @@ export default class ColumnManager {
             .then(({
                 rowsToShow
             }) => {
-                const rows = rowsToShow.map(rowIndex => this.datamanager.getRow(rowIndex));
-                this.bodyRenderer.renderRows(rows);
+                this.rowmanager.showRows(rowsToShow);
             });
     }
 
diff --git a/src/datamanager.js b/src/datamanager.js
index c179a6c..c0899c4 100644
--- a/src/datamanager.js
+++ b/src/datamanager.js
@@ -193,6 +193,7 @@ export default class DataManager {
                 row.meta.isLeaf = !nextRow ||
                     notSet(nextRow.meta.indent) ||
                     nextRow.meta.indent <= row.meta.indent;
+                row.meta.isTreeNodeClose = false;
             }
         });
     }
diff --git a/src/datatable.js b/src/datatable.js
index 391a592..38ff1e9 100644
--- a/src/datatable.js
+++ b/src/datatable.js
@@ -72,6 +72,7 @@ class DataTable {
                 <div class="dt-header">
                 </div>
                 <div class="dt-scrollable">
+                    <div class="dt-body"></div>
                 </div>
                 <div class="dt-freeze">
                     <span class="dt-freeze__message">
diff --git a/src/rowmanager.js b/src/rowmanager.js
index 50ad350..fe1178c 100644
--- a/src/rowmanager.js
+++ b/src/rowmanager.js
@@ -3,7 +3,8 @@ import {
     makeDataAttributeString,
     nextTick,
     ensureArray,
-    linkProperties
+    linkProperties,
+    uniq
 } from './utils';
 
 export default class RowManager {
@@ -174,18 +175,10 @@ export default class RowManager {
         }
     }
 
-    hideRows(rowIndices) {
-        rowIndices = ensureArray(rowIndices);
-        const selector = rowIndices.map(this.selector).join(',');
-        this.style.setStyle(selector, {
-            display: 'none'
-        });
-    }
-
     showRows(rowIndices) {
         rowIndices = ensureArray(rowIndices);
-        const selector = rowIndices.map(this.selector).join(',');
-        this.style.removeStyle(selector);
+        const rows = rowIndices.map(rowIndex => this.datamanager.getRow(rowIndex));
+        this.bodyRenderer.renderRows(rows);
     }
 
     showAllRows() {
@@ -194,25 +187,32 @@ export default class RowManager {
     }
 
     openSingleNode(rowIndex) {
-        const rowsToShow = this.datamanager.getImmediateChildren(rowIndex);
+        const row = this.datamanager.getRow(rowIndex);
+        row.meta.isTreeNodeClose = false;
+
+        const childrenToShow = this.datamanager.getImmediateChildren(rowIndex);
+        const visibleRows = this.bodyRenderer.visibleRows;
+        const rowsToShow = uniq([...childrenToShow, ...visibleRows]).sort();
+
         this.showRows(rowsToShow);
-        this.cellmanager.toggleTreeButton(rowIndex, true);
     }
 
     closeSingleNode(rowIndex) {
-        const children = this.datamanager.getImmediateChildren(rowIndex);
-        children.forEach(childIndex => {
-            const row = this.datamanager.getRow(childIndex);
-            if (row.meta.isLeaf) {
-                // close
-                this.hideRows(childIndex);
-                this.cellmanager.toggleTreeButton(childIndex, false);
-            } else {
-                this.closeSingleNode(childIndex);
-                this.hideRows(childIndex);
+        const row = this.datamanager.getRow(rowIndex);
+        row.meta.isTreeNodeClose = true;
+
+        const rowsToHide = this.datamanager.getChildren(rowIndex);
+        const visibleRows = this.bodyRenderer.visibleRows;
+        const rowsToShow = visibleRows.filter(rowIndex => !rowsToHide.includes(rowIndex));
+
+        rowsToHide.forEach(rowIndex => {
+            const row = this.datamanager.getRow(rowIndex);
+            if (!row.meta.isLeaf) {
+                row.meta.isTreeNodeClose = true;
             }
         });
-        this.cellmanager.toggleTreeButton(rowIndex, false);
+
+        this.showRows(rowsToShow);
     }
 
     getRow$(rowIndex) {
diff --git a/src/style.css b/src/style.css
index ebb85d0..2417c15 100644
--- a/src/style.css
+++ b/src/style.css
@@ -46,6 +46,7 @@
     height: 40vw;
     overflow: auto;
     border-bottom: 1px solid var(--dt-border-color);
+    border-right: 1px solid var(--dt-border-color);
 
     &--highlight-all {
         background-color: var(--dt-selection-highlight-color);
diff --git a/src/utils.js b/src/utils.js
index 32222f0..3888b2a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,5 +1,6 @@
 import _throttle from 'lodash/throttle';
 import _debounce from 'lodash/debounce';
+import _uniq from 'lodash/uniq';
 
 export function camelCaseToDash(str) {
     return str.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
@@ -125,3 +126,7 @@ export function ensureArray(val) {
     }
     return val;
 }
+
+export function uniq(arr) {
+    return _uniq(arr);
+}