Add event context to button actions to allow passing in params at run time and add corresponding data bindings
This commit is contained in:
Andrew Kingston
parent
4d01063383
commit
9500203515
|
|
@ -393,18 +393,45 @@ const getUrlBindings = asset => {
|
|||
|
||||
/**
|
||||
* Gets all bindable properties exposed in a button actions flow up until
|
||||
* the specified action ID.
|
||||
* the specified action ID, as well as context provided for the action
|
||||
* setting as a whole by the component.
|
||||
*/
|
||||
export const getButtonContextBindings = (actions, actionId) => {
|
||||
export const getButtonContextBindings = (
|
||||
asset,
|
||||
componentId,
|
||||
settingKey,
|
||||
actions,
|
||||
actionId
|
||||
) => {
|
||||
let bindings = []
|
||||
|
||||
// Check if any context bindings are provided by the component for this
|
||||
// setting
|
||||
const component = findComponent(asset.props, componentId)
|
||||
const settings = getComponentSettings(component?._component)
|
||||
const eventSetting = settings.find(setting => setting.key === settingKey)
|
||||
if (!eventSetting) {
|
||||
return bindings
|
||||
}
|
||||
if (eventSetting.context?.length) {
|
||||
eventSetting.context.forEach(contextEntry => {
|
||||
bindings.push({
|
||||
readableBinding: contextEntry.label,
|
||||
runtimeBinding: `${makePropSafe("eventContext")}.${makePropSafe(
|
||||
contextEntry.key
|
||||
)}`,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Get the steps leading up to this value
|
||||
const index = actions?.findIndex(action => action.id === actionId)
|
||||
if (index == null || index === -1) {
|
||||
return []
|
||||
return bindings
|
||||
}
|
||||
const prevActions = actions.slice(0, index)
|
||||
|
||||
// Generate bindings for any steps which provide context
|
||||
let bindings = []
|
||||
prevActions.forEach((action, idx) => {
|
||||
const def = ActionDefinitions.actions.find(
|
||||
x => x.name === action["##eventHandlerType"]
|
||||
|
|
@ -418,6 +445,7 @@ export const getButtonContextBindings = (actions, actionId) => {
|
|||
})
|
||||
}
|
||||
})
|
||||
|
||||
return bindings
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@ import { createLocalStorageStore } from "@budibase/frontend-core"
|
|||
|
||||
export const getThemeStore = () => {
|
||||
const themeElement = document.documentElement
|
||||
|
||||
const initialValue = {
|
||||
theme: "darkest",
|
||||
options: ["lightest", "light", "dark", "darkest"],
|
||||
options: ["lightest", "light", "dark", "darkest", "nord"],
|
||||
}
|
||||
const store = createLocalStorageStore("bb-theme", initialValue)
|
||||
|
||||
|
|
@ -21,6 +22,7 @@ export const getThemeStore = () => {
|
|||
`spectrum--${option}`,
|
||||
option === state.theme
|
||||
)
|
||||
themeElement.classList.add("spectrum--darkest")
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -12,11 +12,13 @@
|
|||
import { getAvailableActions } from "./index"
|
||||
import { generate } from "shortid"
|
||||
import { getButtonContextBindings } from "builderStore/dataBinding"
|
||||
import { currentAsset, store } from "builderStore"
|
||||
|
||||
const flipDurationMs = 150
|
||||
const EVENT_TYPE_KEY = "##eventHandlerType"
|
||||
const actionTypes = getAvailableActions()
|
||||
|
||||
export let key
|
||||
export let actions
|
||||
export let bindings = []
|
||||
|
||||
|
|
@ -24,6 +26,9 @@
|
|||
|
||||
// These are ephemeral bindings which only exist while executing actions
|
||||
$: buttonContextBindings = getButtonContextBindings(
|
||||
$currentAsset,
|
||||
$store.selectedComponentId,
|
||||
key,
|
||||
actions,
|
||||
selectedAction?.id
|
||||
)
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let key
|
||||
export let value = []
|
||||
export let name
|
||||
export let bindings
|
||||
|
|
@ -81,5 +82,6 @@
|
|||
bind:actions={tmpValue}
|
||||
eventType={name}
|
||||
{bindings}
|
||||
{key}
|
||||
/>
|
||||
</Drawer>
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@
|
|||
bindings={allBindings}
|
||||
name={key}
|
||||
text={label}
|
||||
{key}
|
||||
{type}
|
||||
{...props}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -264,7 +264,8 @@
|
|||
{
|
||||
"label": "Primary",
|
||||
"value": "primary"
|
||||
}, {
|
||||
},
|
||||
{
|
||||
"label": "Secondary",
|
||||
"value": "secondary"
|
||||
},
|
||||
|
|
@ -507,7 +508,7 @@
|
|||
},
|
||||
{
|
||||
"type": "static",
|
||||
"values": [
|
||||
"values": [
|
||||
{
|
||||
"label": "Row Index",
|
||||
"key": "index"
|
||||
|
|
@ -626,28 +627,36 @@
|
|||
"defaultValue": "M",
|
||||
"showInBar": true,
|
||||
"barStyle": "picker",
|
||||
"options": [{
|
||||
"label": "Extra Small",
|
||||
"value": "XS"
|
||||
}, {
|
||||
"label": "Small",
|
||||
"value": "S"
|
||||
}, {
|
||||
"label": "Medium",
|
||||
"value": "M"
|
||||
}, {
|
||||
"label": "Large",
|
||||
"value": "L"
|
||||
}, {
|
||||
"label": "Extra Large",
|
||||
"value": "XL"
|
||||
}, {
|
||||
"label": "2XL",
|
||||
"value": "XXL"
|
||||
}, {
|
||||
"label": "3XL",
|
||||
"value": "XXXL"
|
||||
}]
|
||||
"options": [
|
||||
{
|
||||
"label": "Extra Small",
|
||||
"value": "XS"
|
||||
},
|
||||
{
|
||||
"label": "Small",
|
||||
"value": "S"
|
||||
},
|
||||
{
|
||||
"label": "Medium",
|
||||
"value": "M"
|
||||
},
|
||||
{
|
||||
"label": "Large",
|
||||
"value": "L"
|
||||
},
|
||||
{
|
||||
"label": "Extra Large",
|
||||
"value": "XL"
|
||||
},
|
||||
{
|
||||
"label": "2XL",
|
||||
"value": "XXL"
|
||||
},
|
||||
{
|
||||
"label": "3XL",
|
||||
"value": "XXXL"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
|
|
@ -689,27 +698,32 @@
|
|||
"defaultValue": "left",
|
||||
"showInBar": true,
|
||||
"barStyle": "buttons",
|
||||
"options": [{
|
||||
"label": "Left",
|
||||
"value": "left",
|
||||
"barIcon": "TextAlignLeft",
|
||||
"barTitle": "Align left"
|
||||
}, {
|
||||
"label": "Center",
|
||||
"value": "center",
|
||||
"barIcon": "TextAlignCenter",
|
||||
"barTitle": "Align center"
|
||||
}, {
|
||||
"label": "Right",
|
||||
"value": "right",
|
||||
"barIcon": "TextAlignRight",
|
||||
"barTitle": "Align right"
|
||||
}, {
|
||||
"label": "Justify",
|
||||
"value": "justify",
|
||||
"barIcon": "TextAlignJustify",
|
||||
"barTitle": "Justify text"
|
||||
}]
|
||||
"options": [
|
||||
{
|
||||
"label": "Left",
|
||||
"value": "left",
|
||||
"barIcon": "TextAlignLeft",
|
||||
"barTitle": "Align left"
|
||||
},
|
||||
{
|
||||
"label": "Center",
|
||||
"value": "center",
|
||||
"barIcon": "TextAlignCenter",
|
||||
"barTitle": "Align center"
|
||||
},
|
||||
{
|
||||
"label": "Right",
|
||||
"value": "right",
|
||||
"barIcon": "TextAlignRight",
|
||||
"barTitle": "Align right"
|
||||
},
|
||||
{
|
||||
"label": "Justify",
|
||||
"value": "justify",
|
||||
"barIcon": "TextAlignJustify",
|
||||
"barTitle": "Justify text"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -733,28 +747,36 @@
|
|||
"defaultValue": "M",
|
||||
"showInBar": true,
|
||||
"barStyle": "picker",
|
||||
"options": [{
|
||||
"label": "Extra Small",
|
||||
"value": "XS"
|
||||
}, {
|
||||
"label": "Small",
|
||||
"value": "S"
|
||||
}, {
|
||||
"label": "Medium",
|
||||
"value": "M"
|
||||
}, {
|
||||
"label": "Large",
|
||||
"value": "L"
|
||||
}, {
|
||||
"label": "Extra Large",
|
||||
"value": "XL"
|
||||
}, {
|
||||
"label": "2XL",
|
||||
"value": "XXL"
|
||||
}, {
|
||||
"label": "3XL",
|
||||
"value": "XXXL"
|
||||
}]
|
||||
"options": [
|
||||
{
|
||||
"label": "Extra Small",
|
||||
"value": "XS"
|
||||
},
|
||||
{
|
||||
"label": "Small",
|
||||
"value": "S"
|
||||
},
|
||||
{
|
||||
"label": "Medium",
|
||||
"value": "M"
|
||||
},
|
||||
{
|
||||
"label": "Large",
|
||||
"value": "L"
|
||||
},
|
||||
{
|
||||
"label": "Extra Large",
|
||||
"value": "XL"
|
||||
},
|
||||
{
|
||||
"label": "2XL",
|
||||
"value": "XXL"
|
||||
},
|
||||
{
|
||||
"label": "3XL",
|
||||
"value": "XXXL"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
|
|
@ -796,27 +818,32 @@
|
|||
"defaultValue": "left",
|
||||
"showInBar": true,
|
||||
"barStyle": "buttons",
|
||||
"options": [{
|
||||
"label": "Left",
|
||||
"value": "left",
|
||||
"barIcon": "TextAlignLeft",
|
||||
"barTitle": "Align left"
|
||||
}, {
|
||||
"label": "Center",
|
||||
"value": "center",
|
||||
"barIcon": "TextAlignCenter",
|
||||
"barTitle": "Align center"
|
||||
}, {
|
||||
"label": "Right",
|
||||
"value": "right",
|
||||
"barIcon": "TextAlignRight",
|
||||
"barTitle": "Align right"
|
||||
}, {
|
||||
"label": "Justify",
|
||||
"value": "justify",
|
||||
"barIcon": "TextAlignJustify",
|
||||
"barTitle": "Justify text"
|
||||
}]
|
||||
"options": [
|
||||
{
|
||||
"label": "Left",
|
||||
"value": "left",
|
||||
"barIcon": "TextAlignLeft",
|
||||
"barTitle": "Align left"
|
||||
},
|
||||
{
|
||||
"label": "Center",
|
||||
"value": "center",
|
||||
"barIcon": "TextAlignCenter",
|
||||
"barTitle": "Align center"
|
||||
},
|
||||
{
|
||||
"label": "Right",
|
||||
"value": "right",
|
||||
"barIcon": "TextAlignRight",
|
||||
"barTitle": "Align right"
|
||||
},
|
||||
{
|
||||
"label": "Justify",
|
||||
"value": "justify",
|
||||
"barIcon": "TextAlignJustify",
|
||||
"barTitle": "Justify text"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -837,16 +864,20 @@
|
|||
"defaultValue": "M",
|
||||
"showInBar": true,
|
||||
"barStyle": "picker",
|
||||
"options": [{
|
||||
"label": "Small",
|
||||
"value": "S"
|
||||
}, {
|
||||
"label": "Medium",
|
||||
"value": "M"
|
||||
}, {
|
||||
"label": "Large",
|
||||
"value": "L"
|
||||
}]
|
||||
"options": [
|
||||
{
|
||||
"label": "Small",
|
||||
"value": "S"
|
||||
},
|
||||
{
|
||||
"label": "Medium",
|
||||
"value": "M"
|
||||
},
|
||||
{
|
||||
"label": "Large",
|
||||
"value": "L"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
|
|
@ -1037,16 +1068,20 @@
|
|||
"defaultValue": "M",
|
||||
"showInBar": true,
|
||||
"barStyle": "picker",
|
||||
"options": [{
|
||||
"label": "Small",
|
||||
"value": "S"
|
||||
}, {
|
||||
"label": "Medium",
|
||||
"value": "M"
|
||||
}, {
|
||||
"label": "Large",
|
||||
"value": "L"
|
||||
}]
|
||||
"options": [
|
||||
{
|
||||
"label": "Small",
|
||||
"value": "S"
|
||||
},
|
||||
{
|
||||
"label": "Medium",
|
||||
"value": "M"
|
||||
},
|
||||
{
|
||||
"label": "Large",
|
||||
"value": "L"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
|
|
@ -1088,27 +1123,32 @@
|
|||
"defaultValue": "left",
|
||||
"showInBar": true,
|
||||
"barStyle": "buttons",
|
||||
"options": [{
|
||||
"label": "Left",
|
||||
"value": "left",
|
||||
"barIcon": "TextAlignLeft",
|
||||
"barTitle": "Align left"
|
||||
}, {
|
||||
"label": "Center",
|
||||
"value": "center",
|
||||
"barIcon": "TextAlignCenter",
|
||||
"barTitle": "Align center"
|
||||
}, {
|
||||
"label": "Right",
|
||||
"value": "right",
|
||||
"barIcon": "TextAlignRight",
|
||||
"barTitle": "Align right"
|
||||
}, {
|
||||
"label": "Justify",
|
||||
"value": "justify",
|
||||
"barIcon": "TextAlignJustify",
|
||||
"barTitle": "Justify text"
|
||||
}]
|
||||
"options": [
|
||||
{
|
||||
"label": "Left",
|
||||
"value": "left",
|
||||
"barIcon": "TextAlignLeft",
|
||||
"barTitle": "Align left"
|
||||
},
|
||||
{
|
||||
"label": "Center",
|
||||
"value": "center",
|
||||
"barIcon": "TextAlignCenter",
|
||||
"barTitle": "Align center"
|
||||
},
|
||||
{
|
||||
"label": "Right",
|
||||
"value": "right",
|
||||
"barIcon": "TextAlignRight",
|
||||
"barTitle": "Align right"
|
||||
},
|
||||
{
|
||||
"label": "Justify",
|
||||
"value": "justify",
|
||||
"barIcon": "TextAlignJustify",
|
||||
"barTitle": "Justify text"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -1165,7 +1205,15 @@
|
|||
"type": "select",
|
||||
"label": "Card Width",
|
||||
"key": "cardWidth",
|
||||
"options": ["24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%"],
|
||||
"options": [
|
||||
"24rem",
|
||||
"28rem",
|
||||
"32rem",
|
||||
"40rem",
|
||||
"48rem",
|
||||
"60rem",
|
||||
"100%"
|
||||
],
|
||||
"defaultValue": "32rem"
|
||||
},
|
||||
{
|
||||
|
|
@ -1785,11 +1833,7 @@
|
|||
"icon": "Form",
|
||||
"hasChildren": true,
|
||||
"illegalChildren": ["section", "form"],
|
||||
"actions": [
|
||||
"ValidateForm",
|
||||
"ClearForm",
|
||||
"ChangeFormStep"
|
||||
],
|
||||
"actions": ["ValidateForm", "ClearForm", "ChangeFormStep"],
|
||||
"styles": ["size"],
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -1816,7 +1860,8 @@
|
|||
{
|
||||
"label": "Medium",
|
||||
"value": "spectrum--medium"
|
||||
}, {
|
||||
},
|
||||
{
|
||||
"label": "Large",
|
||||
"value": "spectrum--large"
|
||||
}
|
||||
|
|
@ -1833,7 +1878,7 @@
|
|||
"context": [
|
||||
{
|
||||
"type": "static",
|
||||
"values": [
|
||||
"values": [
|
||||
{
|
||||
"label": "Value",
|
||||
"key": "__value"
|
||||
|
|
@ -1947,27 +1992,32 @@
|
|||
"defaultValue": "left",
|
||||
"showInBar": true,
|
||||
"barStyle": "buttons",
|
||||
"options": [{
|
||||
"label": "Left",
|
||||
"value": "left",
|
||||
"barIcon": "TextAlignLeft",
|
||||
"barTitle": "Align left"
|
||||
}, {
|
||||
"label": "Center",
|
||||
"value": "center",
|
||||
"barIcon": "TextAlignCenter",
|
||||
"barTitle": "Align center"
|
||||
}, {
|
||||
"label": "Right",
|
||||
"value": "right",
|
||||
"barIcon": "TextAlignRight",
|
||||
"barTitle": "Align right"
|
||||
}, {
|
||||
"label": "Justify",
|
||||
"value": "justify",
|
||||
"barIcon": "TextAlignJustify",
|
||||
"barTitle": "Justify text"
|
||||
}]
|
||||
"options": [
|
||||
{
|
||||
"label": "Left",
|
||||
"value": "left",
|
||||
"barIcon": "TextAlignLeft",
|
||||
"barTitle": "Align left"
|
||||
},
|
||||
{
|
||||
"label": "Center",
|
||||
"value": "center",
|
||||
"barIcon": "TextAlignCenter",
|
||||
"barTitle": "Align center"
|
||||
},
|
||||
{
|
||||
"label": "Right",
|
||||
"value": "right",
|
||||
"barIcon": "TextAlignRight",
|
||||
"barTitle": "Align right"
|
||||
},
|
||||
{
|
||||
"label": "Justify",
|
||||
"value": "justify",
|
||||
"barIcon": "TextAlignJustify",
|
||||
"barTitle": "Justify text"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -2480,15 +2530,42 @@
|
|||
"styles": ["size"],
|
||||
"editable": true,
|
||||
"draggable": false,
|
||||
"illegalChildren": [
|
||||
"section"
|
||||
],
|
||||
"illegalChildren": ["section"],
|
||||
"settings": [
|
||||
{
|
||||
"type": "dataProvider",
|
||||
"label": "Provider",
|
||||
"key": "dataProvider"
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "Latitude Key",
|
||||
"key": "latitudeKey",
|
||||
"dependsOn": "dataProvider"
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "Longitude Key",
|
||||
"key": "longitudeKey",
|
||||
"dependsOn": "dataProvider"
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "Title Key",
|
||||
"key": "titleKey",
|
||||
"dependsOn": "dataProvider"
|
||||
},
|
||||
{
|
||||
"type": "event",
|
||||
"label": "On marker click",
|
||||
"key": "onMarkerClick",
|
||||
"context": [
|
||||
{
|
||||
"label": "Clicked marker",
|
||||
"key": "marker"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "boolean",
|
||||
"label": "Enable Fullscreen",
|
||||
|
|
@ -2512,23 +2589,8 @@
|
|||
"label": "Zoom Level (0-100)",
|
||||
"key": "zoomLevel",
|
||||
"defaultValue": 72,
|
||||
"max" : 100,
|
||||
"min" : 0
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "Latitude Key",
|
||||
"key": "latitudeKey"
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "Longitude Key",
|
||||
"key": "longitudeKey"
|
||||
},
|
||||
{
|
||||
"type": "field",
|
||||
"label": "Title Key",
|
||||
"key": "titleKey"
|
||||
"max": 100,
|
||||
"min": 0
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
|
|
@ -2538,7 +2600,7 @@
|
|||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Default Location (lat,lng)",
|
||||
"label": "Default Location",
|
||||
"key": "defaultLocation",
|
||||
"defaultValue": "51.5072,-0.1276"
|
||||
},
|
||||
|
|
@ -2710,15 +2772,15 @@
|
|||
],
|
||||
"context": {
|
||||
"type": "static",
|
||||
"values": [
|
||||
"values": [
|
||||
{
|
||||
"label": "Rows",
|
||||
"key": "rows"
|
||||
},
|
||||
{
|
||||
"label": "Extra Info",
|
||||
"key": "info"
|
||||
},
|
||||
{
|
||||
"label": "Extra Info",
|
||||
"key": "info"
|
||||
},
|
||||
{
|
||||
"label": "Rows Length",
|
||||
"key": "rowsLength"
|
||||
|
|
@ -3192,7 +3254,6 @@
|
|||
"key": "cardDescription",
|
||||
"label": "Description",
|
||||
"nested": true
|
||||
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
|
|
@ -3457,12 +3518,12 @@
|
|||
{
|
||||
"type": "static",
|
||||
"suffix": "provider",
|
||||
"values": [
|
||||
"values": [
|
||||
{
|
||||
"label": "Rows",
|
||||
"key": "rows"
|
||||
},
|
||||
{
|
||||
{
|
||||
"label": "Extra Info",
|
||||
"key": "info"
|
||||
},
|
||||
|
|
@ -3483,12 +3544,12 @@
|
|||
{
|
||||
"type": "static",
|
||||
"suffix": "repeater",
|
||||
"values": [
|
||||
"values": [
|
||||
{
|
||||
"label": "Row Index",
|
||||
"key": "index"
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "schema",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script context="module">
|
||||
// Cache the definition of settings for each component type
|
||||
let SettingsDefinitionCache = {}
|
||||
let SettingsDefinitionMapCache = {}
|
||||
|
||||
// Cache the settings of each component ID.
|
||||
// This speeds up remounting as well as repeaters.
|
||||
|
|
@ -74,6 +75,8 @@
|
|||
// Component information derived during initialisation
|
||||
let constructor
|
||||
let definition
|
||||
let settingsDefinition
|
||||
let settingsDefinitionMap
|
||||
|
||||
// Set up initial state for each new component instance
|
||||
$: initialise(instance)
|
||||
|
|
@ -118,7 +121,7 @@
|
|||
$: emptyState = empty && showEmptyState
|
||||
|
||||
// Enrich component settings
|
||||
$: enrichComponentSettings($context)
|
||||
$: enrichComponentSettings($context, settingsDefinitionMap)
|
||||
|
||||
// Evaluate conditional UI settings and store any component setting changes
|
||||
// which need to be made. This is broken into 2 lines to avoid svelte
|
||||
|
|
@ -168,12 +171,14 @@
|
|||
}
|
||||
|
||||
// Get the settings definition for this component, and cache it
|
||||
let settingsDefinition
|
||||
if (SettingsDefinitionCache[definition.name]) {
|
||||
settingsDefinition = SettingsDefinitionCache[definition.name]
|
||||
settingsDefinitionMap = SettingsDefinitionMapCache[definition.name]
|
||||
} else {
|
||||
settingsDefinition = getSettingsDefinition(definition)
|
||||
settingsDefinitionMap = getSettingsDefinitionMap(settingsDefinition)
|
||||
SettingsDefinitionCache[definition.name] = settingsDefinition
|
||||
SettingsDefinitionMapCache[definition.name] = settingsDefinitionMap
|
||||
}
|
||||
|
||||
// Parse the instance settings, and cache them
|
||||
|
|
@ -190,7 +195,9 @@
|
|||
dynamicSettings = instanceSettings.dynamicSettings
|
||||
|
||||
// Force an initial enrichment of the new settings
|
||||
enrichComponentSettings(get(context), { force: true })
|
||||
enrichComponentSettings(get(context), settingsDefinitionMap, {
|
||||
force: true,
|
||||
})
|
||||
}
|
||||
|
||||
// Gets the component constructor for the specified component
|
||||
|
|
@ -226,6 +233,14 @@
|
|||
return settings
|
||||
}
|
||||
|
||||
const getSettingsDefinitionMap = settingsDefinition => {
|
||||
let map = {}
|
||||
settingsDefinition?.forEach(setting => {
|
||||
map[setting.key] = setting
|
||||
})
|
||||
return map
|
||||
}
|
||||
|
||||
const getInstanceSettings = (instance, settingsDefinition) => {
|
||||
// Get raw settings
|
||||
let settings = {}
|
||||
|
|
@ -248,7 +263,7 @@
|
|||
} else if (typeof value === "string" && value.includes("{{")) {
|
||||
// Strings can be trivially checked
|
||||
delete newStaticSettings[setting.key]
|
||||
} else if (value[0]?.["##eventHandlerType"] != null) {
|
||||
} else if (setting.type === "event") {
|
||||
// Always treat button actions as dynamic
|
||||
delete newStaticSettings[setting.key]
|
||||
} else if (typeof value === "object") {
|
||||
|
|
@ -273,7 +288,11 @@
|
|||
}
|
||||
|
||||
// Enriches any string component props using handlebars
|
||||
const enrichComponentSettings = (context, options = { force: false }) => {
|
||||
const enrichComponentSettings = (
|
||||
context,
|
||||
settingsDefinitionMap,
|
||||
options = { force: false }
|
||||
) => {
|
||||
const contextChanged = context.key !== lastContextKey
|
||||
if (!contextChanged && !options?.force) {
|
||||
return
|
||||
|
|
@ -285,7 +304,11 @@
|
|||
const enrichmentTime = latestUpdateTime
|
||||
|
||||
// Enrich settings with context
|
||||
const newEnrichedSettings = enrichProps(dynamicSettings, context)
|
||||
const newEnrichedSettings = enrichProps(
|
||||
dynamicSettings,
|
||||
context,
|
||||
settingsDefinitionMap
|
||||
)
|
||||
|
||||
// Abandon this update if a newer update has started
|
||||
if (enrichmentTime !== latestUpdateTime) {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
export let defaultLocation
|
||||
export let tileURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
export let mapAttribution
|
||||
export let onMarkerClick
|
||||
|
||||
const { styleable, notificationStore } = getContext("sdk")
|
||||
const component = getContext("component")
|
||||
|
|
@ -55,7 +56,8 @@
|
|||
dataProvider?.rows,
|
||||
latitudeKey,
|
||||
longitudeKey,
|
||||
titleKey
|
||||
titleKey,
|
||||
onMarkerClick
|
||||
)
|
||||
$: if (typeof mapInstance === "object" && mapMarkers.length > 0) {
|
||||
mapInstance.setZoom(0)
|
||||
|
|
@ -195,7 +197,7 @@
|
|||
maxZoomLevel,
|
||||
}
|
||||
|
||||
const addMapMarkers = (mapInstance, rows, latKey, lngKey, titleKey) => {
|
||||
const addMapMarkers = (mapInstance, rows, latKey, lngKey, titleKey, onClick) => {
|
||||
if (typeof mapInstance !== "object" || !rows || !latKey || !lngKey) {
|
||||
return
|
||||
}
|
||||
|
|
@ -220,6 +222,15 @@
|
|||
direction: "top",
|
||||
offset: [0, -25]
|
||||
}).addTo(mapMarkerGroup)
|
||||
|
||||
if (onClick) {
|
||||
marker.on("click", () => {
|
||||
onClick({
|
||||
marker: row
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
mapMarkers = [...mapMarkers, marker]
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -308,7 +308,7 @@ export const enrichButtonActions = (actions, context) => {
|
|||
let buttonContext = context.actions || []
|
||||
|
||||
const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
|
||||
return async () => {
|
||||
return async eventContext => {
|
||||
for (let i = 0; i < handlers.length; i++) {
|
||||
try {
|
||||
// Skip any non-existent action definitions
|
||||
|
|
@ -317,7 +317,11 @@ export const enrichButtonActions = (actions, context) => {
|
|||
}
|
||||
|
||||
// Built total context for this action
|
||||
const totalContext = { ...context, actions: buttonContext }
|
||||
const totalContext = {
|
||||
...context,
|
||||
actions: buttonContext,
|
||||
eventContext,
|
||||
}
|
||||
|
||||
// Get and enrich this button action with the total context
|
||||
let action = actions[i]
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const propsAreSame = (a, b) => {
|
|||
* Enriches component props.
|
||||
* Data bindings are enriched, and button actions are enriched.
|
||||
*/
|
||||
export const enrichProps = (props, context) => {
|
||||
export const enrichProps = (props, context, settingsDefinitionMap) => {
|
||||
// Create context of all bindings and data contexts
|
||||
// Duplicate the closest context as "data" which the builder requires
|
||||
const totalContext = {
|
||||
|
|
@ -38,7 +38,7 @@ export const enrichProps = (props, context) => {
|
|||
let normalProps = { ...props }
|
||||
let actionProps = {}
|
||||
Object.keys(normalProps).forEach(prop => {
|
||||
if (prop?.toLowerCase().includes("onclick")) {
|
||||
if (settingsDefinitionMap?.[prop]?.type === "event") {
|
||||
actionProps[prop] = normalProps[prop]
|
||||
delete normalProps[prop]
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@ export const enrichProps = (props, context) => {
|
|||
// Conditions
|
||||
if (enrichedProps._conditions?.length) {
|
||||
enrichedProps._conditions.forEach((condition, idx) => {
|
||||
if (condition.setting?.toLowerCase().includes("onclick")) {
|
||||
if (settingsDefinitionMap?.[condition.setting]?.type === "event") {
|
||||
// Use the original condition action value to enrich it to a button
|
||||
// action
|
||||
condition.settingValue = enrichButtonActions(
|
||||
|
|
|
|||
Loading…
Reference in New Issue