2019-08-19 09:51:01 +02:00
|
|
|
<script>
|
|
|
|
|
|
|
|
import PropsView from "./PropsView.svelte";
|
|
|
|
import IconButton from "../common/IconButton.svelte";
|
|
|
|
import { getComponentInfo } from "./pagesParsing/createProps";
|
|
|
|
import { store } from "../builderStore";
|
2019-09-03 11:42:19 +02:00
|
|
|
import {
|
|
|
|
cloneDeep,
|
|
|
|
isUndefined
|
|
|
|
} from "lodash/fp";
|
2019-08-19 09:51:01 +02:00
|
|
|
import { fade, slide } from 'svelte/transition';
|
|
|
|
|
2019-09-22 06:02:33 +02:00
|
|
|
export let title = "";
|
2019-08-19 09:51:01 +02:00
|
|
|
export let onGoBack = () => {};
|
|
|
|
export let instanceProps = {};
|
|
|
|
export let onPropsChanged = () => {};
|
|
|
|
|
|
|
|
|
|
|
|
let editingSubComponentName;
|
|
|
|
let editingSubComponentProps;
|
2019-09-22 06:02:33 +02:00
|
|
|
let editingSubComponentArrayIndex;
|
|
|
|
let editingSubComponentArrayPropName;
|
|
|
|
let editingSubComponentTitle;
|
2019-08-19 09:51:01 +02:00
|
|
|
let allComponents;
|
|
|
|
|
|
|
|
store.subscribe(s => {
|
|
|
|
allComponents = s.allComponents;
|
|
|
|
})
|
|
|
|
|
|
|
|
$: componentInfo = getComponentInfo(
|
|
|
|
allComponents, instanceProps._component);
|
|
|
|
|
|
|
|
const onSubComponentGoBack = () => {
|
|
|
|
editingSubComponentName = null;
|
|
|
|
editingSubComponentProps = null;
|
|
|
|
}
|
|
|
|
|
2019-09-03 11:42:19 +02:00
|
|
|
const onEditComponentProp = (propName, arrayIndex, arrayPropName) => {
|
2019-09-22 06:02:33 +02:00
|
|
|
editingSubComponentName = propName;
|
|
|
|
editingSubComponentTitle = isUndefined(arrayIndex)
|
2019-09-03 11:42:19 +02:00
|
|
|
? propName
|
|
|
|
: `${propName}[${arrayIndex}].${arrayPropName}`;
|
|
|
|
editingSubComponentProps = isUndefined(arrayIndex)
|
|
|
|
? instanceProps[propName]
|
|
|
|
: instanceProps[propName][arrayIndex][arrayPropName];
|
2019-09-22 06:02:33 +02:00
|
|
|
editingSubComponentArrayIndex = arrayIndex;
|
|
|
|
editingSubComponentArrayPropName = arrayPropName;
|
2019-08-19 09:51:01 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const onSubComponentPropsChanged = (subProps) => {
|
|
|
|
const newProps = cloneDeep(instanceProps);
|
2019-09-22 06:02:33 +02:00
|
|
|
if(isUndefined(editingSubComponentArrayIndex)) {
|
|
|
|
newProps[editingSubComponentName] = subProps;
|
|
|
|
} else {
|
|
|
|
newProps[editingSubComponentName]
|
|
|
|
[editingSubComponentArrayIndex]
|
|
|
|
[editingSubComponentArrayPropName] = subProps;
|
|
|
|
}
|
|
|
|
|
2019-08-19 09:51:01 +02:00
|
|
|
instanceProps = newProps;
|
|
|
|
onPropsChanged(newProps);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const propsChanged = newProps => {
|
|
|
|
instanceProps = newProps;
|
|
|
|
onPropsChanged(newProps);
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<div class="title">
|
|
|
|
<IconButton icon="chevron-left"
|
|
|
|
on:click={onGoBack}/>
|
2019-09-22 06:02:33 +02:00
|
|
|
<span>{title}</span>
|
2019-08-19 09:51:01 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
{#if editingSubComponentName}
|
|
|
|
<div in:slide={{delay: 250, duration: 300}}
|
|
|
|
out:fade>
|
|
|
|
<svelte:self onPropsChanged={onSubComponentPropsChanged}
|
|
|
|
onGoBack={onSubComponentGoBack}
|
|
|
|
instanceProps={editingSubComponentProps}
|
2019-09-22 06:02:33 +02:00
|
|
|
title={editingSubComponentTitle} />
|
2019-08-19 09:51:01 +02:00
|
|
|
</div>
|
|
|
|
{:else}
|
|
|
|
<PropsView {instanceProps}
|
|
|
|
{componentInfo}
|
|
|
|
onPropsChanged={propsChanged}
|
|
|
|
{onEditComponentProp} />
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.title {
|
|
|
|
padding:3px;
|
|
|
|
background-color: white;
|
|
|
|
color: var(--secondary100);
|
|
|
|
border-style:solid;
|
|
|
|
border-width: 1px 0 0 0;
|
|
|
|
border-color: var(--lightslate);
|
|
|
|
}
|
|
|
|
|
|
|
|
.title > span {
|
|
|
|
margin-left: 10px;
|
|
|
|
}
|
|
|
|
</style>
|