support custom icon and no icon

plantain-00 · Feb 9, 2017 · ea07de8 · ea07de8
1 parent 4c5305e
commit ea07de8
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -89,16 +89,17 @@ change | (eventData: [EventData](#event-data-structure)) => void | triggered whe
 ```ts
 type TreeData = {
     text: string;
-    value?: any;
+    value?: any; // anything attached to the node
+    icon?: string | false; // the icon class string, or no icon if is false
     state: TreeNodeState;
     children?: TreeData[];
 };
 
 type TreeNodeState = {
-    opened: boolean;
+    opened: boolean; // whether the node show its children
     selected: boolean;
-    disabled: boolean;
-    loading: boolean;
+    disabled: boolean; // disabled node can not be selected and deselected
+    loading: boolean; // show the loading icon, usually used when loading child nodes
     highlighted: boolean;
 };
 ```
@@ -107,8 +108,8 @@ type TreeNodeState = {
 
 ```ts
 type EventData = {
-    data: TreeData;
-    path: number[];
+    data: TreeData; // the data of the node that triggered the event
+    path: number[]; // the index array of path from root to the node that triggered the event
 };
 ```
 
@@ -123,3 +124,4 @@ type EventData = {
 + loading
 + highlighted
 + checkbox
++ custom icon or no icon
diff --git a/demo/angular/index.ejs.html b/demo/angular/index.ejs.html
@@ -8,6 +8,11 @@
         .jstree-anchor {
             user-select: none;
         }
+        .my-custom-icon {
+            background-image: url("../tree-icon.png") !important;
+            background-position: center center !important;
+            background-size: auto;
+        }
     </style>
 </head>
 

diff --git a/demo/angular/index.ts b/demo/angular/index.ts
@@ -24,14 +24,12 @@ import * as common from "../../dist/common";
         [checkbox]="true"
         (toggle)="ontoggle2($event)"
         (change)="onchange2($event)"></tree>
-    selected id: {{selectedId2}}
     `,
 })
 export class MainComponent {
     data = data;
     selectedId: number | null = null;
     data2 = JSON.parse(JSON.stringify(data));
-    selectedId2: number | null = null;
     ontoggle(eventData: common.EventData) {
         toggle(eventData);
     }
@@ -48,7 +46,6 @@ export class MainComponent {
         toggle(eventData);
     }
     onchange2(eventData: common.EventData) {
-        this.selectedId2 = eventData.data.state.selected ? null : eventData.data.value.id;
         setSelectionOfTree(eventData.data, !eventData.data.state.selected);
         setParentsSelection(this.data2, eventData.path);
     }

diff --git a/demo/common.ts b/demo/common.ts
@@ -2,37 +2,37 @@ import { TreeData, TreeNodeState, EventData } from "../dist/common";
 
 const rawData: Data[] = [
     {
-        text: "Root node 1",
+        text: "node 1",
         value: { id: 1 },
         state: {
             opened: true,
         },
         children: [
             {
-                text: "Child node 11",
+                text: "node 11",
                 value: { id: 11 },
             },
             {
-                text: "Disabled Child node 12",
+                text: "disabled node 12",
                 value: { id: 12 },
                 state: {
                     opened: true,
                     disabled: true,
                 },
                 children: [
                     {
-                        text: "Child node 121",
+                        text: "node 121",
                         value: { id: 121 },
                     },
                     {
-                        text: "Disabled Child node 122",
+                        text: "disabled node 122",
                         value: { id: 122 },
                         state: {
                             disabled: true,
                         },
                     },
                     {
-                        text: "Highlighted Child node 123",
+                        text: "highlighted node 123",
                         value: { id: 123 },
                         state: {
                             highlighted: true,
@@ -43,17 +43,27 @@ const rawData: Data[] = [
         ],
     },
     {
-        text: "Loading Root node 2",
+        text: "loading node 2",
         value: { id: 2 },
         children: [
             {
-                text: "Child node 21",
+                text: "node 21",
                 value: { id: 21 },
             },
             {
-                text: "Child node 22",
+                text: "node 22",
                 value: { id: 22 },
             },
+            {
+                text: "no icon node 23",
+                value: { id: 23 },
+                icon: false,
+            },
+            {
+                text: "custom icon node 23",
+                value: { id: 24 },
+                icon: "my-custom-icon",
+            },
         ],
     },
 ];
@@ -148,6 +158,7 @@ export function setParentsSelection(tree: TreeData[], path: number[]) {
 type Data = {
     text: string;
     value?: any;
+    icon?: string | false;
     state?: Partial<TreeNodeState>;
     children?: Data[];
 };
diff --git a/demo/react/index.ejs.html b/demo/react/index.ejs.html
@@ -8,6 +8,11 @@
         .jstree-anchor {
             user-select: none;
         }
+        .my-custom-icon {
+            background-image: url("../tree-icon.png") !important;
+            background-position: center center !important;
+            background-size: auto;
+        }
     </style>
 </head>
 

diff --git a/demo/react/index.tsx b/demo/react/index.tsx
@@ -8,7 +8,6 @@ class Main extends React.Component<{}, {}> {
     data = data;
     selectedId: number | null = null;
     data2 = JSON.parse(JSON.stringify(data));
-    selectedId2: number | null = null;
 
     render() {
         return (
@@ -24,7 +23,6 @@ class Main extends React.Component<{}, {}> {
                     toggle={(eventData: common.EventData) => this.toggle2(eventData)}
                     change={(eventData: common.EventData) => this.change2(eventData)}>
                 </Tree>
-                selected id: {this.selectedId2}
             </div>
         );
     }
@@ -51,7 +49,6 @@ class Main extends React.Component<{}, {}> {
         });
     }
     change2(eventData: common.EventData) {
-        this.selectedId2 = eventData.data.state.selected ? null : eventData.data.value.id;
         setSelectionOfTree(eventData.data, !eventData.data.state.selected);
         setParentsSelection(this.data2, eventData.path);
         this.setState({ data: this.data });

diff --git a/demo/tree-icon.png b/demo/tree-icon.png
diff --git a/demo/vue/index.ejs.html b/demo/vue/index.ejs.html
@@ -8,6 +8,11 @@
         .jstree-anchor {
             user-select: none;
         }
+        .my-custom-icon {
+            background-image: url("../tree-icon.png") !important;
+            background-position: center center !important;
+            background-size: auto;
+        }
     </style>
 </head>
 
@@ -22,7 +27,6 @@
             :checkbox="true"
             @toggle="toggle2(arguments[0])"
             @change="change2(arguments[0])"></tree>
-        selected id: {{selectedId2}}
     </div>
     <script src="../<%=demoVueBundleJs %>" crossOrigin="anonymous" integrity="<%=sri.demoVueBundleJs %>"></script>
 </body>

diff --git a/demo/vue/index.ts b/demo/vue/index.ts
@@ -32,7 +32,6 @@ new Vue({
             toggle(eventData);
         },
         change2(this: This, eventData: common.EventData) {
-            this.selectedId2 = eventData.data.state.selected ? null : eventData.data.value.id;
             setSelectionOfTree(eventData.data, !eventData.data.state.selected);
             setParentsSelection(this.data2, eventData.path);
         },
@@ -43,5 +42,4 @@ type This = {
     data: common.TreeData[];
     selectedId: null | number;
     data2: common.TreeData[];
-    selectedId2: null | number;
 } & Vue;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tree-component",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A reactjs, angular2 and vuejs tree component.",
   "main": "index.js",
   "scripts": {

diff --git a/src/angular.ts b/src/angular.ts
@@ -5,7 +5,7 @@ import * as common from "./common";
     selector: "node",
     template: `
     <li role="treeitem" [class]="nodeClassName">
-        <i class="jstree-icon jstree-ocl" role="presentation" (click)="ontoggle()"></i><a [class]="anchorClassName" href="javascript:void(0)" (click)="onchange()" (dblclick)="ontoggle()" (mouseenter)="hover(true)" (mouseleave)="hover(false)"><i *ngIf="checkbox" [class]="checkboxClassName" role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>{{data.text}}</a>
+        <i class="jstree-icon jstree-ocl" role="presentation" (click)="ontoggle()"></i><a [class]="anchorClassName" href="javascript:void(0)" (click)="onchange()" (dblclick)="ontoggle()" (mouseenter)="hover(true)" (mouseleave)="hover(false)"><i *ngIf="checkbox" [class]="checkboxClassName" role="presentation"></i><i *ngIf="data.icon !== false" [class]="iconClassName" role="presentation"></i>{{data.text}}</a>
         <ul *ngIf="data.children" role="group" class="jstree-children">
             <node *ngFor="let child of data.children; let i = index"
                 [data]="child"
@@ -49,6 +49,10 @@ export class NodeComponent {
         return common.getCheckboxClassName(this.data);
     }
 
+    get iconClassName() {
+        return common.getIconClassName(this.data.icon);
+    }
+
     geChildPath(index: number) {
         return this.path.concat(index);
     }

diff --git a/src/common.ts b/src/common.ts
@@ -1,6 +1,7 @@
 export type TreeData = {
     text: string;
     value?: any;
+    icon?: string | false;
     state: TreeNodeState;
     children?: TreeData[];
 };
@@ -93,3 +94,7 @@ export function getCheckboxClassName(data: TreeData) {
 export function getRootClassName(checkbox: boolean | undefined) {
     return `jstree jstree-default jstree-default-dark ${checkbox ? "jstree-checkbox-selection jstree-checkbox-no-clicked" : ""}`;
 }
+
+export function getIconClassName(icon: string | false | undefined) {
+    return `jstree-icon jstree-themeicon ${icon ? `${icon} jstree-themeicon-custom` : ""}`;
+}
diff --git a/src/react.tsx b/src/react.tsx
@@ -33,9 +33,10 @@ class Node extends React.Component<{
             childrenElement = null;
         }
         const checkboxElement = this.props.checkbox ? <i className={this.checkboxClassName} role="presentation"></i> : null;
+        const iconElement = this.props.data.icon !== false ? <i className={this.iconClassName} role="presentation"></i> : null;
         return (
             <li role="treeitem" className={this.nodeClassName}>
-                <i className="jstree-icon jstree-ocl" role="presentation" onClick={() => this.ontoggle()}></i><a className={this.anchorClassName} href="javascript:void(0)" onClick={() => this.onchange()} onDoubleClick={() => this.ontoggle()} onMouseEnter={() => this.hover(true)} onMouseLeave={() => this.hover(false)}>{checkboxElement}<i className="jstree-icon jstree-themeicon" role="presentation"></i>{this.props.data.text}</a>
+                <i className="jstree-icon jstree-ocl" role="presentation" onClick={() => this.ontoggle()}></i><a className={this.anchorClassName} href="javascript:void(0)" onClick={() => this.onchange()} onDoubleClick={() => this.ontoggle()} onMouseEnter={() => this.hover(true)} onMouseLeave={() => this.hover(false)}>{checkboxElement}{iconElement}{this.props.data.text}</a>
                 {childrenElement}
             </li>
         );
@@ -53,6 +54,10 @@ class Node extends React.Component<{
         return common.getCheckboxClassName(this.props.data);
     }
 
+    get iconClassName() {
+        return common.getIconClassName(this.props.data.icon);
+    }
+
     geChildPath(index: number) {
         return this.props.path.concat(index);
     }

diff --git a/src/vue.ts b/src/vue.ts
@@ -5,7 +5,7 @@ import * as common from "./common";
 @Component({
     template: `
     <li role="treeitem" :class="nodeClassName">
-        <i class="jstree-icon jstree-ocl" role="presentation" @click="ontoggle()"></i><a :class="anchorClassName" href="javascript:void(0)" @click="onchange()" @dblclick="ontoggle()" @mouseenter="hover(true)" @mouseleave="hover(false)"><i v-if="checkbox" :class="checkboxClassName" role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>{{data.text}}</a>
+        <i class="jstree-icon jstree-ocl" role="presentation" @click="ontoggle()"></i><a :class="anchorClassName" href="javascript:void(0)" @click="onchange()" @dblclick="ontoggle()" @mouseenter="hover(true)" @mouseleave="hover(false)"><i v-if="checkbox" :class="checkboxClassName" role="presentation"></i><i v-if="data.icon !== false" :class="iconClassName" role="presentation"></i>{{data.text}}</a>
         <ul v-if="data.children" role="group" class="jstree-children">
             <node v-for="(child, i) in data.children"
                 :data="child"
@@ -41,6 +41,10 @@ class Node extends Vue {
         return common.getCheckboxClassName(this.data);
     }
 
+    get iconClassName() {
+        return common.getIconClassName(this.data.icon);
+    }
+
     geChildPath(index: number) {
         return this.path.concat(index);
     }