chore: pass all callbacks via a single context object (#51)

josdejong · Mar 28, 2022 · 2f6b03c · 2f6b03c
1 parent 32b35e2
commit 2f6b03c
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 166 deletions.
diff --git a/src/lib/components/modes/treemode/JSONKey.svelte b/src/lib/components/modes/treemode/JSONKey.svelte
@@ -11,24 +11,20 @@
 
   export let path
   export let key
-  export let readOnly
   export let onUpdateKey
-  export let onFind
   export let selection
-
-  /** @type {ValueNormalization} */
-  export let normalization
-
-  export let onSelect
   export let searchResult
 
+  /** @type {TreeModeContext} */
+  export let context
+
   $: selectedKey = selection && selection.type === SELECTION_TYPE.KEY
-  $: editKey = !readOnly && selectedKey && selection && selection.edit === true
+  $: editKey = !context.readOnly && selectedKey && selection && selection.edit === true
 
   function handleKeyDoubleClick(event) {
-    if (!editKey && !readOnly) {
+    if (!editKey && !context.readOnly) {
       event.preventDefault()
-      onSelect({ type: SELECTION_TYPE.KEY, path, edit: true })
+      context.onSelect({ type: SELECTION_TYPE.KEY, path, edit: true })
     }
   }
 
@@ -39,19 +35,19 @@
   }
 
   function handleChangeValue(newKey, updateSelection) {
-    const updatedKey = onUpdateKey(key, normalization.unescapeValue(newKey))
+    const updatedKey = onUpdateKey(key, context.normalization.unescapeValue(newKey))
     const updatedPath = initial(path).concat(updatedKey)
 
     if (updateSelection === UPDATE_SELECTION.NEXT_INSIDE) {
-      onSelect({
+      context.onSelect({
         type: SELECTION_TYPE.KEY,
         path: updatedPath,
         next: true
       })
     }
 
     if (updateSelection === UPDATE_SELECTION.SELF) {
-      onSelect(
+      context.onSelect(
         {
           type: SELECTION_TYPE.KEY,
           path: updatedPath
@@ -62,24 +58,24 @@
   }
 
   function handleCancelChange() {
-    onSelect({ type: SELECTION_TYPE.KEY, path })
+    context.onSelect({ type: SELECTION_TYPE.KEY, path })
   }
 </script>
 
 {#if editKey}
   <EditableDiv
-    value={normalization.escapeValue(key)}
+    value={context.normalization.escapeValue(key)}
     shortText
     onChange={handleChangeValue}
     onCancel={handleCancelChange}
-    {onFind}
+    onFind={context.onFind}
   />
 {:else}
   <div data-type="selectable-key" class={getKeyClass(key)} on:dblclick={handleKeyDoubleClick}>
     {#if searchResult}
-      <SearchResultHighlighter text={normalization.escapeValue(key)} {searchResult} />
+      <SearchResultHighlighter text={context.normalization.escapeValue(key)} {searchResult} />
     {:else}
-      {addNewLineSuffix(normalization.escapeValue(key))}
+      {addNewLineSuffix(context.normalization.escapeValue(key))}
     {/if}
   </div>
 {/if}