state binding v1
This commit is contained in:
Martin McKeaveney
parent
34b957f331
commit
936bce711e
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"tabWidth": 2,
|
"tabWidth": 2,
|
||||||
"semi": false,
|
"semi": true,
|
||||||
"singleQuote": false,
|
"singleQuote": false,
|
||||||
"trailingComma": "es5",
|
"trailingComma": "es5",
|
||||||
"plugins": ["prettier-plugin-svelte"],
|
"plugins": ["prettier-plugin-svelte"],
|
||||||
|
|
|
||||||
|
|
@ -1,95 +1,85 @@
|
||||||
<script>
|
<script>
|
||||||
import { store } from "../builderStore"
|
import { store } from "../builderStore";
|
||||||
import { map, join } from "lodash/fp"
|
import { map, join } from "lodash/fp";
|
||||||
import { pipe } from "../common/core"
|
import { pipe } from "../common/core";
|
||||||
|
import { buildPropsHierarchy } from "./pagesParsing/buildPropsHierarchy";
|
||||||
|
|
||||||
let iframe
|
let iframe;
|
||||||
|
|
||||||
function transform_component(comp) {
|
$: iframe && console.log(iframe.contentDocument.head.insertAdjacentHTML('beforeend', '<style></style>'))
|
||||||
const props = comp.props || comp
|
$: hasComponent = !!$store.currentFrontEndItem;
|
||||||
if (props && props._children && props._children.length) {
|
$: styles = hasComponent ? $store.currentFrontEndItem._css : '';
|
||||||
props._children = props._children.map(transform_component)
|
|
||||||
}
|
|
||||||
|
|
||||||
return props
|
$: stylesheetLinks = pipe($store.pages.stylesheets, [
|
||||||
}
|
map(s => `<link rel="stylesheet" href="${s}"/>`),
|
||||||
|
join("\n")
|
||||||
|
]);
|
||||||
|
|
||||||
$: iframe &&
|
$: appDefinition = {
|
||||||
console.log(
|
componentLibraries: $store.loadLibraryUrls(),
|
||||||
iframe.contentDocument.head.insertAdjacentHTML(
|
props: buildPropsHierarchy(
|
||||||
"beforeend",
|
$store.components,
|
||||||
`<\style></style>`
|
$store.screens,
|
||||||
)
|
$store.currentFrontEndItem),
|
||||||
)
|
hierarchy: $store.hierarchy,
|
||||||
$: hasComponent = !!$store.currentPreviewItem
|
appRootPath: ""
|
||||||
$: styles = hasComponent ? $store.currentPreviewItem._css : ""
|
};
|
||||||
|
|
||||||
$: stylesheetLinks = pipe(
|
|
||||||
$store.pages.stylesheets,
|
|
||||||
[map(s => `<link rel="stylesheet" href="${s}"/>`), join("\n")]
|
|
||||||
)
|
|
||||||
|
|
||||||
$: frontendDefinition = {
|
|
||||||
componentLibraries: $store.loadLibraryUrls(),
|
|
||||||
page: $store.currentPreviewItem,
|
|
||||||
screens: [],
|
|
||||||
appRootPath: "",
|
|
||||||
}
|
|
||||||
|
|
||||||
$: backendDefinition = {
|
|
||||||
hierarchy: $store.hierarchy,
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<div class="component-container">
|
<div class="component-container">
|
||||||
{#if hasComponent && $store.currentPreviewItem}
|
{#if hasComponent}
|
||||||
<iframe
|
<iframe style="height: 100%; width: 100%"
|
||||||
style="height: 100%; width: 100%"
|
title="componentPreview"
|
||||||
title="componentPreview"
|
bind:this={iframe}
|
||||||
bind:this={iframe}
|
srcdoc={
|
||||||
srcdoc={`<html>
|
`<html>
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
${stylesheetLinks}
|
${stylesheetLinks}
|
||||||
<style>
|
<script>
|
||||||
${styles || ''}
|
window["##BUDIBASE_APPDEFINITION##"] = ${JSON.stringify(appDefinition)};
|
||||||
body, html {
|
window["##BUDIBASE_UIFUNCTIONS"] = ${$store.currentScreenFunctions};
|
||||||
height: 100%!important;
|
|
||||||
}
|
|
||||||
<\/style>
|
|
||||||
<\script>
|
|
||||||
window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${JSON.stringify(frontendDefinition)};
|
|
||||||
window["##BUDIBASE_BACKEND_DEFINITION##"] = ${JSON.stringify(backendDefinition)};
|
|
||||||
window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${$store.currentScreenFunctions};
|
|
||||||
|
|
||||||
import('/_builder/budibase-client.esm.mjs')
|
import('/_builder/budibase-client.esm.mjs')
|
||||||
.then(module => {
|
.then(module => {
|
||||||
module.loadBudibase({ window, localStorage });
|
module.loadBudibase({ window, localStorage });
|
||||||
})
|
})
|
||||||
<\/script>
|
</script>
|
||||||
</head>
|
<style>
|
||||||
<body>
|
|
||||||
</body>
|
body {
|
||||||
</html>`} />
|
box-sizing: border-box;
|
||||||
{/if}
|
padding: 20px;
|
||||||
|
}
|
||||||
|
${styles}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>`}>
|
||||||
|
</iframe>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.component-container {
|
|
||||||
grid-row-start: middle;
|
|
||||||
grid-column-start: middle;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
padding-top: 56.25%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.component-container iframe {
|
<style>
|
||||||
border: 0;
|
.component-container {
|
||||||
height: 100%;
|
grid-row-start: middle;
|
||||||
left: 0;
|
grid-column-start: middle;
|
||||||
position: absolute;
|
position: relative;
|
||||||
top: 0;
|
overflow: hidden;
|
||||||
width: 100%;
|
padding-top: 56.25%;
|
||||||
}
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.component-container iframe {
|
||||||
|
border: 0;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -71,9 +71,9 @@
|
||||||
handlerChanged(handlerType.name, defaultParams)
|
handlerChanged(handlerType.name, defaultParams)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onParameterChanged = index => value => {
|
const onParameterChanged = index => e => {
|
||||||
const newParams = [...parameters]
|
const newParams = [...parameters]
|
||||||
newParams[index].value = value
|
newParams[index].value = e.target.value
|
||||||
handlerChanged(handlerType, newParams)
|
handlerChanged(handlerType, newParams)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -93,9 +93,10 @@
|
||||||
{#each parameters as param, idx}
|
{#each parameters as param, idx}
|
||||||
<div class="handler-option">
|
<div class="handler-option">
|
||||||
<span>{param.name}</span>
|
<span>{param.name}</span>
|
||||||
<StateBindingControl
|
<input
|
||||||
onChanged={onParameterChanged(idx)}
|
on:change={onParameterChanged(idx)}
|
||||||
value={param.value} />
|
value={param.value}
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,188 @@
|
||||||
|
<script>
|
||||||
|
import { ArrowDownIcon } from "../common/Icons/";
|
||||||
|
import { store } from "../builderStore";
|
||||||
|
import { isBinding, getBinding, setBinding } from "../common/binding";
|
||||||
|
|
||||||
|
export let value = "";
|
||||||
|
export let onChanged = () => {};
|
||||||
|
export let type = "";
|
||||||
|
|
||||||
|
let isOpen = false;
|
||||||
|
let stateBindings = [];
|
||||||
|
|
||||||
|
let isBound = false;
|
||||||
|
let bindingPath = "";
|
||||||
|
let bindingFallbackValue = "";
|
||||||
|
let bindingSource = "store";
|
||||||
|
let isExpanded = false;
|
||||||
|
let forceIsBound = false;
|
||||||
|
let canOnlyBind = false;
|
||||||
|
|
||||||
|
$: {
|
||||||
|
canOnlyBind = type === "state";
|
||||||
|
if (!forceIsBound && canOnlyBind) forceIsBound = true;
|
||||||
|
|
||||||
|
isBound = forceIsBound || isBinding(value);
|
||||||
|
|
||||||
|
if (isBound) {
|
||||||
|
const binding = getBinding(value);
|
||||||
|
bindingPath = binding.path;
|
||||||
|
bindingFallbackValue = binding.fallback;
|
||||||
|
bindingSource = binding.source || "store";
|
||||||
|
} else {
|
||||||
|
bindingPath = "";
|
||||||
|
bindingFallbackValue = "";
|
||||||
|
bindingSource = "store";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearBinding = () => {
|
||||||
|
forceIsBound = false;
|
||||||
|
onChanged("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const bind = (path, fallback, source) => {
|
||||||
|
if (!path) {
|
||||||
|
clearBinding("");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const binding = setBinding({ path, fallback, source });
|
||||||
|
onChanged(binding);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setBindingPath = value => {
|
||||||
|
forceIsBound = canOnlyBind;
|
||||||
|
bind(value, bindingFallbackValue, bindingSource);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setBindingFallback = value => bind(bindingPath, value, bindingSource);
|
||||||
|
|
||||||
|
const setBindingSource = value =>
|
||||||
|
bind(bindingPath, bindingFallbackValue, value);
|
||||||
|
|
||||||
|
$: {
|
||||||
|
console.log({
|
||||||
|
bindingFallbackValue,
|
||||||
|
bindingPath,
|
||||||
|
value
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentScreen = $store.screens.find(
|
||||||
|
({ name }) => name === $store.currentFrontEndItem.name
|
||||||
|
);
|
||||||
|
stateBindings = currentScreen ? currentScreen.stateOrigins : [];
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="cascader">
|
||||||
|
<div class="input-box">
|
||||||
|
<input
|
||||||
|
class="uk-input uk-form-small"
|
||||||
|
value={bindingFallbackValue}
|
||||||
|
on:change={e => {
|
||||||
|
setBindingFallback(e.target.value)
|
||||||
|
}}/>
|
||||||
|
<button on:click={() => (isOpen = !isOpen)}>
|
||||||
|
<span
|
||||||
|
class="icon"
|
||||||
|
style={`
|
||||||
|
transform: rotate(${isOpen ? 0 : 90}deg);
|
||||||
|
color: ${bindingPath ? 'rgba(0, 85, 255, 0.8)' : 'inherit'}
|
||||||
|
`}>
|
||||||
|
<ArrowDownIcon size={36} />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{#if isOpen}
|
||||||
|
<ul class="options">
|
||||||
|
{#each Object.keys(stateBindings) as stateBinding}
|
||||||
|
<li
|
||||||
|
style={`font-weight: ${stateBinding === bindingPath ? 'bold' : 'initial'}`}
|
||||||
|
on:click={() => {
|
||||||
|
setBindingPath(stateBinding === bindingPath ? null : stateBinding);
|
||||||
|
}}>
|
||||||
|
{stateBinding}
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(249, 249, 249, 1);
|
||||||
|
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(22, 48, 87, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cascader {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
width: 172px;
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 35px;
|
||||||
|
padding: 10px;
|
||||||
|
z-index: 1;
|
||||||
|
background: rgba(249, 249, 249, 1);
|
||||||
|
min-height: 50px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
transition: 0.2s all;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin-right: 5px;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
border-radius: 2px;
|
||||||
|
opacity: 0.5;
|
||||||
|
height: 40px;
|
||||||
|
/* display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #163057;
|
||||||
|
line-height: 1.3;
|
||||||
|
padding: 1em 2.6em 0.9em 1.4em;
|
||||||
|
/* width: 100%; */
|
||||||
|
/* max-width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
height: 50px; */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,139 +1,49 @@
|
||||||
<script>
|
<script>
|
||||||
import IconButton from "../common/IconButton.svelte"
|
import IconButton from "../common/IconButton.svelte"
|
||||||
import Input from "../common/Input.svelte"
|
import Input from "../common/Input.svelte"
|
||||||
|
import PropertyCascader from "./PropertyCascader.svelte"
|
||||||
import { isBinding, getBinding, setBinding } from "../common/binding"
|
import { isBinding, getBinding, setBinding } from "../common/binding"
|
||||||
|
|
||||||
export let value = ""
|
export let value = ""
|
||||||
export let onChanged = () => {}
|
export let onChanged = () => {}
|
||||||
export let type = ""
|
export let type = ""
|
||||||
export let options = []
|
export let options = []
|
||||||
|
|
||||||
let isBound = false
|
|
||||||
let bindingPath = ""
|
|
||||||
let bindingFallbackValue = ""
|
|
||||||
let bindingSource = "store"
|
|
||||||
let isExpanded = false
|
|
||||||
let forceIsBound = false
|
|
||||||
let canOnlyBind = false
|
|
||||||
|
|
||||||
$: {
|
|
||||||
canOnlyBind = type === "state"
|
|
||||||
if (!forceIsBound && canOnlyBind) forceIsBound = true
|
|
||||||
|
|
||||||
isBound = forceIsBound || isBinding(value)
|
|
||||||
|
|
||||||
if (isBound) {
|
|
||||||
const binding = getBinding(value)
|
|
||||||
bindingPath = binding.path
|
|
||||||
bindingFallbackValue = binding.fallback
|
|
||||||
bindingSource = binding.source || "store"
|
|
||||||
} else {
|
|
||||||
bindingPath = ""
|
|
||||||
bindingFallbackValue = ""
|
|
||||||
bindingSource = "store"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const clearBinding = () => {
|
|
||||||
forceIsBound = false
|
|
||||||
onChanged("")
|
|
||||||
}
|
|
||||||
|
|
||||||
const bind = (path, fallback, source) => {
|
|
||||||
if (!path) {
|
|
||||||
clearBinding("")
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const binding = setBinding({ path, fallback, source })
|
|
||||||
onChanged(binding)
|
|
||||||
}
|
|
||||||
|
|
||||||
const setBindingPath = ev => {
|
|
||||||
forceIsBound = canOnlyBind
|
|
||||||
bind(ev.target.value, bindingFallbackValue, bindingSource)
|
|
||||||
}
|
|
||||||
|
|
||||||
const setBindingFallback = ev => {
|
|
||||||
bind(bindingPath, ev.target.value, bindingSource)
|
|
||||||
}
|
|
||||||
|
|
||||||
const setBindingSource = ev => {
|
|
||||||
bind(bindingPath, bindingFallbackValue, ev.target.value)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if isBound}
|
<div class="unbound-container">
|
||||||
<div>
|
{#if type === 'bool'}
|
||||||
<div class="bound-header">
|
<div>
|
||||||
<div>{isExpanded ? '' : bindingPath}</div>
|
|
||||||
<IconButton
|
<IconButton
|
||||||
icon={isExpanded ? 'chevron-up' : 'chevron-down'}
|
icon={value == true ? 'check-square' : 'square'}
|
||||||
size="12"
|
size="19"
|
||||||
on:click={() => (isExpanded = !isExpanded)} />
|
on:click={() => onChanged(!value)} />
|
||||||
{#if !canOnlyBind}
|
|
||||||
<IconButton icon="trash" size="12" on:click={clearBinding} />
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
{#if isExpanded}
|
{:else if type === 'options'}
|
||||||
<div>
|
<select
|
||||||
<div class="binding-prop-label">Binding Path</div>
|
class="uk-select uk-form-small"
|
||||||
<input
|
{value}
|
||||||
class="uk-input uk-form-small"
|
on:change={ev => onChanged(ev.target.value)}>
|
||||||
value={bindingPath}
|
{#each options as option}
|
||||||
on:change={setBindingPath} />
|
<option value={option}>{option}</option>
|
||||||
<div class="binding-prop-label">Fallback Value</div>
|
{/each}
|
||||||
<input
|
</select>
|
||||||
class="uk-input uk-form-small"
|
{:else}
|
||||||
value={bindingFallbackValue}
|
<PropertyCascader
|
||||||
on:change={setBindingFallback} />
|
{onChanged}
|
||||||
<div class="binding-prop-label">Binding Source</div>
|
{type}
|
||||||
<select
|
on:change={ev => onChanged(ev.target.value)}
|
||||||
class="uk-select uk-form-small"
|
/>
|
||||||
value={bindingSource}
|
{/if}
|
||||||
on:change={setBindingSource}>
|
</div>
|
||||||
|
|
||||||
<option>store</option>
|
|
||||||
<option>context</option>
|
|
||||||
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="unbound-container">
|
|
||||||
|
|
||||||
{#if type === 'bool'}
|
|
||||||
<div>
|
|
||||||
<IconButton
|
|
||||||
icon={value == true ? 'check-square' : 'square'}
|
|
||||||
size="19"
|
|
||||||
on:click={() => onChanged(!value)} />
|
|
||||||
</div>
|
|
||||||
{:else if type === 'options'}
|
|
||||||
<select
|
|
||||||
class="uk-select uk-form-small"
|
|
||||||
{value}
|
|
||||||
on:change={ev => onChanged(ev.target.value)}>
|
|
||||||
{#each options as option}
|
|
||||||
<option value={option}>{option}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{:else}
|
|
||||||
<Input on:change={ev => onChanged(ev.target.value)} bind:value />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.unbound-container {
|
.unbound-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bound-header {
|
/* .bound-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
} */
|
||||||
|
|
||||||
.bound-header > div:nth-child(1) {
|
.bound-header > div:nth-child(1) {
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
|
|
@ -142,7 +52,7 @@
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.binding-prop-label {
|
/* .binding-prop-label {
|
||||||
color: var(--secondary50);
|
color: var(--secondary50);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -156,5 +66,5 @@
|
||||||
border: 1px solid #dbdbdb;
|
border: 1px solid #dbdbdb;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
} */
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -146,6 +146,7 @@ export const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
newProps[boundHandler.propName] = async context => {
|
newProps[boundHandler.propName] = async context => {
|
||||||
|
console.log(closuredHandlers);
|
||||||
for (let runHandler of closuredHandlers) {
|
for (let runHandler of closuredHandlers) {
|
||||||
await runHandler(context)
|
await runHandler(context)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -8,7 +8,7 @@
|
||||||
"build": "cd appPackages/_master && yarn && cd ../testApp && yarn && cd ../testApp2 && yarn",
|
"build": "cd appPackages/_master && yarn && cd ../testApp && yarn && cd ../testApp2 && yarn",
|
||||||
"initialise": "node ./initialise/initialiseBudibase init -d ./myapps -c contributors -u admin -p admin",
|
"initialise": "node ./initialise/initialiseBudibase init -d ./myapps -c contributors -u admin -p admin",
|
||||||
"budi": "node ../cli/bin/budi",
|
"budi": "node ../cli/bin/budi",
|
||||||
"dev:builder": "nodemon index"
|
"dev:builder": "node index"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"budibase"
|
"budibase"
|
||||||
|
|
|
||||||
|
|
@ -139,4 +139,73 @@ const getComponents = async (appPath, pages, lib) => {
|
||||||
return { components, generators }
|
return { components, generators }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* buildStateOrigins
|
||||||
|
*
|
||||||
|
* Builds an object that details all the bound state in the application, and what updates it.
|
||||||
|
*
|
||||||
|
* @param screenDefinition - the screen definition metadata.
|
||||||
|
* @returns {Object} an object with the client state values and how they are managed.
|
||||||
|
*/
|
||||||
|
const buildStateOrigins = screenDefinition => {
|
||||||
|
const origins = {};
|
||||||
|
|
||||||
|
function traverse(propValue) {
|
||||||
|
for (let key in propValue) {
|
||||||
|
if (!Array.isArray(propValue[key])) continue;
|
||||||
|
|
||||||
|
if (key === "_children") propValue[key].forEach(traverse);
|
||||||
|
|
||||||
|
for (let element of propValue[key]) {
|
||||||
|
if (element["##eventHandlerType"] === "Set State") origins[element.parameters.path] = element;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
traverse(screenDefinition.props);
|
||||||
|
|
||||||
|
return origins;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchscreens = async (appPath, relativePath = "") => {
|
||||||
|
const currentDir = join(appPath, "components", relativePath)
|
||||||
|
|
||||||
|
const contents = await readdir(currentDir)
|
||||||
|
|
||||||
|
const components = []
|
||||||
|
|
||||||
|
for (let item of contents) {
|
||||||
|
const itemRelativePath = join(relativePath, item)
|
||||||
|
const itemFullPath = join(currentDir, item)
|
||||||
|
const stats = await stat(itemFullPath)
|
||||||
|
|
||||||
|
if (stats.isFile()) {
|
||||||
|
if (!item.endsWith(".json")) continue
|
||||||
|
|
||||||
|
const component = await readJSON(itemFullPath)
|
||||||
|
|
||||||
|
component.name = itemRelativePath
|
||||||
|
.substring(0, itemRelativePath.length - 5)
|
||||||
|
.replace(/\\/g, "/")
|
||||||
|
|
||||||
|
component.props = component.props || {}
|
||||||
|
|
||||||
|
component.stateOrigins = buildStateOrigins(component);
|
||||||
|
|
||||||
|
components.push(component)
|
||||||
|
} else {
|
||||||
|
const childComponents = await fetchscreens(
|
||||||
|
appPath,
|
||||||
|
join(relativePath, item)
|
||||||
|
)
|
||||||
|
|
||||||
|
for (let c of childComponents) {
|
||||||
|
components.push(c)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return components
|
||||||
|
}
|
||||||
|
|
||||||
module.exports.getComponents = getComponents
|
module.exports.getComponents = getComponents
|
||||||
|
|
|
||||||
|
|
@ -63,6 +63,7 @@
|
||||||
"name": "Input",
|
"name": "Input",
|
||||||
"description": "An HTML input",
|
"description": "An HTML input",
|
||||||
"props" : {
|
"props" : {
|
||||||
|
"onChange": "event",
|
||||||
"value": "string",
|
"value": "string",
|
||||||
"type": {
|
"type": {
|
||||||
"type":"options",
|
"type":"options",
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue