Merge pull request #127 from shogunpurple/switch-props-on-component-selection

auto highlight and switch to properties panel on component selection

packages/builder/src/builderStore/store.js

@@ -759,6 +759,8 @@ const addChildComponent = store => (componentToAdd, presetName) => {
       ? _savePage(state)
       : _saveScreenApi(state.currentPreviewItem, state)
       
+    state.currentComponentInfo = newComponent.props
+
     return state
   })
 }
@@ -782,24 +784,24 @@ const addTemplatedComponent = store => props => {
 }
 
 const selectComponent = store => component => {
-  store.update(s => {
+  store.update(state => {
     const componentDef = component._component.startsWith("##")
       ? component
-      : s.components.find(c => c.name === component._component)
+      : state.components.find(c => c.name === component._component)
-    s.currentComponentInfo = makePropsSafe(componentDef, component)
+    state.currentComponentInfo = makePropsSafe(componentDef, component)
-    return s
+    return state
   })
 }
 
 const setComponentProp = store => (name, value) => {
-  store.update(s => {
+  store.update(state => {
-    const current_component = s.currentComponentInfo
+    const current_component = state.currentComponentInfo
-    s.currentComponentInfo[name] = value
+    state.currentComponentInfo[name] = value
 
-    _saveCurrentPreviewItem(s)
+    _saveCurrentPreviewItem(state)
 
-    s.currentComponentInfo = current_component
+    state.currentComponentInfo = current_component
-    return s
+    return state
   })
 }
 

packages/builder/src/userInterface/ComponentSelectionList.svelte

@@ -8,6 +8,9 @@
   import ConfirmDialog from "../common/ConfirmDialog.svelte"
   import { getRecordNodes, getIndexNodes, getIndexSchema, pipe } from "../common/core"
 
+
+  export let toggleTab
+
   let componentLibraries = []
   let current_view = "text"
   let selectedComponent = null
@@ -49,6 +52,7 @@
     } else {
       store.addChildComponent(component.name)
     }
+    toggleTab();
   }
 
   const onTemplateChosen = template => {

packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte

@@ -3,11 +3,16 @@
   import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "./ComponentSelectionList.svelte"
 
-  let selected = "properties"
+  const PROPERTIES_TAB = "properties";
+  const COMPONENT_SELECTION_TAB = "components";
+
+  let selected = PROPERTIES_TAB 
 
   const isSelected = tab => selected === tab
 
   const selectTab = tab => (selected = tab)
+
+  const toggleTab = () => selected = selected === PROPERTIES_TAB ? COMPONENT_SELECTION_TAB : PROPERTIES_TAB;
 </script>
 
 <div class="root">
@@ -15,26 +20,26 @@
     <div class="switcher">
 
       <button
-        class:selected={selected === 'properties'}
+        class:selected={selected === PROPERTIES_TAB}
-        on:click={() => selectTab('properties')}>
+        on:click={() => selectTab(PROPERTIES_TAB)}>
         Properties
       </button>
 
       <button
-        class:selected={selected === 'components'}
+        class:selected={selected === COMPONENT_SELECTION_TAB}
-        on:click={() => selectTab('components')}>
+        on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
         Components
       </button>
 
     </div>
 
     <div class="panel">
-      {#if selected === 'properties'}
+      {#if selected === PROPERTIES_TAB}
-        <ComponentPropertiesPanel />
+        <ComponentPropertiesPanel {toggleTab} />
       {/if}
 
-      {#if selected === 'components'}
+      {#if selected === COMPONENT_SELECTION_TAB}
-        <ComponentSelectionList />
+        <ComponentSelectionList {toggleTab} />
       {/if}
 
     </div>

packages/builder/src/userInterface/MasterLayout.svelte

@@ -44,19 +44,17 @@
     component.component.name === $store.currentPreviewItem.name
 
   const confirmDeleteComponent = async component => {
-    console.log(component)
     componentToDelete = component
     // await tick()
     confirmDeleteDialog.show()
   }
 </script>
 
-<div
+<div>
+  <div
     class="budibase__nav-item"
     class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
     on:click|stopPropagation={() => store.setScreenType('page')}>
-
-  <div class="component">
     <span
       class="icon"
       class:rotate={$store.currentPreviewItem.name !== _layout.title}>