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

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

@@ -0,0 +1,168 @@
+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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,141 @@
+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,
+  }
+}

package/src/components/index.js

@@ -1,2 +1,3 @@
 export { default as SplitPage } from "./SplitPage.svelte"
 export { default as TestimonialPage } from "./TestimonialPage.svelte"
+export { Grid } from "./grid"

package/src/fetch/DataFetch.js

@@ -21,11 +21,11 @@ export default class DataFetch {
     this.API = null
 
     // Feature flags
-    this.featureStore = writable({
+    this.features = {
       supportsSearch: false,
       supportsSort: false,
       supportsPagination: false,
-    })
+    }
 
     // Config
     this.options = {
@@ -56,6 +56,7 @@ export default class DataFetch {
       pageNumber: 0,
       cursor: null,
       cursors: [],
+      resetKey: Math.random(),
     })
 
     // Merge options with their default values
@@ -81,17 +82,14 @@ export default class DataFetch {
     this.prevPage = this.prevPage.bind(this)
 
     // Derive certain properties to return
-    this.derivedStore = derived(
-      [this.store, this.featureStore],
-      ([$store, $featureStore]) => {
-        return {
-          ...$store,
-          ...$featureStore,
-          hasNextPage: this.hasNextPage($store),
-          hasPrevPage: this.hasPrevPage($store),
-        }
+    this.derivedStore = derived(this.store, $store => {
+      return {
+        ...$store,
+        ...this.features,
+        hasNextPage: this.hasNextPage($store),
+        hasPrevPage: this.hasPrevPage($store),
       }
-    )
+    })
 
     // Mark as loaded if we have no datasource
     if (!this.options.datasource) {
@@ -120,11 +118,11 @@ export default class DataFetch {
     // Fetch datasource definition and determine feature flags
     const definition = await this.getDefinition(datasource)
     const features = this.determineFeatureFlags(definition)
-    this.featureStore.set({
+    this.features = {
       supportsSearch: !!features?.supportsSearch,
       supportsSort: !!features?.supportsSort,
       supportsPagination: paginate && !!features?.supportsPagination,
-    })
+    }
 
     // Fetch and enrich schema
     let schema = this.getSchema(datasource, definition)
@@ -138,11 +136,17 @@ export default class DataFetch {
       this.options.sortOrder = "ascending"
     }
 
-    // If no sort column, use the first field in the schema
+    // If no sort column, use the primary display and fallback to first column
     if (!this.options.sortColumn) {
-      this.options.sortColumn = Object.keys(schema)[0]
+      let newSortColumn
+      if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
+        newSortColumn = definition.primaryDisplay
+      } else {
+        newSortColumn = Object.keys(schema)[0]
+      }
+      this.options.sortColumn = newSortColumn
     }
-    const { sortColumn } = this.options
+    const { sortOrder, sortColumn } = this.options
 
     // Determine what sort type to use
     let sortType = "string"
@@ -167,6 +171,8 @@ export default class DataFetch {
       loading: true,
       cursors: [],
       cursor: null,
+      sortOrder,
+      sortColumn,
     }))
 
     // Actually fetch data
@@ -180,6 +186,7 @@ export default class DataFetch {
       info: page.info,
       cursors: paginate && page.hasNextPage ? [null, page.cursor] : [null],
       error: page.error,
+      resetKey: Math.random(),
     }))
   }
 
@@ -189,23 +196,22 @@ export default class DataFetch {
   async getPage() {
     const { sortColumn, sortOrder, sortType, limit } = this.options
     const { query } = get(this.store)
-    const features = get(this.featureStore)
 
     // Get the actual data
     let { rows, info, hasNextPage, cursor, error } = await this.getData()
 
     // If we don't support searching, do a client search
-    if (!features.supportsSearch) {
+    if (!this.features.supportsSearch) {
       rows = runLuceneQuery(rows, query)
     }
 
     // If we don't support sorting, do a client-side sort
-    if (!features.supportsSort) {
+    if (!this.features.supportsSort) {
       rows = luceneSort(rows, sortColumn, sortOrder, sortType)
     }
 
     // If we don't support pagination, do a client-side limit
-    if (!features.supportsPagination) {
+    if (!this.features.supportsPagination) {
       rows = luceneLimit(rows, limit)
     }
 

package/src/fetch/QueryFetch.js

@@ -31,7 +31,7 @@ export default class QueryFetch extends DataFetch {
 
   async getData() {
     const { datasource, limit, paginate } = this.options
-    const { supportsPagination } = get(this.featureStore)
+    const { supportsPagination } = this.features
     const { cursor, definition } = get(this.store)
     const type = definition?.fields?.pagination?.type
 

package/src/themes/midnight.css

@@ -13,6 +13,9 @@
     --spectrum-global-color-gray-800: hsl(var(--hue), var(--sat), 85%);
     --spectrum-global-color-gray-900: hsl(var(--hue), var(--sat), 95%);
 
+    /* Custom additions */
     --modal-background: var(--spectrum-global-color-gray-50);
+    --drop-shadow: rgba(0, 0, 0, 0.25) !important;
+    --spectrum-global-color-blue-100: rgba(35, 40, 50) !important;
 }
 

package/src/themes/nord.css

@@ -46,5 +46,8 @@
   --spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1);
   --spectrum-alias-background-color-hover-overlay: rgba(169, 177, 193, 0.1);
 
+  /* Custom additions */
   --modal-background: var(--spectrum-global-color-gray-50);
+  --drop-shadow: rgba(0, 0, 0, 0.15) !important;
+  --spectrum-global-color-blue-100: rgb(56, 65, 84) !important;
 }

package/src/utils/utils.js

@@ -86,3 +86,23 @@ export const throttle = (callback, minDelay = 1000) => {
   }
   return invoke
 }
+
+/**
+ * Utility to debounce DOM activities using requestAnimationFrame
+ * @param callback the function to run
+ * @returns {Function}
+ */
+export const domDebounce = callback => {
+  let active = false
+  let lastParams
+  return (...params) => {
+    lastParams = params
+    if (!active) {
+      active = true
+      requestAnimationFrame(() => {
+        callback(...lastParams)
+        active = false
+      })
+    }
+  }
+}