[Enhancement] Expose prop to turn off "Confirm Delete" button for user to define their own custom confirm deletion

[hokevins]

Hi, I'd like to define my own deletion confirmation modal and hook that into the callback for onDeleteFile and onDeleteFolder. So I'd render the modal visible in the confirm deletion callback, and then upon confirming the modal, some actions would take place to execute the deletion.

So is it possible that a bool prop can be exposed to turn off the "Confirm Deletion" button and instead invoke the callback once the "Delete" button is clicked from the action toolbar directly?

The way I have it currently set up would require that the user confirm the deletion twice prior to execution, once with your button and once with my modal.

Thank you!

[scaredcat]

Hi Kevin,

You can pass in fileRenderer and folderRenderer props to overwrite the defaults showing the Confirm Deletion button.

You can copy the default implementation from here https://github.com/uptick/react-keyed-file-browser/blob/79b0c9a6d4cd2d7a54711fa6986725e56e3025e8/src/files/table.js into your own project and customise the part showing the form with the confirm button. I'd most likely replace the form with your modal and pass in your custom fileRenderer as a prop when you instantiate the FileBrowser.

[hokevins]

Hi Retief,

Thanks for the suggestion -- but it's a slightly roundabout way to achieve what I'm trying to do and there's a non-insignificant amount of maintenance overhead for me to fork the entire table.js file to customize just one thing.

Instead, what I'm looking for is just a prop exposed i.e. showConfirmDelete that is a bool which determines whether or not to show that confirmation button entirely (for Folders and Files), and then attach the callback to either the button submission or just directly to the action bar icon click.

That is my suggested enhancement -- happy to make a PR if you agree with my proposal?

Thanks!

[jlo-1]

Hi Kevin,

A showConfirmDelete prop may suggest that having a confirm delete button is optional rather than existing to show/hide the button in our file and folder renders. Also not convinced conditionally rendering is best as confusion could be caused if confirmation logic exists elsewhere (like in your modal) and showConfirmDelete is false.

What you could do is pass a ConfirmDeletionComponent as a prop to table.js which takes handleDeleteSubmit, url and handleFileClick as props.

Move the 'isDeleting' logic that is currently in table.js to a component and call it ConfirmDeletionButton or something similar. Then set that as the default for a prop called ConfirmDeletionComponent in table.js.

You can then pass your own custom ConfirmDeletionComponent to the FileBrowser to achieve your desired functionality.

Cheers!

[hokevins]

Thanks for the response.

Awesome, that sounds like a good plan!

Do you have a contribution guide? I was not able to find any docs. Figured it out

I'll make a PR shortly to implement the above from @jlo-1 .

[hokevins]

^ I've just submitted a PR, thank you in advance for taking a look.

I decided to make this change more in-line with the naming convention and file structure that already exists within your repo.

To that end, I've modularized and plugged <ConfirmDeletionRenderer> into all 4 places where the "Confirm Deletion" button has been inserted: files/table.js, folders/table.js, files/list-thumbnail.js, and folders/list-thumbnail.js.

(This is not a breaking API change and all things remain fully backwards compatible.)

[jlo-1]

Thanks again @hokevins
It has been merged and released in v1.6.0

[hokevins]

Thank you!