Fixes for screen and page props

This commit is contained in:
Conor_Mack 2020-06-03 22:05:02 +01:00
parent 9ab0cedff2
commit 0d6ee860df
3 changed files with 14 additions and 19 deletions

View File

@ -31,7 +31,6 @@
let selectedCategory = categories[0] let selectedCategory = categories[0]
$: components = $store.components $: components = $store.components
$: componentInstance = $store.currentComponentInfo
$: componentDefinition = $store.components[componentInstance._component] $: componentDefinition = $store.components[componentInstance._component]
$: componentPropDefinition = $: componentPropDefinition =
flattenedPanel.find( flattenedPanel.find(
@ -39,40 +38,35 @@
c => c._component === componentInstance._component c => c._component === componentInstance._component
) || {} ) || {}
$: panelDefinition = componentPropDefinition.properties
? componentPropDefinition.properties[selectedCategory.value]
: {}
let panelDefNew = {} let panelDefinition = {}
$: { $: {
if(componentPropDefinition.properties) { if(componentPropDefinition.properties) {
if(selectedCategory.value === "design") { if(selectedCategory.value === "design") {
panelDefNew = componentPropDefinition.properties["design"] panelDefinition = componentPropDefinition.properties["design"]
}else{ }else{
let panelDef = componentPropDefinition.properties["settings"] let panelDef = componentPropDefinition.properties["settings"]
if($store.currentFrontEndType === "page") { if($store.currentFrontEndType === "page") {
panelDefNew = [...page,...panelDef] panelDefinition = [...page,...panelDef]
}else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") { }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
panelDefNew = [...screen, ...panelDef] panelDefinition = [...screen, ...panelDef]
}else { }else {
panelDefNew = panelDef panelDefinition = panelDef
} }
} }
} }
} }
let componentInstanceNew = {} let componentInstance = {}
$: { $: {
if(($store.currentFrontEndType === "screen" || $store.currentFrontEndType === "page") && $store.currentView !== "component") { if(($store.currentFrontEndType === "screen" || $store.currentFrontEndType === "page") && $store.currentView !== "component") {
componentInstanceNew = {...$store.currentPreviewItem, ...$store.currentComponentInfo} componentInstance = {...$store.currentPreviewItem, ...$store.currentComponentInfo}
}else { }else {
componentInstanceNew = $store.currentComponentInfo componentInstance = $store.currentComponentInfo
} }
} }
$: console.log("COMP INSTA NEW", componentInstanceNew)
const onStyleChanged = store.setComponentStyle const onStyleChanged = store.setComponentStyle
function onPropChanged(key, value) { function onPropChanged(key, value) {
@ -120,10 +114,10 @@
<div class="component-props-container"> <div class="component-props-container">
{#if selectedCategory.value === 'design'} {#if selectedCategory.value === 'design'}
<DesignView panelDefinition={panelDefNew} {componentInstance} {onStyleChanged} /> <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
{:else if selectedCategory.value === 'settings'} {:else if selectedCategory.value === 'settings'}
<SettingsView <SettingsView
panelDefinition={panelDefNew} {panelDefinition}
{componentInstance} {componentInstance}
{componentDefinition} {componentDefinition}
onChange={onPropChanged} /> onChange={onPropChanged} />

View File

@ -9,7 +9,9 @@
export let componentInstance = {} export let componentInstance = {}
export let onChange = () => {} export let onChange = () => {}
let pageScreenProps = ["name", "favicon", "description", "route"] $: console.log("SET COMP INSTANCE",componentInstance)
let pageScreenProps = ["title","favicon", "description", "route"]
const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props

View File

@ -5,13 +5,12 @@ import FlatButtonGroup from "./FlatButtonGroup.svelte"
export const screen = [ export const screen = [
{ label: "Name", key: "name", control: Input },
{ label: "Description", key: "description", control: Input }, { label: "Description", key: "description", control: Input },
{ label: "Route", key: "route", control: Input }, { label: "Route", key: "route", control: Input },
] ]
export const page = [ export const page = [
{ label: "Name", key: "name", control: Input }, { label: "Title", key: "title", control: Input },
{ label: "Favicon", key: "favicon", control: Input }, { label: "Favicon", key: "favicon", control: Input },
] ]