refactor(console): support close modal on esc pressed (#2627)

2024-12-16 20:26:19 -05:00 · 2022-12-09 19:57:28 +08:00 · 2022-12-09 19:57:28 +08:00 · d65e25a10e
commit d65e25a10e
parent 6c2d3daf7e
14 changed files with 67 additions and 7 deletions
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
@ -19,9 +19,11 @@ const Contact = ({ isOpen, onCancel }: Props) => {

  return (
    <ReactModal
+      shouldCloseOnEsc
      isOpen={isOpen}
      className={modalStyles.content}
      overlayClassName={modalStyles.overlay}
+      onRequestClose={onCancel}
    >
      <ModalLayout title="contact.title" subtitle="contact.description" onClose={onCancel}>
        <div className={styles.main}>
--- a/packages/console/src/components/ConfirmModal/index.tsx
+++ b/packages/console/src/components/ConfirmModal/index.tsx
@ -39,9 +39,11 @@ const ConfirmModal = ({
 }: ConfirmModalProps) => {
  return (
    <ReactModal
+      shouldCloseOnEsc
      isOpen={isOpen}
      className={modalStyles.content}
      overlayClassName={modalStyles.overlay}
+      onRequestClose={onCancel}
    >
      <ModalLayout
        title={title}
--- a/packages/console/src/pages/ApiResources/index.tsx
+++ b/packages/console/src/pages/ApiResources/index.tsx
@ -59,9 +59,13 @@ const ApiResources = () => {
          }}
        />
        <Modal
+          shouldCloseOnEsc
          isOpen={isCreateFormOpen}
          className={modalStyles.content}
          overlayClassName={modalStyles.overlay}
+          onRequestClose={() => {
+            setIsCreateFormOpen(false);
+          }}
        >
          <CreateForm
            onClose={(createdApiResource) => {
--- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
@ -118,7 +118,12 @@ const CreateForm = ({ onClose }: Props) => {
        </FormField>
      </form>
      {createdApp && (
-        <Modal isOpen={isGetStartedModalOpen} className={modalStyles.fullScreen}>
+        <Modal
+          shouldCloseOnEsc
+          isOpen={isGetStartedModalOpen}
+          className={modalStyles.fullScreen}
+          onRequestClose={closeModal}
+        >
          <Guide app={createdApp} onClose={closeModal} />
        </Modal>
      )}
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@ -54,18 +54,23 @@ const Applications = () => {
          }}
        />
        <Modal
+          shouldCloseOnEsc
          isOpen={isCreateNew}
          className={modalStyles.content}
          overlayClassName={modalStyles.overlay}
+          onRequestClose={() => {
+            navigate('/applications');
+          }}
        >
          <CreateForm
            onClose={(createdApp) => {
-              navigate('/applications');
-
              if (createdApp) {
                toast.success(t('applications.application_created', { name: createdApp.name }));
                navigate(`/applications/${createdApp.id}`);
+
+                return;
              }
+              navigate('/applications');
            }}
          />
        </Modal>
--- a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
@ -124,9 +124,13 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {

  return (
    <Modal
+      shouldCloseOnEsc
      isOpen={isFormOpen}
      className={modalStyles.content}
      overlayClassName={modalStyles.overlay}
+      onRequestClose={() => {
+        onClose?.();
+      }}
    >
      <ModalLayout
        title={cardTitle}
@ -179,7 +183,12 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
          />
        )}
        {activeFactory && (
-          <Modal isOpen={isGetStartedModalOpen} className={modalStyles.fullScreen}>
+          <Modal
+            shouldCloseOnEsc
+            isOpen={isGetStartedModalOpen}
+            className={modalStyles.fullScreen}
+            onRequestClose={closeModal}
+          >
            <Guide connector={activeFactory} onClose={closeModal} />
          </Modal>
        )}
--- a/packages/console/src/pages/Settings/components/ChangePassword.tsx
+++ b/packages/console/src/pages/Settings/components/ChangePassword.tsx
@ -60,9 +60,13 @@ const ChangePassword = () => {
        </div>
      </FormField>
      <ReactModal
+        shouldCloseOnEsc
        isOpen={isOpen}
        className={modalStyles.content}
        overlayClassName={modalStyles.overlay}
+        onRequestClose={() => {
+          setIsOpen(false);
+        }}
      >
        <ModalLayout
          title="settings.change_modal_title"
--- a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx
@ -82,7 +82,12 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
  };

  return (
-    <Modal isOpen={isOpen} className={modalStyles.fullScreen}>
+    <Modal
+      shouldCloseOnEsc
+      isOpen={isOpen}
+      className={modalStyles.fullScreen}
+      onRequestClose={onSkip}
+    >
      <div className={styles.container}>
        <div className={styles.header}>
          <IconButton size="large" disabled={isLoading} onClick={onSkip}>
--- a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.tsx
@ -71,7 +71,13 @@ const LanguageEditorModal = ({ isOpen, onClose }: Props) => {
  };

  return (
-    <Modal isOpen={isOpen} className={styles.modalContent} overlayClassName={styles.modalOverlay}>
+    <Modal
+      shouldCloseOnEsc
+      isOpen={isOpen}
+      className={styles.modalContent}
+      overlayClassName={styles.modalOverlay}
+      onRequestClose={onCloseModal}
+    >
      <Card className={styles.editor}>
        <div className={styles.header}>
          <CardTitle
--- a/packages/console/src/pages/UserDetails/components/CreateSuccess.tsx
+++ b/packages/console/src/pages/UserDetails/components/CreateSuccess.tsx
@ -41,7 +41,13 @@ const CreateSuccess = ({ username, password, title, onClose, passwordLabel }: Pr
  }

  return (
-    <ReactModal isOpen className={modalStyles.content} overlayClassName={modalStyles.overlay}>
+    <ReactModal
+      isOpen
+      shouldCloseOnEsc
+      className={modalStyles.content}
+      overlayClassName={modalStyles.overlay}
+      onRequestClose={onClose}
+    >
      <ModalLayout
        title={title}
        footer={
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@ -138,9 +138,13 @@ const UserDetails = () => {
                </ActionMenuItem>
              </ActionMenu>
              <ReactModal
+                shouldCloseOnEsc
                isOpen={isResetPasswordFormOpen}
                className={modalStyles.content}
                overlayClassName={modalStyles.overlay}
+                onRequestClose={() => {
+                  setIsResetPasswordFormOpen(false);
+                }}
              >
                <ResetPasswordForm
                  userId={data.id}
--- a/packages/console/src/pages/Users/index.tsx
+++ b/packages/console/src/pages/Users/index.tsx
@ -61,9 +61,13 @@ const Users = () => {
          }}
        />
        <Modal
+          shouldCloseOnEsc
          isOpen={isCreateFormOpen}
          className={modalStyles.content}
          overlayClassName={modalStyles.overlay}
+          onRequestClose={() => {
+            setIsCreateFormOpen(false);
+          }}
        >
          <CreateForm
            onClose={(createdUser, password) => {
--- a/packages/ui/src/components/ConfirmModal/AcModal.tsx
+++ b/packages/ui/src/components/ConfirmModal/AcModal.tsx
@ -27,6 +27,7 @@ const AcModal = ({

  return (
    <ReactModal
+      shouldCloseOnEsc
      role="dialog"
      isOpen={isOpen}
      className={classNames(styles.modal, className)}
@ -34,6 +35,7 @@ const AcModal = ({
      onAfterOpen={() => {
        contentRef.current?.focus();
      }}
+      onRequestClose={onClose}
    >
      <div
        ref={contentRef}
--- a/packages/ui/src/components/ConfirmModal/MobileModal.tsx
+++ b/packages/ui/src/components/ConfirmModal/MobileModal.tsx
@ -18,10 +18,12 @@ const MobileModal = ({
 }: ModalProps) => {
  return (
    <ReactModal
+      shouldCloseOnEsc
      role="dialog"
      isOpen={isOpen}
      className={classNames(styles.modal, className)}
      overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
+      onRequestClose={onClose}
    >
      <div className={styles.container}>
        <div className={styles.content}>{children}</div>