feat: add expand

Author: Create-Peace

src/components/Tree.js

@@ -1,6 +1,6 @@
 // import { construct } from "core-js/fn/reflect"
 
-const TREE_DATA = {selected: false, partialSelected: false}
+const TREE_DATA = {selected: false, partialSelected: false, expanded: false}
 class TreeData{
   constructor(data){
     this.data = {...TREE_DATA, ...data}
@@ -16,6 +16,9 @@ class TreeData{
   isSelected(){
     return this?.data?.selected ?? false
   }
+  isExpanded() {
+    return this?.data?.expanded ?? false
+  }
   isPartialSelected(){
     return this?.data?.partialSelected ?? false
   }
@@ -167,6 +170,15 @@ export default {
         }
       })
     },
+    refreshExpandedDown(node) {
+      // eslint-disable-next-line no-debugger
+      // debugger
+      const expanded = node.isExpanded()
+      node?.children.forEach((child) => {
+        Object.assign(child.data, {expanded})
+        this.refreshExpandedDown(child)
+      })
+    },
     refreshUp({parent}){
       if (!parent) return
       const toState = parent.isAllChildrenSelected()
@@ -176,7 +188,7 @@ export default {
       this.refreshUp(parent)
     },
     refreshDown(node){
-      const toState = node.isSelected()
+      const toState = node.isSelected() // 这里的名称需要换掉 nodeData 避免混淆
       node?.children.forEach((child) => {
         const fromState = child.isSelected()
         if(fromState === toState){

src/components/TreeNode.js

@@ -42,25 +42,34 @@ export default {
       this.tree.refreshDown(node)
     },
     nodeView (node, level) {
-      const {name, selected, disabled, partialSelected} = node?.data ?? {}
-      return (name && <div style={`margin-left: ${level * 10}px; display: inline-block`}>
+      const {name, selected, disabled, partialSelected, expanded} = node?.data ?? {}
+      return (name && <div style={`margin-left: ${level * 10}px; margin-bottom: 6px; display: inline-block;`}>
+        {node.children && node.children.length? expanded ? <span onClick={() => this.toggleFold(node)} style="padding: 2px; background: #eee; cursor: pointer">↑</span> : <span onClick={() => this.toggleFold(node)} style="padding: 2px; background: #eee; cursor: pointer">↓</span> : null}
         { partialSelected && `-`}
         <input type='checkbox' disabled={disabled} checked={selected} onClick={() => this.selectToggle(node)} />
         {name}
       </div>)
-    }
+    },
+    toggleFold(node) {
+      Object.assign(node.data, {expanded: !node.data.expanded})
+      if (!node.data.expanded) {
+        this.tree.refreshExpandedDown(node)
+      }
+    },
+    
   },
 
   render () {
     const { node, level } = this
+    console.log(node)
     const currentNode = this.nodeView(node, level)
     return (<div>
       {currentNode}
       {
-        node.children?.map(subNode => {
+        node?.data?.expanded && node.children?.map(subNode => {
           return (<TreeNode node={subNode} level={level + 1}  />)
         })
       }
     </div>)
   }
-}
+}