Use custom Input for component settings so that JS bindings can be displayed nicley

5 years ago · 932c332b81
4 changed files with 40 additions and 10 deletions
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -1,6 +1,14 @@
 <script>
  import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, DrawerContent, Tabs, Tab } from "@budibase/bbui"
+  import {
    Search,
    TextArea,
    DrawerContent,
    Tabs,
    Tab,
    Body,
    Layout,
  } from "@budibase/bbui"
  import { createEventDispatcher } from "svelte"
  import {
    isValid,
@ -17,7 +25,7 @@
  export let bindableProperties
  export let value = ""
  export let valid
-  export let allowJS = true
+  export let allowJS = false
  let helpers = handlebarsCompletions()
  let getCaretPosition
@ -138,13 +146,19 @@
      {#if allowJS}
        <Tab title="JavaScript">
          <div class="main-content">
-            <CodeMirrorEditor
+            <Layout noPadding gap="XS">
-              bind:getCaretPosition
+              <CodeMirrorEditor
-              height={200}
+                bind:getCaretPosition
-              value={decodeJSBinding(jsValue)}
+                height={200}
-              on:change={onChangeJSValue}
+                value={decodeJSBinding(jsValue)}
-              hints={context?.map(x => `$("${x.readableBinding}")`)}
+                on:change={onChangeJSValue}
-            />
+                hints={context?.map(x => `$("${x.readableBinding}")`)}
              />
              <Body size="S">
                JavaScript expressions are executed as functions, so ensure that
                your expression returns a value.
              </Body>
            </Layout>
          </div>
        </Tab>
      {/if}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte
@ -0,0 +1,14 @@
 <script>
  import { Input } from "@budibase/bbui"
  import { isJSBinding } from "@budibase/string-templates"
  export let value
  $: isJS = isJSBinding(value)
 </script>
 <Input
  {...$$props}
  value={isJS ? "(JavaScript function)" : value}
  readonly={isJS}
 />
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@ -105,6 +105,7 @@
          value={safeValue}
          on:change={e => (tempValue = e.detail)}
          bindableProperties={bindings}
          allowJS
        />
      </Drawer>
    {/if}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@ -1,4 +1,4 @@
-import { Checkbox, Input, Select, Stepper } from "@budibase/bbui"
+import { Checkbox, Select, Stepper } from "@budibase/bbui"
 import DataSourceSelect from "./DataSourceSelect.svelte"
 import DataProviderSelect from "./DataProviderSelect.svelte"
 import EventsEditor from "./EventsEditor"
@ -15,6 +15,7 @@ import URLSelect from "./URLSelect.svelte"
 import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
 import FormFieldSelect from "./FormFieldSelect.svelte"
 import ValidationEditor from "./ValidationEditor/ValidationEditor.svelte"
 import Input from "./Input.svelte"
 const componentMap = {
  text: Input,