feat: add "closeOnEscape" prop to modals

odigos-io · Jan 29, 2025 · e8592ce · e8592ce
1 parent 6ad0b7d
commit e8592ce
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 37 deletions.
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
@@ -16,6 +16,7 @@ interface ModalProps {
   }
   actionComponent?: React.ReactNode
   children: React.ReactNode
+  closeOnEscape?: boolean
 }
 
 const Container = styled.div`
@@ -87,40 +88,42 @@ const CancelText = styled(Text)`
   cursor: pointer;
 `
 
-const Modal = forwardRef<HTMLDivElement, ModalProps>(({ isOpen, noOverlay, header, actionComponent, onClose, children }, ref) => {
-  useKeyDown({ key: 'Escape', active: isOpen }, () => onClose())
-
-  const Transition = useTransition({
-    container: Container,
-    animateIn: slide.in['center'],
-    animateOut: slide.out['center'],
-  })
-
-  if (!isOpen) return null
-
-  return ReactDOM.createPortal(
-    <>
-      <Overlay hidden={!isOpen} onClick={onClose} style={{ opacity: noOverlay ? 0 : 1 }} />
-
-      <Transition data-id={`modal${header ? `-${header.title.replaceAll(' ', '-')}` : ''}`} enter={isOpen}>
-        {header && (
-          <ModalHeader>
-            <ModalCloseButton onClick={onClose}>
-              <XIcon />
-              <CancelText>Cancel</CancelText>
-            </ModalCloseButton>
-            <ModalTitleContainer>
-              <ModalTitle>{header.title}</ModalTitle>
-            </ModalTitleContainer>
-            <HeaderActionsWrapper>{actionComponent}</HeaderActionsWrapper>
-          </ModalHeader>
-        )}
-
-        <ModalContent ref={ref}>{children}</ModalContent>
-      </Transition>
-    </>,
-    document.body
-  )
-})
+const Modal = forwardRef<HTMLDivElement, ModalProps>(
+  ({ isOpen, noOverlay, header, actionComponent, onClose, children, closeOnEscape = true }, ref) => {
+    useKeyDown({ key: 'Escape', active: isOpen && closeOnEscape }, () => onClose())
+
+    const Transition = useTransition({
+      container: Container,
+      animateIn: slide.in['center'],
+      animateOut: slide.out['center'],
+    })
+
+    if (!isOpen) return null
+
+    return ReactDOM.createPortal(
+      <>
+        <Overlay hidden={!isOpen} onClick={onClose} style={{ opacity: noOverlay ? 0 : 1 }} />
+
+        <Transition data-id={`modal${header ? `-${header.title.replaceAll(' ', '-')}` : ''}`} enter={isOpen}>
+          {header && (
+            <ModalHeader>
+              <ModalCloseButton onClick={onClose}>
+                <XIcon />
+                <CancelText>Cancel</CancelText>
+              </ModalCloseButton>
+              <ModalTitleContainer>
+                <ModalTitle>{header.title}</ModalTitle>
+              </ModalTitleContainer>
+              <HeaderActionsWrapper>{actionComponent}</HeaderActionsWrapper>
+            </ModalHeader>
+          )}
+
+          <ModalContent ref={ref}>{children}</ModalContent>
+        </Transition>
+      </>,
+      document.body
+    )
+  }
+)
 
 export { Modal, type ModalProps }
diff --git a/src/components/warning-modal/index.tsx b/src/components/warning-modal/index.tsx
@@ -25,6 +25,7 @@ interface WarningModalProps {
   }
   approveButton: ButtonParams
   denyButton: ButtonParams
+  closeOnEscape?: boolean
 }
 
 const Container = styled.div`
@@ -63,8 +64,8 @@ const NoteWrapper = styled.div`
 `
 
 const WarningModal = forwardRef<HTMLDivElement, WarningModalProps>(
-  ({ isOpen, noOverlay, title = '', description = '', note, approveButton, denyButton }, ref) => {
-    useKeyDown({ key: 'Enter', active: isOpen }, () => approveButton.onClick())
+  ({ isOpen, noOverlay, title = '', description = '', note, approveButton, denyButton, closeOnEscape = true }, ref) => {
+    useKeyDown({ key: 'Enter', active: isOpen && closeOnEscape }, () => approveButton.onClick())
 
     const onApprove = () => approveButton.onClick()
     const onDeny = () => denyButton.onClick()