From ec4a4047b6bdd6f7167bf0e50d79b7b382ea7ad5 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 15 Jan 2021 10:59:22 +0000 Subject: [PATCH] Improve data binding popup and finish component bindings --- .../builder/src/builderStore/dataBinding.js | 11 ++- .../PropertyControls/BindingDropdown.svelte | 67 ++++++++++++------- .../design/temporaryPanelStructure.js | 34 ---------- packages/standard-components/components.json | 15 ----- packages/standard-components/manifest.json | 22 ++++++ packages/standard-components/src/index.js | 2 +- 6 files changed, 73 insertions(+), 78 deletions(-) diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 647fc194a3..cdb53375b1 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -71,9 +71,14 @@ export const getBindableComponents = rootComponent => { return definition.bindable } const components = findAllMatchingComponents(rootComponent, componentSelector) - console.log(components) - - return [] + return components.map(component => { + return { + type: "instance", + providerId: component._id, + runtimeBinding: `${component._id}`, + readableBinding: `${component._instanceName}`, + } + }) } /** diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BindingDropdown.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BindingDropdown.svelte index 401d0ac3a3..2989315ba9 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BindingDropdown.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BindingDropdown.svelte @@ -21,42 +21,51 @@ } $: ({ instance, context } = groupBy("type", bindableProperties)) + $: hasBindableProperties = !!bindableProperties?.length
- Objects - - {#if context} - Tables -
    - {#each context as { readableBinding }} -
  • addToText(readableBinding)}>{readableBinding}
    • - {/each} -
- {/if} - {#if instance} - Components -
    - {#each instance as { readableBinding }} -
  • addToText(readableBinding)}>{readableBinding}
    • - {/each} -
+ {#if hasBindableProperties} + {#if context} + Contexts + +
    + {#each context as { readableBinding }} +
  • addToText(readableBinding)}> + {readableBinding} +
    • + {/each} +
+ {/if} + {#if instance} + + Components + +
    + {#each instance as { readableBinding }} +
  • addToText(readableBinding)}> + {readableBinding} +
    • + {/each} +
+ {/if} + {:else} +
There aren't any bindable properties available.
{/if}
- Data binding + Data Binding Binding connects one piece of data to another and makes it dynamic. Click - the objects on the left, to add them to the textbox. + the objects on the left to add them to the extbox.