Skip to content

Commit

Permalink
Migrate Edit Navigation screen "Delete menu" button from confirm() … (
Browse files Browse the repository at this point in the history
#37492)

* Migrate Edit Navigation screen "Delete menu" button from `confirm()` to the new `ConfirmDialog` component

* add handler method to reset `showConfirmDialog` state on `ConfirmDialog` cancellation

* simplify ConfirmDialog state using the built in isOpen prop

* explicitly close ConfirmDialog after confirmation
  • Loading branch information
chad1008 authored Jan 31, 2022
1 parent 677ee84 commit 1000aab
Showing 1 changed file with 35 additions and 21 deletions.
56 changes: 35 additions & 21 deletions packages/edit-navigation/src/components/sidebar/delete-menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,45 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, PanelBody } from '@wordpress/components';
import {
Button,
PanelBody,
__experimentalConfirmDialog as ConfirmDialog,
} from '@wordpress/components';
import { useState } from '@wordpress/element';

export default function DeleteMenu( { onDeleteMenu, isMenuBeingDeleted } ) {
const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );

const handleConfirm = () => {
setShowConfirmDialog( false );
onDeleteMenu();
};

return (
<PanelBody>
<Button
className="edit-navigation-inspector-additions__delete-menu-button"
variant="secondary"
isDestructive
isBusy={ isMenuBeingDeleted }
onClick={ () => {
if (
// eslint-disable-next-line no-alert
window.confirm(
__(
'Are you sure you want to delete this navigation? This action cannot be undone.'
)
)
) {
onDeleteMenu();
}
} }
>
{ __( 'Delete menu' ) }
</Button>
<>
<Button
className="edit-navigation-inspector-additions__delete-menu-button"
variant="secondary"
isDestructive
isBusy={ isMenuBeingDeleted }
onClick={ () => {
setShowConfirmDialog( true );
} }
>
{ __( 'Delete menu' ) }
</Button>
<ConfirmDialog
isOpen={ showConfirmDialog }
onConfirm={ handleConfirm }
onCancel={ () => setShowConfirmDialog( false ) }
>
{ __(
'Are you sure you want to delete this navigation? This action cannot be undone.'
) }
</ConfirmDialog>
</>
</PanelBody>
);
}

0 comments on commit 1000aab

Please sign in to comment.