@budibase/frontend-core 2.5.6-alpha.3 → 2.5.6-alpha.31

package/src/components/grid/layout/Grid.svelte

@@ -0,0 +1,254 @@
+<script>
+  import { setContext } from "svelte"
+  import { writable } from "svelte/store"
+  import { fade } from "svelte/transition"
+  import { clickOutside, ProgressCircle } from "@budibase/bbui"
+  import { createEventManagers } from "../lib/events"
+  import { createAPIClient } from "../../../api"
+  import { attachStores } from "../stores"
+  import DeleteButton from "../controls/DeleteButton.svelte"
+  import BetaButton from "../controls/BetaButton.svelte"
+  import GridBody from "./GridBody.svelte"
+  import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
+  import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
+  import HeaderRow from "./HeaderRow.svelte"
+  import ScrollOverlay from "../overlays/ScrollOverlay.svelte"
+  import MenuOverlay from "../overlays/MenuOverlay.svelte"
+  import StickyColumn from "./StickyColumn.svelte"
+  import UserAvatars from "./UserAvatars.svelte"
+  import KeyboardManager from "../overlays/KeyboardManager.svelte"
+  import SortButton from "../controls/SortButton.svelte"
+  import AddColumnButton from "../controls/AddColumnButton.svelte"
+  import HideColumnsButton from "../controls/HideColumnsButton.svelte"
+  import AddRowButton from "../controls/AddRowButton.svelte"
+  import RowHeightButton from "../controls/RowHeightButton.svelte"
+  import ColumnWidthButton from "../controls/ColumnWidthButton.svelte"
+  import NewRow from "./NewRow.svelte"
+  import {
+    MaxCellRenderHeight,
+    MaxCellRenderWidthOverflow,
+    GutterWidth,
+    DefaultRowHeight,
+  } from "../lib/constants"
+
+  export let API = null
+  export let tableId = null
+  export let schemaOverrides = null
+  export let allowAddRows = true
+  export let allowAddColumns = true
+  export let allowEditColumns = true
+  export let allowExpandRows = true
+  export let allowEditRows = true
+  export let allowDeleteRows = true
+
+  // Unique identifier for DOM nodes inside this instance
+  const rand = Math.random()
+
+  // State stores
+  const tableIdStore = writable(tableId)
+  const schemaOverridesStore = writable(schemaOverrides)
+  const config = writable({
+    allowAddRows,
+    allowAddColumns,
+    allowEditColumns,
+    allowExpandRows,
+    allowEditRows,
+    allowDeleteRows,
+  })
+
+  // Build up context
+  let context = {
+    API: API || createAPIClient(),
+    rand,
+    config,
+    tableId: tableIdStore,
+    schemaOverrides: schemaOverridesStore,
+  }
+  context = { ...context, ...createEventManagers() }
+  context = attachStores(context)
+
+  // Reference some stores for local use
+  const {
+    isResizing,
+    isReordering,
+    ui,
+    loaded,
+    loading,
+    rowHeight,
+    contentLines,
+  } = context
+
+  // Keep stores up to date
+  $: tableIdStore.set(tableId)
+  $: schemaOverridesStore.set(schemaOverrides)
+  $: config.set({
+    allowAddRows,
+    allowAddColumns,
+    allowEditColumns,
+    allowExpandRows,
+    allowEditRows,
+    allowDeleteRows,
+  })
+
+  // Set context for children to consume
+  setContext("grid", context)
+
+  // Expose ability to retrieve context externally for external control
+  export const getContext = () => context
+
+  // Initialise websocket for multi-user
+  // onMount(() => createWebsocket(context))
+</script>
+
+<div
+  class="grid"
+  id="grid-{rand}"
+  class:is-resizing={$isResizing}
+  class:is-reordering={$isReordering}
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};"
+>
+  <div class="controls">
+    <div class="controls-left">
+      <AddRowButton />
+      <AddColumnButton />
+      <slot name="controls" />
+      <ColumnWidthButton />
+      <RowHeightButton />
+      <HideColumnsButton />
+      <SortButton />
+    </div>
+    <div class="controls-right">
+      <DeleteButton />
+      <UserAvatars />
+    </div>
+  </div>
+  {#if $loaded}
+    <div class="grid-data-outer" use:clickOutside={ui.actions.blur}>
+      <div class="grid-data-inner">
+        <StickyColumn />
+        <div class="grid-data-content">
+          <HeaderRow />
+          <GridBody />
+        </div>
+        <BetaButton />
+        <NewRow />
+        <div class="overlays">
+          <ResizeOverlay />
+          <ReorderOverlay />
+          <ScrollOverlay />
+          <MenuOverlay />
+        </div>
+      </div>
+    </div>
+  {/if}
+  {#if $loading}
+    <div in:fade|local={{ duration: 130 }} class="grid-loading">
+      <ProgressCircle />
+    </div>
+  {/if}
+  <KeyboardManager />
+</div>
+
+<style>
+  .grid {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
+    overflow: hidden;
+    background: var(--cell-background);
+
+    /* Variables */
+    --cell-background: var(--spectrum-global-color-gray-50);
+    --cell-background-hover: var(--spectrum-global-color-gray-100);
+    --cell-padding: 8px;
+    --cell-spacing: 4px;
+    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
+    --cell-font-size: 14px;
+    --controls-height: 50px;
+  }
+  .grid,
+  .grid :global(*) {
+    box-sizing: border-box;
+  }
+  .grid.is-resizing :global(*) {
+    cursor: col-resize !important;
+  }
+  .grid.is-reordering :global(*) {
+    cursor: grabbing !important;
+  }
+
+  .grid-data-outer,
+  .grid-data-inner {
+    flex: 1 1 auto;
+    display: flex;
+    justify-items: flex-start;
+    align-items: stretch;
+    overflow: hidden;
+  }
+  .grid-data-outer {
+    height: 0;
+    flex-direction: column;
+  }
+  .grid-data-inner {
+    flex-direction: row;
+    position: relative;
+  }
+  .grid-data-content {
+    flex: 1 1 auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Controls */
+  .controls {
+    height: var(--controls-height);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
+    padding: var(--cell-padding);
+    gap: var(--cell-spacing);
+    background: var(--background);
+  }
+  .controls-left,
+  .controls-right {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--cell-spacing);
+  }
+  .controls-right {
+    gap: 12px;
+  }
+
+  /* Overlays */
+  .overlays {
+    z-index: 10;
+  }
+
+  /* Loading */
+  .grid-loading {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    z-index: 10;
+  }
+  .grid-loading:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--background);
+    opacity: 0.6;
+  }
+</style>

package/src/components/grid/layout/GridBody.svelte

@@ -0,0 +1,73 @@
+<script>
+  import { getContext, onMount } from "svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
+  import GridRow from "./GridRow.svelte"
+  import { BlankRowID } from "../lib/constants"
+
+  const {
+    bounds,
+    renderedRows,
+    renderedColumns,
+    rowVerticalInversionIndex,
+    config,
+    hoveredRowId,
+    dispatch,
+  } = getContext("grid")
+
+  let body
+
+  $: renderColumnsWidth = $renderedColumns.reduce(
+    (total, col) => (total += col.width),
+    0
+  )
+
+  onMount(() => {
+    // Observe and record the height of the body
+    const observer = new ResizeObserver(() => {
+      bounds.set(body.getBoundingClientRect())
+    })
+    observer.observe(body)
+    return () => {
+      observer.disconnect()
+    }
+  })
+</script>
+
+<div bind:this={body} class="grid-body">
+  <GridScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
+    {#each $renderedRows as row, idx}
+      <GridRow {row} {idx} invertY={idx >= $rowVerticalInversionIndex} />
+    {/each}
+    {#if $config.allowAddRows && $renderedColumns.length}
+      <div
+        class="blank"
+        class:highlighted={$hoveredRowId === BlankRowID}
+        style="width:{renderColumnsWidth}px"
+        on:mouseenter={() => ($hoveredRowId = BlankRowID)}
+        on:mouseleave={() => ($hoveredRowId = null)}
+        on:click={() => dispatch("add-row-inline")}
+      />
+    {/if}
+  </GridScrollWrapper>
+</div>
+
+<style>
+  .grid-body {
+    display: block;
+    position: relative;
+    cursor: default;
+    overflow: hidden;
+    flex: 1 1 auto;
+  }
+  .blank {
+    height: var(--row-height);
+    background: var(--cell-background);
+    border-bottom: var(--cell-border);
+    border-right: var(--cell-border);
+    position: absolute;
+  }
+  .blank.highlighted {
+    background: var(--cell-background-hover);
+    cursor: pointer;
+  }
+</style>

package/src/components/grid/layout/GridRow.svelte

@@ -0,0 +1,57 @@
+<script>
+  import { getContext } from "svelte"
+  import DataCell from "../cells/DataCell.svelte"
+
+  export let row
+  export let idx
+  export let invertY = false
+
+  const {
+    focusedCellId,
+    reorder,
+    selectedRows,
+    renderedColumns,
+    hoveredRowId,
+    selectedCellMap,
+    focusedRow,
+    columnHorizontalInversionIndex,
+  } = getContext("grid")
+
+  $: rowSelected = !!$selectedRows[row._id]
+  $: rowHovered = $hoveredRowId === row._id
+  $: rowFocused = $focusedRow?._id === row._id
+  $: reorderSource = $reorder.sourceColumn
+</script>
+
+<div
+  class="row"
+  on:focus
+  on:mouseenter={() => ($hoveredRowId = row._id)}
+  on:mouseleave={() => ($hoveredRowId = null)}
+>
+  {#each $renderedColumns as column, columnIdx (column.name)}
+    {@const cellId = `${row._id}-${column.name}`}
+    <DataCell
+      {cellId}
+      {column}
+      {row}
+      {invertY}
+      {rowFocused}
+      invertX={columnIdx >= $columnHorizontalInversionIndex}
+      highlighted={rowHovered || rowFocused || reorderSource === column.name}
+      selected={rowSelected}
+      rowIdx={idx}
+      focused={$focusedCellId === cellId}
+      selectedUser={$selectedCellMap[cellId]}
+      width={column.width}
+    />
+  {/each}
+</div>
+
+<style>
+  .row {
+    width: 0;
+    display: flex;
+    height: var(--row-height);
+  }
+</style>

package/src/components/grid/layout/GridScrollWrapper.svelte

@@ -0,0 +1,81 @@
+<script>
+  import { getContext } from "svelte"
+  import { domDebounce } from "../../../utils/utils"
+
+  const {
+    rowHeight,
+    scroll,
+    focusedCellId,
+    renderedRows,
+    maxScrollTop,
+    maxScrollLeft,
+    bounds,
+    hoveredRowId,
+    hiddenColumnsWidth,
+  } = getContext("grid")
+
+  export let scrollVertically = false
+  export let scrollHorizontally = false
+  export let wheelInteractive = false
+
+  $: style = generateStyle($scroll, $rowHeight, $hiddenColumnsWidth)
+
+  const generateStyle = (scroll, rowHeight, hiddenWidths) => {
+    const offsetX = scrollHorizontally ? -1 * scroll.left + hiddenWidths : 0
+    const offsetY = scrollVertically ? -1 * (scroll.top % rowHeight) : 0
+    return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
+  }
+
+  // Handles a wheel even and updates the scroll offsets
+  const handleWheel = e => {
+    e.preventDefault()
+    debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY)
+  }
+  const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => {
+    const { top, left } = $scroll
+
+    // Calculate new scroll top
+    let newScrollTop = top + deltaY
+    newScrollTop = Math.max(0, Math.min(newScrollTop, $maxScrollTop))
+
+    // Calculate new scroll left
+    let newScrollLeft = left + deltaX
+    newScrollLeft = Math.max(0, Math.min(newScrollLeft, $maxScrollLeft))
+
+    // Update state
+    scroll.set({
+      left: scrollHorizontally ? newScrollLeft : left,
+      top: scrollVertically ? newScrollTop : top,
+    })
+
+    // Hover row under cursor
+    const y = clientY - $bounds.top + (newScrollTop % $rowHeight)
+    const hoveredRow = $renderedRows[Math.floor(y / $rowHeight)]
+    hoveredRowId.set(hoveredRow?._id)
+  })
+</script>
+
+<div
+  class="outer"
+  on:wheel={wheelInteractive ? handleWheel : null}
+  on:click|self={() => ($focusedCellId = null)}
+>
+  <div {style} class="inner">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .outer {
+    min-width: 100%;
+    min-height: 100%;
+    height: 100%;
+    width: 100%;
+    max-height: 100%;
+    max-width: 100%;
+    overflow: hidden;
+  }
+  .inner {
+    position: absolute;
+  }
+</style>

package/src/components/grid/layout/HeaderRow.svelte

@@ -0,0 +1,62 @@
+<script>
+  import { getContext } from "svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
+  import HeaderCell from "../cells/HeaderCell.svelte"
+  import { Icon } from "@budibase/bbui"
+
+  const { renderedColumns, dispatch, scroll, hiddenColumnsWidth, width } =
+    getContext("grid")
+
+  $: columnsWidth = $renderedColumns.reduce(
+    (total, col) => (total += col.width),
+    0
+  )
+  $: end = $hiddenColumnsWidth + columnsWidth - 1 - $scroll.left
+  $: left = Math.min($width - 40, end)
+</script>
+
+<div class="header">
+  <GridScrollWrapper scrollHorizontally>
+    <div class="row">
+      {#each $renderedColumns as column, idx}
+        <HeaderCell {column} {idx} />
+      {/each}
+    </div>
+  </GridScrollWrapper>
+  <div
+    class="add"
+    style="left:{left}px"
+    on:click={() => dispatch("add-column")}
+  >
+    <Icon name="Add" />
+  </div>
+</div>
+
+<style>
+  .header {
+    background: var(--background);
+    border-bottom: var(--cell-border);
+    position: relative;
+    height: var(--default-row-height);
+    z-index: 1;
+  }
+  .row {
+    display: flex;
+  }
+  .add {
+    height: var(--default-row-height);
+    display: grid;
+    place-items: center;
+    width: 40px;
+    position: absolute;
+    top: 0;
+    border-left: var(--cell-border);
+    border-right: var(--cell-border);
+    border-bottom: var(--cell-border);
+    background: var(--spectrum-global-color-gray-100);
+  }
+  .add:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>