budibase/packages/builder/src/components/userInterface/PropertyControl.svelte

147 lines
3.6 KiB
Svelte
Raw Normal View History

2020-05-07 15:30:04 +02:00
<script>
import { store, backendUiStore } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
2020-08-12 17:30:20 +02:00
import { DropdownMenu } from "@budibase/bbui"
import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
2020-05-18 17:32:00 +02:00
import { onMount, getContext } from "svelte"
2020-05-07 15:30:04 +02:00
export let label = ""
export let control = null
export let key = ""
2020-05-21 15:28:32 +02:00
export let value
2020-05-07 15:30:04 +02:00
export let props = {}
export let onChange = () => {}
let bindableProperties
2020-08-12 17:30:20 +02:00
let anchor
let dropdown
$: console.log()
async function getBindableProperties() {
// Get all bindableProperties
bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
components: $store.components,
screen: $store.currentPreviewItem,
models: $backendUiStore.models,
})
}
async function replaceBindings(val) {
getBindableProperties()
// Find all instances of mustasche
const boundValues = val.match(/{{([^}]+)}}/g)
// Replace with names:
2020-08-25 10:15:51 +02:00
boundValues &&
boundValues.forEach(v => {
const binding = bindableProperties.find(({ readableBinding }) => {
return v === `{{ ${readableBinding} }}`
})
if (binding) {
val = val.replace(v, `{{ ${binding.runtimeBinding} }}`)
}
})
onChange(key, val)
}
function handleChange(key, v) {
2020-07-26 12:54:55 +02:00
let innerVal = v
if (typeof v === "object") {
if ("detail" in v) {
innerVal = v.detail
} else if ("target" in v) {
innerVal = props.valueKey ? v.target[props.valueKey] : v.target.value
}
2020-05-20 12:55:25 +02:00
}
replaceBindings(innerVal)
}
2020-05-25 16:23:56 +02:00
const safeValue = () => {
getBindableProperties()
let temp = value
2020-08-25 10:15:51 +02:00
const boundValues = (value && value.match(/{{([^}]+)}}/g)) || []
console.log(boundValues)
// Replace with names:
boundValues.forEach(v => {
const { readableBinding } = bindableProperties.find(
({ runtimeBinding }) => {
return v === `{{ ${runtimeBinding} }}`
}
)
if (readableBinding) {
temp = temp.replace(v, `{{ ${readableBinding} }}`)
}
})
// console.log(temp)
2020-05-25 16:23:56 +02:00
return value === undefined && props.defaultValue !== undefined
? props.defaultValue
: temp
2020-05-25 16:23:56 +02:00
}
2020-05-21 15:28:32 +02:00
//Incase the component has a different value key name
const handlevalueKey = value =>
2020-05-25 16:23:56 +02:00
props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
2020-05-07 15:30:04 +02:00
</script>
<div class="property-control" bind:this={anchor}>
2020-05-07 15:30:04 +02:00
<div class="label">{label}</div>
<div data-cy={`${key}-prop-control`} class="control">
2020-05-07 15:30:04 +02:00
<svelte:component
this={control}
2020-05-21 15:28:32 +02:00
{...handlevalueKey(value)}
on:change={val => handleChange(key, val)}
onChange={val => handleChange(key, val)}
{...props}
name={key} />
2020-05-07 15:30:04 +02:00
</div>
<button on:click={dropdown.show}>O</button>
2020-05-07 15:30:04 +02:00
</div>
2020-08-12 17:30:20 +02:00
<DropdownMenu bind:this={dropdown} {anchor} align="right">
2020-08-25 10:15:51 +02:00
<BindingDropdown
{...handlevalueKey(value)}
on:update={e => handleChange(key, e.detail)}
{bindableProperties} />
2020-08-12 17:30:20 +02:00
</DropdownMenu>
2020-05-07 15:30:04 +02:00
<style>
.property-control {
position: relative;
2020-05-07 15:30:04 +02:00
display: flex;
flex-flow: row;
2020-08-05 15:19:56 +02:00
width: 260px;
2020-05-07 15:30:04 +02:00
margin: 8px 0px;
align-items: center;
2020-05-07 15:30:04 +02:00
}
.label {
2020-05-28 17:24:53 +02:00
display: flex;
align-items: center;
2020-05-07 15:30:04 +02:00
font-size: 12px;
font-weight: 400;
2020-08-05 15:19:56 +02:00
width: 100px;
2020-05-07 15:30:04 +02:00
text-align: left;
color: var(--ink);
margin-right: auto;
text-transform: capitalize;
2020-05-07 15:30:04 +02:00
}
.control {
flex: 1;
display: flex;
padding-left: 2px;
max-width: 164px;
2020-05-07 15:30:04 +02:00
}
button {
position: absolute;
background: none;
border: none;
right: 0px;
top: 0;
bottom: 0;
}
2020-05-07 15:30:04 +02:00
</style>