Resolved: Svelte: Get User Input Callback via Store Function

Question:

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

If you have better answer, please add a comment about this, thank you!

Resolved: Svelte: Get User Input Callback via Store Function

Resolved: Use Svelte Component as Slot

Resolved: Vaadin 14.9 – Redirect on Session Destroy Event

Resolved: How to separate multiple answers in one column, for multiple columns, by creating extra columns

Leave A Reply