Remove new row component and improve mouse interactions

2023-03-10 11:36:17 +00:00 · 2023-03-10 11:36:17 +00:00 · 33a4d17278
parent dfd6633bee
commit 33a4d17278
5 changed files with 140 additions and 74 deletions
--- a/packages/frontend-core/src/components/sheet/NewRow.svelte
+++ b/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>
--- a/packages/frontend-core/src/components/sheet/Sheet.svelte
+++ b/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 */
--- a/packages/frontend-core/src/components/sheet/SheetBody.svelte
+++ b/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>

--- a/packages/frontend-core/src/components/sheet/StickyColumn.svelte
+++ b/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 */
--- a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte
+++ b/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;