♻ refactor(JS): replace NodeList with Array.from for better compatibi…

…lity (#2254)

src/Masa.Blazor.JS/src/interop.ts

@@ -704,8 +704,8 @@ export function getMenuOrDialogMaxZIndex(exclude: Element[] = [], element: Eleme
   const zis = [getZIndex(base)]
 
   const activeElements = [
-    ...document.getElementsByClassName('m-menu__content--active'),
-    ...document.getElementsByClassName('m-dialog__content--active'),
+    ...Array.from(document.getElementsByClassName('m-menu__content--active')),
+    ...Array.from(document.getElementsByClassName('m-dialog__content--active')),
   ]
 
   // Get z-index for all active dialogs
@@ -719,7 +719,7 @@ export function getMenuOrDialogMaxZIndex(exclude: Element[] = [], element: Eleme
 }
 
 export function getMaxZIndex() {
-  return [...document.all].reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0)
+  return Array.from(document.all).reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0)
 }
 
 export function getStyle(element, styleProp) {

src/Masa.Blazor.JS/src/mixins/activatable.ts

@@ -17,7 +17,6 @@ class Activatable extends Delayable {
   closeOnOutsideClick: boolean;
   closeOnContentClick: boolean;
 
-  isActive: boolean;
   activatorListeners: Listeners = {};
   popupListeners: Listeners = {};
 

src/Masa.Blazor.JS/src/proxies/sortable/index.ts

@@ -32,7 +32,7 @@ class SortableProxy {
       ...rest,
       scroll: true,
       onMove: (evt, originalEvent) => {
-        const ignoreElements = [...this.el.querySelectorAll(ignore)];
+        const ignoreElements = Array.from(this.el.querySelectorAll(ignore));
         if (ignoreElements.length) {
           let dragged: HTMLElement;
           let target: HTMLElement;

src/Masa.Blazor.JS/src/ripple/index.ts

@@ -4,7 +4,7 @@ export default function registerRippleObserver() {
   const observer = new MutationObserver((mutationsList, observer) => {
     for (const mutation of mutationsList) {
       if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
-        for (const node of mutation.addedNodes) {
+        for (const node of Array.from(mutation.addedNodes)) {
           if (node instanceof HTMLElement) {
             if (
               node.nodeType === Node.ELEMENT_NODE &&
@@ -49,7 +49,7 @@ export default function registerRippleObserver() {
       }
 
       if (mutation.type === "childList" && mutation.removedNodes.length > 0) {
-        for (const node of mutation.removedNodes) {
+        for (const node of Array.from(mutation.removedNodes)) {
           if (node instanceof HTMLElement) {
             if (node.nodeType === Node.ELEMENT_NODE && node._ripple) {
               removeListeners(node);
@@ -94,7 +94,7 @@ export default function registerRippleObserver() {
     return options;
   }
 
-  const initialElements = document.querySelectorAll("[ripple]");
+  const initialElements = Array.from(document.querySelectorAll("[ripple]"));
 
   for (const element of initialElements) {
     updateRipple(element, convertRippleAttributeToOptions(element), false);