@budibase/frontend-core 2.5.6-alpha.9 → 2.5.7

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

@@ -1,168 +0,0 @@
-import { writable, get, derived } from "svelte/store"
-import {
-  DefaultRowHeight,
-  LargeRowHeight,
-  MediumRowHeight,
-} from "../lib/constants"
-
-export const createStores = () => {
-  const focusedCellId = writable(null)
-  const focusedCellAPI = writable(null)
-  const selectedRows = writable({})
-  const hoveredRowId = writable(null)
-  const rowHeight = writable(DefaultRowHeight)
-  const previousFocusedRowId = writable(null)
-
-  // Derive the current focused row ID
-  const focusedRowId = derived(
-    focusedCellId,
-    $focusedCellId => {
-      return $focusedCellId?.split("-")[0]
-    },
-    null
-  )
-
-  return {
-    focusedCellId,
-    focusedCellAPI,
-    focusedRowId,
-    previousFocusedRowId,
-    selectedRows,
-    hoveredRowId,
-    rowHeight,
-  }
-}
-
-export const deriveStores = context => {
-  const {
-    focusedCellId,
-    selectedRows,
-    hoveredRowId,
-    enrichedRows,
-    rowLookupMap,
-    rowHeight,
-  } = context
-
-  // Derive the row that contains the selected cell
-  const focusedRow = derived(
-    [focusedCellId, rowLookupMap, enrichedRows],
-    ([$focusedCellId, $rowLookupMap, $enrichedRows]) => {
-      const rowId = $focusedCellId?.split("-")[0]
-
-      if (rowId === "new") {
-        // Edge case for new row
-        return { _id: rowId }
-      } else {
-        // All normal rows
-        const index = $rowLookupMap[rowId]
-        return $enrichedRows[index]
-      }
-    },
-    null
-  )
-
-  // Callback when leaving the grid, deselecting all focussed or selected items
-  const blur = () => {
-    focusedCellId.set(null)
-    selectedRows.set({})
-    hoveredRowId.set(null)
-  }
-
-  const contentLines = derived(rowHeight, $rowHeight => {
-    if ($rowHeight === LargeRowHeight) {
-      return 3
-    } else if ($rowHeight === MediumRowHeight) {
-      return 2
-    }
-    return 1
-  })
-
-  return {
-    focusedRow,
-    contentLines,
-    ui: {
-      actions: {
-        blur,
-      },
-    },
-  }
-}
-
-export const initialise = context => {
-  const {
-    focusedRowId,
-    previousFocusedRowId,
-    rows,
-    focusedCellId,
-    selectedRows,
-    hoveredRowId,
-    table,
-    rowHeight,
-  } = context
-
-  // Ensure we clear invalid rows from state if they disappear
-  rows.subscribe(() => {
-    const $focusedCellId = get(focusedCellId)
-    const $selectedRows = get(selectedRows)
-    const $hoveredRowId = get(hoveredRowId)
-    const hasRow = rows.actions.hasRow
-
-    // Check selected cell
-    const selectedRowId = $focusedCellId?.split("-")[0]
-    if (selectedRowId && !hasRow(selectedRowId)) {
-      focusedCellId.set(null)
-    }
-
-    // Check hovered row
-    if ($hoveredRowId && !hasRow($hoveredRowId)) {
-      hoveredRowId.set(null)
-    }
-
-    // Check selected rows
-    let newSelectedRows = { ...$selectedRows }
-    let selectedRowsNeedsUpdate = false
-    const selectedIds = Object.keys($selectedRows)
-    for (let i = 0; i < selectedIds.length; i++) {
-      if (!hasRow(selectedIds[i])) {
-        delete newSelectedRows[selectedIds[i]]
-        selectedRowsNeedsUpdate = true
-      }
-    }
-    if (selectedRowsNeedsUpdate) {
-      selectedRows.set(newSelectedRows)
-    }
-  })
-
-  // Remember the last focused row ID so that we can store the previous one
-  let lastFocusedRowId = null
-  focusedRowId.subscribe(id => {
-    previousFocusedRowId.set(lastFocusedRowId)
-    lastFocusedRowId = id
-  })
-
-  // Reset selected rows when selected cell changes
-  focusedCellId.subscribe(id => {
-    if (id) {
-      selectedRows.set({})
-    }
-  })
-
-  // Unset selected cell when rows are selected
-  selectedRows.subscribe(rows => {
-    if (Object.keys(rows || {}).length) {
-      focusedCellId.set(null)
-    }
-  })
-
-  // Remove hovered row when a cell is selected
-  focusedCellId.subscribe(cell => {
-    if (cell && get(hoveredRowId)) {
-      hoveredRowId.set(null)
-    }
-  })
-
-  // Pull row height from table
-  table.subscribe($table => {
-    rowHeight.set($table?.rowHeight || DefaultRowHeight)
-  })
-}

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

@@ -1,115 +0,0 @@
-import { writable, get, derived } from "svelte/store"
-
-export const createStores = () => {
-  const users = writable([])
-  const userId = writable(null)
-
-  // Enrich users with unique colours
-  const enrichedUsers = derived(
-    [users, userId],
-    ([$users, $userId]) => {
-      return (
-        $users
-          .slice()
-          // Place current user first
-          .sort((a, b) => {
-            if (a.id === $userId) {
-              return -1
-            } else if (b.id === $userId) {
-              return 1
-            } else {
-              return 0
-            }
-          })
-          // Enrich users with colors
-          .map((user, idx) => {
-            // Generate random colour hue
-            let hue = 1
-            for (let i = 0; i < user.email.length && i < 5; i++) {
-              hue *= user.email.charCodeAt(i + 1)
-              hue /= 17
-            }
-            hue = hue % 360
-            const color =
-              idx === 0
-                ? "var(--spectrum-global-color-blue-400)"
-                : `hsl(${hue}, 50%, 40%)`
-
-            // Generate friendly label
-            let label = user.email
-            if (user.firstName) {
-              label = user.firstName
-              if (user.lastName) {
-                label += ` ${user.lastName}`
-              }
-            }
-
-            return {
-              ...user,
-              color,
-              label,
-            }
-          })
-      )
-    },
-    []
-  )
-
-  return {
-    users: {
-      ...users,
-      subscribe: enrichedUsers.subscribe,
-    },
-    userId,
-  }
-}
-
-export const deriveStores = context => {
-  const { users, userId } = context
-
-  // Generate a lookup map of cell ID to the user that has it selected, to make
-  // lookups inside cells extremely fast
-  const selectedCellMap = derived(
-    [users, userId],
-    ([$enrichedUsers, $userId]) => {
-      let map = {}
-      $enrichedUsers.forEach(user => {
-        if (user.focusedCellId && user.id !== $userId) {
-          map[user.focusedCellId] = user
-        }
-      })
-      return map
-    },
-    {}
-  )
-
-  const updateUser = user => {
-    const $users = get(users)
-    const index = $users.findIndex(x => x.id === user.id)
-    if (index === -1) {
-      users.set([...$users, user])
-    } else {
-      users.update(state => {
-        state[index] = user
-        return state.slice()
-      })
-    }
-  }
-
-  const removeUser = user => {
-    users.update(state => {
-      return state.filter(x => x.id !== user.id)
-    })
-  }
-
-  return {
-    users: {
-      ...users,
-      actions: {
-        updateUser,
-        removeUser,
-      },
-    },
-    selectedCellMap,
-  }
-}

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

@@ -1,45 +0,0 @@
-import { writable, get } from "svelte/store"
-
-export const createStores = () => {
-  const validation = writable({})
-
-  const setError = (cellId, error) => {
-    if (!cellId) {
-      return
-    }
-    validation.update(state => ({
-      ...state,
-      [cellId]: error,
-    }))
-  }
-
-  return {
-    validation: {
-      ...validation,
-      actions: {
-        setError,
-      },
-    },
-  }
-}
-
-export const initialise = context => {
-  const { validation, previousFocusedRowId, columns, stickyColumn } = context
-
-  // Remove validation errors from previous focused row
-  previousFocusedRowId.subscribe(id => {
-    if (id) {
-      const $columns = get(columns)
-      const $stickyColumn = get(stickyColumn)
-      validation.update(state => {
-        $columns.forEach(column => {
-          state[`${id}-${column.name}`] = null
-        })
-        if ($stickyColumn) {
-          state[`${id}-${$stickyColumn.name}`] = null
-        }
-        return state
-      })
-    }
-  })
-}

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

@@ -1,141 +0,0 @@
-import { derived, get } from "svelte/store"
-import {
-  MaxCellRenderHeight,
-  MaxCellRenderWidthOverflow,
-  ScrollBarSize,
-} from "../lib/constants"
-
-export const deriveStores = context => {
-  const {
-    rowHeight,
-    visibleColumns,
-    enrichedRows,
-    scrollTop,
-    scrollLeft,
-    width,
-    height,
-  } = context
-
-  // Derive visible rows
-  // Split into multiple stores containing primitives to optimise invalidation
-  // as much as possible
-  const scrolledRowCount = derived(
-    [scrollTop, rowHeight],
-    ([$scrollTop, $rowHeight]) => {
-      return Math.floor($scrollTop / $rowHeight)
-    },
-    0
-  )
-  const visualRowCapacity = derived(
-    [height, rowHeight],
-    ([$height, $rowHeight]) => {
-      return Math.ceil($height / $rowHeight) + 1
-    },
-    0
-  )
-  const renderedRows = derived(
-    [enrichedRows, scrolledRowCount, visualRowCapacity],
-    ([$enrichedRows, $scrolledRowCount, $visualRowCapacity]) => {
-      return $enrichedRows.slice(
-        $scrolledRowCount,
-        $scrolledRowCount + $visualRowCapacity
-      )
-    },
-    []
-  )
-
-  // Derive visible columns
-  const renderedColumns = derived(
-    [visibleColumns, scrollLeft, width],
-    ([$visibleColumns, $scrollLeft, $width]) => {
-      if (!$visibleColumns.length) {
-        return []
-      }
-      let startColIdx = 0
-      let rightEdge = $visibleColumns[0].width
-      while (
-        rightEdge < $scrollLeft &&
-        startColIdx < $visibleColumns.length - 1
-      ) {
-        startColIdx++
-        rightEdge += $visibleColumns[startColIdx].width
-      }
-      let endColIdx = startColIdx + 1
-      let leftEdge = rightEdge
-      while (
-        leftEdge < $width + $scrollLeft &&
-        endColIdx < $visibleColumns.length
-      ) {
-        leftEdge += $visibleColumns[endColIdx].width
-        endColIdx++
-      }
-      const nextRenderedColumns = $visibleColumns.slice(startColIdx, endColIdx)
-
-      // Cautiously shrink the number of rendered columns.
-      // This is to avoid rapidly shrinking and growing the visible column count
-      // which results in remounting cells
-      const currentCount = get(renderedColumns).length
-      if (currentCount === nextRenderedColumns.length + 1) {
-        return $visibleColumns.slice(startColIdx, endColIdx + 1)
-      } else {
-        return nextRenderedColumns
-      }
-    },
-    []
-  )
-
-  const hiddenColumnsWidth = derived(
-    [renderedColumns, visibleColumns],
-    ([$renderedColumns, $visibleColumns]) => {
-      const idx = $visibleColumns.findIndex(
-        col => col.name === $renderedColumns[0]?.name
-      )
-      let width = 0
-      if (idx > 0) {
-        for (let i = 0; i < idx; i++) {
-          width += $visibleColumns[i].width
-        }
-      }
-      return width
-    },
-    0
-  )
-
-  // Determine the row index at which we should start vertically inverting cell
-  // dropdowns
-  const rowVerticalInversionIndex = derived(
-    [visualRowCapacity, rowHeight],
-    ([$visualRowCapacity, $rowHeight]) => {
-      return (
-        $visualRowCapacity - Math.ceil(MaxCellRenderHeight / $rowHeight) - 2
-      )
-    }
-  )
-
-  // Determine the column index at which we should start horizontally inverting
-  // cell dropdowns
-  const columnHorizontalInversionIndex = derived(
-    [renderedColumns, scrollLeft, width],
-    ([$renderedColumns, $scrollLeft, $width]) => {
-      const cutoff = $width + $scrollLeft - ScrollBarSize * 3
-      let inversionIdx = $renderedColumns.length
-      for (let i = $renderedColumns.length - 1; i >= 0; i--, inversionIdx--) {
-        const rightEdge = $renderedColumns[i].left + $renderedColumns[i].width
-        if (rightEdge + MaxCellRenderWidthOverflow < cutoff) {
-          break
-        }
-      }
-      return inversionIdx
-    }
-  )
-
-  return {
-    scrolledRowCount,
-    visualRowCapacity,
-    renderedRows,
-    renderedColumns,
-    hiddenColumnsWidth,
-    rowVerticalInversionIndex,
-    columnHorizontalInversionIndex,
-  }
-}