Expand/collapse directories when their disclosure arrow is clicked

spec/extensions/tree-view-spec.coffee

@@ -2,28 +2,41 @@ TreeView = require 'tree-view'
 Directory = require 'directory'
 
 describe "TreeView", ->
-  [project, treeView] = []
+  [project, treeView, rootDirectoryView] = []
 
   beforeEach ->
     project = new Directory(require.resolve('fixtures/'))
     treeView = new TreeView(project)
+    rootDirectoryView = treeView.find('> li:first')
 
   describe ".initialize(project)", ->
     it "renders the root of the project and its contents alphabetically with subdirectories first in a collapsed state", ->
-      root = treeView.find('> li:first')
-      expect(root.find('> .disclosure')).toHaveText('▾')
-      expect(root.find('> .name')).toHaveText('fixtures/')
+      expect(rootDirectoryView.find('> .disclosure-arrow')).toHaveText('▾')
+      expect(rootDirectoryView.find('> .name')).toHaveText('fixtures/')
 
-      rootEntries = root.find('.entries')
+      rootEntries = rootDirectoryView.find('.entries')
       subdir1 = rootEntries.find('> li:eq(0)')
-      expect(subdir1.find('.disclosure')).toHaveText('▸')
+      expect(subdir1.find('.disclosure-arrow')).toHaveText('▸')
       expect(subdir1.find('.name')).toHaveText('dir/')
       expect(subdir1.find('.entries')).not.toExist()
 
       subdir2 = rootEntries.find('> li:eq(1)')
-      expect(subdir2.find('.disclosure')).toHaveText('▸')
+      expect(subdir2.find('.disclosure-arrow')).toHaveText('▸')
       expect(subdir2.find('.name')).toHaveText('zed/')
       expect(subdir2.find('.entries')).not.toExist()
 
       expect(rootEntries.find('> .file:contains(sample.js)')).toExist()
       expect(rootEntries.find('> .file:contains(sample.txt)')).toExist()
+
+  describe "when a directory's disclosure arrow is clicked", ->
+    it "expands / collapses the associated directory", ->
+      subdir = rootDirectoryView.find('.entries > li:contains(dir/)')
+
+      expect(subdir.find('.disclosure-arrow')).toHaveText('▸')
+      expect(subdir.find('.entries')).not.toExist()
+
+      subdir.find('.disclosure-arrow').click()
+
+      expect(subdir.find('> .disclosure-arrow')).toHaveText('▾')
+      expect(subdir.find('.entries')).toExist()
+

src/extensions/tree-view.coffee

@@ -16,15 +16,11 @@ class TreeView extends View
 class DirectoryView extends View
   @content: ({directory, isExpanded}) ->
     @li class: 'directory', =>
-      @disclosureArrow(isExpanded)
+      @span '▸', class: 'disclosure-arrow', outlet: 'disclosureArrow', click: 'toggleExpansion'
       @span directory.getName() + '/', class: 'name'
 
-  @disclosureArrow: (isExpanded) ->
-    arrowCharacter = if isExpanded then '▾' else '▸'
-    @span arrowCharacter, class: 'disclosure'
-
   initialize: ({@directory, @isExpanded}) ->
-    @buildEntries() if @isExpanded
+    @expand() if @isExpanded
 
   buildEntries: ->
     contents = $$ -> @ol class: 'entries'
@@ -34,3 +30,20 @@ class DirectoryView extends View
       else
         contents.append $$ -> @li entry.getName(), class: 'file'
     @append(contents)
+
+  toggleExpansion: ->
+    if @isExpanded then @collapse() else @expand()
+
+  expand: ->
+    @disclosureArrow.text('▾')
+    @buildEntries()
+    @isExpanded = true
+
+  collapse: ->
+    @disclosureArrow.text('▸')
+    @find('.entries').remove()
+    @isExpanded = false
+
+
+
+

static/tree-view.css

@@ -4,10 +4,12 @@
   color: white;
   overflow: auto;
   padding: 0 1em;
+  cursor: default;
 }
 
-.tree-view .disclosure {
-  margin-right: .5em;
+.tree-view .disclosure-arrow {
+  width: 2ex;
+  display: inline-block;
 }
 
 .tree-view .directory .entries {