Is there a way to hide the "Are you sure you want to delete these items" popup?

[AdamFipke]

In my use case where I'm using this as a video file explorer, I used api.intercept on "delete-files" in order to show my own custom confirmation modal for deleting videos (example below). However, because of this I end up getting two confirmation modals (see pictures).

 api.intercept("delete-files", ({ ids }) => {
        // Map file-manager IDs to their full VideoData items (skip folders / not-found)
        const fullItems = ids
          .map((id) => fileData.find((videoItem) => videoItem.id === id))
          .filter((item): item is VideoData => item != null && item.type === "file")

        // Populate state and open the confirmation modal
        setVideosForDeletion(fullItems)
        deleteVideosDialogRef.current?.showModal()
        return false // Return false to prevent the file-manager from handling the delete itself, see https://docs.svar.dev/react/filemanager/api/actions/delete-files
      })

Built-in confirmation modal (shows first)

My custom confirmation modal (shows after clicking "OK" in the previous modal)

My first thought was maybe there's a way of creating custom actions? That way I can define a new action that basically performs the same what "delete-files" does except without the confirmation modal. I couldn't quite find anything here though. Another idea is if there was some way I could pass a skipDeleteConfirmation prop somewhere.

Overall this is a pretty small issue since it just means my users need to click through a second confirmation modal. But any help would still be appreciated!

[Natasha-eng]

Hi @AdamFipke ,

To hide the "Are you sure you want to delete these items" popup you can customize the delete functionality by filtering out the default delete button and implementing your own custom delete button with a handler.
You need to modify the menuOptions to exclude the default delete option. This will prevent the built-in confirmation modal from appearing: const menuOptions = getMenuOptions(mode).filter((o) => o.id !== "delete");

Then create your own delete button with a custom handler where you can implement your logic for showing the confirmation modal:

// Custom delete button
{
  icon: "wxi-close",
  text: "Custom Delete",
  // Ensure the id is unique and does not conflict with "delete"
  id: "remove",
  hotkey: "Ctrl+D",
  handler: ({ context }) => {
    // Your custom logic for deletion
    setVideosForDeletion([context.id]); // Populate state for your modal
    deleteVideosDialogRef.current?.showModal(); // Show your custom modal
    // Optionally, you can call the delete action here if needed
    fmApiRef.current.exec("delete-files", {
      ids: [context.id], 
    });
  },
}

Please check the example: https://snippet.svar.dev/react/of71QXg1f

[AdamFipke]

Hi @Natasha-eng , I appreciate the help again! I see that I missed the section in the documentation that mentions custom handlers for the context menu ](https://docs.svar.dev/react/filemanager/guides/configuration/add_contextmenu?_highlight=handler). I also appreciate the examples.

I noticed 2 things though.

• In the case for "multiselect", I notice the handler function only seems to return 1 item? So I'm not sure how to set up a custom deletion when selecting multiple items.
• Also, I notice that that pressing "Delete" on my keyboard will still show up the deletion modal despite removing the deletion action from modalOptions (as if the entire delete-files action went through).

I modified the example here to demonstrate these: https://snippet.svar.dev/react/ahLE55CTO

Try selecting multiple files, clicking "Custom Delete Multiple" and check the browser console. Also, try selecting 1 item or multiple items and pressing Delete on your keyboard and you will see that the delete-files action still seems to go through.

[Natasha-eng]

Hello @AdamFipke
Please check this example: https://snippet.svar.dev/react/vzicqC7sd
Here I use multiselect case to add the custom deletion behavior for multiselection by pressing Ctrl + Delete . To get all the selected items I use getState() method:

  // Receive selected elements from the state
  const state = fmApiRef.current.getState();
  const activePanel = state.panels[state.activePanel];
   
  const ids = activePanel.selected || [];