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

<script>
  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"

  import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"

  import { pipe } from "../common/core"
  import { store } from "../builderStore"
  import { ArrowDownIcon } from "../common/Icons/"

  export let components = []

  const joinPath = join("/")

  const normalizedName = name =>
    pipe(name, [
      trimCharsStart("./"),
      trimCharsStart("~/"),
      trimCharsStart("../"),
      trimChars(" "),
    ])

  const lastPartOfName = c =>
    last(c.name ? c.name.split("/") : c._component.split("/"))

  const isComponentSelected = (current, comp) =>
    current &&
    current.component &&
    comp.component &&
    current.component.name === comp.component.name

  const isFolderSelected = (current, folder) => isInSubfolder(current, folder)

  $: _components = pipe(components, [
    map(c => ({ component: c, title: lastPartOfName(c) })),
    sortBy("title"),
  ])

  function select_component(screen, component) {
    store.setCurrentScreen(screen)
    store.selectComponent(component)
  }

  const isScreenSelected = component =>
    component.component &&
    $store.currentFrontEndItem &&
    component.component.name === $store.currentFrontEndItem.name
</script>

<div class="root">

  {#each _components as component}
    <div
      class="hierarchy-item component"
      class:selected={isComponentSelected($store.currentComponentInfo, component)}
      on:click|stopPropagation={() => store.setCurrentScreen(component.component.name)}>

      <span
        class="icon"
        style="transform: rotate({isScreenSelected(component) ? 0 : -90}deg);">
        {#if component.component.props && component.component.props._children}
          <ArrowDownIcon />
        {/if}
      </span>

      <span class="title">{component.title}</span>
    </div>

    {#if isScreenSelected(component) && component.component.props && component.component.props._children}
      <ComponentsHierarchyChildren
        components={component.component.props._children}
        currentComponent={$store.currentComponentInfo}
        onSelect={child => select_component(component.component.name, child)} />
    {/if}
  {/each}

</div>

<style>
  .root {
    font-weight: 500;
    font-size: 0.9rem;
    color: #828fa5;
  }

  .hierarchy-item {
    cursor: pointer;
    padding: 11px 7px;
    margin: 5px 0;
    border-radius: 5px;
    display: flex;
    align-items: center;
  }

  .hierarchy-item:hover {
    /* color: var(--secondary); */
    background: #fafafa;
  }

  .selected {
    color: var(--button-text);
    background: var(--background-button) !important;
  }

  .title {
    margin-left: 10px;
  }

  .icon {
    display: inline-block;
    transition: 0.2s;
    width: 24px;
    height: 24px;
  }
</style>