From 856e80fce2999d205fcececc5731f1c29ba64969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Mon, 1 Mar 2021 12:59:27 +0100
Subject: [PATCH] adds transition utility to the client sdk

---
 packages/client/src/sdk.js                    |  2 ++
 packages/client/src/utils/transition.js       | 14 ++++++++++++++
 packages/standard-components/manifest.json    |  7 +++++++
 packages/standard-components/src/Image.svelte |  6 ++++--
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 packages/client/src/utils/transition.js

diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 1a3a4177a8..7eef69441d 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -7,6 +7,7 @@ import {
   builderStore,
 } from "./store"
 import { styleable } from "./utils/styleable"
+import transition from "./utils/transition"
 import { linkable } from "./utils/linkable"
 import Provider from "./components/Provider.svelte"
 import { ActionTypes } from "./constants"
@@ -19,6 +20,7 @@ export default {
   screenStore,
   builderStore,
   styleable,
+  transition,
   linkable,
   Provider,
   ActionTypes,
diff --git a/packages/client/src/utils/transition.js b/packages/client/src/utils/transition.js
new file mode 100644
index 0000000000..14470ddea2
--- /dev/null
+++ b/packages/client/src/utils/transition.js
@@ -0,0 +1,14 @@
+import { fade, blur, slide, fly } from 'svelte/transition'
+
+// Default options
+const transitions = new Map([
+  ["fade", { tn: fade, opt: {} }],
+  ["blur", { tn: blur, opt: {} }],
+  ["slide", { tn: slide, opt: {} }],
+  ["fly", { tn: fly, opt: { y: 30 } }],
+])
+	
+export default function transition(node, {type, options = {}}) {
+	const { tn, opt } = transitions.get(type) || {}
+	return tn ? tn(node, {...opt, ...options}) : fade(node, { duration: 0})
+}
\ No newline at end of file
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index cb321f1bb9..f3a045a062 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -291,6 +291,13 @@
         "type": "text",
         "label": "URL",
         "key": "url"
+      },
+      {
+        "type": "select",
+        "key": "transitionType",
+        "label": "Transition",
+        "options": ["fade", "blur", "slide", "fly"],
+        "defaultValue": ""
       }
     ]
   },
diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte
index b54c84e691..97df5d642f 100644
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, transition } = getContext("sdk")
   const component = getContext("component")
 
   export let className = ""
@@ -9,6 +9,7 @@
   export let description = ""
   export let height
   export let width
+  export let transitionType = ""
 </script>
 
 <img
@@ -17,4 +18,5 @@
   class={className}
   src={url}
   alt={description}
-  use:styleable={$component.styles} />
+  use:styleable={$component.styles}
+  in:transition={{type: transitionType}} />