#58 added cancel confirmation dialog

src/components/editors/EditorConfirmClose/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Group } from '~/components/containers/Group';
+import { Button } from '~/components/input/Button';
+
+interface IProps {
+  onApprove: () => void;
+  onDecline: () => void;
+}
+
+const EditorConfirmClose: FC<IProps> = ({ onApprove, onDecline }) => (
+  <div className={styles.wrap}>
+    <Group className={styles.content}>
+      <div className={styles.title}>Точно закрыть?</div>
+      <div className={styles.subtitle}>
+        Все изменения будут потеряны, воспоминания затёрты, очевидцы умрут, над миром воссияет
+        ядерный рассвет.
+      </div>
+
+      <div />
+
+      <Group horizontal>
+        <Button color="gray" type="button" onClick={onApprove} autoFocus>
+          Да
+        </Button>
+
+        <Button type="button" onClick={onDecline}>
+          О боже, нет!
+        </Button>
+      </Group>
+    </Group>
+  </div>
+);
+
+export { EditorConfirmClose };

src/components/editors/EditorConfirmClose/styles.module.scss

@@ -0,0 +1,35 @@
+@import "~/styles/variables.scss";
+
+.wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 21;
+  background: transparentize($color: #000000, $amount: 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @include can_backdrop {
+    backdrop-filter: blur(15px);
+  }
+}
+
+.title {
+  text-transform: uppercase;
+  font: $font_18_semibold;
+}
+
+.content {
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.subtitle {
+  font: $font_12_medium;
+  color: darken(white, 50%);
+  max-width: 300px;
+}

src/containers/dialogs/EditorDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, FC, useCallback, useEffect, useMemo } from 'react';
+import React, { createElement, FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { IDialogProps } from '~/redux/modal/constants';
 import styles from './styles.module.scss';
 import { NODE_EDITORS } from '~/redux/node/constants';
@@ -14,25 +14,38 @@ import { INode } from '~/redux/types';
 import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 import { useTranslatedError } from '~/utils/hooks/useTranslatedError';
 import { useCloseOnEscape } from '~/utils/hooks';
+import { EditorConfirmClose } from '~/components/editors/EditorConfirmClose';
 
 interface Props extends IDialogProps {
   node: INode;
 }
 
 const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
+  const [isConfirmModalShown, setConfirmModalShown] = useState(false);
+
   const uploader = useFileUploader(UPLOAD_SUBJECTS.EDITOR, UPLOAD_TARGETS.NODES, node.files);
   const formik = useNodeFormFormik(node, uploader, onRequestClose);
   const { values, handleSubmit, dirty, status, setStatus } = formik;
 
   const component = useMemo(() => node.type && prop(node.type, NODE_EDITORS), [node.type]);
 
+  const closeConfirmModal = useCallback(() => {
+    setConfirmModalShown(false);
+  }, [setConfirmModalShown]);
+
   const onClose = useCallback(() => {
-    if (dirty && !window.confirm('Точно выйти?')) {
-      return undefined;
+    if (!dirty) {
+      onRequestClose();
+      return;
     }
 
-    onRequestClose();
-  }, [onRequestClose, dirty]);
+    if (isConfirmModalShown) {
+      closeConfirmModal();
+      return;
+    }
+
+    setConfirmModalShown(true);
+  }, [onRequestClose, dirty, isConfirmModalShown, setConfirmModalShown]);
 
   const error = useTranslatedError(status);
 
@@ -62,7 +75,12 @@ const EditorDialog: FC<Props> = ({ node, onRequestClose }) => {
               error={error}
               onClose={onClose}
             >
-              <div className={styles.editor}>{createElement(component)}</div>
+              <>
+                {isConfirmModalShown && (
+                  <EditorConfirmClose onApprove={onRequestClose} onDecline={closeConfirmModal} />
+                )}
+                <div className={styles.editor}>{createElement(component)}</div>
+              </>
             </BetterScrollDialog>
           </form>
         </FormikProvider>