Rename reordering to reorder

packages/client/src/components/app/spreadsheet/ReorderPlaceholder.svelte

@@ -1,9 +1,9 @@
 <script>
   import { getContext } from "svelte"
 
-  const { reorderingPlaceholder } = getContext("spreadsheet")
+  const { reorderPlaceholder } = getContext("spreadsheet")
 
-  $: style = getStyle($reorderingPlaceholder)
+  $: style = getStyle($reorderPlaceholder)
 
   const getStyle = state => {
     return (
@@ -14,7 +14,7 @@
   }
 </script>
 
-{#if $reorderingPlaceholder.x != null}
+{#if $reorderPlaceholder.x != null}
   <div {style} />
 {/if}
 

packages/client/src/components/app/spreadsheet/Spreadsheet.svelte

@@ -10,8 +10,8 @@
   import NumberCell from "./cells/NumberCell.svelte"
   import RelationshipCell from "./cells/RelationshipCell.svelte"
   import { getColor } from "./utils.js"
-  import { createReorderingStores } from "./stores/reordering"
+  import { createReorderStores } from "./stores/reorder"
-  import ReorderingPlaceholder from "./ReorderingPlaceholder.svelte"
+  import ReorderPlaceholder from "./ReorderPlaceholder.svelte"
 
   export let table
   export let filter
@@ -43,11 +43,11 @@
     selectedCellId,
     selectedRows,
   }
-  const { reordering, reorderingPlaceholder } = createReorderingStores(context)
+  const { reorder, reorderPlaceholder } = createReorderStores(context)
   setContext("spreadsheet", {
     ...context,
-    reordering,
+    reorder,
-    reorderingPlaceholder,
+    reorderPlaceholder,
   })
 
   let horizontallyScrolled = false
@@ -301,9 +301,9 @@
           class="header cell"
           class:sticky={fieldIdx === 0}
           class:shadow={horizontallyScrolled}
-          class:reordering-source={$reordering.columnIdx === fieldIdx}
+          class:reorder-source={$reorder.columnIdx === fieldIdx}
-          class:reordering-target={$reordering.swapColumnIdx === fieldIdx}
+          class:reorder-target={$reorder.swapColumnIdx === fieldIdx}
-          on:mousedown={e => reordering.actions.startReordering(fieldIdx, e)}
+          on:mousedown={e => reorder.actions.startReordering(fieldIdx, e)}
           id={`sheet-${rand}-header-${fieldIdx}`}
         >
           <Icon
@@ -320,7 +320,7 @@
       <!-- Horizontal spacer -->
       <div
         class="header cell spacer"
-        class:reordering-target={$reordering.swapColumnIdx === $columns.length}
+        class:reorder-target={$reorder.swapColumnIdx === $columns.length}
       />
 
       <!-- All real rows -->
@@ -354,8 +354,8 @@
               class:hovered={rowHovered}
               class:selected={$selectedCellId === cellIdx}
               class:shadow={horizontallyScrolled}
-              class:reordering-source={$reordering.columnIdx === fieldIdx}
+              class:reorder-source={$reorder.columnIdx === fieldIdx}
-              class:reordering-target={$reordering.swapColumnIdx === fieldIdx}
+              class:reorder-target={$reorder.swapColumnIdx === fieldIdx}
               on:focus
               on:mouseover={() => ($hoveredRowId = row._id)}
               on:click={() => ($selectedCellId = cellIdx)}
@@ -374,8 +374,7 @@
         <!-- Horizontal spacer -->
         <div
           class="cell spacer"
-          class:reordering-target={$reordering.swapColumnIdx ===
+          class:reorder-target={$reorder.swapColumnIdx === $columns.length}
-            $columns.length}
         />
       {/each}
 
@@ -395,8 +394,8 @@
           class:sticky={fieldIdx === 0}
           class:shadow={horizontallyScrolled}
           class:hovered={$hoveredRowId === "new"}
-          class:reordering-source={$reordering.columnIdx === fieldIdx}
+          class:reorder-source={$reorder.columnIdx === fieldIdx}
-          class:reordering-target={$reordering.swapColumnIdx === fieldIdx}
+          class:reorder-target={$reorder.swapColumnIdx === fieldIdx}
           on:click={() => addRow(field)}
           on:focus
           on:mouseover={() => ($hoveredRowId = "new")}
@@ -405,7 +404,7 @@
       <!-- Horizontal spacer -->
       <div
         class="cell spacer"
-        class:reordering-target={$reordering.swapColumnIdx === $columns.length}
+        class:reorder-target={$reorder.swapColumnIdx === $columns.length}
       />
 
       <!-- Vertical spacer -->
@@ -413,7 +412,7 @@
     </div>
 
     <!-- Reorder placeholder -->
-    <ReorderingPlaceholder />
+    <ReorderPlaceholder />
   </div>
 </div>
 
@@ -573,11 +572,11 @@
     background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
   }
 
-  /* Reordering styles */
+  /* Reorder styles */
-  .cell.reordering-source {
+  .cell.reorder-source {
     background: var(--spectrum-global-color-gray-200);
   }
-  .cell.reordering-target {
+  .cell.reorder-target {
     border-left-color: var(--spectrum-global-color-blue-400);
   }
 

packages/client/src/components/app/spreadsheet/stores/reorder.js

@@ -1,14 +1,14 @@
 import { get, writable } from "svelte/store"
 
-export const createReorderingStores = context => {
+export const createReorderStores = context => {
   const { columns, rand, rows } = context
-  const reorderingInitialState = {
+  const reorderInitialState = {
     columnIdx: null,
     swapColumnIdx: null,
     breakpoints: [],
     initialMouseX: null,
   }
-  const reordering = writable(reorderingInitialState)
+  const reorder = writable(reorderInitialState)
 
   // This is broken into its own store as it is rapidly updated, and we want to
   // ensure good performance by avoiding updating other components which depend
@@ -26,7 +26,6 @@ export const createReorderingStores = context => {
     // Generate new breakpoints for the current columns
     let breakpoints = []
     const cols = get(columns)
-    console.log(cols)
     cols.forEach((col, idx) => {
       const header = document.getElementById(`sheet-${rand}-header-${idx}`)
       const bounds = header.getBoundingClientRect()
@@ -43,7 +42,7 @@ export const createReorderingStores = context => {
     const bodyBounds = body.getBoundingClientRect()
 
     // Update state
-    reordering.set({
+    reorder.set({
       columnIdx,
       breakpoints,
       swapColumnIdx: null,
@@ -66,20 +65,20 @@ export const createReorderingStores = context => {
 
   // Callback when moving the mouse when reordering columns
   const onReorderMouseMove = e => {
-    const $reordering = get(reordering)
+    const $reorder = get(reorder)
-    if ($reordering.columnIdx == null) {
+    if ($reorder.columnIdx == null) {
       return
     }
 
     // Compute new placeholder position
     const $placeholder = get(placeholder)
-    let newX = e.clientX - $reordering.initialMouseX + $placeholder.initialX
+    let newX = e.clientX - $reorder.initialMouseX + $placeholder.initialX
     newX = Math.max(0, newX)
 
     // Compute the closest breakpoint to the current position
     let swapColumnIdx
     let minDistance = Number.MAX_SAFE_INTEGER
-    $reordering.breakpoints.forEach((point, idx) => {
+    $reorder.breakpoints.forEach((point, idx) => {
       const distance = Math.abs(point - e.clientX)
       if (distance < minDistance) {
         minDistance = distance
@@ -92,8 +91,8 @@ export const createReorderingStores = context => {
       state.x = newX
       return state
     })
-    if (swapColumnIdx !== $reordering.swapColumnIdx) {
+    if (swapColumnIdx !== $reorder.swapColumnIdx) {
-      reordering.update(state => {
+      reorder.update(state => {
         state.swapColumnIdx = swapColumnIdx
         return state
       })
@@ -103,7 +102,7 @@ export const createReorderingStores = context => {
   // Callback when stopping reordering columns
   const stopReordering = () => {
     // Swap position of columns
-    let { columnIdx, swapColumnIdx } = get(reordering)
+    let { columnIdx, swapColumnIdx } = get(reorder)
     const newColumns = get(columns).slice()
     const removed = newColumns.splice(columnIdx, 1)
     if (--swapColumnIdx < columnIdx) {
@@ -113,7 +112,7 @@ export const createReorderingStores = context => {
     columns.set(newColumns)
 
     // Reset state
-    reordering.set(reorderingInitialState)
+    reorder.set(reorderInitialState)
     placeholder.set(placeholderInitialState)
 
     // Remove event handlers
@@ -122,13 +121,13 @@ export const createReorderingStores = context => {
   }
 
   return {
-    reordering: {
+    reorder: {
-      ...reordering,
+      ...reorder,
       actions: {
         startReordering,
         stopReordering,
       },
     },
-    reorderingPlaceholder: placeholder,
+    reorderPlaceholder: placeholder,
   }
 }