budibase/packages/builder/src/userInterface/ComponentSelector.svelte

<script>
  import { isRootComponent } from "./pagesParsing/searchComponents"
  import { splitName } from "./pagesParsing/splitRootComponentName.js"
  import { store } from "../builderStore"
  import { find, sortBy } from "lodash/fp"

  export let onComponentChosen
  export let onGeneratorChosen
  export let allowGenerators

  let screens = []
  let componentLibraries = []

  const addRootComponent = (c, all, isGenerator) => {
    const { libName } = splitName(c.name)
    let group = find(r => r.libName === libName)(all)

    if (!group) {
      group = {
        libName,
        components: [],
        generators: [],
      }

      all.push(group)
    }

    if (isGenerator) {
      group.generators.push(c)
    } else {
      group.components.push(c)
    }
  }

  $: {
    const newComponentLibraries = []
    const newscreens = []

    for (let comp of sortBy(["name"])($store.components)) {
      if (isRootComponent(comp)) {
        addRootComponent(comp, newComponentLibraries, false)
      } else {
        newscreens.push(comp)
      }
    }

    for (let generator of $store.generators) {
      addRootComponent(generator, newComponentLibraries, true)
    }

    screens = sortBy(["name"])(newscreens)
    componentLibraries = newComponentLibraries
  }
</script>

{#each componentLibraries as lib}
  <div class="library-header">{lib.libName}</div>

  <div class="library-container">

    {#if allowGenerators}
      <div class="inner-header">Generators</div>

      {#each lib.generators as generator}
        <div class="component" on:click={() => onGeneratorChosen(generator)}>
          <div class="name">{splitName(generator.name).componentName}</div>
          <div class="description">{generator.description}</div>
        </div>
      {/each}
    {/if}

    <div class="inner-header">Components</div>

    {#each lib.components as component}
      <div class="component" on:click={() => onComponentChosen(component)}>
        <div class="name">{splitName(component.name).componentName}</div>
        <div class="description">{component.description}</div>
      </div>
    {/each}

  </div>
{/each}

<div class="library-header">My Components</div>

<div class="library-container">

  {#each screens as component}
    <div class="component" on:click={() => onComponentChosen(component)}>
      <div class="name">{component.name}</div>
      <div class="description">{component.description}</div>
    </div>
  {/each}

</div>

<style>
  .library-header {
    font-size: 1.1em;
    border-color: var(--primary25);
    border-width: 1px 0px;
    border-style: solid;
    background-color: var(--primary10);
    padding: 5px 0;
  }

  .library-container {
    padding: 0 0 10px 10px;
  }

  .inner-header {
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 7px;
    margin-bottom: 3px;
  }

  .component {
    padding: 2px 0px;
    cursor: pointer;
  }

  .component:hover {
    background-color: var(--lightslate);
  }

  .component > .name {
    color: var(--secondary100);
    display: inline-block;
  }

  .component > .description {
    font-size: 0.8em;
    color: var(--secondary75);
    display: inline-block;
    margin-left: 10px;
  }
</style>