feat(TreeView): update javascript of TreeView (#4725)

* refactor: 精简脚本移除不使用事件 * refactor: 修复键盘功能 * chore: bump version 9.0.1
dotnetcore · Nov 23, 2024 · d0c4d9a · d0c4d9a
1 parent 3f3bb1a
commit d0c4d9a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 56 deletions.
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.0.1-beta04</Version>
+    <Version>9.0.1</Version>
   </PropertyGroup>
 
   <ItemGroup>

diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.js b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.js
@@ -11,25 +11,6 @@ export function init(id, options) {
     const tree = { el, invoke, isVirtualize };
     Data.set(id, tree)
 
-    EventHandler.on(el, 'mouseenter', '.tree-content', e => {
-        const ele = e.delegateTarget.parentNode
-        ele.classList.add('hover')
-    })
-
-    EventHandler.on(el, 'mouseleave', '.tree-content', e => {
-        const ele = e.delegateTarget.parentNode
-        ele.classList.remove('hover')
-    })
-
-    EventHandler.on(el, 'click', '.tree-node', e => {
-        const node = e.delegateTarget
-        const prev = node.previousElementSibling;
-        const radio = prev.querySelector('[type="radio"]')
-        if (radio && radio.getAttribute('disabled') !== 'disabled') {
-            radio.click();
-        }
-    })
-
     EventHandler.on(el, 'keydown', '.tree-root', e => {
         if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
             const v = el.getAttribute('data-bb-keyboard');
@@ -41,33 +22,14 @@ export function init(id, options) {
         else if (e.keyCode === 32) {
             const v = el.getAttribute('data-bb-keyboard');
             if (v === "true") {
-                const checkbox = el.querySelector(".active > .tree-content > .form-check > .form-check-input");
+                const checkbox = el.querySelector(".active .form-check-input");
                 if (checkbox) {
                     e.preventDefault();
                     checkbox.click();
                 }
             }
         }
     });
-
-    if (isVirtualize) {
-        EventHandler.on(el, 'click', '.form-check-input', async e => {
-            const checkbox = e.delegateTarget;
-            const state = checkbox.getAttribute('data-bb-state');
-            if (state) {
-                const row = checkbox.closest('.tree-content');
-                const index = row.getAttribute('data-bb-tree-view-index');
-
-                const v = state === '1' ? 0 : 1;
-                await setChildrenState(id, parseInt(index), v);
-                await setParentState(id, parseInt(index), v);
-                const handler = setTimeout(() => {
-                    checkbox.checked = v === 1;
-                    clearTimeout(handler);
-                }, 0);
-            }
-        });
-    }
 }
 
 export function scroll(id, options) {
@@ -114,13 +76,7 @@ export function setChildrenState(id, index, state) {
                 if (checkbox) {
                     checkbox.indeterminate = false;
                     checkbox.checked = state === 1;
-                    checkbox.setAttribute('data-bb-state', state);
-                    if (state === 1) {
-                        checkbox.parentElement.classList.add('is-checked');
-                    }
-                    else {
-                        checkbox.parentElement.classList.remove('is-checked');
-                    }
+                    EventHandler.trigger(checkbox, "statechange.bb.checkbox", { state });
                 }
                 next = next.nextElementSibling;
             }
@@ -151,7 +107,6 @@ export async function setParentState(id, index, state) {
                 for (let index = 0; index < parents.length; index++) {
                     const checkbox = parents[index].querySelector('.form-check-input');
                     const result = results[index];
-                    checkbox.setAttribute('data-bb-state', result);
                     checkbox.indeterminate = false;
                     if (result === 0) {
                         checkbox.checked = false;
@@ -162,6 +117,7 @@ export async function setParentState(id, index, state) {
                     else {
                         checkbox.indeterminate = true;
                     }
+                    EventHandler.trigger(checkbox, "statechange.bb.checkbox", { state: result });
                 }
             }
         }
@@ -173,14 +129,7 @@ export function dispose(id) {
     Data.remove(id);
 
     if (tree) {
-        const { el, isVirtualize } = tree;
-        EventHandler.off(el, 'mouseenter');
-        EventHandler.off(el, 'mouseleave');
-        EventHandler.off(el, 'click', '.tree-node');
+        const { el } = tree;
         EventHandler.off(el, 'keyup', '.tree-root');
-
-        if (isVirtualize) {
-            EventHandler.off(el, 'click', '.form-check-input');
-        };
     }
 }