From 0b9e7bceefde1e3109fdc09f2780feba621fa657 Mon Sep 17 00:00:00 2001 From: york yao Date: Tue, 7 Feb 2017 20:21:28 +0800 Subject: [PATCH] support loading --- README.md | 5 ++ demo/angular/index.ts | 23 ++------- demo/common.ts | 114 ++++++++++++++++++++++++++++++++++++++++++ demo/data.ts | 62 ----------------------- demo/react/index.tsx | 24 ++------- demo/vue/index.ts | 26 +++------- package.json | 2 +- src/common.ts | 4 ++ 8 files changed, 140 insertions(+), 120 deletions(-) create mode 100644 demo/common.ts delete mode 100644 demo/data.ts diff --git a/README.md b/README.md index 01f8e06..f5120be 100644 --- 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 index 7dd8dfd..093265d 100644 --- 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 new file mode 100644 index 0000000..265f356 --- /dev/null +++ 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 deleted file mode 100644 index 3aae8bd..0000000 --- a/demo/data.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { TreeData } from "../dist/common"; - -export const data: TreeData[] = [ - { - text: "Root node 1", - value: { id: 1 }, - state: { - opened: true, - selected: false, - disabled: false, - }, - children: [ - { - text: "Child node 11", - value: { id: 11 }, - state: { - opened: false, - selected: false, - disabled: false, - }, - }, - { - text: "Child node 12", - value: { id: 12 }, - state: { - opened: true, - selected: false, - disabled: true, - }, - children: [ - { - text: "Child node 121", - value: { id: 121 }, - state: { - opened: false, - selected: false, - disabled: false, - }, - }, - { - text: "Child node 122", - value: { id: 122 }, - state: { - opened: false, - selected: false, - disabled: true, - }, - }, - ], - }, - ], - }, - { - text: "Root node 2", - value: { id: 2 }, - state: { - opened: false, - selected: false, - disabled: false, - }, - }, -]; diff --git a/demo/react/index.tsx b/demo/react/index.tsx index 1da7b66..44bf576 100644 --- 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 index add3e65..d500e46 100644 --- 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 index 46cfbad..e313a89 100644 --- 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 index 3d28dbc..64f410c 100644 --- 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"); }