@budibase/frontend-core 2.29.21 → 2.29.23

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

@@ -13,22 +13,25 @@
   const {
     rows,
     selectedRows,
-    stickyColumn,
+    displayColumn,
     renderedRows,
     focusedCellId,
     hoveredRowId,
     config,
     selectedCellMap,
+    userCellMap,
     focusedRow,
     scrollLeft,
     dispatch,
     contentLines,
     isDragging,
+    isSelectingCells,
+    selectedCellCount,
   } = getContext("grid")
 
   $: rowCount = $rows.length
   $: selectedRowCount = Object.values($selectedRows).length
-  $: width = GutterWidth + ($stickyColumn?.width || 0)
+  $: width = GutterWidth + ($displayColumn?.width || 0)
 
   const selectAll = () => {
     const allSelected = selectedRowCount === rowCount
@@ -57,8 +60,8 @@
       rowSelected={selectedRowCount && selectedRowCount === rowCount}
       disabled={!$renderedRows.length}
     />
-    {#if $stickyColumn}
-      <HeaderCell column={$stickyColumn} orderable={false} idx="sticky">
+    {#if $displayColumn}
+      <HeaderCell column={$displayColumn} orderable={false} idx="sticky">
         <slot name="edit-column" />
       </HeaderCell>
     {/if}
@@ -69,9 +72,11 @@
   <GridScrollWrapper scrollVertically attachHandlers>
     {#each $renderedRows as row, idx}
       {@const rowSelected = !!$selectedRows[row._id]}
-      {@const rowHovered = $hoveredRowId === row._id}
+      {@const rowHovered =
+        $hoveredRowId === row._id &&
+        (!$selectedCellCount || !$isSelectingCells)}
       {@const rowFocused = $focusedRow?._id === row._id}
-      {@const cellId = getCellID(row._id, $stickyColumn?.name)}
+      {@const cellId = getCellID(row._id, $displayColumn?.name)}
       <div
         class="row"
         on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
@@ -79,20 +84,22 @@
         on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
       >
         <GutterCell {row} {rowFocused} {rowHovered} {rowSelected} />
-        {#if $stickyColumn}
+        {#if $displayColumn}
           <DataCell
             {row}
             {cellId}
             {rowFocused}
-            selected={rowSelected}
+            {rowSelected}
+            cellSelected={$selectedCellMap[cellId]}
             highlighted={rowHovered || rowFocused}
             rowIdx={row.__idx}
             topRow={idx === 0}
             focused={$focusedCellId === cellId}
-            selectedUser={$selectedCellMap[cellId]}
-            width={$stickyColumn.width}
-            column={$stickyColumn}
+            selectedUser={$userCellMap[cellId]}
+            width={$displayColumn.width}
+            column={$displayColumn}
             contentLines={$contentLines}
+            isSelectingCells={$isSelectingCells}
           />
         {/if}
       </div>
@@ -107,9 +114,9 @@
         <GutterCell rowHovered={$hoveredRowId === BlankRowID}>
           <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
         </GutterCell>
-        {#if $stickyColumn}
+        {#if $displayColumn}
           <GridCell
-            width={$stickyColumn.width}
+            width={$displayColumn.width}
             highlighted={$hoveredRowId === BlankRowID}
           >
             <KeyboardShortcut padded keybind="Ctrl+Enter" />
@@ -155,7 +162,7 @@
 
   /* Don't show borders between cells in the sticky column */
   .sticky-column :global(.cell:not(:last-child)) {
-    border-right: none;
+    border-right-color: transparent;
   }
 
   .header {
@@ -164,6 +171,9 @@
   .header :global(.cell) {
     background: var(--grid-background-alt);
   }
+  .header :global(.cell::before) {
+    display: none;
+  }
   .row {
     display: flex;
     flex-direction: row;

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

@@ -1,17 +1,17 @@
 import { helpers } from "@budibase/shared-core"
 import { TypeIconMap } from "../../../constants"
 
-// we can't use "-" for joining the ID/field, as this can be present in the ID or column name
-// using something very unusual to avoid this problem
+// We can't use "-" as a separator as this can be present in the ID
+// or column name, so we use something very unusual to avoid this problem
 const JOINING_CHARACTER = "‽‽"
 
 export const parseCellID = cellId => {
   if (!cellId) {
-    return { id: undefined, field: undefined }
+    return { rowId: undefined, field: undefined }
   }
   const parts = cellId.split(JOINING_CHARACTER)
   const field = parts.pop()
-  return { id: parts.join(JOINING_CHARACTER), field }
+  return { rowId: parts.join(JOINING_CHARACTER), field }
 }
 
 export const getCellID = (rowId, fieldName) => {

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

@@ -1,23 +1,26 @@
 <script>
   import { getContext, onMount } from "svelte"
   import { debounce } from "../../../utils/utils"
-  import { NewRowID } from "../lib/constants"
   import { getCellID, parseCellID } from "../lib/utils"
+  import { NewRowID } from "../lib/constants"
 
   const {
     rows,
     focusedCellId,
     visibleColumns,
-    focusedRow,
-    stickyColumn,
+    rowLookupMap,
     focusedCellAPI,
-    clipboard,
     dispatch,
-    selectedRows,
+    selectedRowCount,
     config,
     menu,
     gridFocused,
     keyboardBlocked,
+    selectedCellCount,
+    selectedCells,
+    cellSelection,
+    columnLookupMap,
+    focusedRowId,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -43,23 +46,51 @@
       }
     }
 
-    // Handle certain key presses regardless of selection state
-    if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && $config.canAddRows) {
+    // Sugar for preventing default
+    const handle = fn => {
       e.preventDefault()
-      dispatch("add-row-inline")
-      return
+      fn()
     }
 
-    // If nothing selected avoid processing further key presses
+    // Handle certain key presses regardless of selection state
+    if (e.metaKey || e.ctrlKey) {
+      switch (e.key) {
+        case "c":
+          return handle(() => dispatch("copy"))
+        case "v":
+          return handle(() => dispatch("paste"))
+        case "Enter":
+          return handle(() => {
+            if ($config.canAddRows) {
+              dispatch("add-row-inline")
+            }
+          })
+      }
+    }
+
+    // Handle certain key presses if we have cells selected
+    if ($selectedCellCount) {
+      switch (e.key) {
+        case "Escape":
+          return handle(selectedCells.actions.clear)
+        case "Delete":
+        case "Backspace":
+          return handle(() => dispatch("request-bulk-delete"))
+      }
+    }
+
+    // Handle certain key presses only if no cell focused
     if (!$focusedCellId) {
       if (e.key === "Tab" || e.key?.startsWith("Arrow")) {
-        e.preventDefault()
-        focusFirstCell()
+        handle(focusFirstCell)
       } else if (e.key === "Delete" || e.key === "Backspace") {
-        if (Object.keys($selectedRows).length && $config.canDeleteRows) {
-          dispatch("request-bulk-delete")
-        }
+        handle(() => {
+          if ($selectedRowCount && $config.canDeleteRows) {
+            dispatch("request-bulk-delete")
+          }
+        })
       }
+      // Avoid processing anything else
       return
     }
 
@@ -69,18 +100,19 @@
       // By setting a tiny timeout here we can ensure that other listeners
       // which depend on being able to read cell state on an escape keypress
       // get a chance to observe the true state before we blur
-      if (api?.isActive()) {
-        setTimeout(api?.blur, 10)
-      } else {
-        $focusedCellId = null
-      }
-      menu.actions.close()
-      return
+      return handle(() => {
+        if (api?.isActive()) {
+          setTimeout(api?.blur, 10)
+        } else {
+          $focusedCellId = null
+        }
+        menu.actions.close()
+      })
     } else if (e.key === "Tab") {
-      e.preventDefault()
-      api?.blur?.()
-      changeFocusedColumn(1)
-      return
+      return handle(() => {
+        api?.blur?.()
+        changeFocusedColumn(1)
+      })
     }
 
     // Pass the key event to the selected cell and let it decide whether to
@@ -91,57 +123,33 @@
         return
       }
     }
-    e.preventDefault()
 
     // Handle the key ourselves
     if (e.metaKey || e.ctrlKey) {
-      switch (e.key) {
-        case "c":
-          clipboard.actions.copy()
-          break
-        case "v":
-          if (!api?.isReadonly()) {
-            clipboard.actions.paste()
-          }
-          break
-        case "Enter":
-          if ($config.canAddRows) {
-            dispatch("add-row-inline")
-          }
-      }
+      //
     } else {
       switch (e.key) {
         case "ArrowLeft":
-          changeFocusedColumn(-1)
-          break
+          return handle(() => changeFocusedColumn(-1, e.shiftKey))
         case "ArrowRight":
-          changeFocusedColumn(1)
-          break
+          return handle(() => changeFocusedColumn(1, e.shiftKey))
         case "ArrowUp":
-          changeFocusedRow(-1)
-          break
+          return handle(() => changeFocusedRow(-1, e.shiftKey))
         case "ArrowDown":
-          changeFocusedRow(1)
-          break
+          return handle(() => changeFocusedRow(1, e.shiftKey))
         case "Delete":
         case "Backspace":
-          if (Object.keys($selectedRows).length && $config.canDeleteRows) {
-            dispatch("request-bulk-delete")
-          } else {
-            deleteSelectedCell()
-          }
-          break
+          return handle(() => {
+            if ($selectedRowCount && $config.canDeleteRows) {
+              dispatch("request-bulk-delete")
+            } else {
+              deleteSelectedCell()
+            }
+          })
         case "Enter":
-          focusCell()
-          break
-        case " ":
-        case "Space":
-          if ($config.canDeleteRows) {
-            toggleSelectRow()
-          }
-          break
+          return handle(focusCell)
         default:
-          startEnteringValue(e.key, e.which)
+          return handle(() => startEnteringValue(e.key, e.which))
       }
     }
   }
@@ -152,7 +160,7 @@
     if (!firstRow) {
       return
     }
-    const firstColumn = $stickyColumn || $visibleColumns[0]
+    const firstColumn = $visibleColumns[0]
     if (!firstColumn) {
       return
     }
@@ -160,38 +168,87 @@
   }
 
   // Changes the focused cell by moving it left or right to a different column
-  const changeFocusedColumn = delta => {
-    if (!$focusedCellId) {
+  const changeFocusedColumn = (delta, shiftKey) => {
+    // Determine which cell we are working with
+    let sourceCellId = $focusedCellId
+    if (shiftKey && $selectedCellCount) {
+      sourceCellId = $cellSelection.targetCellId
+    }
+    if (!sourceCellId) {
       return
     }
-    const cols = $visibleColumns
-    const { id, field: columnName } = parseCellID($focusedCellId)
-    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
+
+    // Determine the new position for this cell
+    const { rowId, field } = parseCellID(sourceCellId)
+    const colIdx = $columnLookupMap[field].__idx
+    const nextColumn = $visibleColumns[colIdx + delta]
+    if (!nextColumn) {
+      return
+    }
+    const targetCellId = getCellID(rowId, nextColumn.name)
+
+    // Apply change
+    if (shiftKey) {
+      if ($selectedCellCount) {
+        // We have selected cells and still are holding shift - update selection
+        selectedCells.actions.updateTarget(targetCellId)
+
+        // Restore focused cell if this removes the selection
+        if (!$selectedCellCount) {
+          focusedCellId.set(targetCellId)
+        }
       } else {
-        newColumnName = cols[index]?.name
+        // We have no selection but are holding shift - select these cells
+        selectedCells.actions.selectRange(sourceCellId, targetCellId)
       }
-    }
-    if (newColumnName) {
-      $focusedCellId = getCellID(id, newColumnName)
+    } else {
+      // We aren't holding shift - just focus this cell
+      focusedCellId.set(targetCellId)
     }
   }
 
   // Changes the focused cell by moving it up or down to a new row
-  const changeFocusedRow = delta => {
-    if (!$focusedRow) {
+  const changeFocusedRow = (delta, shiftKey) => {
+    // Ignore for new row component
+    if ($focusedRowId === NewRowID) {
       return
     }
-    const newRow = $rows[$focusedRow.__idx + delta]
-    if (newRow) {
-      const { field } = parseCellID($focusedCellId)
-      $focusedCellId = getCellID(newRow._id, field)
+
+    // Determine which cell we are working with
+    let sourceCellId = $focusedCellId
+    if (shiftKey && $selectedCellCount) {
+      sourceCellId = $cellSelection.targetCellId
+    }
+    if (!sourceCellId) {
+      return
+    }
+
+    // Determine the new position for this cell
+    const { rowId, field } = parseCellID(sourceCellId)
+    const rowIdx = $rowLookupMap[rowId].__idx
+    const newRow = $rows[rowIdx + delta]
+    if (!newRow) {
+      return
+    }
+    const targetCellId = getCellID(newRow._id, field)
+
+    // Apply change
+    if (shiftKey) {
+      if ($selectedCellCount) {
+        // We have selected cells and still are holding shift - update selection
+        selectedCells.actions.updateTarget(targetCellId)
+
+        // Restore focused cell if this removes the selection
+        if (!$selectedCellCount) {
+          focusedCellId.set(targetCellId)
+        }
+      } else {
+        // We have no selection but are holding shift - select these cells
+        selectedCells.actions.selectRange(sourceCellId, targetCellId)
+      }
+    } else {
+      // We aren't holding shift - just focus this cell
+      focusedCellId.set(targetCellId)
     }
   }
 
@@ -234,14 +291,6 @@
     }
   }
 
-  const toggleSelectRow = () => {
-    const id = $focusedRow?._id
-    if (!id || id === NewRowID) {
-      return
-    }
-    selectedRows.actions.toggleRow(id)
-  }
-
   onMount(() => {
     document.addEventListener("keydown", handleKeyDown)
     return () => {

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

@@ -9,17 +9,17 @@
     focusedRow,
     menu,
     rows,
-    columns,
-    focusedCellId,
-    stickyColumn,
     config,
-    copiedCell,
-    clipboard,
     dispatch,
-    focusedCellAPI,
     focusedRowId,
     notifications,
     hasBudibaseIdentifiers,
+    selectedRowCount,
+    copyAllowed,
+    pasteAllowed,
+    selectedCellCount,
+    visibleColumns,
+    selectedCells,
   } = getContext("grid")
 
   let anchor
@@ -32,17 +32,20 @@
   }
 
   const deleteRow = () => {
-    rows.actions.deleteRows([$focusedRow])
     menu.actions.close()
+    rows.actions.deleteRows([$focusedRow])
     $notifications.success("Deleted 1 row")
   }
 
-  const duplicate = async () => {
+  const duplicateRow = async () => {
     menu.actions.close()
     const newRow = await rows.actions.duplicateRow($focusedRow)
     if (newRow) {
-      const column = $stickyColumn?.name || $columns[0].name
-      $focusedCellId = getCellID(newRow._id, column)
+      const firstCol = $visibleColumns[0]
+      const lastCol = $visibleColumns[$visibleColumns.length - 1]
+      const startCellId = getCellID(newRow._id, firstCol.name)
+      const endCellId = getCellID(newRow._id, lastCol.name)
+      selectedCells.actions.selectRange(startCellId, endCellId)
     }
   }
 
@@ -58,59 +61,107 @@
   {#key style}
     <GridPopover {anchor} on:close={menu.actions.close} maxHeight={null}>
       <Menu>
-        <MenuItem
-          icon="Copy"
-          on:click={clipboard.actions.copy}
-          on:click={menu.actions.close}
-        >
-          Copy
-        </MenuItem>
-        <MenuItem
-          icon="Paste"
-          disabled={$copiedCell == null || $focusedCellAPI?.isReadonly()}
-          on:click={clipboard.actions.paste}
-          on:click={menu.actions.close}
-        >
-          Paste
-        </MenuItem>
-        <MenuItem
-          icon="Maximize"
-          disabled={isNewRow || !$config.canEditRows || !$config.canExpandRows}
-          on:click={() => dispatch("edit-row", $focusedRow)}
-          on:click={menu.actions.close}
-        >
-          Edit row in modal
-        </MenuItem>
-        <MenuItem
-          icon="Copy"
-          disabled={isNewRow || !$focusedRow?._id || !$hasBudibaseIdentifiers}
-          on:click={() => copyToClipboard($focusedRow?._id)}
-          on:click={menu.actions.close}
-        >
-          Copy row _id
-        </MenuItem>
-        <MenuItem
-          icon="Copy"
-          disabled={isNewRow || !$focusedRow?._rev || !$hasBudibaseIdentifiers}
-          on:click={() => copyToClipboard($focusedRow?._rev)}
-          on:click={menu.actions.close}
-        >
-          Copy row _rev
-        </MenuItem>
-        <MenuItem
-          icon="Duplicate"
-          disabled={isNewRow || !$config.canAddRows}
-          on:click={duplicate}
-        >
-          Duplicate row
-        </MenuItem>
-        <MenuItem
-          icon="Delete"
-          disabled={isNewRow || !$config.canDeleteRows}
-          on:click={deleteRow}
-        >
-          Delete row
-        </MenuItem>
+        {#if $menu.multiRowMode}
+          <MenuItem
+            icon="Duplicate"
+            disabled={!$config.canAddRows || $selectedRowCount > 50}
+            on:click={() => dispatch("request-bulk-duplicate")}
+            on:click={menu.actions.close}
+          >
+            Duplicate {$selectedRowCount} rows
+          </MenuItem>
+          <MenuItem
+            icon="Delete"
+            disabled={!$config.canDeleteRows}
+            on:click={() => dispatch("request-bulk-delete")}
+            on:click={menu.actions.close}
+          >
+            Delete {$selectedRowCount} rows
+          </MenuItem>
+        {:else if $menu.multiCellMode}
+          <MenuItem
+            icon="Copy"
+            disabled={!$copyAllowed}
+            on:click={() => dispatch("copy")}
+            on:click={menu.actions.close}
+          >
+            Copy
+          </MenuItem>
+          <MenuItem
+            icon="Paste"
+            disabled={!$pasteAllowed}
+            on:click={() => dispatch("paste")}
+            on:click={menu.actions.close}
+          >
+            Paste
+          </MenuItem>
+          <MenuItem
+            icon="Delete"
+            disabled={!$config.canEditRows}
+            on:click={() => dispatch("request-bulk-delete")}
+          >
+            Delete {$selectedCellCount} cells
+          </MenuItem>
+        {:else}
+          <MenuItem
+            icon="Copy"
+            disabled={!$copyAllowed}
+            on:click={() => dispatch("copy")}
+            on:click={menu.actions.close}
+          >
+            Copy
+          </MenuItem>
+          <MenuItem
+            icon="Paste"
+            disabled={!$pasteAllowed}
+            on:click={() => dispatch("paste")}
+            on:click={menu.actions.close}
+          >
+            Paste
+          </MenuItem>
+          <MenuItem
+            icon="Maximize"
+            disabled={isNewRow ||
+              !$config.canEditRows ||
+              !$config.canExpandRows}
+            on:click={() => dispatch("edit-row", $focusedRow)}
+            on:click={menu.actions.close}
+          >
+            Edit row in modal
+          </MenuItem>
+          <MenuItem
+            icon="Copy"
+            disabled={isNewRow || !$focusedRow?._id || !$hasBudibaseIdentifiers}
+            on:click={() => copyToClipboard($focusedRow?._id)}
+            on:click={menu.actions.close}
+          >
+            Copy row _id
+          </MenuItem>
+          <MenuItem
+            icon="Copy"
+            disabled={isNewRow ||
+              !$focusedRow?._rev ||
+              !$hasBudibaseIdentifiers}
+            on:click={() => copyToClipboard($focusedRow?._rev)}
+            on:click={menu.actions.close}
+          >
+            Copy row _rev
+          </MenuItem>
+          <MenuItem
+            icon="Duplicate"
+            disabled={isNewRow || !$config.canAddRows}
+            on:click={duplicateRow}
+          >
+            Duplicate row
+          </MenuItem>
+          <MenuItem
+            icon="Delete"
+            disabled={isNewRow || !$config.canDeleteRows}
+            on:click={deleteRow}
+          >
+            Delete row
+          </MenuItem>
+        {/if}
       </Menu>
     </GridPopover>
   {/key}