PR comments.

packages/frontend-core/src/components/grid/layout/GridRow.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import DataCell from "../cells/DataCell.svelte"
-  import { combineRowId } from "../lib/utils"
+  import { getCellID } from "../lib/utils"
 
   export let row
   export let top = false
@@ -39,7 +39,7 @@
   on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
 >
   {#each $visibleColumns as column, columnIdx}
-    {@const cellId = combineRowId(row._id, column.name)}
+    {@const cellId = getCellID(row._id, column.name)}
     <DataCell
       {cellId}
       {column}

packages/frontend-core/src/components/grid/layout/NewRow.svelte

@@ -7,7 +7,7 @@
   import { GutterWidth, NewRowID } from "../lib/constants"
   import GutterCell from "../cells/GutterCell.svelte"
   import KeyboardShortcut from "./KeyboardShortcut.svelte"
-  import { combineRowId } from "../lib/utils"
+  import { getCellID } from "../lib/utils"
 
   const {
     hoveredRowId,
@@ -71,7 +71,7 @@
 
       // Select the first cell if possible
       if (firstColumn) {
-        $focusedCellId = combineRowId(savedRow._id, firstColumn.name)
+        $focusedCellId = getCellID(savedRow._id, firstColumn.name)
       }
     }
     isAdding = false
@@ -119,7 +119,7 @@
     visible = true
     $hoveredRowId = NewRowID
     if (firstColumn) {
-      $focusedCellId = combineRowId(NewRowID, firstColumn.name)
+      $focusedCellId = getCellID(NewRowID, firstColumn.name)
     }
 
     // Attach key listener
@@ -195,7 +195,7 @@
         {/if}
       </GutterCell>
       {#if $stickyColumn}
-        {@const cellId = combineRowId(NewRowID, $stickyColumn.name)}
+        {@const cellId = getCellID(NewRowID, $stickyColumn.name)}
         <DataCell
           {cellId}
           rowFocused

packages/frontend-core/src/components/grid/layout/StickyColumn.svelte

@@ -8,7 +8,7 @@
   import { GutterWidth, BlankRowID } from "../lib/constants"
   import GutterCell from "../cells/GutterCell.svelte"
   import KeyboardShortcut from "./KeyboardShortcut.svelte"
-  import { combineRowId } from "../lib/utils"
+  import { getCellID } from "../lib/utils"
 
   const {
     rows,
@@ -72,7 +72,7 @@
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}
         {@const rowFocused = $focusedRow?._id === row._id}
-        {@const cellId = combineRowId(row._id, $stickyColumn?.name)}
+        {@const cellId = getCellID(row._id, $stickyColumn?.name)}
         <div
           class="row"
           on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}

packages/frontend-core/src/components/grid/lib/utils.js

@@ -4,7 +4,7 @@ import { TypeIconMap } from "../../../constants"
 // using something very unusual to avoid this problem
 const JOINING_CHARACTER = "‽‽"
 
-export const splitRowId = rowId => {
+export const parseCellID = rowId => {
   if (!rowId) {
     return undefined
   }
@@ -13,7 +13,7 @@ export const splitRowId = rowId => {
   return { id: parts.join(JOINING_CHARACTER), field }
 }
 
-export const combineRowId = (rowId, fieldName) => {
+export const getCellID = (rowId, fieldName) => {
   return `${rowId}${JOINING_CHARACTER}${fieldName}`
 }
 

packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte

@@ -2,7 +2,7 @@
   import { getContext, onMount } from "svelte"
   import { debounce } from "../../../utils/utils"
   import { NewRowID } from "../lib/constants"
-  import { combineRowId, splitRowId } from "../lib/utils"
+  import { getCellID, parseCellID } from "../lib/utils"
 
   const {
     rows,
@@ -155,7 +155,7 @@
     if (!firstColumn) {
       return
     }
-    focusedCellId.set(combineRowId(firstRow._id, firstColumn.name))
+    focusedCellId.set(getCellID(firstRow._id, firstColumn.name))
   }
 
   // Changes the focused cell by moving it left or right to a different column
@@ -164,7 +164,7 @@
       return
     }
     const cols = $visibleColumns
-    const { id, field: columnName } = splitRowId($focusedCellId)
+    const { id, field: columnName } = parseCellID($focusedCellId)
     let newColumnName
     if (columnName === $stickyColumn?.name) {
       const index = delta - 1
@@ -178,7 +178,7 @@
       }
     }
     if (newColumnName) {
-      $focusedCellId = combineRowId(id, newColumnName)
+      $focusedCellId = getCellID(id, newColumnName)
     }
   }
 
@@ -189,8 +189,8 @@
     }
     const newRow = $rows[$focusedRow.__idx + delta]
     if (newRow) {
-      const { field } = splitRowId($focusedCellId)
-      $focusedCellId = combineRowId(newRow._id, field)
+      const { field } = parseCellID($focusedCellId)
+      $focusedCellId = getCellID(newRow._id, field)
     }
   }
 

packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte

@@ -3,7 +3,7 @@
   import { getContext } from "svelte"
   import { NewRowID } from "../lib/constants"
   import GridPopover from "./GridPopover.svelte"
-  import { combineRowId } from "../lib/utils"
+  import { getCellID } from "../lib/utils"
 
   const {
     focusedRow,
@@ -42,7 +42,7 @@
     const newRow = await rows.actions.duplicateRow($focusedRow)
     if (newRow) {
       const column = $stickyColumn?.name || $columns[0].name
-      $focusedCellId = combineRowId(newRow._id, column)
+      $focusedCellId = getCellID(newRow._id, column)
     }
   }
 

packages/frontend-core/src/components/grid/stores/rows.js

@@ -1,7 +1,7 @@
 import { writable, derived, get } from "svelte/store"
 import { fetchData } from "../../../fetch"
 import { NewRowID, RowPageSize } from "../lib/constants"
-import { combineRowId, splitRowId } from "../lib/utils"
+import { getCellID, parseCellID } from "../lib/utils"
 import { tick } from "svelte"
 import { Helpers } from "@budibase/bbui"
 
@@ -207,7 +207,7 @@ export const createActions = context => {
     // If the server doesn't reply with a valid error, assume that the source
     // of the error is the focused cell's column
     if (!error?.json?.validationErrors && errorString) {
-      const { field: focusedColumn } = splitRowId(get(focusedCellId))
+      const { field: focusedColumn } = parseCellID(get(focusedCellId))
       if (focusedColumn) {
         error = {
           json: {
@@ -246,7 +246,7 @@ export const createActions = context => {
         }
         // Set error against the cell
         validation.actions.setError(
-          combineRowId(rowId, column),
+          getCellID(rowId, column),
           Helpers.capitalise(err)
         )
         // Ensure the column is visible
@@ -266,7 +266,7 @@ export const createActions = context => {
 
       // Focus the first cell with an error
       if (erroredColumns.length) {
-        focusedCellId.set(combineRowId(rowId, erroredColumns[0]))
+        focusedCellId.set(getCellID(rowId, erroredColumns[0]))
       }
     } else {
       get(notifications).error(errorString || "An unknown error occurred")
@@ -572,10 +572,10 @@ export const initialise = context => {
       return
     }
     // Stop if we changed row
-    const split = splitRowId(id)
+    const split = parseCellID(id)
     const oldRowId = split.id
     const oldColumn = split.field
-    const { id: newRowId } = splitRowId(get(focusedCellId))
+    const { id: newRowId } = parseCellID(get(focusedCellId))
     if (oldRowId !== newRowId) {
       return
     }

packages/frontend-core/src/components/grid/stores/scroll.js

@@ -1,7 +1,7 @@
 import { writable, derived, get } from "svelte/store"
 import { tick } from "svelte"
 import { Padding, GutterWidth, FocusedCellMinOffset } from "../lib/constants"
-import { splitRowId } from "../lib/utils"
+import { parseCellID } from "../lib/utils"
 
 export const createStores = () => {
   const scroll = writable({
@@ -177,7 +177,7 @@ export const initialise = context => {
     // Ensure horizontal position is viewable
     // Check horizontal position of columns next
     const $visibleColumns = get(visibleColumns)
-    const { field: columnName } = splitRowId($focusedCellId)
+    const { field: columnName } = parseCellID($focusedCellId)
     const column = $visibleColumns.find(col => col.name === columnName)
     if (!column) {
       return

packages/frontend-core/src/components/grid/stores/ui.js

@@ -7,7 +7,7 @@ import {
   MediumRowHeight,
   NewRowID,
 } from "../lib/constants"
-import { splitRowId } from "../lib/utils"
+import { parseCellID } from "../lib/utils"
 
 export const createStores = context => {
   const { props } = context
@@ -26,7 +26,7 @@ export const createStores = context => {
   const focusedRowId = derived(
     focusedCellId,
     $focusedCellId => {
-      return splitRowId($focusedCellId)?.id
+      return parseCellID($focusedCellId)?.id
     },
     null
   )
@@ -73,7 +73,7 @@ export const deriveStores = context => {
   const focusedRow = derived(
     [focusedCellId, rowLookupMap, rows],
     ([$focusedCellId, $rowLookupMap, $rows]) => {
-      const rowId = splitRowId($focusedCellId)?.id
+      const rowId = parseCellID($focusedCellId)?.id
 
       // Edge case for new rows
       if (rowId === NewRowID) {
@@ -153,7 +153,7 @@ export const initialise = context => {
     const hasRow = rows.actions.hasRow
 
     // Check selected cell
-    const selectedRowId = splitRowId($focusedCellId)?.id
+    const selectedRowId = parseCellID($focusedCellId)?.id
     if (selectedRowId && !hasRow(selectedRowId)) {
       focusedCellId.set(null)
     }

packages/frontend-core/src/components/grid/stores/validation.js

@@ -1,5 +1,5 @@
 import { writable, get, derived } from "svelte/store"
-import { combineRowId, splitRowId } from "../lib/utils"
+import { getCellID, parseCellID } from "../lib/utils"
 
 // Normally we would break out actions into the explicit "createActions"
 // function, but for validation all these actions are pure so can go into
@@ -13,7 +13,7 @@ export const createStores = () => {
     Object.entries($validation).forEach(([key, error]) => {
       // Extract row ID from all errored cell IDs
       if (error) {
-        map[splitRowId(key).id] = true
+        map[parseCellID(key).id] = true
       }
     })
     return map
@@ -54,10 +54,10 @@ export const initialise = context => {
       const $stickyColumn = get(stickyColumn)
       validation.update(state => {
         $columns.forEach(column => {
-          state[combineRowId(id, column.name)] = null
+          state[getCellID(id, column.name)] = null
         })
         if ($stickyColumn) {
-          state[combineRowId(id, stickyColumn.name)] = null
+          state[getCellID(id, stickyColumn.name)] = null
         }
         return state
       })