mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-24 09:28:31 +00:00
* 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:
parent
b24a229f2b
commit
d8b7f4150f
1 changed files with 21 additions and 5 deletions
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue