dbgate/packages/web/src/jsontree/JSONTree.svelte

<script lang="ts">
  import JSONNode from './JSONNode.svelte';
  import { setContext } from 'svelte';
  import contextMenu, { getContextMenu } from '../utility/contextMenu';
  import openNewTab from '../utility/openNewTab';
  import _ from 'lodash';

  setContext('json-tree-context-key', {});

  export let key = '';
  export let menu = null;
  export let value;
  export let expanded = false;
  export let labelOverride = null;

  export let isDeleted;
  export let isInserted;
  export let isModified;

  const elementData = new WeakMap();

  if (elementData) {
    setContext('json-tree-element-data', elementData);
  }

  const parentMenu = getContextMenu();

  function getElementMenu({ targetElement }) {
    if (!targetElement) return null;
    const closest = targetElement.closest('.jsonValueHolder');
    if (!closest) return;
    const value = elementData.get(closest);

    if (value && _.isArray(value)) {
      return {
        text: 'Open as data sheet',
        onClick: () => {
          openNewTab(
            {
              title: 'Data #',
              icon: 'img free-table',
              tabComponent: 'FreeTableTab',
              props: {},
            },
            {
              editor: {
                rows: value,
                structure: { __isDynamicStructure: true, columns: [] },
              },
            }
          );
        },
      };
    }
  }
</script>

<ul use:contextMenu={[parentMenu, menu, getElementMenu]} class:isDeleted class:isInserted class:isModified>
  <JSONNode {key} {value} isParentExpanded={true} isParentArray={false} {expanded} {labelOverride} />
</ul>

<style>
  :global(.theme-type-dark) ul {
    --json-tree-string-color: #ffc5c5;
    --json-tree-symbol-color: #ffc5c5;
    --json-tree-boolean-color: #b6c3ff;
    --json-tree-function-color: #b6c3ff;
    --json-tree-number-color: #bfbdff;
    --json-tree-label-color: #e9aaed;
    --json-tree-arrow-color: #d4d4d4;
    --json-tree-null-color: #dcdcdc;
    --json-tree-undefined-color: #dcdcdc;
    --json-tree-date-color: #dcdcdc;
  }
  ul {
    --string-color: var(--json-tree-string-color, #cb3f41);
    --symbol-color: var(--json-tree-symbol-color, #cb3f41);
    --boolean-color: var(--json-tree-boolean-color, #112aa7);
    --function-color: var(--json-tree-function-color, #112aa7);
    --number-color: var(--json-tree-number-color, #3029cf);
    --label-color: var(--json-tree-label-color, #871d8f);
    --arrow-color: var(--json-tree-arrow-color, #727272);
    --null-color: var(--json-tree-null-color, #8d8d8d);
    --undefined-color: var(--json-tree-undefined-color, #8d8d8d);
    --date-color: var(--json-tree-date-color, #8d8d8d);
    --li-identation: var(--json-tree-li-indentation, 1em);
    --li-line-height: var(--json-tree-li-line-height, 1.3);
    --li-colon-space: 0.3em;
    font-size: var(--json-tree-font-size, 12px);
    font-family: var(--json-tree-font-family, 'Courier New', Courier, monospace);
  }
  ul :global(li) {
    line-height: var(--li-line-height);
    display: var(--li-display, list-item);
    list-style: none;
    white-space: nowrap;
  }
  ul,
  ul :global(ul) {
    padding: 0;
    margin: 0;
  }
  ul.isDeleted {
    background: var(--theme-bg-volcano);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEElEQVQImWNgIAX8x4KJBAD+agT8INXz9wAAAABJRU5ErkJggg==');
    background-repeat: repeat-x;
    background-position: 50% 50%;
  }
  ul.isModified {
    background: var(--theme-bg-gold);
  }
  ul.isInserted {
    background: var(--theme-bg-green);
  }
</style>