Allow root TreeViewItem to be closed (#388)

* Allow root TreeViewItem to be closed

* Update root item in example

* Lint fixes

* Tweaks

* Fix open getter

* Open example browser root nodes

* Allow selecting of categories to allow opening and closing

* Rename _intentedOpenState to _open

* Lint fixes

* Restore newline

Author: willeastcott

examples/elements/treeview.html

@@ -36,15 +36,20 @@
         });
 
         const root = new TreeViewItem({
-            text: 'Root'
+            open: true,
+            text: 'My Drive',
+            icon: 'E229' // Drive icon
         });
         treeView.append(root);
 
         const generateChildren = (parent, depth) => {
             if (depth > 0) {
                 for (let i = 0; i < 5; i++) {
+                    const isFolder = depth > 1;
                     const item = new TreeViewItem({
-                        text: 'Item ' + i
+                        allowDrop: isFolder,
+                        text: (isFolder ? 'Folder ' : 'File ') + i,
+                        icon: isFolder ? 'E139' : 'E208'  // Folder or file icon
                     });
                     parent.append(item);
 

examples/index.html

@@ -106,7 +106,7 @@
 
         for (const category of categories) {
             const categoryItem = new TreeViewItem({
-                allowSelect: false,
+                open: true,
                 text: category.categoryName
             });
             treeView.append(categoryItem);

src/components/TreeView/style.scss

@@ -134,49 +134,10 @@
     }
 }
 
-.pcui-treeview {
-    // direct children of tree
-    > .pcui-treeview-item {
-        padding-left: 0;
-
-        &::before {
-            content: none;
-        }
-
-        > .pcui-treeview-item-contents {
-            margin-left: 0;
-
-            > .pcui-treeview-item-icon {
-                &::before {
-                    content: none;
-                }
-
-                &::after {
-                    margin-left: 0;
-                }
-            }
-        }
-
-        > .pcui-treeview-item {
-            padding-left: 21px;
-
-            // top line
-            &::before {
-                left: 11px;
-            }
-        }
-    }
-}
-
 .pcui-treeview:not(.pcui-treeview-filtering) {
-    // direct children of tree
-    > .pcui-treeview-item {
-        .pcui-treeview-item {
-            &:not(.pcui-treeview-item-open, .pcui-treeview-item-empty) {
-                > .pcui-treeview-item {
-                    display: none;
-                }
-            }
+    .pcui-treeview-item:not(.pcui-treeview-item-open, .pcui-treeview-item-empty) {
+        > .pcui-treeview-item {
+            display: none;
         }
     }
 }

src/components/TreeViewItem/index.ts

@@ -26,7 +26,7 @@ interface TreeViewItemArgs extends ContainerArgs {
      */
     allowSelect?: boolean,
     /**
-     * Whether the item is open meaning showing its children.
+     * Whether the item is open (showing its children). Defaults to `false`.
      */
     open?: boolean,
     /**
@@ -130,6 +130,8 @@ class TreeViewItem extends Container {
 
     protected _icon: string;
 
+    protected _open = false;
+
     /**
      * Creates a new TreeViewItem.
      *
@@ -174,6 +176,8 @@ class TreeViewItem extends Container {
             this.selected = args.selected;
         }
 
+        this._open = args.open ?? false;
+
         const dom = this._containerContents.dom;
         dom.addEventListener('focus', this._onContentFocus);
         dom.addEventListener('blur', this._onContentBlur);
@@ -210,8 +214,11 @@ class TreeViewItem extends Container {
 
         if (element instanceof TreeViewItem) {
             this._numChildren++;
-            if (this._parent !== this._treeView) {
-                this.class.remove(CLASS_EMPTY);
+            this.class.remove(CLASS_EMPTY);
+
+            // Apply intended open state now that we have children
+            if (this._open) {
+                this.class.add(CLASS_OPEN);
             }
 
             if (this._treeView) {
@@ -472,7 +479,10 @@ class TreeViewItem extends Container {
      * Sets whether the item is expanded and showing its children.
      */
     set open(value) {
-        if (this.open === value) return;
+        if (this._open === value) return;
+
+        this._open = value;
+
         if (value) {
             if (!this.numChildren) return;
 
@@ -488,7 +498,7 @@ class TreeViewItem extends Container {
      * Gets whether the item is expanded and showing its children.
      */
     get open() {
-        return this.class.contains(CLASS_OPEN) || this.parent === this._treeView;
+        return this._open;
     }
 
     /**