Remove new row component and improve mouse interactions

packages/frontend-core/src/components/sheet/NewRow.svelte

@@ -1,44 +1,145 @@
 <script>
   import SheetCell from "./cells/SheetCell.svelte"
   import { getContext } from "svelte"
+  import { Icon } from "@budibase/bbui"
+  import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
+  import { getCellRenderer } from "./renderers"
 
-  const { visibleColumns, hoveredRowId, rows, selectedCellId, reorder } =
-    getContext("sheet")
+  const {
+    visibleColumns,
+    hoveredRowId,
+    rows,
+    selectedCellId,
+    reorder,
+    stickyColumn,
+  } = getContext("sheet")
+
+  let isAdding = false
+  let newRow = {}
 
   $: rowHovered = $hoveredRowId === "new"
+  $: width = 40 + ($stickyColumn?.width || 0)
 
   const addRow = async field => {
-    const newRow = await rows.actions.addRow()
-    if (newRow) {
-      $selectedCellId = `${newRow._id}-${field.name}`
+    // const newRow = await rows.actions.addRow()
+    // if (newRow) {
+    //   $selectedCellId = `${newRow._id}-${field.name}`
+    // }
+  }
+
+  $: console.log(newRow)
+
+  const startAdding = () => {
+    if (isAdding) {
+      return
     }
+    newRow = {}
+    isAdding = true
   }
 </script>
 
-<div
-  class="row"
-  on:focus
-  on:mouseover={() => ($hoveredRowId = "new")}
-  on:mouseleave={() => ($hoveredRowId = null)}
->
-  {#each $visibleColumns as column}
-    <SheetCell
-      {rowHovered}
-      on:click={() => addRow(column)}
-      width={column.width}
-      left={column.left}
-      reorderSource={$reorder.sourceColumn === column.name}
-      reorderTarget={$reorder.targetColumn === column.name}
-    />
-  {/each}
+<div class="new" on:click={startAdding}>
+  {#if !isAdding}
+    <div class="add">
+      <div class="icon">
+        <Icon name="Add" size="S" />
+      </div>
+      <div class="text">Add row</div>
+    </div>
+  {:else}
+    <div class="sticky" style="flex: 0 0 {width}px">
+      <SheetCell width="40" center>
+        <Icon name="Add" size="S" />
+      </SheetCell>
+      {#if $stickyColumn}
+        {@const cellId = `new-${$stickyColumn.name}`}
+        <SheetCell
+          width={$stickyColumn.width}
+          selected={$selectedCellId === cellId}
+          on:click={() => ($selectedCellId = cellId)}
+        >
+          <svelte:component
+            this={getCellRenderer($stickyColumn)}
+            value={newRow[$stickyColumn.name]}
+            schema={$stickyColumn.schema}
+            selected={$selectedCellId === cellId}
+            onChange={val => (newRow[$stickyColumn.name] = val)}
+            readonly={$stickyColumn.schema.autocolumn}
+          />
+        </SheetCell>
+      {/if}
+    </div>
+    <SheetScrollWrapper scrollVertically={false}>
+      <div class="row">
+        {#each $visibleColumns as column}
+          {@const cellId = `new-${column.name}`}
+          <SheetCell
+            width={column.width}
+            selected={$selectedCellId === cellId}
+            on:click={() => ($selectedCellId = cellId)}
+          >
+            <svelte:component
+              this={getCellRenderer(column)}
+              value={newRow[column.name]}
+              schema={column.schema}
+              selected={$selectedCellId === cellId}
+              onChange={val => (newRow[column.name] = val)}
+              readonly={column.schema.autocolumn}
+            />
+          </SheetCell>
+        {/each}
+      </div>
+    </SheetScrollWrapper>
+  {/if}
 </div>
 
 <style>
+  .new {
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(16px + var(--cell-height));
+    padding-bottom: 16px;
+    z-index: 1;
+    background: var(--cell-background);
+    border-top: var(--cell-border);
+  }
+
+  .add {
+    flex: 1 1 auto;
+    display: flex;
+  }
+  .add:hover {
+    cursor: pointer;
+    background: var(--cell-background-hover);
+  }
+  .add .icon {
+    flex: 0 0 40px;
+    display: grid;
+    place-items: center;
+  }
+  .add .text {
+    flex: 1 1 auto;
+    padding: var(--cell-padding);
+  }
+
+  .new :global(.cell) {
+    cursor: pointer;
+  }
+
+  .sticky {
+    z-index: 2;
+    display: flex;
+  }
+  /* Don't show borders between cells in the sticky column */
+  .sticky :global(.cell:not(:last-child)) {
+    border-right: none;
+  }
+
   .row {
     width: 0;
     display: flex;
   }
-  .row:hover :global(.cell) {
-    cursor: pointer;
-  }
 </style>

packages/frontend-core/src/components/sheet/Sheet.svelte

@@ -25,6 +25,7 @@
   import UserAvatars from "./UserAvatars.svelte"
   import KeyboardManager from "./KeyboardManager.svelte"
   import { clickOutside } from "@budibase/bbui"
+  import NewRow from "./NewRow.svelte"
 
   export let API
   export let tableId
@@ -159,17 +160,17 @@
     display: flex;
     flex-direction: row;
     justify-items: flex-start;
-    align-items: flex-start;
+    align-items: stretch;
     overflow: hidden;
     height: 0;
     position: relative;
+    background: var(--spectrum-global-color-gray-75);
   }
   .sheet-main {
     flex: 1 1 auto;
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    align-self: stretch;
   }
 
   /* Controls */

packages/frontend-core/src/components/sheet/SheetBody.svelte

@@ -1,10 +1,9 @@
 <script>
   import { getContext, onMount } from "svelte"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
-  import NewRow from "./NewRow.svelte"
   import SheetRow from "./SheetRow.svelte"
 
-  const { bounds, visibleRows, config } = getContext("sheet")
+  const { bounds, visibleRows } = getContext("sheet")
 
   let body
 
@@ -25,9 +24,6 @@
     {#each $visibleRows as row, idx}
       <SheetRow {row} {idx} />
     {/each}
-    {#if $config.allowAddRows}
-      <NewRow />
-    {/if}
   </SheetScrollWrapper>
 </div>
 

packages/frontend-core/src/components/sheet/StickyColumn.svelte

@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import { Checkbox, Icon } from "@budibase/bbui"
+  import { Checkbox } from "@budibase/bbui"
   import SheetCell from "./cells/SheetCell.svelte"
   import { getCellRenderer } from "./renderers"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
@@ -51,18 +51,11 @@
       return newState
     })
   }
-
-  const addRow = async field => {
-    const newRow = await rows.actions.addRow()
-    if (newRow) {
-      $selectedCellId = `${newRow._id}-${field.name}`
-    }
-  }
 </script>
 
 <div
   class="sticky-column"
-  style="--width:{width}px;"
+  style="flex: 0 0 {width}px"
   class:scrolled={scrollLeft > 0}
 >
   <div class="header row">
@@ -88,7 +81,11 @@
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}
         {@const containsSelectedRow = $selectedCellRow?._id === row._id}
-        <div class="row" on:mouseenter={() => ($hoveredRowId = row._id)}>
+        <div
+          class="row"
+          on:mouseover={() => ($hoveredRowId = row._id)}
+          on:mouseleave={() => ($hoveredRowId = null)}
+        >
           <SheetCell
             rowSelected={rowSelected || containsSelectedRow}
             {rowHovered}
@@ -138,38 +135,14 @@
           {/if}
         </div>
       {/each}
-
-      {#if $config.allowAddRows}
-        <div
-          class="row new"
-          on:focus
-          on:mouseover={() => ($hoveredRowId = "new")}
-        >
-          <SheetCell
-            rowHovered={$hoveredRowId === "new"}
-            on:click={addRow}
-            width="40"
-            center
-          >
-            <Icon name="Add" size="S" />
-          </SheetCell>
-          {#if $stickyColumn}
-            <SheetCell
-              on:click={addRow}
-              width={$stickyColumn.width}
-              rowHovered={$hoveredRowId === "new"}
-              reorderTarget={$reorder.targetColumn === $stickyColumn.name}
-            />
-          {/if}
-        </div>
-      {/if}
     </SheetScrollWrapper>
   </div>
 </div>
 
 <style>
   .sticky-column {
-    flex: 0 0 var(--width);
+    display: flex;
+    flex-direction: column;
   }
 
   /* Add shadow when scrolled */
@@ -205,9 +178,7 @@
   .content {
     position: relative;
     z-index: 1;
-  }
-  .row.new:hover :global(.cell) {
-    cursor: pointer;
+    flex: 1 1 auto;
   }
 
   /* Styles for label cell */

packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte

@@ -110,7 +110,7 @@
       <Icon
         size="S"
         name="MoreVertical"
-        color={`var(--spectrum-global-color-gray-600)`}
+        color="var(--spectrum-global-color-gray-600)"
       />
     </div>
   </SheetCell>
@@ -147,15 +147,12 @@
   .header-cell {
     display: flex;
   }
-
   .header-cell :global(.cell) {
     background: var(--background);
     padding: 0 var(--cell-padding);
     gap: calc(2 * var(--cell-spacing));
     border-bottom: none;
   }
-  .header-cell.sorted :global(.cell) {
-  }
 
   .name {
     flex: 1 1 auto;