perf: optimised selections

TheComputerM · Sep 14, 2020 · 188e30d · 188e30d
1 parent c76d939
commit 188e30d
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 56 deletions.
diff --git a/packages/api-generator/dist/index.js b/packages/api-generator/dist/index.js
diff --git a/packages/api-generator/src/ButtonGroup.json b/packages/api-generator/src/ButtonGroup.json
@@ -2,20 +2,6 @@
   "version": 3,
   "name": "ButtonGroup",
   "data": [
-    {
-      "visibility": "public",
-      "description": null,
-      "keywords": [],
-      "name": "BUTTON_GROUP",
-      "kind": "const",
-      "static": false,
-      "readonly": true,
-      "type": {
-        "kind": "type",
-        "text": "any",
-        "type": "any"
-      }
-    },
     {
       "visibility": "public",
       "description": "Classes to add to button group.",

diff --git a/packages/api-generator/src/ItemGroup.json b/packages/api-generator/src/ItemGroup.json
@@ -104,6 +104,21 @@
         "type": "any"
       }
     },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "role",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "object",
+        "type": "object"
+      },
+      "defaultValue": null
+    },
     {
       "visibility": "public",
       "description": null,

diff --git a/packages/api-generator/src/ListGroup.json b/packages/api-generator/src/ListGroup.json
@@ -17,21 +17,6 @@
       },
       "localName": "klass"
     },
-    {
-      "visibility": "public",
-      "description": null,
-      "keywords": [],
-      "name": "activeClass",
-      "kind": "let",
-      "static": false,
-      "readonly": false,
-      "type": {
-        "kind": "type",
-        "text": "string",
-        "type": "string"
-      },
-      "defaultValue": ""
-    },
     {
       "visibility": "public",
       "description": null,
@@ -115,10 +100,9 @@
       "readonly": false,
       "type": {
         "kind": "type",
-        "text": "boolean",
-        "type": "boolean"
-      },
-      "defaultValue": true
+        "text": "any",
+        "type": "any"
+      }
     },
     {
       "visibility": "public",
@@ -143,6 +127,21 @@
   "keywords": [],
   "events": [],
   "slots": [
+    {
+      "name": "activator",
+      "description": null,
+      "visibility": "public",
+      "parameters": [
+        {
+          "name": "{toggle}",
+          "visibility": "public"
+        },
+        {
+          "name": "{active}",
+          "visibility": "public"
+        }
+      ]
+    },
     {
       "name": "default",
       "description": null,

diff --git a/packages/api-generator/src/all.json b/packages/api-generator/src/all.json
@@ -30,13 +30,15 @@
     "List",
     "ListGroup",
     "ListItem",
+    "ListItemGroup",
     "MaterialApp",
     "Menu",
     "NavigationDrawer",
     "Overlay",
     "ProgressCircular",
     "ProgressLinear",
     "Radio",
+    "Select",
     "SlideGroup",
     "SlideItem",
     "Subheader",

diff --git a/packages/api-generator/src/index.js b/packages/api-generator/src/index.js
@@ -29,13 +29,15 @@ export { default as Lazy } from './Lazy.json';
 export { default as List } from './List.json';
 export { default as ListGroup } from './ListGroup.json';
 export { default as ListItem } from './ListItem.json';
+export { default as ListItemGroup } from './ListItemGroup.json';
 export { default as MaterialApp } from './MaterialApp.json';
 export { default as Menu } from './Menu.json';
 export { default as NavigationDrawer } from './NavigationDrawer.json';
 export { default as Overlay } from './Overlay.json';
 export { default as ProgressCircular } from './ProgressCircular.json';
 export { default as ProgressLinear } from './ProgressLinear.json';
 export { default as Radio } from './Radio.json';
+export { default as Select } from './Select.json';
 export { default as SlideGroup } from './SlideGroup.json';
 export { default as SlideItem } from './SlideItem.json';
 export { default as Subheader } from './Subheader.json';

diff --git a/packages/svelte-materialify/src/components/ButtonGroup/ButtonGroup.svelte b/packages/svelte-materialify/src/components/ButtonGroup/ButtonGroup.svelte
@@ -1,10 +1,5 @@
-<script context="module">
-  export const BUTTON_GROUP = {};
-</script>
-
 <script>
   import ItemGroup from '../ItemGroup';
-  import { setContext } from 'svelte';
 
   // Classes to add to button group.
   let klass = '';
@@ -39,9 +34,6 @@
 
   // Styles to apply to button group.
   export let style = null;
-
-  let group;
-  setContext(BUTTON_GROUP, $$restProps);
 </script>
 
 <style lang="scss" src="./ButtonGroup.scss" global>
@@ -54,7 +46,6 @@
     class:borderless
     class:tile
     class:rounded
-    bind:this={group}
     {style}>
     <slot />
   </div>

diff --git a/packages/svelte-materialify/src/components/ButtonGroup/ButtonGroupItem.svelte b/packages/svelte-materialify/src/components/ButtonGroup/ButtonGroupItem.svelte
@@ -2,20 +2,20 @@
   import { getContext } from 'svelte';
   import Button from '../Button';
   import { ITEM_GROUP } from '../ItemGroup/ItemGroup.svelte';
-  import { BUTTON_GROUP } from './ButtonGroup.svelte';
 
-  const { select, values, inheritedActiveClass, index } = getContext(ITEM_GROUP);
-  const props = getContext(BUTTON_GROUP);
+  const { select, register, index, _activeClass } = getContext(ITEM_GROUP);
 
   let active;
 
   let klass = '';
   export { klass as class };
   export let value = index();
-  export let activeClass = inheritedActiveClass;
+  export let activeClass = _activeClass;
   export let disabled = null;
 
-  $: active = $values.includes(value);
+  register((values) => {
+    active = values.includes(value);
+  });
 
   function click() {
     if (!disabled) select(value);
@@ -30,7 +30,6 @@
   active={active && activeClass === 'active'}
   {disabled}
   on:click={click}
-  on:click
-  {...props}>
+  on:click>
   <slot />
 </Button>
diff --git a/packages/svelte-materialify/src/components/ItemGroup/ItemGroup.svelte b/packages/svelte-materialify/src/components/ItemGroup/ItemGroup.svelte
@@ -13,13 +13,14 @@
   export let multiple = false;
   export let mandatory = false;
   export let max = Infinity;
+  export let role = null;
   export let style = null;
 
   const dispatch = createEventDispatcher();
-  const Value = writable(value);
-  $: Value.set(value);
+  const valueStore = writable(value);
+  $: valueStore.set(value);
 
-  const unsub = Value.subscribe((val) => {
+  const unsub = valueStore.subscribe((val) => {
     dispatch('change', val);
   });
   onDestroy(unsub);
@@ -38,18 +39,23 @@
         value = [val];
       }
     },
-    values: Value,
-    inheritedActiveClass: activeClass,
+    register: (setValue) => {
+      const u = valueStore.subscribe((val) => {
+        setValue(val);
+      });
+      onDestroy(u);
+    },
     index: () => {
       startIndex += 1;
       return startIndex;
     },
+    _activeClass: activeClass,
   });
 </script>
 
 <style lang="scss" src="./ItemGroup.scss" global>
 </style>
 
-<div class="s-item-group {klass}" {style}>
+<div class="s-item-group {klass}" {role} {style}>
   <slot />
 </div>