Merge pull request #5829 from Budibase/feature/clickable-container

Containers support onClick

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte

@@ -36,7 +36,12 @@
     }
   }
 
-  const canRenderControl = setting => {
+  const canRenderControl = (setting, isScreen) => {
+    // Prevent rendering on click setting for screens
+    if (setting?.type === "event" && isScreen) {
+      return false
+    }
+
     const control = getComponentForSetting(setting)
     if (!control) {
       return false
@@ -87,7 +92,7 @@
       />
     {/if}
     {#each section.settings as setting (setting.key)}
-      {#if canRenderControl(setting)}
+      {#if canRenderControl(setting, isScreen)}
         <PropertyControl
           type={setting.type}
           control={getComponentForSetting(setting)}

packages/client/manifest.json

@@ -237,6 +237,11 @@
         "showInBar": true,
         "barIcon": "ModernGridView",
         "barTitle": "Wrap"
+      },
+      {
+        "type": "event",
+        "label": "On Click",
+        "key": "onClick"
       }
     ]
   },

packages/client/src/components/app/Container.svelte

@@ -10,6 +10,7 @@
   export let size
   export let gap
   export let wrap
+  export let onClick
 
   $: directionClass = direction ? `valid-container direction-${direction}` : ""
   $: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
@@ -25,7 +26,13 @@
   ].join(" ")
 </script>
 
-<div class={classNames} use:styleable={$component.styles} class:wrap>
+<div
+  class={classNames}
+  class:clickable={!!onClick}
+  use:styleable={$component.styles}
+  class:wrap
+  on:click={onClick}
+>
   <slot />
 </div>
 
@@ -104,4 +111,10 @@
   .wrap {
     flex-wrap: wrap;
   }
+  .clickable {
+    cursor: pointer;
+  }
+  .clickable :global(*) {
+    pointer-events: none;
+  }
 </style>

packages/client/src/utils/buttonActions.js

@@ -334,8 +334,8 @@ const confirmTextMap = {
  */
 export const enrichButtonActions = (actions, context) => {
   // Prevent button actions in the builder preview
-  if (!actions || get(builderStore).inBuilder) {
+  if (!actions?.length || get(builderStore).inBuilder) {
-    return () => {}
+    return null
   }
 
   // If this is a function then it has already been enriched