Revert focus specific logic in other components and simplify

4 years ago · 22df82dd9d
25 changed files with 37 additions and 235 deletions
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@ -1,8 +1,7 @@
 <script>
  import "@spectrum-css/actionbutton/dist/index-vars.css"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
  const dispatch = createEventDispatcher()
-  const context = getContext("builderFocus")

  export let quiet = false
  export let emphasized = false
@ -14,14 +13,6 @@
  export let size = "M"
  export let active = false
  export let fullWidth = false
-  export let autofocus = false
-
-  let focus = false
-  let actionButton
-  $: focus = autofocus && actionButton !== undefined
-  $: if (focus) {
-    actionButton.focus()
-  }

  function longPress(element) {
    if (!longPressable) return
@ -46,7 +37,6 @@

 <button
  data-cy={dataCy}
-  bind:this={actionButton}
  use:longPress
  class:spectrum-ActionButton--quiet={quiet}
  class:spectrum-ActionButton--emphasized={emphasized}
@ -54,17 +44,9 @@
  class:fullWidth
  class="spectrum-ActionButton spectrum-ActionButton--size{size}"
  class:active
-  class:is-focused={focus}
  {disabled}
  on:longPress
  on:click|preventDefault
-  on:focus={() => {
-    focus = true
-  }}
-  on:blur={() => {
-    focus = false
-    if (context) context.clear()
-  }}
 >
  {#if longPressable}
    <svg
@ -98,10 +80,4 @@
  .active svg {
    color: var(--spectrum-global-color-blue-600);
  }
-  button.is-focused {
-    border-color: var(
-      --spectrum-textfield-m-border-color-down,
-      var(--spectrum-alias-border-color-mouse-focus)
-    );
-  }
 </style>
--- a/packages/bbui/src/Form/Combobox.svelte
+++ b/packages/bbui/src/Form/Combobox.svelte
@ -13,7 +13,6 @@
  export let options = []
  export let getOptionLabel = option => extractProperty(option, "label")
  export let getOptionValue = option => extractProperty(option, "value")
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  const onChange = e => {
@ -36,7 +35,6 @@
    {options}
    {placeholder}
    {readonly}
-    {autofocus}
    {getOptionLabel}
    {getOptionValue}
    on:change={onChange}
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@ -3,29 +3,21 @@
  import "@spectrum-css/popover/dist/index-vars.css"
  import "@spectrum-css/menu/dist/index-vars.css"
  import { fly } from "svelte/transition"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"

  export let value = null
  export let id = null
  export let placeholder = "Choose an option or type"
  export let disabled = false
  export let readonly = false
-  export let autofocus = false
  export let error = null
  export let options = []
  export let getOptionLabel = option => option
  export let getOptionValue = option => option

-  const context = getContext("builderFocus")
  const dispatch = createEventDispatcher()
  let open = false
  let focus = false
-  let comboInput
-
-  $: focus = autofocus && comboInput !== undefined
-  $: if (focus) {
-    comboInput.focus()
-  }

  const selectOption = value => {
    dispatch("change", value)
@ -57,16 +49,10 @@
    class:is-focused={open || focus}
  >
    <input
-      bind:this={comboInput}
      {id}
      type="text"
-      on:focus={() => {
-        focus = true
-      }}
-      on:blur={() => {
-        focus = false
-        context.clear()
-      }}
+      on:focus={() => (focus = true)}
+      on:blur={() => (focus = false)}
      on:change={onType}
      value={value || ""}
      placeholder={placeholder || ""}
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@ -13,7 +13,6 @@
  export let readonly = false
  export let autocomplete = false
  export let sort = false
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  $: selectedLookupMap = getSelectedLookupMap(value)
@ -86,5 +85,4 @@
  {getOptionValue}
  onSelectOption={toggleOption}
  {sort}
-  {autofocus}
 />
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@ -3,7 +3,7 @@
  import "@spectrum-css/popover/dist/index-vars.css"
  import "@spectrum-css/menu/dist/index-vars.css"
  import { fly } from "svelte/transition"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
  import clickOutside from "../../Actions/click_outside"
  import Search from "./Search.svelte"

@ -26,18 +26,9 @@
  export let autoWidth = false
  export let autocomplete = false
  export let sort = false
-  export let autofocus = false

-  const context = getContext("builderFocus")
  const dispatch = createEventDispatcher()
  let searchTerm = null
-  let focus = false
-  let pickerButton
-
-  $: focus = autofocus && pickerButton !== undefined
-  $: if (focus) {
-    pickerButton.focus()
-  }

  $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
  $: filteredOptions = getFilteredOptions(
@ -89,24 +80,7 @@
    class:is-invalid={!!error}
    class:is-open={open}
    aria-haspopup="listbox"
-    class:is-focused={focus}
-    bind:this={pickerButton}
    on:mousedown={onClick}
-    on:keydown={e => {
-      var keycode = e.key
-      if (focus) {
-        if (keycode === "Enter") {
-          onClick(e)
-        }
-      }
-    }}
-    on:focus={() => {
-      focus = true
-    }}
-    on:blur={() => {
-      focus = false
-      if (context) context.clear()
-    }}
  >
    {#if fieldIcon}
      <span class="icon-Placeholder-Padding">
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@ -16,7 +16,6 @@
  export let autoWidth = false
  export let autocomplete = false
  export let sort = false
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  let open = false
@ -75,7 +74,6 @@
  {fieldIcon}
  {autocomplete}
  {sort}
-  {autofocus}
  isPlaceholder={value == null || value === ""}
  placeholderOption={placeholder}
  isOptionSelected={option => option === value}
--- a/packages/bbui/src/Form/Multiselect.svelte
+++ b/packages/bbui/src/Form/Multiselect.svelte
@ -14,7 +14,6 @@
  export let getOptionLabel = option => option
  export let getOptionValue = option => option
  export let sort = false
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  const onChange = e => {
@ -36,6 +35,5 @@
    {getOptionValue}
    on:change={onChange}
    on:click
-    {autofocus}
  />
 </Field>
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@ -18,7 +18,6 @@
  export let autoWidth = false
  export let sort = false
  export let tooltip = ""
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  const onChange = e => {
@ -45,7 +44,6 @@
    {placeholder}
    {autoWidth}
    {sort}
-    {autofocus}
    {getOptionLabel}
    {getOptionValue}
    {getOptionIcon}
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@ -20,7 +20,6 @@ import analytics, { Events } from "analytics"
 import {
  findComponentType,
  findComponentParent,
-  findComponentPath,
  findClosestMatchingComponent,
  findAllMatchingComponents,
  findComponent,
@ -423,21 +422,6 @@ export const getFrontendStore = () => {
        store.update(state => {
          state.currentView = "component"
          state.selectedComponentId = componentInstance._id
-
-          const focusSetting = resolveComponentFocus(
-            asset?.props,
-            componentInstance
-          )
-          if (focusSetting) {
-            state.builderFocus = [
-              {
-                key: focusSetting.key,
-                target: state.selectedComponentId,
-                location: "component_settings",
-              },
-            ]
-          }
-
          return state
        })

@ -680,32 +664,5 @@ export const getFrontendStore = () => {
    },
  }

-  // Determine the initial focus for newly created components
-  // Take into account the fact that data providers should be
-  // skipped if they will be inherited from the path
-  const resolveComponentFocus = (asset_props, componentInstance) => {
-    const definition = store.actions.components.getDefinition(
-      componentInstance._component
-    )
-    let providerIdx = -1
-    let required = definition.settings.filter((s, idx) => {
-      if (s.type === "dataProvider") {
-        providerIdx = idx
-      }
-      return s.required
-    })
-
-    if (providerIdx > -1) {
-      const path = findComponentPath(asset_props, componentInstance._id)
-      const providers = path.filter(c =>
-        c._component?.endsWith("/dataprovider")
-      )
-      if (providers.length) {
-        required = required.splice(providerIdx, 1)
-      }
-    }
-    return required[0]
-  }
-
  return store
 }
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@ -18,7 +18,6 @@
  export let options
  export let allowJS = true
  export let appendBindingsAsOptions = true
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  let bindingDrawer
@ -62,7 +61,6 @@
    on:pick={e => onChange(e.detail, true)}
    {placeholder}
    options={allOptions}
-    {autofocus}
  />
  {#if !disabled}
    <div
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@ -68,7 +68,7 @@
    customTheme: $store.customTheme,
    previewDevice: $store.previewDevice,
    messagePassing: $store.clientFeatures.messagePassing,
-    isBudibaseEvent: true
+    isBudibaseEvent: true,
  }
  $: json = JSON.stringify(previewData)

@ -148,21 +148,6 @@
    }
  })

-  const resolveFocus = (data) => {
-    if($store.builderFocus){
-      const comp = $store.builderFocus.reduce((acc, item)=>{
-      acc = item.target
-        return acc
-      }, "")
-      if(data.id !== comp){
-          store.update(state => {
-          delete state.builderFocus
-          return state
-        })
-      }
-    }
-  }
-
  const handleBudibaseEvent = async event => {
    const { type, data } = event.data || event.detail
    if (!type) {
@ -172,7 +157,6 @@
    try {
      if (type === "select-component" && data.id) {
        store.actions.components.select({ _id: data.id })
-        resolveFocus(data)
      } else if (type === "update-prop") {
        await store.actions.components.updateProp(data.prop, data.value)
      } else if (type === "delete-component" && data.id) {
@ -206,12 +190,8 @@
          store.actions.components.copy(source, true)
          await store.actions.components.paste(destination, data.mode)
        }
-      } else if(type == "builder-focus")  {
-        store.update(state => ({
-          ...state,
-          builderFocus : 
-          [...data]
-        }))
+      } else if (type === "highlight-setting") {
+        console.log(data.setting)
      } else {
        console.warn(`Client sent unknown event type: ${type}`)
      }
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@ -73,15 +73,6 @@

    return true
  }
-
-  const isFocused = setting => {
-    if (!$store.builderFocus) {
-      return false
-    }
-    return (
-      setting.required === true && $store.builderFocus[0].key === setting.key
-    )
-  }
 </script>

 {#each sections as section, idx (section.name)}
@ -116,7 +107,6 @@
          {componentBindings}
          {componentInstance}
          {componentDefinition}
-          autofocus={isFocused(setting)}
        />
      {/if}
    {/each}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
@ -6,7 +6,6 @@
  import { createEventDispatcher, onMount } from "svelte"

  export let value
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
@ -25,7 +24,6 @@

 <Select
  {value}
-  {autofocus}
  placeholder={null}
  on:change
  options={providers}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@ -25,7 +25,6 @@
  export let otherSources
  export let showAllQueries
  export let bindings = []
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  const arrayTypes = ["attachment", "array"]
@ -159,7 +158,6 @@
    value={text}
    options={[text]}
    on:click={dropdownRight.show}
-    {autofocus}
  />
  {#if value?.type === "query"}
    <i class="ri-settings-5-line" on:click={openQueryParamsDrawer} />
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
@ -10,7 +10,6 @@
  export let componentInstance = {}
  export let value = ""
  export let placeholder
-  export let autofocus = false

  const dispatch = createEventDispatcher()
  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@ -38,10 +37,4 @@
  }
 </script>

-<Select
-  {placeholder}
-  value={boundValue}
-  on:change={onChange}
-  {options}
-  {autofocus}
-/>
+<Select {placeholder} value={boundValue} on:change={onChange} {options} />
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@ -10,7 +10,6 @@
  export let componentInstance
  export let value
  export let type
-  export let autofocus = false

  $: form = findClosestMatchingComponent(
    $currentAsset?.props,
@ -41,4 +40,4 @@
  }
 </script>

-<Combobox on:change {value} {options} {autofocus} />
+<Combobox on:change {value} {options} />
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
@ -15,7 +15,6 @@

  export let value = ""
  export let maxIconsPerPage = 30
-  export let autofocus = false

  let searchTerm = ""
  let selectedLetter = "A"
@ -118,7 +117,7 @@
 </script>

 <div bind:this={buttonAnchor}>
-  <ActionButton on:click={dropdown.show} {autofocus}>
+  <ActionButton on:click={dropdown.show}>
    {displayValue}
  </ActionButton>
 </div>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
@ -10,7 +10,6 @@
  export let componentInstance = {}
  export let value = ""
  export let placeholder
-  export let autofocus

  const dispatch = createEventDispatcher()
  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@ -32,10 +31,4 @@
  }
 </script>

-<Multiselect
-  {placeholder}
-  value={boundValue}
-  on:change={setValue}
-  {options}
-  {autofocus}
-/>
+<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@ -4,8 +4,6 @@
    readableToRuntimeBinding,
    runtimeToReadableBinding,
  } from "builderStore/dataBinding"
-  import { setContext } from "svelte"
-  import { store } from "builderStore"

  export let label = ""
  export let componentInstance = {}
@ -18,7 +16,6 @@
  export let bindings = []
  export let componentBindings = []
  export let nested = false
-  export let autofocus = false

  $: allBindings = getAllBindings(bindings, componentBindings, nested)
  $: safeValue = getSafeValue(value, props.defaultValue, allBindings)
@ -63,28 +60,6 @@
      ? defaultValue
      : enriched
  }
-
-  setContext("builderFocus", {
-    clear: () => {
-      if (!$store?.builderFocus) {
-        return
-      }
-      store.update(state => {
-        const updatedFocus = $store?.builderFocus?.filter(focus => {
-          return (
-            focus.location === "component_settings" &&
-            focus.target !== componentInstance._id
-          )
-        })
-        if (updatedFocus?.length > 0) {
-          state.builderFocus = updatedFocus
-        } else {
-          delete state.builderFocus
-        }
-        return state
-      })
-    },
-  })
 </script>

 <div class="property-control" data-cy={`setting-${key}`}>
@ -107,7 +82,6 @@
      {key}
      {type}
      {...props}
-      {autofocus}
    />
  </div>
 </div>
@ -119,6 +93,13 @@
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
+    padding: 4px 8px;
+    margin: -6px -10px;
+    border: 2px solid transparent;
+    border-radius: 4px;
+  }
+  .property-control.highlighted {
+    border-color: var(--spectrum-global-color-blue-400);
  }
  .label {
    padding-bottom: var(--spectrum-global-dimension-size-65);
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
@ -4,7 +4,6 @@

  export let value
  export let bindings
-  export let autofocus

  $: urlOptions = $store.screens
    .map(screen => screen.routing?.route)
@ -17,5 +16,4 @@
  on:change
  options={urlOptions}
  appendBindingsAsOptions={false}
-  {autofocus}
 />
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@ -1167,7 +1167,8 @@
      {
        "type": "boolean",
        "label": "New Tab",
-        "key": "openInNewTab"
+        "key": "openInNewTab",
+        "required": true
      },
      {
        "type": "select",
@ -1176,6 +1177,7 @@
        "defaultValue": "M",
        "showInBar": true,
        "barStyle": "picker",
+        "required": true,
        "options": [
          {
            "label": "Small",
@ -1196,7 +1198,8 @@
        "label": "Color",
        "key": "color",
        "showInBar": true,
-        "barSeparator": false
+        "barSeparator": false,
+        "required": true
      },
      {
        "type": "boolean",
@ -1205,7 +1208,8 @@
        "showInBar": true,
        "barIcon": "TagBold",
        "barTitle": "Bold text",
-        "barSeparator": false
+        "barSeparator": false,
+        "required": true
      },
      {
        "type": "boolean",
@ -1214,7 +1218,8 @@
        "showInBar": true,
        "barIcon": "TagItalic",
        "barTitle": "Italic text",
-        "barSeparator": false
+        "barSeparator": false,
+        "required": true
      },
      {
        "type": "boolean",
--- a/packages/client/src/components/app/ComponentPlaceholder.svelte
+++ b/packages/client/src/components/app/ComponentPlaceholder.svelte
@ -5,26 +5,20 @@
  const { styleable } = getContext("sdk")
  const component = getContext("component")

-  $: focusSetting = $component.missingRequiredSettings?.[0]
+  $: requiredSetting = $component.missingRequiredSettings?.[0]
 </script>

-{#if $builderStore.inBuilder && focusSetting}
+{#if $builderStore.inBuilder && requiredSetting}
  <div use:styleable={$component.styles}>
    <div class="component-placeholder">
      <span>
-        Add the <mark>{focusSetting?.label}</mark> setting to start using your component
-        &nbsp;
+        Add the <mark>{requiredSetting.label}</mark> setting to start using your
+        component &nbsp;
      </span>
      <span
        class="spectrum-Link"
        on:click={() => {
-          builderStore.actions.setFocus([
-            {
-              location: "component_settings",
-              key: focusSetting.key,
-              target: $component.id,
-            },
-          ])
+          builderStore.actions.highlightSetting(requiredSetting.key)
        }}
      >
        Show me
--- a/packages/client/src/components/app/Link.svelte
+++ b/packages/client/src/components/app/Link.svelte
@ -1,6 +1,5 @@
 <script>
  import { getContext } from "svelte"
-  import Placeholder from "./Placeholder.svelte"

  const { linkable, styleable, builderStore } = getContext("sdk")
  const component = getContext("component")
@ -80,11 +79,7 @@
    {componentText}
  </div>
 {:else if $builderStore.inBuilder || componentText}
-  {#if !url && !text}
-    <div use:styleable={{ ...$component.styles, empty: true }}>
-      <Placeholder />
-    </div>
-  {:else if externalLink || openInNewTab}
+  {#if externalLink || openInNewTab}
    <a
      {target}
      href={sanitizedUrl}
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@ -76,9 +76,7 @@
      {#if !formContext}
        <Placeholder text="Form components need to be wrapped in a form" />
      {:else if !fieldState}
-        {#if $builderStore.inBuilder}
-          <Placeholder />
-        {/if}
+        <Placeholder />
      {:else if schemaType && schemaType !== type && type !== "options"}
        <Placeholder
          text="This Field setting is the wrong data type for this component"
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@ -76,8 +76,8 @@ const createBuilderStore = () => {
      }
      store.update(state => ({ ...state, editMode: enabled }))
    },
-    setFocus: data => {
-      window.parent.postMessage({ type: "builder-focus", data })
+    highlightSetting: setting => {
+      dispatchEvent("highlight-setting", { setting })
    },
  }
  return {