Add tree example for exploring smalltalk packages

src/LiveWeb-Examples/LWExampleMain.class.st

@@ -48,7 +48,8 @@ LWExampleMain >> state: aDictionary [
 		'counter' -> LWCounter . 
 		'multi-counter' -> LWMultiCounter . 
 		'crud' -> LWCrudExample.
-		'typeahead' -> LWTypeAheadExample } asDictionary at: (state at: 'example').
+		'typeahead' -> LWTypeAheadExample.
+		'tree' -> LWTreeExample } asDictionary at: (state at: 'example').
 
 	"set the child component to a new instance and change active item for menu"
 	example child: ex new.

src/LiveWeb-Examples/LWExampleMenu.class.st

@@ -27,10 +27,13 @@ LWExampleMenu >> menu: h link: exampleName titled: titleText [
 { #category : #rendering }
 LWExampleMenu >> renderOn: h [
 	h div: { self style menu } with: [
-			self menu: h link: 'counter' titled: 'Counter'.
-			self menu: h link: 'multi-counter' titled: 'Multi counter'.
-			self menu: h link: 'wordle' titled: 'Wordle'.
-			self menu: h link: 'clock' titled: 'Clock'.
-			self menu: h link: 'typeahead' titled: 'Typeahead'.
+			self
+			menu: h link: 'counter' titled: 'Counter';
+			menu: h link: 'multi-counter' titled: 'Multi counter';
+			menu: h link: 'wordle' titled: 'Wordle';
+ 			menu: h link: 'clock' titled: 'Clock';
+ 			menu: h link: 'typeahead' titled: 'Typeahead';
+			menu: h link: 'tree' titled: 'Tree'
+
 		].
 ]

src/LiveWeb-Examples/LWTreeExample.class.st

@@ -0,0 +1,34 @@
+Class {
+	#name : #LWTreeExample,
+	#superclass : #LWComponent,
+	#instVars : [
+		'root'
+	],
+	#category : #'LiveWeb-Examples'
+}
+
+{ #category : #accessing }
+LWTreeExample >> children [ 
+^ ReadStream on: { root }
+]
+
+{ #category : #initialization }
+LWTreeExample >> initialize [ 
+  super initialize.
+  root := LWTreeNode new label: 'Smalltalk packages'; beBranch.
+  Smalltalk packages sorted do: [ :p|
+	| node |
+	node := root. 
+	(p name splitOn: $-) do: [ :part |
+		node := node branch: part.
+	].
+   p classes do: [ :c |
+		node leaf: c name
+	 ]
+  ]
+]
+
+{ #category : #rendering }
+LWTreeExample >> renderOn: h [
+	root render: h
+]

src/LiveWeb-Examples/LWTreeNode.class.st

@@ -0,0 +1,98 @@
+Class {
+	#name : #LWTreeNode,
+	#superclass : #LWComponent,
+	#instVars : [
+		'label',
+		'children',
+		'expanded',
+		'leaf'
+	],
+	#category : #'LiveWeb-Examples'
+}
+
+{ #category : #'as yet unclassified' }
+LWTreeNode >> beBranch [ 
+  leaf := false
+
+]
+
+{ #category : #'as yet unclassified' }
+LWTreeNode >> beLeaf [ 
+ leaf := true
+]
+
+{ #category : #accessing }
+LWTreeNode >> branch: childLabel [
+	^ (self child: childLabel) beBranch
+]
+
+{ #category : #accessing }
+LWTreeNode >> child: childLabel [
+	"Add or return child with the given label."
+	^ children detect:  [ :c | c label = childLabel ]
+		ifNone: [ 
+			| newChild |
+			newChild := self class new label: childLabel.
+			children add: newChild.
+			newChild 
+	 ]
+]
+
+{ #category : #accessing }
+LWTreeNode >> children [ 
+ ^ReadStream on: children
+
+]
+
+{ #category : #initialization }
+LWTreeNode >> initialize [
+   super initialize.
+	children := OrderedCollection new.
+	expanded := false.
+	leaf := true.
+]
+
+{ #category : #accessing }
+LWTreeNode >> label [ 
+ ^ label 
+
+]
+
+{ #category : #accessing }
+LWTreeNode >> label: aLabel [	
+ label := aLabel
+]
+
+{ #category : #accessing }
+LWTreeNode >> leaf: childLabel [
+	^ (self child: childLabel) beLeaf
+]
+
+{ #category : #rendering }
+LWTreeNode >> renderOn: h [
+ h div: { #class -> 'treenode' } with: [ 
+	h div: { #style -> 'display: flex;' } with: [ 
+		leaf 
+			ifTrue: [ h span: '[Class]' ] 
+			ifFalse: [ 
+				h button: { #onclick -> [ self toggleExpanded ] } with: [ 
+ 	   				expanded ifTrue: [ h renderContent: '-' ] ifFalse: [ h renderContent: '+' ]]
+			].
+		h span: ' ', label.
+ ].
+ expanded ifTrue: [ 
+	h ul: [ 
+	  children do: [ :c | h li: [ c render: h ] ]
+	]
+ ]
+]
+
+
+]
+
+{ #category : #operations }
+LWTreeNode >> toggleExpanded [  
+  expanded := expanded not.
+  self changed.
+
+]