Tree widget

.dojorc

@@ -63,6 +63,7 @@
 			"src/time-picker",
 			"src/title-pane",
 			"src/tooltip",
+			"src/tree",
 			"src/trigger-popup",
 			"src/two-column-layout",
 			"src/typeahead"

src/examples/src/config.tsx

@@ -244,6 +244,12 @@ import CustomIconResult from './widgets/result/CustomIcon';
 import BasicWizard from './widgets/wizard/Basic';
 import VerticalWizard from './widgets/wizard/Vertical';
 import ErrorWizard from './widgets/wizard/Error';
+import BasicTree from './widgets/tree/Basic';
+import CheckableTree from './widgets/tree/Checkable';
+import CustomRendererTree from './widgets/tree/CustomRenderer';
+import ControlledTree from './widgets/tree/Controlled';
+import RemoteSource from './widgets/tree/RemoteSource';
+import InitialStateTree from './widgets/tree/InitialState';
 import PopupConfirmation from './widgets/popup-confirmation/Basic';
 import PopupConfirmationUnderlay from './widgets/popup-confirmation/Underlay';
 
@@ -1804,6 +1810,41 @@ export const config = {
 				}
 			}
 		},
+		tree: {
+			examples: [
+				{
+					filename: 'Checkable',
+					module: CheckableTree,
+					title: 'Checkable Nodes'
+				},
+				{
+					filename: 'CustomRenderer',
+					module: CustomRendererTree,
+					title: 'Custom Renderer'
+				},
+				{
+					filename: 'Controlled',
+					module: ControlledTree,
+					title: 'Controlled Usage'
+				},
+				{
+					filename: 'RemoteSource',
+					module: RemoteSource,
+					title: 'Remote Source'
+				},
+				{
+					filename: 'InitialState',
+					module: InitialStateTree,
+					title: 'Tree with initial state'
+				}
+			],
+			overview: {
+				example: {
+					filename: 'Basic',
+					module: BasicTree
+				}
+			}
+		},
 		'two-column-layout': {
 			examples: [
 				{

src/examples/src/widgets/tree/Basic.tsx

@@ -0,0 +1,60 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import {
+	createMemoryResourceTemplate,
+	createResourceMiddleware
+} from '@dojo/framework/core/middleware/resources';
+import Example from '../../Example';
+import Tree, { TreeNodeOption } from '@dojo/widgets/tree';
+
+const resource = createResourceMiddleware();
+const factory = create({ resource });
+const nodes: TreeNodeOption[] = [
+	{
+		id: 'c9ae529a',
+		value: 'parent 1',
+		parent: 'root',
+		hasChildren: true
+	},
+	{
+		id: 'cde74420',
+		value: 'parent 1-0',
+		parent: 'c9ae529a',
+		hasChildren: true
+	},
+	{
+		id: 'e2065522',
+		value: 'parent 1-1',
+		parent: 'c9ae529a',
+		hasChildren: true
+	},
+	{
+		id: 'de48r11ea',
+		value: 'child-1',
+		parent: 'cde74420',
+		hasChildren: false
+	},
+	{
+		id: 'd8fada34',
+		value: 'child-2',
+		parent: 'cde74420',
+		hasChildren: false
+	},
+	{
+		id: 'e73a11b4',
+		value: 'child-3',
+		parent: 'e2065522',
+		hasChildren: false
+	}
+];
+const template = createMemoryResourceTemplate<TreeNodeOption>();
+
+export default factory(function Basic({ id, middleware: { resource } }) {
+	return (
+		<Example>
+			<Tree
+				selectable={true}
+				resource={resource({ template, initOptions: { id, data: nodes } })}
+			/>
+		</Example>
+	);
+});

src/examples/src/widgets/tree/Checkable.tsx

@@ -0,0 +1,60 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import {
+	createMemoryResourceTemplate,
+	createResourceMiddleware
+} from '@dojo/framework/core/middleware/resources';
+import Tree, { TreeNodeOption } from '@dojo/widgets/tree';
+import Example from '../../Example';
+
+const resource = createResourceMiddleware();
+const factory = create({ resource });
+const nodes: TreeNodeOption[] = [
+	{
+		id: 'c9ae529a',
+		value: 'parent 1',
+		parent: 'root',
+		hasChildren: true
+	},
+	{
+		id: 'cde74420',
+		value: 'parent 1-0',
+		parent: 'c9ae529a',
+		hasChildren: true
+	},
+	{
+		id: 'e2065522',
+		value: 'parent 1-1',
+		parent: 'c9ae529a',
+		hasChildren: true
+	},
+	{
+		id: 'de48r11ea',
+		value: 'child-1',
+		parent: 'cde74420',
+		hasChildren: false
+	},
+	{
+		id: 'd8fada34',
+		value: 'child-2',
+		parent: 'cde74420',
+		hasChildren: false
+	},
+	{
+		id: 'e73a11b4',
+		value: 'child-3',
+		parent: 'e2065522',
+		hasChildren: false
+	}
+];
+const template = createMemoryResourceTemplate<TreeNodeOption>();
+
+export default factory(function Checkable({ id, middleware: { resource } }) {
+	return (
+		<Example>
+			<Tree
+				checkable={true}
+				resource={resource({ template, initOptions: { id, data: nodes } })}
+			/>
+		</Example>
+	);
+});

src/examples/src/widgets/tree/Controlled.tsx

@@ -0,0 +1,99 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import {
+	createMemoryResourceTemplate,
+	createResourceMiddleware
+} from '@dojo/framework/core/middleware/resources';
+import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
+import Tree, { TreeNodeOption } from '@dojo/widgets/tree';
+import Example from '../../Example';
+
+interface ControlledCache {
+	expanded?: string[];
+	checked?: string[];
+}
+const resource = createResourceMiddleware();
+const icache = createICacheMiddleware<ControlledCache>();
+const factory = create({ icache, resource });
+const nodes: TreeNodeOption[] = [
+	{
+		id: 'c9ae529a',
+		value: 'parent 1',
+		parent: 'root',
+		hasChildren: true
+	},
+	{
+		id: 'cde74420',
+		value: 'parent 1-0',
+		parent: 'c9ae529a',
+		hasChildren: true
+	},
+	{
+		id: 'e2065522',
+		value: 'parent 1-1',
+		parent: 'c9ae529a',
+		hasChildren: true
+	},
+	{
+		id: 'de48r11ea',
+		value: 'child-1',
+		parent: 'cde74420',
+		hasChildren: false
+	},
+	{
+		id: 'd8fada34',
+		value: 'child-2',
+		parent: 'cde74420',
+		hasChildren: false
+	},
+	{
+		id: 'e73a11b4',
+		value: 'child-3',
+		parent: 'e2065522',
+		hasChildren: false
+	}
+];
+const template = createMemoryResourceTemplate<TreeNodeOption>();
+
+export default factory(function Advanced({ id, middleware: { icache, resource } }) {
+	const expanded = icache.getOrSet('expanded', []);
+	const checked = icache.getOrSet('checked', []);
+
+	return (
+		<Example>
+			<Tree
+				checkable={true}
+				selectable={true}
+				onExpand={(ids) => {}}
+				expandedIds={expanded}
+				checkedIds={checked}
+				resource={resource({ template, initOptions: { id, data: nodes } })}
+			/>
+			<ul>
+				<li>
+					<button
+						onclick={() => {
+							icache.set(
+								'expanded',
+								expanded && expanded.length !== 0 ? [] : ['c9ae529a', 'cde74420']
+							);
+						}}
+					>
+						Toggle Expand
+					</button>
+				</li>
+				<li>
+					<button
+						onclick={() => {
+							icache.set(
+								'checked',
+								checked && checked.length !== 0 ? [] : ['de48r11ea']
+							);
+						}}
+					>
+						Toggle Checked
+					</button>
+				</li>
+			</ul>
+		</Example>
+	);
+});

src/examples/src/widgets/tree/CustomRenderer.tsx

@@ -0,0 +1,67 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import {
+	createMemoryResourceTemplate,
+	createResourceMiddleware
+} from '@dojo/framework/core/middleware/resources';
+import Tree, { TreeNodeOption } from '@dojo/widgets/tree';
+import Icon from '@dojo/widgets/icon';
+import Example from '../../Example';
+
+const resource = createResourceMiddleware();
+const factory = create({ resource });
+const nodes: TreeNodeOption[] = [
+	{
+		id: 'c9ae529a',
+		value: 'parent 1',
+		parent: 'root',
+		hasChildren: true
+	},
+	{
+		id: 'cde74420',
+		value: 'parent 1-0',
+		parent: 'c9ae529a',
+		hasChildren: true
+	},
+	{
+		id: 'e2065522',
+		value: 'parent 1-1',
+		parent: 'c9ae529a',
+		hasChildren: true
+	},
+	{
+		id: 'de48r11ea',
+		value: 'child-1',
+		parent: 'cde74420',
+		hasChildren: false
+	},
+	{
+		id: 'd8fada34',
+		value: 'child-2',
+		parent: 'cde74420',
+		hasChildren: false
+	},
+	{
+		id: 'e73a11b4',
+		value: 'child-3',
+		parent: 'e2065522',
+		hasChildren: false
+	}
+];
+const template = createMemoryResourceTemplate<TreeNodeOption>();
+
+export default factory(function CustomIcons({ id, middleware: { resource } }) {
+	return (
+		<Example>
+			<Tree resource={resource({ template, initOptions: { id, data: nodes } })}>
+				{(node) => (
+					<div styles={{ display: 'flex' }}>
+						<div styles={{ marginRight: '5px' }}>
+							<Icon type="starIcon" />
+						</div>
+						<div>{node.value}</div>
+					</div>
+				)}
+			</Tree>
+		</Example>
+	);
+});