From 5a45e98b1b2184df972b01075515ec5e6a330e3c Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 5 Aug 2019 22:14:17 +0300
Subject: [PATCH] Use functional components for TreeTable rendering

---
 src/components/treetable/TreeTable.vue        |  4 +-
 src/components/treetable/TreeTableRow.vue     |  7 +-
 .../treetable/TreeTableRowLoader.vue          | 65 ++++++++++++++++++
 .../treetable/TreeTableRowRecursiveLoader.vue | 66 +++++++++++++++++++
 4 files changed, 134 insertions(+), 8 deletions(-)
 create mode 100644 src/components/treetable/TreeTableRowLoader.vue
 create mode 100644 src/components/treetable/TreeTableRowRecursiveLoader.vue

diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 857bdef8e..b966943de 100644
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -46,7 +46,7 @@
 
 <script>
 import TreeTableColumnSlot from './TreeTableColumnSlot';
-import TreeTableRow from './TreeTableRow';
+import TreeTableRowLoader from './TreeTableRowLoader';
 
 export default {
     props: {
@@ -243,7 +243,7 @@ export default {
     },
     components: {
         'TTColumnSlot': TreeTableColumnSlot,
-        'TTRow': TreeTableRow
+        'TTRow': TreeTableRowLoader
     }
 }
 </script>
diff --git a/src/components/treetable/TreeTableRow.vue b/src/components/treetable/TreeTableRow.vue
index 39efcef8b..e2d037288 100644
--- a/src/components/treetable/TreeTableRow.vue
+++ b/src/components/treetable/TreeTableRow.vue
@@ -13,7 +13,6 @@
 <script>
 import ObjectUtils from '../utils/ObjectUtils';
 import TreeTableColumnSlot from './TreeTableColumnSlot';
-import { Fragment } from 'vue-fragment';
 
 export default {
     name: 'sub-ttnode',
@@ -83,14 +82,10 @@ export default {
         },
         childLevel() {
             return this.level + 1;
-        },
-        childrenToRender() {
-            return this.expanded ? this.node.children: null;
         }
     },
     components: {
-        'TTColumnSlot': TreeTableColumnSlot,
-        'TTFragment': Fragment
+        'TTColumnSlot': TreeTableColumnSlot
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableRowLoader.vue b/src/components/treetable/TreeTableRowLoader.vue
new file mode 100644
index 000000000..1bcc1774e
--- /dev/null
+++ b/src/components/treetable/TreeTableRowLoader.vue
@@ -0,0 +1,65 @@
+<script>
+import TreeTableRow from './TreeTableRow';
+import TreeTableRowRecursiveLoader from './TreeTableRowRecursiveLoader';
+
+export default {
+    functional: true,
+    props: {
+        node: {
+            type: null,
+            default: null
+        },
+        columns: {
+            type: null,
+            default: null
+        },
+        expandedKeys: {
+            type: null,
+            default: null
+        },
+        selectionKeys: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
+        level: {
+            type: Number,
+            default: 0
+        }
+    },
+    render(createElement, context) {
+        const root = createElement(TreeTableRow, { 
+            props: context.props,
+            on: {
+                'node-toggle': context.listeners['node-toggle']
+            }
+        });
+
+        let element = [root];
+        const node = context.props.node;
+        const expanded = context.props.expandedKeys && context.props.expandedKeys[node.key] === true;
+
+        if (expanded) {
+            for (let childNode of node.children) {
+                let childNodeProps = {...context.props};
+                childNodeProps.node = childNode;
+                childNodeProps.level = context.props.level + 1;
+
+                let childNodeElement = createElement(TreeTableRowRecursiveLoader, { 
+                    props: childNodeProps,
+                    on: {
+                        'node-toggle': context.listeners['node-toggle']
+                    }
+                });
+
+                element.push(childNodeElement);
+            }
+        }
+
+        return element;
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableRowRecursiveLoader.vue b/src/components/treetable/TreeTableRowRecursiveLoader.vue
new file mode 100644
index 000000000..9b69a7ed4
--- /dev/null
+++ b/src/components/treetable/TreeTableRowRecursiveLoader.vue
@@ -0,0 +1,66 @@
+<script>
+/* Workaround as functional vue component does not allow recursive call and vue fragments are only available in 3.0 */
+import TreeTableRow from './TreeTableRow';
+import TreeTableRowLoader from './TreeTableRowLoader';
+
+export default {
+    functional: true,
+    props: {
+        node: {
+            type: null,
+            default: null
+        },
+        columns: {
+            type: null,
+            default: null
+        },
+        expandedKeys: {
+            type: null,
+            default: null
+        },
+        selectionKeys: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
+        level: {
+            type: Number,
+            default: 0
+        }
+    },
+    render(createElement, context) {
+        const root = createElement(TreeTableRow, { 
+            props: context.props,
+            on: {
+                'node-toggle': context.listeners['node-toggle']
+            }
+        });
+
+        let element = [root];
+        const node = context.props.node;
+        const expanded = context.props.expandedKeys && context.props.expandedKeys[node.key] === true;
+
+        if (expanded) {
+            for (let childNode of node.children) {
+                let childNodeProps = {...context.props};
+                childNodeProps.node = childNode;
+                childNodeProps.level = context.props.level + 1;
+
+                let childNodeElement = createElement(TreeTableRowLoader, { 
+                    props: childNodeProps,
+                    on: {
+                        'node-toggle': context.listeners['node-toggle']
+                    }
+                });
+
+                element.push(childNodeElement);
+            }
+        }
+
+        return element;
+    }
+};
+</script>
\ No newline at end of file