budibase/packages/builder/src/components/userInterface/ComponentsHierarchyChildren...

157 lines
3.6 KiB
Svelte
Raw Normal View History

<script>
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { last } from "lodash/fp"
import { pipe } from "components/common/core";
2020-02-20 18:11:41 +01:00
import {
XCircleIcon,
ChevronUpIcon,
ChevronDownIcon,
CopyIcon,
} from "../common/Icons"
2020-02-03 10:50:30 +01:00
export let components = []
export let currentComponent
export let onSelect = () => {}
export let level = 0
2020-02-18 17:51:28 +01:00
export let onDeleteComponent
2020-02-19 11:17:31 +01:00
export let onMoveUpComponent
export let onMoveDownComponent
export let onCopyComponent
2020-02-03 10:50:30 +01:00
const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
2020-02-20 18:11:41 +01:00
const get_name = s => (!s ? "" : last(s.split("/")))
2020-02-25 16:21:23 +01:00
const get_capitalised_name = name => pipe(name, [get_name, capitalise])
2020-02-18 17:51:28 +01:00
2020-02-20 18:11:41 +01:00
const moveDownComponent = component => {
2020-02-19 11:17:31 +01:00
const c = component
return () => {
return onMoveDownComponent(c)
}
}
const selectComponent = component => {
// Set current component
store.selectComponent(component)
// Get ID path
const path = store.getPathToComponent(component)
// Go to correct URL
$goto(`./:page/:screen/${path}`)
}
</script>
<ul>
2020-02-19 11:17:31 +01:00
{#each components as component, index (component._id)}
<li on:click|stopPropagation={() => selectComponent(component)}>
2020-02-19 11:17:31 +01:00
<div
2020-02-24 16:00:48 +01:00
class="budibase__nav-item item"
2020-02-03 10:50:30 +01:00
class:selected={currentComponent === component}
style="padding-left: {level * 20 + 53}px">
<div>{get_capitalised_name(component._component)}</div>
2020-02-19 11:17:31 +01:00
<div class="reorder-buttons">
{#if index > 0}
2020-02-20 18:11:41 +01:00
<button
class:solo={index === components.length - 1}
2020-02-20 18:11:41 +01:00
on:click|stopPropagation={() => onMoveUpComponent(component)}>
<ChevronUpIcon />
</button>
2020-02-19 11:17:31 +01:00
{/if}
2020-02-20 18:11:41 +01:00
{#if index < components.length - 1}
<button
class:solo={index === 0}
on:click|stopPropagation={moveDownComponent(component)}>
2020-02-20 18:11:41 +01:00
<ChevronDownIcon />
</button>
2020-02-19 11:17:31 +01:00
{/if}
</div>
<button
class="copy"
on:click|stopPropagation={() => onCopyComponent(component)}>
2020-02-20 18:11:41 +01:00
<CopyIcon />
2020-02-19 11:17:31 +01:00
</button>
2020-02-20 18:11:41 +01:00
<button on:click|stopPropagation={() => onDeleteComponent(component)}>
2020-02-18 17:51:28 +01:00
<XCircleIcon />
</button>
2020-02-19 11:17:31 +01:00
</div>
{#if component._children}
2020-02-03 10:50:30 +01:00
<svelte:self
components={component._children}
{currentComponent}
{onSelect}
2020-02-18 17:51:28 +01:00
level={level + 1}
2020-02-19 11:17:31 +01:00
{onDeleteComponent}
{onMoveUpComponent}
{onMoveDownComponent}
{onCopyComponent} />
{/if}
</li>
{/each}
</ul>
<style>
ul {
list-style: none;
padding-left: 0;
margin: 0;
}
2020-02-19 11:17:31 +01:00
.item {
display: grid;
grid-template-columns: 1fr auto auto auto;
2020-02-20 18:09:35 +01:00
padding: 0px 5px 0px 15px;
2020-02-19 11:17:31 +01:00
margin: auto 0px;
border-radius: 3px;
2020-02-20 18:11:41 +01:00
height: 35px;
2020-02-19 11:17:31 +01:00
align-items: center;
font-weight: 400;
font-size: 13px;
}
2020-02-18 17:51:28 +01:00
2020-02-19 11:17:31 +01:00
.item button {
2020-02-18 17:51:28 +01:00
display: none;
height: 20px;
width: 28px;
2020-02-19 11:17:31 +01:00
color: var(--slate);
padding: 0px 5px;
border-style: none;
background: rgba(0, 0, 0, 0);
cursor: pointer;
}
.item button.copy {
width: 26px;
2020-02-18 17:51:28 +01:00
}
.item:hover {
background: #fafafa;
cursor: pointer;
}
2020-02-19 11:17:31 +01:00
.item:hover button {
2020-02-18 17:51:28 +01:00
display: block;
}
2020-02-19 11:17:31 +01:00
.item:hover button:hover {
2020-02-18 17:51:28 +01:00
color: var(--button-text);
}
2020-02-19 11:17:31 +01:00
.reorder-buttons {
display: flex;
flex-direction: column;
height: 100%;
}
.reorder-buttons > button {
flex: 1 1 auto;
width: 30px;
height: 15px;
}
.reorder-buttons > button.solo {
padding-top: 2px;
2020-02-19 11:17:31 +01:00
}
</style>