fix: better item groups

TheComputerM · Oct 29, 2020 · 522d81e · 522d81e
1 parent abbe072
commit 522d81e
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 39 deletions.
diff --git a/packages/docs/src/examples/ListItemGroup/activeClass.svelte b/packages/docs/src/examples/ListItemGroup/activeClass.svelte
@@ -3,13 +3,13 @@
 </script>
 
 <style>
-  :global(dash-border) {
+  :global(.dash-border) {
     border: 1px dashed green;
   }
 </style>
 
 <div class="ml-auto mr-auto elevation-2" style="width:500px">
-  <ListItemGroup>
+  <ListItemGroup activeClass="dash-border">
     <ListItem>
       <span slot="prepend">
         <Icon class="mdi mdi-home" />

diff --git a/packages/svelte-materialify/src/components/ButtonGroup/ButtonGroupItem.svelte b/packages/svelte-materialify/src/components/ButtonGroup/ButtonGroupItem.svelte
@@ -3,22 +3,22 @@
   import Button from '../Button';
   import { ITEM_GROUP } from '../ItemGroup/ItemGroup.svelte';
 
-  const { select, register, index, _activeClass } = getContext(ITEM_GROUP);
+  const ITEM = getContext(ITEM_GROUP);
 
   let active;
 
   let klass = '';
   export { klass as class };
-  export let value = index();
-  export let activeClass = _activeClass;
+  export let value = ITEM.index();
+  export let { activeClass } = ITEM;
   export let disabled = null;
 
-  register((values) => {
+  ITEM.register((values) => {
     active = values.includes(value);
   });
 
   function click() {
-    if (!disabled) select(value);
+    if (!disabled) ITEM.select(value);
   }
 </script>
 

diff --git a/packages/svelte-materialify/src/components/ItemGroup/ItemGroup.svelte b/packages/svelte-materialify/src/components/ItemGroup/ItemGroup.svelte
@@ -49,7 +49,7 @@
       startIndex += 1;
       return startIndex;
     },
-    _activeClass: activeClass,
+    activeClass,
   });
 </script>
 

diff --git a/packages/svelte-materialify/src/components/List/ListItem.svelte b/packages/svelte-materialify/src/components/List/ListItem.svelte
@@ -4,11 +4,20 @@
   import Class from '../../internal/Class';
 
   const role = getContext('S_ListItemRole');
+  const ITEM_GROUP = getContext('S_ListItemGroup');
+  const ITEM = ITEM_GROUP ?
+    getContext(ITEM_GROUP) :
+    {
+      select: () => null,
+      register: () => null,
+      index: () => null,
+      activeClass: 'active',
+    };
 
   let klass = '';
   export { klass as class };
-  export let activeClass = 'active';
-  export let value = null;
+  export let { activeClass } = ITEM;
+  export let value = ITEM.index();
   export let active = false;
   export let dense = false;
   export let disabled = null;
@@ -18,19 +27,12 @@
   export let ripple = getContext('S_ListItemRipple') || role || false;
   export let style = null;
 
-  const Group = getContext('S_ListItemGroup');
-  let click = null;
+  ITEM.register((values) => {
+    active = values.includes(value);
+  });
 
-  if (Group) {
-    const { select, register, index, activeClass: _activeClass } = getContext(Group);
-    value = value || index();
-    activeClass = _activeClass || activeClass;
-    register((values) => {
-      active = values.includes(value);
-    });
-    click = () => {
-      if (!disabled) select(value);
-    };
+  function click() {
+    if (!disabled) ITEM.select(value);
   }
 </script>
 

diff --git a/packages/svelte-materialify/src/components/SlideGroup/SlideGroup.svelte b/packages/svelte-materialify/src/components/SlideGroup/SlideGroup.svelte
@@ -24,8 +24,7 @@
   export let max = Infinity;
 
   let x = 0;
-  setContext(SLIDE_GROUP, (target) => {
-    const item = target.closest('.s-slide-item');
+  setContext(SLIDE_GROUP, (item) => {
     const left = item.offsetLeft;
     const width = item.offsetWidth;
 

diff --git a/packages/svelte-materialify/src/components/SlideGroup/SlideItem.svelte b/packages/svelte-materialify/src/components/SlideGroup/SlideItem.svelte
@@ -4,26 +4,26 @@
   import { ITEM_GROUP } from '../ItemGroup/ItemGroup.svelte';
   import Class from '../../internal/Class';
 
-  const click = getContext(SLIDE_GROUP);
-  const { select, register, _activeClass, index } = getContext(ITEM_GROUP);
+  const moveGroup = getContext(SLIDE_GROUP);
+  const ITEM = getContext(ITEM_GROUP);
 
   let active;
-  let item;
+  let itemElement;
 
   let klass = '';
   export { klass as class };
-  export let activeClass = _activeClass;
-  export let value = index();
+  export let { activeClass } = ITEM;
+  export let value = ITEM.index();
   export let disabled = null;
 
-  register((values) => {
+  ITEM.register((values) => {
     active = values.includes(value);
   });
 
-  function selectItem({ target }) {
+  function selectItem() {
     if (!disabled) {
-      click(target);
-      select(value);
+      moveGroup(itemElement);
+      ITEM.select(value);
     }
   }
 </script>
@@ -36,7 +36,7 @@
 </style>
 
 <div
-  bind:this={item}
+  bind:this={itemElement}
   class="s-slide-item {klass}"
   use:Class={[active && activeClass]}
   on:click={selectItem}>

diff --git a/packages/svelte-materialify/src/components/Window/Window.svelte b/packages/svelte-materialify/src/components/Window/Window.svelte
@@ -17,10 +17,8 @@
   const windowItems = [];
   let moving = false;
 
-  setContext(WINDOW, {
-    registerWindow: (window) => {
-      windowItems.push(window);
-    },
+  setContext(WINDOW, (window) => {
+    windowItems.push(window);
   });
 
   export function set(index) {

diff --git a/packages/svelte-materialify/src/components/Window/WindowItem.svelte b/packages/svelte-materialify/src/components/Window/WindowItem.svelte
@@ -3,7 +3,7 @@
   import { WINDOW } from './Window.svelte';
 
   let window;
-  const { registerWindow } = getContext(WINDOW);
+  const registerWindow = getContext(WINDOW);
 
   let klass = '';
   export { klass as class };