Svelte: Get User Input Callback via Store Function

What I’m trying to do here may not be possible, but as a newcomer to Svelte, I hope it is. 😄

I have a delete button in a component that opens a globally available modal that serves as a confirmation dialog. The modal component is in my __layout.svelte so I can invoke it from anywhere in my app.

//=== Modal.svelte ===
<script lang="ts">
import { modal, confirmTrash } from '$lib/stores/modal'
//Do a bunch of stuff to customize the modal...
</script>

{#if modal.show}
  <h2>{$modal.title}</h2>
  <p>{$modal.message}</p>

  <button on:click={() => { send confirmation that the delete was confirmed }>{$modal.button}</button>
{/if}

Here is my modal store:

//=== modal.ts ===
import { writable } from 'svelte/store'

//Customize the modal's state
export const modal = writable({
  title: '',
  message: '',
  button: '',
  mode: '',
  show: false
})

//Convenience function for showing the trash confirmation modal
export function confirmTrash(modalTitle: string, modalMessage: string, buttonText: string){
  modal.set({
    title: modalTitle,
    message: modalMessage,
    button: buttonText,
    mode: 'trash',
    show: true
  })
}

Last of all, here is my component in my app where I actually initiate the delete process by clicking a link that shows the delete confirmation modal:

//=== Component.svelte ===
<script lang="ts">
import { confirmTrash } from '$lib/stores/modal'
</script>

<a href="#trash" 
on:click={() => {
  confirmTrash('Trash Title', 'Message goes here.', 'Delete', function(result){
    //I want to be able to know ** here ** if the user clicked "Delete"
    console.log(result) //???
  })
}} 
>Trash</a>

I’m unclear on how to connect a callback function through my confirmTrash function to pass the user’s response in the modal back to where the modal was invoked. Is this possible?

Answer

For this to work, you just have to pass in function and call it accordingly.

//Customize the modal's state
export const modal = writable({
  title: '',
  message: '',
  button: '',
  mode: '',
  show: false,
  callback: (result: boolean) => { },
})

//Convenience function for showing the trash confirmation modal
export function confirmTrash(
  modalTitle: string,
  modalMessage: string,
  buttonText: string,
  callback: (result: boolean) => void,
){
  modal.set({
    title: modalTitle,
    message: modalMessage,
    button: buttonText,
    mode: 'trash',
    show: true,
    callback,
  })
}

Then call it in the component:

<script>
    // ...
    function onButton(result) {
        $modal.show = false;
        $modal.callback(result);
    }
</script>
<!-- ... -->
<button type=button on:click={() => onButton(false)}>Cancel</button>
<button type=button on:click={() => onButton(true)}>{$modal.button}</button>

REPL example

I would not use singleton component like this but create new instances using the client-side component API. It is less redundant, leads to a cleaner life cycle and less unnecessary global state.

Example of that:

<!-- Modal.svelte -->
<script>
    import { createEventDispatcher } from 'svelte';

    export let title;
    export let message;
    export let button = 'OK';
    
    const dispatch = createEventDispatcher();
</script>   

<div>
    <strong>{title}</strong>
    <p>{message}</p>

    <button type=button on:click={() => dispatch('result', false)}>Cancel</button>
    <button type=button on:click={() => dispatch('result', true)}>{button}</button>
</div>

// modal.js
import Modal from './Modal.svelte';

export function confirm(options) {
    return new Promise(resolve => {
        const modal = new Modal({
            target: document.body,
            props: options,
        });
        modal.$on('result', e => {
            resolve(e.detail);
            modal.$destroy();
        });
    })
}

Usage:

<script>
    import { confirm } from './modal.js';
    
    async function onShow() {
        const confirmed = await confirm({
            title: 'Confirmation',
            message: 'You sure?',
        });
        if (confirmed == false)
            return;
        
        alert('Confirmed!');
    }
</script>

<button type=button on:click={onShow}>Show</button>

REPL example