fix: update new class internals to report hasClass properly

hperrin · Apr 3, 2021 · 52a7b2c · 52a7b2c
1 parent 7eb48c7
commit 52a7b2c
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 33 deletions.
diff --git a/packages/button/Button.svelte b/packages/button/Button.svelte
@@ -112,12 +112,14 @@
   setContext('SMUI:icon:context', 'button');
 
   function addClass(className) {
+    // Doesn't need hasClass.
     if (!internalClasses[className]) {
       internalClasses[className] = true;
     }
   }
 
   function removeClass(className) {
+    // Doesn't need hasClass.
     if (internalClasses[className]) {
       delete internalClasses[className];
       internalClasses = internalClasses;

diff --git a/packages/drawer/Drawer.svelte b/packages/drawer/Drawer.svelte
@@ -5,9 +5,9 @@
   class="
     mdc-drawer
     {className}
-    {Object.keys(internalClasses).join(
-    ' '
-  )}
+    {Object.keys(internalClasses)
+    .filter((className) => internalClasses[className])
+    .join(' ')}
     {variant === 'dismissible'
     ? 'mdc-drawer--dismissible'
     : ''}
@@ -111,7 +111,7 @@
       ? new Foundation({
           addClass,
           removeClass,
-          hasClass: (className) => element.classList.contains(className),
+          hasClass,
           elementHasClass: (element, className) =>
             element.classList.contains(className),
           saveFocus: () => (previousFocus = document.activeElement),
@@ -146,6 +146,12 @@
       : undefined;
   }
 
+  function hasClass(className) {
+    return className in internalClasses
+      ? internalClasses[className]
+      : getElement().classList.contains(className);
+  }
+
   function addClass(className) {
     if (!internalClasses[className]) {
       internalClasses[className] = true;
@@ -154,8 +160,7 @@
 
   function removeClass(className) {
     if (internalClasses[className]) {
-      delete internalClasses[className];
-      internalClasses = internalClasses;
+      internalClasses[className] = false;
     }
   }
 

diff --git a/packages/icon-button/IconButton.svelte b/packages/icon-button/IconButton.svelte
@@ -170,12 +170,6 @@
     }
   }
 
-  function removeAttr(name) {
-    if (name in internalAttrs) {
-      internalAttrs[name] = undefined;
-    }
-  }
-
   function handleChange(evtData) {
     console.log('event called: ', evtData);
     pressed = evtData.isOn;

diff --git a/packages/list/Item.svelte b/packages/list/Item.svelte
@@ -13,9 +13,9 @@
   class="
     mdc-list-item
     {className}
-    {Object.keys(internalClasses).join(
-    ' '
-  )}
+    {Object.keys(internalClasses)
+    .filter((className) => internalClasses[className])
+    .join(' ')}
     {activated ? 'mdc-list-item--activated' : ''}
     {selected
     ? 'mdc-list-item--selected'
@@ -118,6 +118,7 @@
     set selected(value) {
       selected = value;
     },
+    hasClass,
     addClass,
     removeClass,
     addAttr,
@@ -170,6 +171,12 @@
     dispatch(element, 'SMUI:list:item:unmount', accessor);
   });
 
+  function hasClass(className) {
+    return className in internalClasses
+      ? internalClasses[className]
+      : getElement().classList.contains(className);
+  }
+
   function addClass(className) {
     if (!internalClasses[className]) {
       internalClasses[className] = true;
@@ -178,8 +185,7 @@
 
   function removeClass(className) {
     if (internalClasses[className]) {
-      delete internalClasses[className];
-      internalClasses = internalClasses;
+      internalClasses[className] = false;
     }
   }
 
@@ -191,8 +197,7 @@
 
   function removeAttr(name) {
     if (name in internalAttrs) {
-      delete internalAttrs[name];
-      internalAttrs = internalAttrs;
+      internalAttrs[name] = undefined;
     }
   }
 

diff --git a/packages/list/List.svelte b/packages/list/List.svelte
@@ -203,8 +203,7 @@
         getElement() !== document.activeElement &&
         getElement().contains(document.activeElement),
       isRootFocused: () => document.activeElement === getElement(),
-      listItemAtIndexHasClass: (index, className) =>
-        getOrderedList()[index].element.classList.contains(className),
+      listItemAtIndexHasClass,
       notifyAction: (index) => {
         selectedIndex = index;
         dispatch(element, 'MDCList:action', { index });
@@ -296,6 +295,11 @@
     accessor && accessor.element.focus();
   }
 
+  function listItemAtIndexHasClass(index, className) {
+    const accessor = getOrderedList()[index];
+    return accessor && accessor.hasClass(className);
+  }
+
   function addClassForElementIndex(index, className) {
     const accessor = getOrderedList()[index];
     accessor && accessor.addClass(className);

diff --git a/packages/menu-surface/MenuSurface.svelte b/packages/menu-surface/MenuSurface.svelte
@@ -9,9 +9,9 @@
   class="
     mdc-menu-surface
     {className}
-    {Object.keys(
-    internalClasses
-  ).join(' ')}
+    {Object.keys(internalClasses)
+    .filter((className) => internalClasses[className])
+    .join(' ')}
     {fixed ? 'mdc-menu-surface--fixed' : ''}
     {isStatic
     ? 'mdc-menu-surface--open'
@@ -140,7 +140,7 @@
     instance = new MDCMenuSurfaceFoundation({
       addClass,
       removeClass,
-      hasClass: (className) => element.classList.contains(className),
+      hasClass,
       hasAnchor: () => !!anchorElement,
       notifyClose: () => {
         open = isStatic;
@@ -243,6 +243,12 @@
     }
   });
 
+  function hasClass(className) {
+    return className in internalClasses
+      ? internalClasses[className]
+      : getElement().classList.contains(className);
+  }
+
   function addClass(className) {
     if (!internalClasses[className]) {
       internalClasses[className] = true;
@@ -251,8 +257,7 @@
 
   function removeClass(className) {
     if (internalClasses[className]) {
-      delete internalClasses[className];
-      internalClasses = internalClasses;
+      internalClasses[className] = false;
     }
   }
 

diff --git a/packages/top-app-bar/TopAppBar.svelte b/packages/top-app-bar/TopAppBar.svelte
@@ -14,9 +14,9 @@
   class="
     mdc-top-app-bar
     {className}
-    {Object.keys(
-    internalClasses
-  ).join(' ')}
+    {Object.keys(internalClasses)
+    .filter((className) => internalClasses[className])
+    .join(' ')}
     {variant === 'short'
     ? 'mdc-top-app-bar--short'
     : ''}
@@ -154,7 +154,7 @@
       }[variant] || MDCTopAppBarFoundation;
 
     return new Foundation({
-      hasClass: (className) => element.classList.contains(className),
+      hasClass,
       addClass,
       removeClass,
       setStyle: addStyle,
@@ -167,6 +167,12 @@
     });
   }
 
+  function hasClass(className) {
+    return className in internalClasses
+      ? internalClasses[className]
+      : getElement().classList.contains(className);
+  }
+
   function addClass(className) {
     if (!internalClasses[className]) {
       internalClasses[className] = true;
@@ -175,8 +181,7 @@
 
   function removeClass(className) {
     if (internalClasses[className]) {
-      delete internalClasses[className];
-      internalClasses = internalClasses;
+      internalClasses[className] = false;
     }
   }