feat: port over Core base class / Bolt Element updates from #1579

boltdesignsystem · Dec 4, 2019 · 3e6dfd5 · 3e6dfd5
1 parent fcabd59
commit 3e6dfd5
Show file tree

Hide file tree

Showing 14 changed files with 924 additions and 539 deletions.
diff --git a/packages/base-element/src/Slotify.js b/packages/base-element/src/Slotify.js
@@ -1,83 +1,81 @@
 /* eslint-disable class-methods-use-this */
+import { LitElement } from 'lit-element';
 
-const Slotify = Base =>
-  class extends Base {
-    templateMap = new Map();
+export class Slotify extends LitElement {
+  templateMap = new Map();
 
-    assignSlotToContent(child) {
-      return child.getAttribute
-        ? child.getAttribute('slot') || 'default'
-        : 'default';
-    }
+  assignSlotToContent(child) {
+    return child.getAttribute
+      ? child.getAttribute('slot') || 'default'
+      : 'default';
+  }
 
-    isEmptyTextNode(child) {
-      return child && (!child.textContent || !child.textContent.trim());
-    }
+  isEmptyTextNode(child) {
+    return child && (!child.textContent || !child.textContent.trim());
+  }
 
-    addChildToTemplateMap(slot, child) {
-      if (!slot) return;
+  addChildToTemplateMap(slot, child) {
+    if (!slot) return;
 
-      if (!this.templateMap.has(slot)) {
-        this.templateMap.set(slot, [child]);
-      } else {
-        this.templateMap.set(slot, [...this.templateMap.get(slot), child]);
-      }
+    if (!this.templateMap.has(slot)) {
+      this.templateMap.set(slot, [child]);
+    } else {
+      this.templateMap.set(slot, [...this.templateMap.get(slot), child]);
     }
+  }
 
-    // Save a reference to the pseudoSlot content before lit-element renders
-    saveSlots() {
-      Array.from(this.childNodes).forEach(child => {
-        const slot = this.assignSlotToContent(child);
+  // Save a reference to the pseudoSlot content before lit-element renders
+  saveSlots() {
+    Array.from(this.childNodes).forEach(child => {
+      const slot = this.assignSlotToContent(child);
 
-        if (!child.textContent || child.textContent.trim().length > 0) {
-          this.addChildToTemplateMap(slot, child);
-        } else if (slot && child instanceof HTMLElement) {
-          this.addChildToTemplateMap(slot, child);
-        }
-      });
-    }
-
-    update(changedProperties) {
-      if (!this.hasUpdated) {
-        this.saveSlots();
+      if (!child.textContent || child.textContent.trim().length > 0) {
+        this.addChildToTemplateMap(slot, child);
+      } else if (slot && child instanceof HTMLElement) {
+        this.addChildToTemplateMap(slot, child);
       }
+    });
+  }
 
-      super.update(changedProperties);
+  update(changedProperties) {
+    if (!this.hasUpdated) {
+      this.saveSlots();
     }
 
-    slotify(slot = 'default', defaultContent) {
-      const slotContent = this.templateMap.get(slot);
+    super.update(changedProperties);
+  }
 
-      // render actualy slots if Shadow DOM supported + getting used
-      // @todo: what's a better way to allow customizing the checks to perform?
-      if (
-        this.shadowRoot &&
-        (this.useShadow === undefined || this.useShadow === true) &&
-        (this.noShadow === undefined || this.useShadow === false) &&
-        slotContent
-      ) {
-        const realSlot = document.createElement('slot');
-        if (slot !== 'default') {
-          realSlot.setAttribute('name', slot);
-        }
-        return realSlot;
-      }
+  slotify(slot = 'default', defaultContent) {
+    const slotContent = this.templateMap.get(slot);
 
-      if (slotContent && slotContent.content) {
-        return slotContent.content;
-      }
-      if (slotContent && slotContent.childNodes) {
-        return Array.from(slotContent.childNodes);
-      }
-      if (slotContent) {
-        return slotContent;
-      }
-      if (defaultContent) {
-        return defaultContent;
+    // render actualy slots if Shadow DOM supported + getting used
+    // @todo: what's a better way to allow customizing the checks to perform?
+    if (
+      this.shadowRoot &&
+      (this.useShadow === undefined || this.useShadow === true) &&
+      (this.noShadow === undefined || this.useShadow === false) &&
+      slotContent
+    ) {
+      const realSlot = document.createElement('slot');
+      if (slot !== 'default') {
+        realSlot.setAttribute('name', slot);
       }
+      return realSlot;
+    }
 
-      return null;
+    if (slotContent && slotContent.content) {
+      return slotContent.content;
+    }
+    if (slotContent && slotContent.childNodes) {
+      return Array.from(slotContent.childNodes);
+    }
+    if (slotContent) {
+      return slotContent;
+    }
+    if (defaultContent) {
+      return defaultContent;
     }
-  };
 
-export { Slotify };
+    return null;
+  }
+}