Merge pull request #3 from melohagan/main

Provide toggle context to children
YuanZhang98 · Oct 5, 2022 · ab7b252 · ab7b252
2 parents 8e380cc + f5f90e9
commit ab7b252
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "budibase-toggle",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "An amazing Budibase component!",
   "license": "MIT",
   "svelte": "index.js",

diff --git a/schema.json b/schema.json
@@ -6,6 +6,7 @@
     "friendlyName": "budibase-toggle",
     "description": "An amazing Budibase component!",
     "icon": "Text",
+    "hasChildren": true,
     "settings": [
       {
         "type": "color",
@@ -25,6 +26,22 @@
         "label": "Accent Color",
         "defaultValue": "#BAC4C6"
       }
+    ],
+    "context": [
+      {
+        "type": "schema"
+      },
+      {
+        "type": "static",
+        "values": [
+          {
+            "label": "Active State",
+            "key": "isActive",
+            "type": "boolean",
+            "defaultValue": false
+          }
+        ]
+      }
     ]
   }
 }
diff --git a/src/Component.svelte b/src/Component.svelte
@@ -1,26 +1,31 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, Provider } = getContext("sdk")
   const component = getContext("component")
   export let inactiveColor;
   export let activeColor;
   export let accentColor;
 
   let isActive = false;
-
+  $: dataContext = {
+    isActive
+  }
   const handleButtonClick = () => {
     isActive = !isActive;
   };
 </script>
 
 <div use:styleable={$component.styles}>
-  <div class="toggle">
-    <div style="background: {isActive ? activeColor : inactiveColor};" class="toggle-button {isActive && 'toggle-button-active'}" on:click={handleButtonClick}>
-      <div style="background: {accentColor};" class="toggle-inner-circle {isActive && 'toggle-inner-circle-active'}">
+  <Provider data={dataContext}>
+    <div class="toggle">
+      <div style="background: {isActive ? activeColor : inactiveColor};" class="toggle-button {isActive && 'toggle-button-active'}" on:click={handleButtonClick}>
+        <div style="background: {accentColor};" class="toggle-inner-circle {isActive && 'toggle-inner-circle-active'}">
+        </div>
       </div>
     </div>
-  </div>
+    <slot />
+  </Provider>
 </div>
 
 <style>