forked from tsai/budibase
Michael Shanks
6 years ago
committed by
GitHub
GitHub
14 changed files with 388 additions and 304 deletions
@ -0,0 +1,59 @@ |
|||
import { makePropsSafe } from "components/userInterface/pagesParsing/createProps" |
|||
import api from "./api" |
|||
|
|||
export const selectComponent = (state, component) => { |
|||
const componentDef = component._component.startsWith("##") |
|||
? component |
|||
: state.components[component._component] |
|||
state.currentComponentInfo = makePropsSafe(componentDef, component) |
|||
state.currentView = "component" |
|||
return state |
|||
} |
|||
|
|||
export const getParent = (rootProps, child) => { |
|||
let parent |
|||
walkProps(rootProps, (p, breakWalk) => { |
|||
if ( |
|||
p._children && |
|||
(p._children.includes(child) || p._children.some(c => c._id === child)) |
|||
) { |
|||
parent = p |
|||
breakWalk() |
|||
} |
|||
}) |
|||
return parent |
|||
} |
|||
|
|||
export const saveCurrentPreviewItem = s => |
|||
s.currentFrontEndType === "page" |
|||
? savePage(s) |
|||
: saveScreenApi(s.currentPreviewItem, s) |
|||
|
|||
export const savePage = async s => { |
|||
const page = s.pages[s.currentPageName] |
|||
await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, { |
|||
page: { componentLibraries: s.pages.componentLibraries, ...page }, |
|||
uiFunctions: s.currentPageFunctions, |
|||
screens: page._screens, |
|||
}) |
|||
} |
|||
|
|||
export const saveScreenApi = (screen, s) => { |
|||
api |
|||
.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen) |
|||
.then(() => savePage(s)) |
|||
} |
|||
|
|||
export const walkProps = (props, action, cancelToken = null) => { |
|||
cancelToken = cancelToken || { cancelled: false } |
|||
action(props, () => { |
|||
cancelToken.cancelled = true |
|||
}) |
|||
|
|||
if (props._children) { |
|||
for (let child of props._children) { |
|||
if (cancelToken.cancelled) return |
|||
walkProps(child, action, cancelToken) |
|||
} |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 419 B |
@ -0,0 +1,232 @@ |
|||
<script> |
|||
import { MoreIcon } from "components/common/Icons" |
|||
import { store } from "builderStore" |
|||
import { getComponentDefinition } from "builderStore/store" |
|||
import ConfirmDialog from "components/common/ConfirmDialog.svelte" |
|||
import { last, cloneDeep } from "lodash/fp" |
|||
import UIkit from "uikit" |
|||
import { |
|||
selectComponent, |
|||
getParent, |
|||
walkProps, |
|||
saveCurrentPreviewItem, |
|||
} from "builderStore/storeUtils" |
|||
import { uuid } from "builderStore/uuid" |
|||
|
|||
export let component |
|||
|
|||
let confirmDeleteDialog |
|||
let dropdownEl |
|||
|
|||
$: dropdown = UIkit.dropdown(dropdownEl, { |
|||
mode: "click", |
|||
offset: 0, |
|||
pos: "bottom-right", |
|||
"delay-hide": 0, |
|||
animation: false, |
|||
}) |
|||
$: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false)) |
|||
$: noChildrenAllowed = |
|||
!component || |
|||
getComponentDefinition($store, component._component).children === false |
|||
$: noPaste = |
|||
!$store.componentToPaste || $store.componentToPaste._id === component._id |
|||
|
|||
const lastPartOfName = c => (c ? last(c._component.split("/")) : "") |
|||
|
|||
const hideDropdown = () => { |
|||
dropdown.hide() |
|||
} |
|||
|
|||
const moveUpComponent = () => { |
|||
store.update(s => { |
|||
const parent = getParent(s.currentPreviewItem.props, component) |
|||
|
|||
if (parent) { |
|||
const currentIndex = parent._children.indexOf(component) |
|||
if (currentIndex === 0) return s |
|||
|
|||
const newChildren = parent._children.filter(c => c !== component) |
|||
newChildren.splice(currentIndex - 1, 0, component) |
|||
parent._children = newChildren |
|||
} |
|||
s.currentComponentInfo = component |
|||
saveCurrentPreviewItem(s) |
|||
|
|||
return s |
|||
}) |
|||
} |
|||
|
|||
const moveDownComponent = () => { |
|||
store.update(s => { |
|||
const parent = getParent(s.currentPreviewItem.props, component) |
|||
|
|||
if (parent) { |
|||
const currentIndex = parent._children.indexOf(component) |
|||
if (currentIndex === parent._children.length - 1) return s |
|||
|
|||
const newChildren = parent._children.filter(c => c !== component) |
|||
newChildren.splice(currentIndex + 1, 0, component) |
|||
parent._children = newChildren |
|||
} |
|||
s.currentComponentInfo = component |
|||
saveCurrentPreviewItem(s) |
|||
|
|||
return s |
|||
}) |
|||
} |
|||
|
|||
const copyComponent = () => { |
|||
store.update(s => { |
|||
const parent = getParent(s.currentPreviewItem.props, component) |
|||
const copiedComponent = cloneDeep(component) |
|||
walkProps(copiedComponent, p => { |
|||
p._id = uuid() |
|||
}) |
|||
parent._children = [...parent._children, copiedComponent] |
|||
saveCurrentPreviewItem(s) |
|||
s.currentComponentInfo = copiedComponent |
|||
return s |
|||
}) |
|||
} |
|||
|
|||
const deleteComponent = () => { |
|||
store.update(state => { |
|||
const parent = getParent(state.currentPreviewItem.props, component) |
|||
|
|||
if (parent) { |
|||
parent._children = parent._children.filter(c => c !== component) |
|||
} |
|||
|
|||
saveCurrentPreviewItem(state) |
|||
|
|||
return state |
|||
}) |
|||
} |
|||
|
|||
const generateNewIdsForComponent = c => |
|||
walkProps(c, p => { |
|||
p._id = uuid() |
|||
}) |
|||
|
|||
const storeComponentForCopy = (cut = false) => { |
|||
store.update(s => { |
|||
const copiedComponent = cloneDeep(component) |
|||
s.componentToPaste = copiedComponent |
|||
if (cut) { |
|||
const parent = getParent(s.currentPreviewItem.props, component._id) |
|||
parent._children = parent._children.filter(c => c._id !== component._id) |
|||
selectComponent(s, parent) |
|||
} |
|||
|
|||
return s |
|||
}) |
|||
} |
|||
|
|||
const pasteComponent = mode => { |
|||
store.update(s => { |
|||
if (!s.componentToPaste) return s |
|||
|
|||
const componentToPaste = cloneDeep(s.componentToPaste) |
|||
generateNewIdsForComponent(componentToPaste) |
|||
delete componentToPaste._cutId |
|||
|
|||
if (mode === "inside") { |
|||
component._children.push(componentToPaste) |
|||
return s |
|||
} |
|||
|
|||
const parent = getParent(s.currentPreviewItem.props, component) |
|||
|
|||
const targetIndex = parent._children.indexOf(component) |
|||
const index = mode === "above" ? targetIndex : targetIndex + 1 |
|||
parent._children.splice(index, 0, cloneDeep(componentToPaste)) |
|||
|
|||
saveCurrentPreviewItem(s) |
|||
selectComponent(s, componentToPaste) |
|||
|
|||
return s |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<div class="root" on:click|stopPropagation={() => {}}> |
|||
<button> |
|||
<MoreIcon /> |
|||
</button> |
|||
<ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}> |
|||
<li on:click={() => confirmDeleteDialog.show()}>Delete</li> |
|||
<li on:click={moveUpComponent}>Move up</li> |
|||
<li on:click={moveDownComponent}>Move down</li> |
|||
<li on:click={copyComponent}>Duplicate</li> |
|||
<li on:click={() => storeComponentForCopy(true)}>Cut</li> |
|||
<li on:click={() => storeComponentForCopy(false)}>Copy</li> |
|||
<hr /> |
|||
<li class:disabled={noPaste} on:click={() => pasteComponent('above')}> |
|||
Paste above |
|||
</li> |
|||
<li class:disabled={noPaste} on:click={() => pasteComponent('below')}> |
|||
Paste below |
|||
</li> |
|||
<li |
|||
class:disabled={noPaste || noChildrenAllowed} |
|||
on:click={() => pasteComponent('inside')}> |
|||
Paste inside |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<ConfirmDialog |
|||
bind:this={confirmDeleteDialog} |
|||
title="Confirm Delete" |
|||
body={`Are you sure you wish to delete this '${lastPartOfName(component)}' component?`} |
|||
okText="Delete Component" |
|||
onOk={deleteComponent} /> |
|||
|
|||
<style> |
|||
.root { |
|||
overflow: hidden; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.root button { |
|||
border-style: none; |
|||
border-radius: 2px; |
|||
padding: 5px; |
|||
background: transparent; |
|||
cursor: pointer; |
|||
color: var(--button-text); |
|||
outline: none; |
|||
} |
|||
|
|||
.menu { |
|||
z-index: 100000; |
|||
overflow: visible; |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
.menu li { |
|||
border-style: none; |
|||
background-color: transparent; |
|||
list-style-type: none; |
|||
padding: 4px 5px 4px 15px; |
|||
margin: 0; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.menu li:not(.disabled) { |
|||
cursor: pointer; |
|||
color: var(--ink); |
|||
} |
|||
|
|||
.menu li:not(.disabled):hover { |
|||
color: var(--button-text); |
|||
background-color: var(--grey-light); |
|||
} |
|||
|
|||
.disabled { |
|||
color: var(--grey-dark); |
|||
cursor: default; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue