From b32336eed464a18c9f018244ce401022935372c9 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 2 Jun 2020 11:11:53 +0100
Subject: [PATCH] bugfix: #284 styles not applied on component copy

---
 packages/builder/src/builderStore/store/index.js | 16 +++++-----------
 packages/builder/src/builderStore/storeUtils.js  |  8 ++++++++
 .../userInterface/ComponentDropdownMenu.svelte   |  9 +++++----
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index f94cea2399..61d58a2e00 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -23,6 +23,7 @@ import {
   savePage as _savePage,
   saveCurrentPreviewItem as _saveCurrentPreviewItem,
   saveScreenApi as _saveScreenApi,
+  regenerateCssForCurentScreen,
 } from "../storeUtils"
 
 export const getStore = () => {
@@ -174,11 +175,10 @@ const createScreen = store => (screenName, route, layoutComponentName) => {
 const setCurrentScreen = store => screenName => {
   store.update(s => {
     const screen = getExactComponent(s.screens, screenName)
-    screen._css = generate_screen_css([screen.props])
     s.currentPreviewItem = screen
     s.currentFrontEndType = "screen"
     s.currentView = "detail"
-
+    regenerateCssForCurentScreen(s)
     const safeProps = makePropsSafe(
       s.components[screen.props._component],
       screen.props
@@ -296,9 +296,7 @@ const setCurrentPage = store => pageName => {
     state.currentComponentInfo = safeProps
     currentPage.props = safeProps
     state.currentPreviewItem = state.pages[pageName]
-    state.currentPreviewItem._css = generate_screen_css([
-      state.currentPreviewItem.props,
-    ])
+    regenerateCssForCurentScreen(state)
 
     for (let screen of state.screens) {
       screen._css = generate_screen_css([screen.props])
@@ -375,9 +373,7 @@ const addTemplatedComponent = store => props => {
     state.currentComponentInfo._children = state.currentComponentInfo._children.concat(
       props
     )
-    state.currentPreviewItem._css = generate_screen_css([
-      state.currentPreviewItem.props,
-    ])
+    regenerateCssForCurentScreen(state)
 
     setCurrentPageFunctions(state)
     _saveCurrentPreviewItem(state)
@@ -411,9 +407,7 @@ const setComponentStyle = store => (type, name, value) => {
     }
     state.currentComponentInfo._styles[type][name] = value
 
-    state.currentPreviewItem._css = generate_screen_css([
-      state.currentPreviewItem.props,
-    ])
+    regenerateCssForCurentScreen(state)
 
     // save without messing with the store
     _saveCurrentPreviewItem(state)
diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index 68e20e56b3..1ec9d54063 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -1,5 +1,6 @@
 import { makePropsSafe } from "components/userInterface/pagesParsing/createProps"
 import api from "./api"
+import { generate_screen_css } from "./generate_css"
 
 export const selectComponent = (state, component) => {
   const componentDef = component._component.startsWith("##")
@@ -57,3 +58,10 @@ export const walkProps = (props, action, cancelToken = null) => {
     }
   }
 }
+
+export const regenerateCssForCurentScreen = state => {
+  state.currentPreviewItem._css = generate_screen_css([
+    state.currentPreviewItem.props,
+  ])
+  return state
+}
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index b7cb74fb3c..94c60fd93d 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -10,6 +10,7 @@
     getParent,
     walkProps,
     saveCurrentPreviewItem,
+    regenerateCssForCurentScreen,
   } from "builderStore/storeUtils"
   import { uuid } from "builderStore/uuid"
 
@@ -29,8 +30,7 @@
   $: noChildrenAllowed =
     !component ||
     getComponentDefinition($store, component._component).children === false
-  $: noPaste =
-    !$store.componentToPaste || $store.componentToPaste._id === component._id
+  $: noPaste = !$store.componentToPaste
 
   const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
 
@@ -86,6 +86,7 @@
       parent._children = [...parent._children, copiedComponent]
       saveCurrentPreviewItem(s)
       s.currentComponentInfo = copiedComponent
+      regenerateCssForCurentScreen(s)
       return s
     })
   }
@@ -141,10 +142,10 @@
       const targetIndex = parent._children.indexOf(component)
       const index = mode === "above" ? targetIndex : targetIndex + 1
       parent._children.splice(index, 0, cloneDeep(componentToPaste))
-
+      regenerateCssForCurentScreen(s)
       saveCurrentPreviewItem(s)
       selectComponent(s, componentToPaste)
-
+      
       return s
     })
   }