@budibase/frontend-core 2.5.6-alpha.5 → 2.5.6-alpha.7

package/src/components/grid/lib/utils.js

@@ -0,0 +1,26 @@
+export const getColor = (idx, opacity = 0.3) => {
+  if (idx == null || idx === -1) {
+    return null
+  }
+  return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, ${opacity})`
+}
+
+const TypeIconMap = {
+  text: "Text",
+  options: "Dropdown",
+  datetime: "Date",
+  barcodeqr: "Camera",
+  longform: "TextAlignLeft",
+  array: "Dropdown",
+  number: "123",
+  boolean: "Boolean",
+  attachment: "AppleFiles",
+  link: "Link",
+  formula: "Calculator",
+  json: "Brackets",
+}
+
+export const getColumnIcon = column => {
+  const type = column.schema.type
+  return TypeIconMap[type] || "Text"
+}

package/src/components/grid/lib/websocket.js

@@ -0,0 +1,63 @@
+import { get } from "svelte/store"
+import { io } from "socket.io-client"
+
+export const createWebsocket = context => {
+  const { rows, tableId, users, userId, focusedCellId } = context
+
+  // Determine connection info
+  const tls = location.protocol === "https:"
+  const proto = tls ? "wss:" : "ws:"
+  const host = location.hostname
+  const port = location.port || (tls ? 443 : 80)
+  const socket = io(`${proto}//${host}:${port}`, {
+    path: "/socket/grid",
+    // Cap reconnection attempts to 3 (total of 15 seconds before giving up)
+    reconnectionAttempts: 3,
+    // Delay reconnection attempt by 5 seconds
+    reconnectionDelay: 5000,
+    reconnectionDelayMax: 5000,
+    // Timeout after 4 seconds so we never stack requests
+    timeout: 4000,
+  })
+
+  const connectToTable = tableId => {
+    if (!socket.connected) {
+      return
+    }
+    // Identify which table we are editing
+    socket.emit("select-table", tableId, response => {
+      // handle initial connection info
+      users.set(response.users)
+      userId.set(response.id)
+    })
+  }
+
+  // Event handlers
+  socket.on("connect", () => {
+    connectToTable(get(tableId))
+  })
+  socket.on("row-update", data => {
+    if (data.id) {
+      rows.actions.refreshRow(data.id)
+    }
+  })
+  socket.on("user-update", user => {
+    users.actions.updateUser(user)
+  })
+  socket.on("user-disconnect", user => {
+    users.actions.removeUser(user)
+  })
+  socket.on("connect_error", err => {
+    console.log("Failed to connect to grid websocket:", err.message)
+  })
+
+  // Change websocket connection when table changes
+  tableId.subscribe(connectToTable)
+
+  // Notify selected cell changes
+  focusedCellId.subscribe($focusedCellId => {
+    socket.emit("select-cell", $focusedCellId)
+  })
+
+  return () => socket?.disconnect()
+}

package/src/components/grid/overlays/KeyboardManager.svelte

@@ -0,0 +1,180 @@
+<script>
+  import { getContext, onMount } from "svelte"
+  import { debounce } from "../../../utils/utils"
+
+  const {
+    enrichedRows,
+    focusedCellId,
+    visibleColumns,
+    focusedRow,
+    stickyColumn,
+    focusedCellAPI,
+    clipboard,
+  } = getContext("grid")
+
+  // Global key listener which intercepts all key events
+  const handleKeyDown = e => {
+    // If nothing selected avoid processing further key presses
+    if (!$focusedCellId) {
+      if (e.key === "Tab") {
+        e.preventDefault()
+        focusFirstCell()
+      }
+      return
+    }
+
+    // Always intercept certain key presses
+    const api = $focusedCellAPI
+    if (e.key === "Escape") {
+      api?.blur?.()
+    } else if (e.key === "Tab") {
+      api?.blur?.()
+      changeFocusedColumn(1)
+    }
+
+    // Pass the key event to the selected cell and let it decide whether to
+    // capture it or not
+    if (!api?.isReadonly()) {
+      const handled = api?.onKeyDown?.(e)
+      if (handled) {
+        return
+      }
+    }
+
+    // Avoid processing events sourced from modals
+    if (e.target?.closest?.(".spectrum-Modal")) {
+      return
+    }
+    e.preventDefault()
+
+    // Handle the key ourselves
+    if (e.metaKey || e.ctrlKey) {
+      switch (e.key) {
+        case "c":
+          clipboard.actions.copy()
+          break
+        case "v":
+          clipboard.actions.paste()
+          break
+      }
+    } else {
+      switch (e.key) {
+        case "ArrowLeft":
+          changeFocusedColumn(-1)
+          break
+        case "ArrowRight":
+          changeFocusedColumn(1)
+          break
+        case "ArrowUp":
+          changeFocusedRow(-1)
+          break
+        case "ArrowDown":
+          changeFocusedRow(1)
+          break
+        case "Delete":
+        case "Backspace":
+          deleteSelectedCell()
+          break
+        case "Enter":
+          focusCell()
+          break
+        default:
+          startEnteringValue(e.key, e.which)
+      }
+    }
+  }
+
+  // Focuses the first cell in the grid
+  const focusFirstCell = () => {
+    const firstRow = $enrichedRows[0]
+    if (!firstRow) {
+      return
+    }
+    const firstColumn = $stickyColumn || $visibleColumns[0]
+    if (!firstColumn) {
+      return
+    }
+    focusedCellId.set(`${firstRow._id}-${firstColumn.name}`)
+  }
+
+  // Changes the focused cell by moving it left or right to a different column
+  const changeFocusedColumn = delta => {
+    if (!$focusedCellId) {
+      return
+    }
+    const cols = $visibleColumns
+    const split = $focusedCellId.split("-")
+    const columnName = split[1]
+    let newColumnName
+    if (columnName === $stickyColumn?.name) {
+      const index = delta - 1
+      newColumnName = cols[index]?.name
+    } else {
+      const index = cols.findIndex(col => col.name === columnName) + delta
+      if (index === -1) {
+        newColumnName = $stickyColumn?.name
+      } else {
+        newColumnName = cols[index]?.name
+      }
+    }
+    if (newColumnName) {
+      $focusedCellId = `${split[0]}-${newColumnName}`
+    }
+  }
+
+  // Changes the focused cell by moving it up or down to a new row
+  const changeFocusedRow = delta => {
+    if (!$focusedRow) {
+      return
+    }
+    const newRow = $enrichedRows[$focusedRow.__idx + delta]
+    if (newRow) {
+      const split = $focusedCellId.split("-")
+      $focusedCellId = `${newRow._id}-${split[1]}`
+    }
+  }
+
+  // Debounce to avoid holding down delete and spamming requests
+  const deleteSelectedCell = debounce(() => {
+    if ($focusedCellAPI?.isReadonly()) {
+      return
+    }
+    $focusedCellAPI.setValue(null)
+  }, 100)
+
+  // Focuses the current cell for editing
+  const focusCell = () => {
+    if ($focusedCellAPI?.isReadonly()) {
+      return
+    }
+    $focusedCellAPI?.focus?.()
+  }
+
+  // Utils to identify a key code
+  const keyCodeIsNumber = keyCode => keyCode >= 48 && keyCode <= 57
+  const keyCodeIsLetter = keyCode => keyCode >= 65 && keyCode <= 90
+
+  // Focuses the cell and starts entering a new value
+  const startEnteringValue = (key, keyCode) => {
+    if ($focusedCellAPI) {
+      const type = $focusedCellAPI.getType()
+      if (type === "number" && keyCodeIsNumber(keyCode)) {
+        $focusedCellAPI.setValue(parseInt(key))
+        $focusedCellAPI.focus()
+      } else if (
+        ["string", "barcodeqr", "longform"].includes(type) &&
+        (keyCodeIsLetter(keyCode) || keyCodeIsNumber(keyCode))
+      ) {
+        $focusedCellAPI.setValue(key)
+        $focusedCellAPI.focus()
+      }
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("keydown", handleKeyDown)
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown)
+    }
+  })
+</script>

package/src/components/grid/overlays/MenuOverlay.svelte

@@ -0,0 +1,95 @@
+<script>
+  import { clickOutside, Menu, MenuItem, notifications } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  const {
+    focusedRow,
+    menu,
+    rows,
+    columns,
+    focusedCellId,
+    stickyColumn,
+    config,
+    copiedCell,
+    clipboard,
+    dispatch,
+  } = getContext("grid")
+
+  $: style = makeStyle($menu)
+
+  const makeStyle = menu => {
+    return `left:${menu.left}px; top:${menu.top}px;`
+  }
+
+  const deleteRow = () => {
+    rows.actions.deleteRows([$focusedRow])
+    menu.actions.close()
+    notifications.success("Deleted 1 row")
+  }
+
+  const duplicate = async () => {
+    menu.actions.close()
+    const newRow = await rows.actions.duplicateRow($focusedRow)
+    if (newRow) {
+      const column = $stickyColumn?.name || $columns[0].name
+      $focusedCellId = `${newRow._id}-${column}`
+    }
+  }
+</script>
+
+{#if $menu.visible}
+  <div class="menu" {style} use:clickOutside={() => menu.actions.close()}>
+    <Menu>
+      <MenuItem
+        icon="Copy"
+        on:click={clipboard.actions.copy}
+        on:click={menu.actions.close}
+      >
+        Copy
+      </MenuItem>
+      <MenuItem
+        icon="Paste"
+        disabled={$copiedCell == null}
+        on:click={clipboard.actions.paste}
+        on:click={menu.actions.close}
+      >
+        Paste
+      </MenuItem>
+      <MenuItem
+        icon="Maximize"
+        disabled={!$config.allowEditRows}
+        on:click={() => dispatch("edit-row", $focusedRow)}
+        on:click={menu.actions.close}
+      >
+        Edit row in modal
+      </MenuItem>
+      <MenuItem
+        icon="Duplicate"
+        disabled={!$config.allowAddRows}
+        on:click={duplicate}
+      >
+        Duplicate row
+      </MenuItem>
+      <MenuItem
+        icon="Delete"
+        disabled={!$config.allowDeleteRows}
+        on:click={deleteRow}
+      >
+        Delete row
+      </MenuItem>
+    </Menu>
+  </div>
+{/if}
+
+<style>
+  .menu {
+    position: absolute;
+    background: var(--cell-background);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    width: 180px;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
+  }
+</style>

package/src/components/grid/overlays/ReorderOverlay.svelte

@@ -0,0 +1,63 @@
+<script>
+  import { getContext } from "svelte"
+  import GridScrollWrapper from "../layout/GridScrollWrapper.svelte"
+  import { DefaultRowHeight, GutterWidth } from "../lib/constants"
+
+  const {
+    isReordering,
+    reorder,
+    visibleColumns,
+    stickyColumn,
+    rowHeight,
+    renderedRows,
+    scrollLeft,
+  } = getContext("grid")
+
+  $: targetColumn = $reorder.targetColumn
+  $: minLeft = GutterWidth + ($stickyColumn?.width || 0)
+  $: left = getLeft(targetColumn, $stickyColumn, $visibleColumns, $scrollLeft)
+  $: height = $rowHeight * $renderedRows.length + DefaultRowHeight
+  $: style = `left:${left}px; height:${height}px;`
+  $: visible = $isReordering && left >= minLeft
+
+  const getLeft = (targetColumn, stickyColumn, visibleColumns, scrollLeft) => {
+    let left = GutterWidth + (stickyColumn?.width || 0) - scrollLeft
+
+    // If this is not the sticky column, add additional left space
+    if (targetColumn !== stickyColumn?.name) {
+      const column = visibleColumns.find(x => x.name === targetColumn)
+      if (!column) {
+        return left
+      }
+      left += column.left + column.width
+    }
+
+    return left
+  }
+</script>
+
+{#if visible}
+  <div class="reorder-wrapper">
+    <GridScrollWrapper scrollVertically>
+      <div class="reorder-overlay" {style} />
+    </GridScrollWrapper>
+  </div>
+{/if}
+
+<style>
+  .reorder-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+  .reorder-overlay {
+    position: absolute;
+    top: 0;
+    width: 2px;
+    background: var(--spectrum-global-color-blue-400);
+    margin-left: -2px;
+  }
+</style>

package/src/components/grid/overlays/ResizeOverlay.svelte

@@ -0,0 +1,70 @@
+<script>
+  import { getContext } from "svelte"
+  import { GutterWidth } from "../lib/constants"
+
+  const {
+    columns,
+    resize,
+    renderedColumns,
+    stickyColumn,
+    isReordering,
+    scrollLeft,
+  } = getContext("grid")
+
+  $: cutoff = $scrollLeft + GutterWidth + ($columns[0]?.width || 0)
+  $: offset = GutterWidth + ($stickyColumn?.width || 0)
+  $: activeColumn = $resize.column
+
+  const getStyle = (column, offset, scrollLeft) => {
+    const left = offset + column.left + column.width - scrollLeft
+    return `left:${left}px;`
+  }
+</script>
+
+{#if !$isReordering}
+  {#if $stickyColumn}
+    <div
+      class="resize-slider"
+      class:visible={activeColumn === $stickyColumn.name}
+      on:mousedown={e => resize.actions.startResizing($stickyColumn, e)}
+      on:dblclick={() => resize.actions.resetSize($stickyColumn)}
+      style="left:{GutterWidth + $stickyColumn.width}px;"
+    >
+      <div class="resize-indicator" />
+    </div>
+  {/if}
+  {#each $renderedColumns as column}
+    <div
+      class="resize-slider"
+      class:visible={activeColumn === column.name}
+      on:mousedown={e => resize.actions.startResizing(column, e)}
+      on:dblclick={() => resize.actions.resetSize(column)}
+      style={getStyle(column, offset, $scrollLeft)}
+    >
+      <div class="resize-indicator" />
+    </div>
+  {/each}
+{/if}
+
+<style>
+  .resize-slider {
+    position: absolute;
+    top: 0;
+    height: var(--default-row-height);
+    opacity: 0;
+    padding: 0 8px;
+    transform: translateX(-50%);
+    user-select: none;
+  }
+  .resize-slider:hover,
+  .resize-slider.visible {
+    cursor: col-resize;
+    opacity: 1;
+  }
+  .resize-indicator {
+    margin-left: -1px;
+    width: 2px;
+    height: 100%;
+    background: var(--spectrum-global-color-blue-400);
+  }
+</style>

package/src/components/grid/overlays/ScrollOverlay.svelte

@@ -0,0 +1,121 @@
+<script>
+  import { getContext } from "svelte"
+  import { domDebounce } from "../../../utils/utils"
+  import { DefaultRowHeight, ScrollBarSize } from "../lib/constants"
+
+  const {
+    scroll,
+    contentHeight,
+    maxScrollTop,
+    contentWidth,
+    maxScrollLeft,
+    screenWidth,
+    showHScrollbar,
+    showVScrollbar,
+    scrollLeft,
+    scrollTop,
+    height,
+  } = getContext("grid")
+
+  // State for dragging bars
+  let initialMouse
+  let initialScroll
+
+  // Calculate V scrollbar size and offset
+  // Terminology is the same for both axes:
+  //   renderX - the space available to render the bar in, edge to edge
+  //   availX - the space available to render the bar in, until the edge
+  $: renderHeight = $height - 2 * ScrollBarSize
+  $: barHeight = Math.max(50, ($height / $contentHeight) * renderHeight)
+  $: availHeight = renderHeight - barHeight
+  $: barTop =
+    ScrollBarSize +
+    DefaultRowHeight +
+    availHeight * ($scrollTop / $maxScrollTop)
+
+  // Calculate H scrollbar size and offset
+  $: renderWidth = $screenWidth - 2 * ScrollBarSize
+  $: barWidth = Math.max(50, ($screenWidth / $contentWidth) * renderWidth)
+  $: availWidth = renderWidth - barWidth
+  $: barLeft = ScrollBarSize + availWidth * ($scrollLeft / $maxScrollLeft)
+
+  // V scrollbar drag handlers
+  const startVDragging = e => {
+    e.preventDefault()
+    initialMouse = e.clientY
+    initialScroll = $scrollTop
+    document.addEventListener("mousemove", moveVDragging)
+    document.addEventListener("mouseup", stopVDragging)
+  }
+  const moveVDragging = domDebounce(e => {
+    const delta = e.clientY - initialMouse
+    const weight = delta / availHeight
+    const newScrollTop = initialScroll + weight * $maxScrollTop
+    scroll.update(state => ({
+      ...state,
+      top: Math.max(0, Math.min(newScrollTop, $maxScrollTop)),
+    }))
+  })
+  const stopVDragging = () => {
+    document.removeEventListener("mousemove", moveVDragging)
+    document.removeEventListener("mouseup", stopVDragging)
+  }
+
+  // H scrollbar drag handlers
+  const startHDragging = e => {
+    e.preventDefault()
+    initialMouse = e.clientX
+    initialScroll = $scrollLeft
+    document.addEventListener("mousemove", moveHDragging)
+    document.addEventListener("mouseup", stopHDragging)
+  }
+  const moveHDragging = domDebounce(e => {
+    const delta = e.clientX - initialMouse
+    const weight = delta / availWidth
+    const newScrollLeft = initialScroll + weight * $maxScrollLeft
+    scroll.update(state => ({
+      ...state,
+      left: Math.max(0, Math.min(newScrollLeft, $maxScrollLeft)),
+    }))
+  })
+  const stopHDragging = () => {
+    document.removeEventListener("mousemove", moveHDragging)
+    document.removeEventListener("mouseup", stopHDragging)
+  }
+</script>
+
+{#if $showVScrollbar}
+  <div
+    class="v-scrollbar"
+    style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
+    on:mousedown={startVDragging}
+  />
+{/if}
+{#if $showHScrollbar}
+  <div
+    class="h-scrollbar"
+    style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
+    on:mousedown={startHDragging}
+  />
+{/if}
+
+<style>
+  div {
+    position: absolute;
+    background: var(--spectrum-global-color-gray-500);
+    opacity: 0.7;
+    border-radius: 4px;
+    transition: opacity 130ms ease-out;
+  }
+  div:hover {
+    opacity: 1;
+  }
+  .v-scrollbar {
+    width: var(--size);
+    right: var(--size);
+  }
+  .h-scrollbar {
+    height: var(--size);
+    bottom: var(--size);
+  }
+</style>

package/src/components/grid/stores/bounds.js

@@ -0,0 +1,16 @@
+import { derived, writable } from "svelte/store"
+
+export const createStores = () => {
+  const bounds = writable({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+  })
+
+  // Derive height and width as primitives to avoid wasted computation
+  const width = derived(bounds, $bounds => $bounds.width, 0)
+  const height = derived(bounds, $bounds => $bounds.height, 0)
+
+  return { bounds, height, width }
+}

package/src/components/grid/stores/clipboard.js

@@ -0,0 +1,34 @@
+import { writable, get } from "svelte/store"
+
+export const createStores = () => {
+  const copiedCell = writable(null)
+
+  return {
+    copiedCell,
+  }
+}
+
+export const deriveStores = context => {
+  const { copiedCell, focusedCellAPI } = context
+
+  const copy = () => {
+    copiedCell.set(get(focusedCellAPI)?.getValue())
+  }
+
+  const paste = () => {
+    const $copiedCell = get(copiedCell)
+    const $focusedCellAPI = get(focusedCellAPI)
+    if ($copiedCell != null && $focusedCellAPI) {
+      $focusedCellAPI.setValue($copiedCell)
+    }
+  }
+
+  return {
+    clipboard: {
+      actions: {
+        copy,
+        paste,
+      },
+    },
+  }
+}