More effeciently render component settings and filter out empty sections

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

@@ -12,13 +12,13 @@
   export let componentBindings
   export let isScreen = false
 
-  $: sections = getSections(componentDefinition)
+  $: sections = getSections(componentInstance, componentDefinition, isScreen)
 
-  const getSections = definition => {
+  const getSections = (instance, definition, isScreen) => {
     const settings = definition?.settings ?? []
     const generalSettings = settings.filter(setting => !setting.section)
     const customSections = settings.filter(setting => setting.section)
-    return [
+    let sections = [
       {
         name: "General",
         info: componentDefinition?.info,
@@ -26,6 +26,16 @@
       },
       ...(customSections || []),
     ]
+
+    // Filter out settings which shouldn't be rendered
+    sections.forEach(section => {
+      section.settings.forEach(setting => {
+        setting.visible = canRenderControl(instance, setting, isScreen)
+      })
+      section.visible = section.settings.some(setting => setting.visible)
+    })
+
+    return sections
   }
 
   const updateSetting = async (key, value) => {
@@ -36,7 +46,7 @@
     }
   }
 
-  const canRenderControl = (setting, isScreen) => {
+  const canRenderControl = (instance, setting, isScreen) => {
     // Prevent rendering on click setting for screens
     if (setting?.type === "event" && isScreen) {
       return false
@@ -51,6 +61,7 @@
     if (setting.dependsOn) {
       let dependantSetting = setting.dependsOn
       let dependantValue = null
+      let invert = !!setting.dependsOn.invert
       if (typeof setting.dependsOn === "object") {
         dependantSetting = setting.dependsOn.setting
         dependantValue = setting.dependsOn.value
@@ -62,7 +73,7 @@
       // If no specific value is depended upon, check if a value exists at all
       // for the dependent setting
       if (dependantValue == null) {
-        const currentValue = componentInstance[dependantSetting]
+        const currentValue = instance[dependantSetting]
         if (currentValue === false) {
           return false
         }
@@ -73,7 +84,11 @@
       }
 
       // Otherwise check the value matches
-      return componentInstance[dependantSetting] === dependantValue
+      if (invert) {
+        return instance[dependantSetting] !== dependantValue
+      } else {
+        return instance[dependantSetting] === dependantValue
+      }
     }
 
     return true
@@ -81,55 +96,57 @@
 </script>
 
 {#each sections as section, idx (section.name)}
-  <DetailSummary name={section.name} collapsible={false}>
+  {#if section.visible}
-    {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
+    <DetailSummary name={section.name} collapsible={false}>
-      <PropertyControl
+      {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
-        control={Input}
-        label="Name"
-        key="_instanceName"
-        value={componentInstance._instanceName}
-        onChange={val => updateSetting("_instanceName", val)}
-      />
-    {/if}
-    {#each section.settings as setting (setting.key)}
-      {#if canRenderControl(setting, isScreen)}
         <PropertyControl
-          type={setting.type}
+          control={Input}
-          control={getComponentForSetting(setting)}
+          label="Name"
-          label={setting.label}
+          key="_instanceName"
-          key={setting.key}
+          value={componentInstance._instanceName}
-          value={componentInstance[setting.key]}
+          onChange={val => updateSetting("_instanceName", val)}
-          defaultValue={setting.defaultValue}
-          nested={setting.nested}
-          onChange={val => updateSetting(setting.key, val)}
-          highlighted={$store.highlightedSettingKey === setting.key}
-          props={{
-            // Generic settings
-            placeholder: setting.placeholder || null,
-
-            // Select settings
-            options: setting.options || [],
-
-            // Number fields
-            min: setting.min || null,
-            max: setting.max || null,
-          }}
-          {bindings}
-          {componentBindings}
-          {componentInstance}
-          {componentDefinition}
         />
       {/if}
-    {/each}
+      {#each section.settings as setting (setting.key)}
-    {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")}
+        {#if setting.visible}
-      <ResetFieldsButton {componentInstance} />
+          <PropertyControl
-    {/if}
+            type={setting.type}
-    {#if section?.info}
+            control={getComponentForSetting(setting)}
-      <div class="text">
+            label={setting.label}
-        {@html section.info}
+            key={setting.key}
-      </div>
+            value={componentInstance[setting.key]}
-    {/if}
+            defaultValue={setting.defaultValue}
-  </DetailSummary>
+            nested={setting.nested}
+            onChange={val => updateSetting(setting.key, val)}
+            highlighted={$store.highlightedSettingKey === setting.key}
+            props={{
+              // Generic settings
+              placeholder: setting.placeholder || null,
+
+              // Select settings
+              options: setting.options || [],
+
+              // Number fields
+              min: setting.min || null,
+              max: setting.max || null,
+            }}
+            {bindings}
+            {componentBindings}
+            {componentInstance}
+            {componentDefinition}
+          />
+        {/if}
+      {/each}
+      {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")}
+        <ResetFieldsButton {componentInstance} />
+      {/if}
+      {#if section?.info}
+        <div class="text">
+          {@html section.info}
+        </div>
+      {/if}
+    </DetailSummary>
+  {/if}
 {/each}
 
 <style>