MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2022-03-15 11:16:51 +00:00
parent 0cb3e5d98d
commit 2d33b1195e
10 changed files with 344 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/builder/src/builderStore/dataBinding.js
View File

@ -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
}

4
packages/builder/src/builderStore/store/theme.js
View File

@ -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")
})
})

5
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte
View File

@ -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
)

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte
View File

@ -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>

1
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View File

@ -79,6 +79,7 @@
bindings={allBindings}
name={key}
text={label}
{key}
{type}
{...props}
/>

439
packages/client/manifest.json
View File

@ -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",

35
packages/client/src/components/Component.svelte
View File

@ -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) {

15
packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
View File

@ -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]
})
}

8
packages/client/src/utils/buttonActions.js
View File

@ -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]

6
packages/client/src/utils/componentProps.js
View File

@ -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(