refactor: port ButtonBar and CellList to runes mode

mgreminger · Dec 15, 2024 · 4c54271 · 4c54271
1 parent 434eeec
commit 4c54271
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1534,15 +1534,15 @@ Please include a link to this sheet in the email to assist in debugging the prob
   }
 
 
-  function loadInsertSheetModal(e: {detail: {index: number}} ) {
+  function loadInsertSheetModal(e: {index: number} ) {
     retrieveRecentSheets();
 
     modalInfo = {
       modalOpen: true,
       state: "insertSheet",
       heading: "Insert a Sheet",
       url: "",
-      insertionLocation: e.detail.index
+      insertionLocation: e.index
     };
   }
 
@@ -2699,7 +2699,7 @@ Please include a link to this sheet in the email to assist in debugging the prob
       <DocumentTitle bind:title={$title}/>
 
       <CellList
-        on:insertSheet={loadInsertSheetModal}
+        insertSheet={loadInsertSheetModal}
         on:updateNumberFormat={loadCellNumberFormatModal}
         on:generateCode={loadGenerateCodeModal}
         on:insertMathCellAfter={handleInsertMathCell}

diff --git a/src/ButtonBar.svelte b/src/ButtonBar.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import { addCell, onMobile, inCellInsertMode } from "./stores";
 
   import AddAlt from "carbon-icons-svelte/lib/AddAlt.svelte";
@@ -13,15 +12,20 @@
   import IconButton from './IconButton.svelte';
   import DataTable from "carbon-icons-svelte/lib/DataTable.svelte";
 
-  export let index;
-  export let last = false;
+  interface Props {
+    index: number;
+    last?: boolean;
+    insertSheet: (arg: {index: number}) => void;
+  }
 
-  const dispatch = createEventDispatcher<{"insertSheet": {index: number}}>();
+  let {
+    index,
+    last = false,
+    insertSheet
+  }: Props = $props();
 
-  function insertSheet(index) {
-    dispatch('insertSheet', {
-      index: index
-    });
+  function dispatchInsertSheet(index) {
+    insertSheet({index: index});
   }
 
   function mobileInsert() {
@@ -90,7 +94,7 @@
   <div class="mobile-container">
     <button 
       class="mobile"
-      on:click={mobileInsert}
+      onclick={mobileInsert}
     >
       Insert New Cell
     </button>
@@ -173,7 +177,7 @@
 
     <IconButton 
       title="Insert Sheet Here"
-      on:click={() => insertSheet(index)}
+      on:click={() => dispatchInsertSheet(index)}
       id={last ? "insert-sheet" : null}
       noTouch={!last}
     >

diff --git a/src/CellList.svelte b/src/CellList.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
-  import { tick } from "svelte";
-  import { flip } from "svelte/animate";
-
   import { cells, results, system_results, activeCell, mathCellChanged } from "./stores";
   import Cell from "./Cell.svelte";
   import ButtonBar from "./ButtonBar.svelte";
 
+  interface Props {
+    insertSheet: (arg: {index: number}) => void;
+  }
+
+  let { insertSheet }: Props = $props(); 
+
   let cellElements: Cell[] = [];
-  let dragging = false;
-  let draggingSourceIndex: number;
+  let dragging = $state(false);
+  let draggingSourceIndex: number = $state();
   let draggingSkeleton: HTMLDivElement;
   let skeletonHeight: number;
   let grabOffset: number;
@@ -202,7 +205,7 @@
 
   {#each $cells as cell, i (cell.id)}
     <li>
-      <ButtonBar on:insertSheet index={i} />
+      <ButtonBar {insertSheet} index={i} />
       <div class="outer-container" class:first={i===0} class:last={i===$cells.length-1}
         id={`cell-container-${i}`}
         class:dragging={dragging && draggingSourceIndex === i}
@@ -222,7 +225,7 @@
     </li>
   {/each}
   <li>
-    <ButtonBar on:insertSheet index={$cells.length} last={true}/>
+    <ButtonBar {insertSheet} index={$cells.length} last={true}/>
   </li>
 </ul>