From 9f8eeb7c99e5b3c4835126799c4c328252fbbefd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 18 Jun 2021 12:41:15 +0100
Subject: [PATCH] Remove transition setting from components

---
 .../src/builderStore/store/frontend.js        | 10 ---------
 .../store/screenTemplates/utils/Component.js  |  6 ------
 .../NavigationPanel/NewScreenModal.svelte     |  1 -
 .../design/PropertiesPanel/DesignView.svelte  | 21 -------------------
 .../PropertiesPanel/PropertiesPanel.svelte    |  2 --
 .../client/src/components/Component.svelte    |  1 -
 packages/client/src/sdk.js                    |  2 --
 packages/client/src/utils/transition.js       | 16 --------------
 packages/standard-components/manifest.json    |  3 ---
 .../standard-components/src/Container.svelte  |  3 +--
 .../standard-components/src/Section.svelte    |  3 +--
 11 files changed, 2 insertions(+), 66 deletions(-)
 delete mode 100644 packages/client/src/utils/transition.js

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 8746cf94ac..9a7e2715da 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -305,7 +305,6 @@ export const getFrontendStore = () => {
           _id: uuid(),
           _component: definition.component,
           _styles: { normal: {}, hover: {}, active: {} },
-          _transition: "",
           _instanceName: `New ${definition.name}`,
           ...cloneDeep(props),
           ...extras,
@@ -508,15 +507,6 @@ export const getFrontendStore = () => {
         selected._styles = { normal: {}, hover: {}, active: {} }
         await store.actions.preview.saveSelected()
       },
-      updateTransition: async transition => {
-        const selected = get(selectedComponent)
-        if (transition == null || transition === "") {
-          selected._transition = ""
-        } else {
-          selected._transition = transition
-        }
-        await store.actions.preview.saveSelected()
-      },
       updateProp: async (name, value) => {
         let component = get(selectedComponent)
         if (!name || !component) {
diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
index c4085e483c..182736a1d5 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
@@ -14,7 +14,6 @@ export class Component extends BaseStructure {
         active: {},
         selected: {},
       },
-      _transition: "",
       _instanceName: "",
       _children: [],
     }
@@ -40,11 +39,6 @@ export class Component extends BaseStructure {
     return this
   }
 
-  transition(transition) {
-    this._json._transition = transition
-    return this
-  }
-
   // Shorthand for custom props "type"
   type(type) {
     this._json.type = type
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index 124ea888f4..a4c057abba 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -55,7 +55,6 @@
     if (routeError) return false
 
     draftScreen.props._instanceName = name
-    draftScreen.props._transition = "fade"
     draftScreen.props._component = baseComponent
     draftScreen.routing = { route, roleId }
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
index dfc11f3dae..1db95e7de5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@@ -8,7 +8,6 @@
   export let componentInstance = {}
   export let onStyleChanged = () => {}
   export let onCustomStyleChanged = () => {}
-  export let onUpdateTransition = () => {}
   export let onResetStyles = () => {}
 
   let selectedCategory = "normal"
@@ -24,14 +23,6 @@
     { value: "active", text: "Active" },
   ]
 
-  const transitions = [
-    "none",
-    "fade",
-    "blur",
-    "fly",
-    "scale", // slide is hidden because it does not seem to result in any effect
-  ]
-
   const capitalize = ([first, ...rest]) => first.toUpperCase() + rest.join("")
 
   $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
@@ -78,18 +69,6 @@
       {/if}
     </div>
   </div>
-  {#if componentDefinition?.transitionable}
-    <div class="transitions">
-      <Select
-        value={componentInstance._transition}
-        on:change={event => onUpdateTransition(event.detail)}
-        name="transition"
-        label="Transition"
-        options={transitions}
-        getOptionLabel={capitalize}
-      />
-    </div>
-  {/if}
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index f63476dc79..201a7a8fc7 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -18,7 +18,6 @@
 
   const onStyleChanged = store.actions.components.updateStyle
   const onCustomStyleChanged = store.actions.components.updateCustomStyle
-  const onUpdateTransition = store.actions.components.updateTransition
   const onResetStyles = store.actions.components.resetStyles
 
   function setAssetProps(name, value) {
@@ -64,7 +63,6 @@
         componentDefinition={definition}
         {onStyleChanged}
         {onCustomStyleChanged}
-        {onUpdateTransition}
         {onResetStyles}
       />
     </div>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 6f5c070358..0ee079a0bc 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -54,7 +54,6 @@
     children: children.length,
     styles: { ...instance._styles, id, empty, interactive },
     empty,
-    transition: instance._transition,
     selected,
     props: componentProps,
     name,
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index bf467e141f..70b5509a83 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -7,7 +7,6 @@ import {
   builderStore,
 } from "./store"
 import { styleable } from "./utils/styleable"
-import transition from "./utils/transition"
 import { linkable } from "./utils/linkable"
 import { getAction } from "./utils/getAction"
 import Provider from "./components/Provider.svelte"
@@ -21,7 +20,6 @@ export default {
   screenStore,
   builderStore,
   styleable,
-  transition,
   linkable,
   getAction,
   Provider,
diff --git a/packages/client/src/utils/transition.js b/packages/client/src/utils/transition.js
deleted file mode 100644
index 3814c1fc65..0000000000
--- a/packages/client/src/utils/transition.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { fade, blur, scale, fly } from "svelte/transition"
-
-// Default options
-const transitions = new Map([
-  ["fade", { tn: fade, opt: {} }],
-  ["blur", { tn: blur, opt: {} }],
-  // This one seems to not result in any effect
-  // ["slide", { tn: slide, opt: {} }],
-  ["scale", { tn: scale, opt: {} }],
-  ["fly", { tn: fly, opt: { y: 80 } }],
-])
-
-export default function transition(node, { type, options = {} }) {
-  const { tn, opt } = transitions.get(type) || { tn: () => {}, opt: {} }
-  return tn(node, { ...opt, ...options })
-}
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index b77ecf1f26..b716631e82 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -5,7 +5,6 @@
     "icon": "Sandbox",
     "hasChildren": true,
     "styleable": true,
-    "transitionable": true,
     "illegalChildren": [],
     "settings": [
       {
@@ -63,7 +62,6 @@
     "icon": "Sandbox",
     "hasChildren": true,
     "styleable": true,
-    "transitionable": true,
     "illegalChildren": ["section"],
     "showSettingsBar": true,
     "settings": [
@@ -183,7 +181,6 @@
     "icon": "ColumnTwoB",
     "hasChildren": true,
     "styleable": true,
-    "transitionable": true,
     "illegalChildren": ["Section"],
     "showEmptyState": false,
     "settings": [
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index bd4a461a92..c71d3b928d 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable, transition } = getContext("sdk")
+  const { styleable } = getContext("sdk")
   const component = getContext("component")
 
   export let direction
@@ -17,7 +17,6 @@
 
 <div
   class={[directionClass, hAlignClass, vAlignClass, sizeClass].join(" ")}
-  in:transition={{ type: $component.transition }}
   use:styleable={$component.styles}
 >
   <slot />
diff --git a/packages/standard-components/src/Section.svelte b/packages/standard-components/src/Section.svelte
index 31c957fd3e..1b702f9034 100644
--- a/packages/standard-components/src/Section.svelte
+++ b/packages/standard-components/src/Section.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
 
-  const { styleable, transition, builderStore } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let type = "mainSidebar"
@@ -31,7 +31,6 @@
 
 <div
   bind:clientWidth={containerWidth}
-  in:transition={{ type: $component.transition }}
   class="{type} columns-{columnsDependingOnSize}"
   use:styleable={$component.styles}
 >