support loading

plantain-00 · Feb 7, 2017 · 0b9e7bc · 0b9e7bc
1 parent 4f5902f
commit 0b9e7bc
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 120 deletions.
diff --git a/README.md b/README.md
@@ -93,6 +93,7 @@ type TreeData = {
         opened: boolean;
         selected: boolean;
         disabled: boolean;
+        loading: boolean;
     };
     children?: TreeData[];
 };
@@ -111,3 +112,7 @@ type EventData = {
 + vuejs component
 + reactjs component
 + angular2 component
++ open and close
++ select and deselect
++ disabled
++ loading
diff --git a/demo/angular/index.ts b/demo/angular/index.ts
@@ -9,7 +9,7 @@ enableProdMode();
 
 import { Component } from "@angular/core";
 
-import { data } from "../data";
+import { data, clearSelectionOfTree, toggle } from "../common";
 import * as common from "../../dist/common";
 
 @Component({
@@ -25,29 +25,16 @@ export class MainComponent {
     data = data;
     selectedId: number | null = null;
     ontoggle(eventData: common.EventData) {
-        eventData.data.state.opened = !eventData.data.state.opened;
+        toggle(eventData);
     }
     onchange(eventData: common.EventData) {
         this.selectedId = eventData.data.state.selected ? null : eventData.data.value.id;
         if (!eventData.data.state.selected) {
-            this.clearSelection();
-        }
-        eventData.data.state.selected = !eventData.data.state.selected;
-    }
-    clearSelectionOfTree(tree: common.TreeData) {
-        if (tree.state.selected) {
-            tree.state.selected = false;
-        }
-        if (tree.children) {
-            for (const child of tree.children) {
-                this.clearSelectionOfTree(child);
+            for (const child of this.data) {
+                clearSelectionOfTree(child);
             }
         }
-    }
-    clearSelection() {
-        for (const child of this.data) {
-            this.clearSelectionOfTree(child);
-        }
+        eventData.data.state.selected = !eventData.data.state.selected;
     }
 }
 

diff --git a/demo/common.ts b/demo/common.ts
@@ -0,0 +1,114 @@
+import { TreeData, EventData } from "../dist/common";
+
+const rawData: Data[] = [
+    {
+        text: "Root node 1",
+        value: { id: 1 },
+        state: {
+            opened: true,
+        },
+        children: [
+            {
+                text: "Child node 11",
+                value: { id: 11 },
+            },
+            {
+                text: "Disabled Child node 12",
+                value: { id: 12 },
+                state: {
+                    opened: true,
+                    disabled: true,
+                },
+                children: [
+                    {
+                        text: "Child node 121",
+                        value: { id: 121 },
+                    },
+                    {
+                        text: "Disabled Child node 122",
+                        value: { id: 122 },
+                        state: {
+                            disabled: true,
+                        },
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        text: "Loading Root node 2",
+        value: { id: 2 },
+        children: [
+            {
+                text: "Child node 21",
+                value: { id: 21 },
+            },
+        ],
+    },
+];
+
+function standardize(treeData: Data) {
+    if (treeData.state === undefined) {
+        treeData.state = {};
+    }
+    if (treeData.state.opened === undefined) {
+        treeData.state.opened = false;
+    }
+    if (treeData.state.selected === undefined) {
+        treeData.state.selected = false;
+    }
+    if (treeData.state.disabled === undefined) {
+        treeData.state.disabled = false;
+    }
+    if (treeData.state.loading === undefined) {
+        treeData.state.loading = false;
+    }
+    if (treeData.children) {
+        for (const child of treeData.children) {
+            standardize(child);
+        }
+    }
+}
+
+for (const child of rawData) {
+    standardize(child);
+}
+
+console.log(rawData);
+
+export const data: TreeData[] = rawData as any;
+
+export function clearSelectionOfTree(tree: TreeData) {
+    if (tree.state.selected) {
+        tree.state.selected = false;
+    }
+    if (tree.children) {
+        for (const child of tree.children) {
+            clearSelectionOfTree(child);
+        }
+    }
+}
+
+export function toggle(eventData: EventData) {
+    if (eventData.data.value.id === 2 && !eventData.data.state.opened) {
+        eventData.data.state.loading = true;
+        setTimeout(() => {
+            eventData.data.state.loading = false;
+            eventData.data.state.opened = !eventData.data.state.opened;
+        }, 2000);
+    } else {
+        eventData.data.state.opened = !eventData.data.state.opened;
+    }
+}
+
+type Data = {
+    text: string;
+    value?: any;
+    state?: {
+        opened?: boolean;
+        selected?: boolean;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    children?: Data[];
+};
diff --git a/demo/data.ts b/demo/data.ts
diff --git a/demo/react/index.tsx b/demo/react/index.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { Tree } from "../../dist/react";
-import { data } from "../data";
+import { data, clearSelectionOfTree, toggle } from "../common";
 import * as common from "../../dist/common";
 
 class Main extends React.Component<{}, {}> {
@@ -21,32 +21,18 @@ class Main extends React.Component<{}, {}> {
     }
 
     toggle(eventData: common.EventData) {
-        eventData.data.state.opened = !eventData.data.state.opened;
+        toggle(eventData);
         this.setState({ data: this.data });
     }
     change(eventData: common.EventData) {
         this.selectedId = eventData.data.state!.selected ? null : eventData.data.value.id;
         this.setState({ selectedId: this.selectedId });
         if (!eventData.data.state.selected) {
-            this.clearSelection();
-        }
-        eventData.data.state.selected = !eventData.data.state.selected;
-        this.setState({ data: this.data });
-    }
-    clearSelectionOfTree(tree: common.TreeData) {
-        if (tree.state.selected) {
-            tree.state.selected = false;
-        }
-        if (tree.children) {
-            for (const child of tree.children) {
-                this.clearSelectionOfTree(child);
+            for (const child of this.data) {
+                clearSelectionOfTree(child);
             }
         }
-    }
-    clearSelection() {
-        for (const child of this.data) {
-            this.clearSelectionOfTree(child);
-        }
+        eventData.data.state.selected = !eventData.data.state.selected;
         this.setState({ data: this.data });
     }
 }

diff --git a/demo/vue/index.ts b/demo/vue/index.ts
@@ -1,6 +1,6 @@
 import * as Vue from "vue";
 import "../../dist/vue";
-import { data } from "../data";
+import { data, clearSelectionOfTree, toggle } from "../common";
 import * as common from "../../dist/common";
 
 /* tslint:disable:no-unused-new */
@@ -15,36 +15,22 @@ new Vue({
     },
     methods: {
         toggle(eventData: common.EventData) {
-            eventData.data.state.opened = !eventData.data.state.opened;
+            toggle(eventData);
         },
         change(this: This, eventData: common.EventData) {
             this.selectedId = eventData.data.state.selected ? null : eventData.data.value.id;
             if (!eventData.data.state.selected) {
-                this.clearSelection();
-            }
-            eventData.data.state.selected = !eventData.data.state.selected;
-        },
-        clearSelectionOfTree(this: This, tree: common.TreeData) {
-            if (tree.state.selected) {
-                tree.state.selected = false;
-            }
-            if (tree.children) {
-                for (const child of tree.children) {
-                    this.clearSelectionOfTree(child);
+                for (const child of this.data) {
+                    clearSelectionOfTree(child);
                 }
             }
+            eventData.data.state.selected = !eventData.data.state.selected;
         },
-        clearSelection(this: This) {
-            for (const child of this.data) {
-                this.clearSelectionOfTree(child);
-            }
-        },
+
     },
 });
 
 type This = {
     data: common.TreeData[];
     selectedId: null | number;
-    clearSelectionOfTree: (tree: common.TreeData) => void;
-    clearSelection: () => void;
 } & Vue;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tree-component",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A reactjs, angular2 and vuejs tree component.",
   "main": "index.js",
   "scripts": {

diff --git a/src/common.ts b/src/common.ts
@@ -5,6 +5,7 @@ export type TreeData = {
         opened: boolean;
         selected: boolean;
         disabled: boolean;
+        loading: boolean;
     };
     children?: TreeData[];
 };
@@ -46,6 +47,9 @@ export function getNodeClassName(data: TreeData, last: boolean) {
         } else {
             values.push("jstree-closed");
         }
+        if (data.state.loading) {
+            values.push("jstree-loading");
+        }
     } else {
         values.push("jstree-leaf");
     }