Utilizing Svelte to Retrieve User Input through Store Functions

Question

Utilizing Svelte to Retrieve User Input through Store Functions

Exploring the capabilities of Svelte as a newcomer, I am attempting something that may or may not be achievable, but I remain optimistic! 😄

Within a component, I have a delete button that triggers a globally accessible modal to appear as a confirmation dialog. This modal component is located in my __layout.svelte file so that it can be called from any part of my application.

//=== Modal.svelte ===
<script lang="ts">
import { modal, confirmTrash } from '$lib/stores/modal'
//Perform various customizations to 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}

Below is the modal store structure:

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

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

//Simple function to display 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
  })
}

Lastly, in one of my app components, I trigger the deletion process by clicking a link that prompts the delete confirmation modal to appear:

//=== 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){
    //Desire to receive feedback on whether the user clicked "Delete" should be handled here
    console.log(result) //???
  })
}} 
>Trash</a>

I'm seeking clarity on how to establish a callback function within my confirmTrash method to transmit the user's response in the modal back to the point where the modal was activated. Is this achievable?

javascript typescript callback svelte svelte-store

Answer 1

Answer №1

If you want this code to function, simply pass in the function and call it as needed.

//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,
  })
}

Next, call it within 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>

See REPL example

I prefer not to use a singleton component in this way, but rather create new instances using the client-side component API for efficiency and a cleaner life cycle with less unnecessary global state.

Here's an 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: 'Confirm',
            message: 'Are you sure?',
        });
        if (confirmed == false)
            return;
        
        alert('Confirmed!');
    }
</script>

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

See REPL example

Answer 2

If you want this code to function, simply pass in the function and call it as needed.

//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,
  })
}

Next, call it within 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>

See REPL example

I prefer not to use a singleton component in this way, but rather create new instances using the client-side component API for efficiency and a cleaner life cycle with less unnecessary global state.

Here's an 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: 'Confirm',
            message: 'Are you sure?',
        });
        if (confirmed == false)
            return;
        
        alert('Confirmed!');
    }
</script>

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

See REPL example

Answer 3

Answer №2

If you prioritize less code over a custom dialog box, you could potentially use the vanilla window.confirm() function instead. In a svelte.js context, it could be implemented like this:

<script>
  const handleClick = () => {
    if (window.confirm('Are you sure?')) {
      // Proceed with the action
    }
  }
</script>

<button on:click={handleClick}>Click me!</button>

Answer 4

If you prioritize less code over a custom dialog box, you could potentially use the vanilla window.confirm() function instead. In a svelte.js context, it could be implemented like this:

<script>
  const handleClick = () => {
    if (window.confirm('Are you sure?')) {
      // Proceed with the action
    }
  }
</script>

<button on:click={handleClick}>Click me!</button>

Utilizing Svelte to Retrieve User Input through Store Functions

Answer №1

Answer №2

Similar questions

Displaying Props Information in a Modal Window using React

Saving the selections from two drop-down menus into a single variable

Issues with slider functionality in a Next.js application styled with Tailwind CSS

Create a project using Next.js and integrate it with the tailwindcss framework

Encountering a glitch while attempting to render with the select tag in React.js

Animating toggles with JQuery

Attempting to connect information to state using an input field that is being iterated over in React

TypeScript does not properly validate the types of defaultProps

Efficient methods for transferring information between a main and pop-up page within angularjs

Creating a list in React and adding a delay using setTimeout() method

Using Event Delegation in Practice

Error Encountered: Nested textarea not supported in HTML

The error "Property 'push' does not exist on type '() => void'" occurs with Angular2 and Typescript arrays

Is there a way to customize the ::selection style using mui createTheme?

Different ways to save data fetched from a fetch request

Using ES6 Babel with multiple package.json files

Execute a personalized function when an array is updated or created in JavaScript

Finding all parent IDs from a given child ID within a nested JSON structure that contains children can be achieved by recursively

Guide on properly documenting custom function types in JSDoc or TypeScript to ensure accurate referencing for VSCode IntelliSense functionality

Retrieve the CSS class definition using the console in the Chrome Developer Tools