[HF23-AB]Enter to Delete | Closes #7711 (#7850)

* Enter to Delete | Closes #7711

* Added Callback function to handle delete button

* Wrapped handleDeleteConfirm in a callback function

* Used React.useCallback() instead of useCallback()

Fixed function typo
This commit is contained in:
Janmejay Chatterjee 2023-10-30 09:04:34 +05:30 committed by GitHub
parent b24a229f2b
commit d8b7f4150f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -382,15 +382,31 @@ export const Inspector = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify({ showHeaderActionsMenu })]);
const handleDeleteConfirm = React.useCallback(() => {
switchSidebarTab(2);
removeComponent(component);
setWidgetDeleteConfirmation(false);
}, [switchSidebarTab, removeComponent, component, setWidgetDeleteConfirmation]);
React.useEffect(()=>{
const handleKeyPress = (event) => {
if (showWidgetDeleteConfirmation && event.key === 'Enter') {
handleDeleteConfirm();
}
};
document.addEventListener('keydown', handleKeyPress);
return () => {
document.removeEventListener('keydown', handleKeyPress);
};
}, [showWidgetDeleteConfirmation, handleDeleteConfirm]);
return (
<div className="inspector">
<ConfirmDialog
show={showWidgetDeleteConfirmation}
message={'Component will be deleted, do you want to continue?'}
onConfirm={() => {
switchSidebarTab(2);
removeComponent(component);
}}
message={'Widget will be deleted, do you want to continue?'}
onConfirm={handleDeleteConfirm}
onCancel={() => setWidgetDeleteConfirmation(false)}
darkMode={darkMode}
/>