refactor(Tree): Implementing disabled selection

hug-sun-1 · Jan 31, 2021 · 7ab0a8e · 7ab0a8e
1 parent eb9a83e
commit 7ab0a8e
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 23 deletions.
diff --git a/packages/element3/src/components/Tree/src/TreeNode.vue b/packages/element3/src/components/Tree/src/TreeNode.vue
@@ -2,10 +2,12 @@
   <div
     class="el-tree-node"
     :class="{
-      'is-checked': node.isChecked
+      'is-checked': node.isChecked,
+      'is-focusable': !node.isDisabled
     }"
     role="TreeNode"
     :aria-checked="node.isChecked"
+    :aria-disabled="node.isDisabled"
     tabindex="-1"
     :id="'TreeNode' + node.id"
     :data-node-id="node.id"
@@ -19,6 +21,7 @@
         v-if="elTree.showCheckbox"
         :modelValue="node.isChecked"
         :indeterminate="node.isIndeterminate"
+        :disabled="node.isDisabled"
         @click.prevent="onClickCheckbox"
       >
       </el-checkbox>
@@ -66,9 +69,10 @@ export default {
   setup(props) {
     const elTree = inject('elTree', { indent: 10, checkOnClickNode: false })
     const onClickTreeNodeContent = () => {
-      if (elTree.checkOnClickNode) {
-        props.node.setChecked()
+      if (!elTree.checkOnClickNode) {
+        return
       }
+      props.node.setChecked()
     }
     const onClickCheckbox = () => {
       if (elTree.checkOnClickNode) {

diff --git a/packages/element3/src/components/Tree/src/entity/TreeMapper.ts b/packages/element3/src/components/Tree/src/entity/TreeMapper.ts
@@ -57,7 +57,7 @@ export class TreeMapper<RawNode extends RawNodeBase> {
         rawNode[this._toRawNodeKey.get('label')],
         this.convertToTreeNodes(rawNode[this._toRawNodeKey.get('children')]),
         {
-          isChecked: rawNode[this._toRawNodeKey.get('isChecked')],
+          isDisabled: rawNode[this._toRawNodeKey.get('isDisabled')],
           isLeaf: rawNode[this._toRawNodeKey.get('isLeaf')]
         }
       )

diff --git a/packages/element3/src/components/Tree/src/entity/TreeNode.ts b/packages/element3/src/components/Tree/src/entity/TreeNode.ts
@@ -28,6 +28,15 @@ export class TreeNode implements TreeNodePublicProp {
   private _isLeaf = false
   private _isChecked = false
   private _isStrictly = false
+  private _isDisabled = false
+
+  get isDisabled(): boolean {
+    return this._isDisabled
+  }
+
+  set isDisabled(v: boolean) {
+    this._isDisabled = v
+  }
 
   get isStrictly(): boolean {
     if (this._isStrictly) {
@@ -41,6 +50,7 @@ export class TreeNode implements TreeNodePublicProp {
     if (this.isStrictly) {
       return false
     }
+
     const checkedLen = this.getCheckedNodes().length
     if (this.isLeaf || checkedLen === 0) {
       return false
@@ -74,21 +84,34 @@ export class TreeNode implements TreeNodePublicProp {
     id: ID,
     label: string,
     children: TreeNode[] = [],
-    { isLeaf = false, isChecked = false, isStrictly = false } = {}
+    {
+      isLeaf = false,
+      isChecked = false,
+      isStrictly = false,
+      isDisabled = false
+    } = {}
   ) {
     this.id = id ?? idSeed++
     this.label = label
     this._isLeaf = isLeaf
     this._isStrictly = isStrictly
+    this._isDisabled = isDisabled
     this.setChecked(isChecked)
 
     this.appendChild(...children)
   }
 
-  setChecked(v = !this._isChecked): void {
+  setChecked(v = !this._isChecked) {
+    if (this._isDisabled) {
+      return
+    }
+    this.setCheckedUnlimited(v)
+  }
+
+  setCheckedUnlimited(v = !this._isChecked): void {
     this._isChecked = v
     if (!this.isStrictly) {
-      this.children.forEach((node) => node.setChecked(v))
+      this.children.forEach((node) => node.setCheckedUnlimited(v))
     }
   }
 

diff --git a/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts b/packages/element3/src/components/Tree/tests/entity/TreeNode.spec.ts
@@ -169,4 +169,15 @@ describe('TreeNode.ts', () => {
     expect(root.findOne(2).isChecked).toBeTruthy()
     expect(root.findOne(4).isChecked).toBeFalsy()
   })
+
+  it('test isDisabled is true setChecked method', () => {
+    const root = new TreeNode(1, 'Node1', [
+      new TreeNode(2, 'Node1-1', [new TreeNode(4, 'Node1-1-1')], {
+        isDisabled: true
+      })
+    ])
+
+    root.findOne(2).setChecked(true)
+    expect(root.findOne(2).isChecked).toBeFalsy()
+  })
 })
diff --git a/packages/website/src/play/index.vue b/packages/website/src/play/index.vue
@@ -5,7 +5,10 @@
     ref="tree"
     :show-checkbox="true"
     :checkOnClickNode="true"
-    :checkStrictly="true"
+    :checkStrictly="false"
+    :defaultNodeKey="{
+      isDisabled: 'disabled'
+    }"
   ></el-tree>
 </template>
 
@@ -55,6 +58,7 @@ export default {
         children: [
           {
             label: '二级 3-1',
+            disabled: true,
             children: [
               {
                 label: '三级 3-1-1'
@@ -73,22 +77,8 @@ export default {
       }
     ])
 
-    const checked = ref([1])
+    const checked = ref([])
 
-    // setTimeout(() => {
-    //   console.log(nodes, vm.nodes)
-    //   nodes.value[0].label = 'TTT'
-    //   nodes.value[0].children[0].label = 'TTT'
-    //   nodes.value.push({
-    //     label: 'Hello'
-    //   })
-    //   const tree = vm.$refs.tree.$refs.treeMain.tree
-    //   tree.root.removeChild(0)
-    //   nodes.value[0].children.push({
-    //     label: 'Hello'
-    //   })
-    //   console.log(checked)
-    // }, 3000)
     setTimeout(() => {
       checked.value.push(11)
     }, 1000)