feat(ExpansionPanel): faster

TheComputerM · Sep 1, 2020 · 5e4f108 · 5e4f108
1 parent 9a51041
commit 5e4f108
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 95 deletions.
diff --git a/packages/api-generator/src/NavigationDrawer.json b/packages/api-generator/src/NavigationDrawer.json
@@ -147,10 +147,10 @@
       "readonly": false,
       "type": {
         "kind": "type",
-        "text": "string",
-        "type": "string"
+        "text": "object",
+        "type": "object"
       },
-      "defaultValue": ""
+      "defaultValue": null
     },
     {
       "visibility": "public",

diff --git a/packages/docs/src/examples/components/expansionPanels/basic.svelte b/packages/docs/src/examples/components/expansionPanels/basic.svelte
@@ -4,28 +4,36 @@
   } from 'svelte-materialify/src/components/ExpansionPanels';
 
   let value = [1];
+  let about = { index: '', active: '' };
+  function onChange(e) {
+    about = e.detail;
+  }
 </script>
 
 <p class="text-center">Value: [{value}]</p>
-<ExpansionPanels bind:value>
+<p class="text-center">
+  Index: <b>{about.index}</b>, Active: <b>{about.active}</b>
+</p>
+
+<ExpansionPanels on:change={onChange} bind:value>
   <ExpansionPanel>
-    <span slot="header">Item</span>
-    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat amet
-    natus obcaecati molestiae quas mollitia error modi atque aliquam esse.
+    <span slot="header">Item</span> Lorem ipsum dolor sit amet consectetur, adipisicing
+    elit. Repellat amet natus obcaecati molestiae quas mollitia error modi atque
+    aliquam esse.
   </ExpansionPanel>
   <ExpansionPanel>
-    <span slot="header">Item</span>
-    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat amet
-    natus obcaecati molestiae quas mollitia error modi atque aliquam esse.
+    <span slot="header">Item</span> Lorem ipsum dolor sit amet consectetur, adipisicing
+    elit. Repellat amet natus obcaecati molestiae quas mollitia error modi atque
+    aliquam esse.
   </ExpansionPanel>
   <ExpansionPanel disabled>
-    <span slot="header">Disabled</span>
-    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat amet
-    natus obcaecati molestiae quas mollitia error modi atque aliquam esse.
+    <span slot="header">Disabled</span> Lorem ipsum dolor sit amet consectetur, adipisicing
+    elit. Repellat amet natus obcaecati molestiae quas mollitia error modi atque
+    aliquam esse.
   </ExpansionPanel>
   <ExpansionPanel>
-    <span slot="header">Item</span>
-    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat amet
-    natus obcaecati molestiae quas mollitia error modi atque aliquam esse.
+    <span slot="header">Item</span> Lorem ipsum dolor sit amet consectetur, adipisicing
+    elit. Repellat amet natus obcaecati molestiae quas mollitia error modi atque
+    aliquam esse.
   </ExpansionPanel>
 </ExpansionPanels>
diff --git a/packages/svelte-materialify/src/components/ExpansionPanels/ExpansionPanel.svelte b/packages/svelte-materialify/src/components/ExpansionPanels/ExpansionPanel.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <script>
-  import { getContext, createEventDispatcher, onDestroy } from 'svelte';
+  import { getContext, onDestroy, onMount } from 'svelte';
   import { slide } from 'svelte/transition';
   import Icon from '../Icon';
 
@@ -23,61 +23,38 @@
   // Styles to add to the panel.
   export let style = null;
 
-  let active = false;
-  let mandatory;
-  let multiple;
   let panel;
   let index;
-  let PanelContainer;
-  let ActivePanels;
-  let Settings;
-
-  ({ PanelContainer, ActivePanels, Settings } = getContext('S_PanelOptions'));
-
-  const dispatch = createEventDispatcher();
-
-  const SettingsUnsub = Settings.subscribe(
-    ({ Multiple, Mandatory, Disabled }) => {
-      if (Disabled != null) disabled = Disabled;
-      mandatory = Mandatory;
-      multiple = Multiple;
-    },
-  );
-
-  const PanelContainerUnsub = PanelContainer.subscribe((x) => {
-    if (x) {
-      const panels = x.querySelectorAll('.s-expansion-panel');
-      index = Array.from(panels).indexOf(panel);
-      if ($ActivePanels.includes(index)) active = true;
-      PanelContainerUnsub();
-    }
-  });
+  let active = false;
 
-  const ActivePanelsUnsub = ActivePanels.subscribe((x) => {
-    if (x.includes(index)) active = true;
-    else active = false;
-    /**
-     * Event triggered when the state of the panel has changed.
-     * @returns {active,index}
-    */
-    dispatch('change', { active, index });
-  });
+  const {
+    Value,
+    Disabled,
+    selectPanel,
+    checkIfActive,
+  } = getContext('S_ExpansionPanel');
 
   function toggle() {
-    if ($ActivePanels.includes(index)) {
-      if (!(mandatory && $ActivePanels.length === 1)) {
-        ActivePanels.update((x) => x.filter((i) => i !== index));
-      }
-    } else if (multiple) {
-      ActivePanels.update((x) => [...x, index]);
-    } else {
-      ActivePanels.set([index]);
-    }
+    selectPanel(index);
   }
 
+  // Inheriting the disabled value from parent.
+  const unsub1 = Disabled.subscribe((x) => {
+    disabled = x == null ? disabled : x;
+  });
+
+  // Checking if panel is active everytime the value has changed.
+  const unsub2 = Value.subscribe(() => {
+    active = checkIfActive(index);
+  });
+
+  onMount(() => {
+    index = Array.from(panel.parentNode.children).indexOf(panel);
+  });
+
   onDestroy(() => {
-    SettingsUnsub();
-    ActivePanelsUnsub();
+    unsub1();
+    unsub2();
   });
 </script>
 

diff --git a/packages/svelte-materialify/src/components/ExpansionPanels/ExpansionPanels.svelte b/packages/svelte-materialify/src/components/ExpansionPanels/ExpansionPanels.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount, onDestroy, setContext } from 'svelte';
+  import { createEventDispatcher, setContext } from 'svelte';
   import { writable } from 'svelte/store';
 
   // Classes to add to panel container.
@@ -36,44 +36,45 @@
   // Styles to add to the panel container.
   export let style = null;
 
-  let panelContainer;
-  const PanelContainer = writable();
-  const ActivePanels = writable(value);
-  const Settings = writable({
-    Multiple: multiple,
-    Mandatory: mandatory,
-    Disabled: disabled,
+  const dispatch = createEventDispatcher();
+  const Value = writable(value);
+  const Disabled = writable(disabled);
+
+  $: Value.set(value);
+  $: Disabled.set(disabled);
+
+  setContext('S_ExpansionPanel', {
+    Value,
+    Disabled,
+    selectPanel: (index) => {
+      if (value.includes(index)) {
+        if (!(mandatory && value.length === 1)) {
+          value.splice(value.indexOf(index), 1);
+          value = value;
+          dispatch('change', { index, active: false });
+        }
+      } else {
+        if (multiple) {
+          value.push(index);
+          value = value;
+        } else {
+          value = [index];
+        }
+        dispatch('change', { index, active: true });
+      }
+    },
+    checkIfActive: (index) => {
+      if (value.includes(index)) return true;
+      return false;
+    },
   });
-
-  const unsubscribe = ActivePanels.subscribe((x) => {
-    value = x;
-  });
-  $: ActivePanels.set(value);
-  $: Settings.set({
-    Multiple: multiple,
-    Mandatory: mandatory,
-    Disabled: disabled,
-  });
-
-  setContext('S_PanelOptions', {
-    PanelContainer,
-    ActivePanels,
-    Settings,
-  });
-
-  onMount(() => {
-    PanelContainer.set(panelContainer);
-  });
-
-  onDestroy(unsubscribe);
 </script>
 
 <style lang="scss" src="./ExpansionPanels.scss">
 
 </style>
 
 <div
-  bind:this={panelContainer}
   class="s-expansion-panels {klass}"
   class:accordion
   class:popout