From 3363708c1f8f1e6bcf5c7aaaaba0818783c9e17e Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Mon, 3 Sep 2018 17:23:14 +0700
Subject: [PATCH] unsaved changes cancel confirmation

---
 src/components/panels/EditorDialog.jsx |  3 ++
 src/components/panels/EditorPanel.jsx  |  8 +++++-
 src/components/save/CancelDialog.jsx   | 39 ++++++++++++++++++++++++++
 src/constants/modes.js                 |  1 +
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/components/save/CancelDialog.jsx

diff --git a/src/components/panels/EditorDialog.jsx b/src/components/panels/EditorDialog.jsx
index fa87e9e..60a54ce 100644
--- a/src/components/panels/EditorDialog.jsx
+++ b/src/components/panels/EditorDialog.jsx
@@ -6,6 +6,7 @@ import { StickersDialog } from '$components/stickers/StickersDialog';
 import { TrashDialog } from '$components/trash/TrashDialog';
 import { LogoDialog } from '$components/logo/LogoDialog';
 import { SaveDialog } from '$components/save/SaveDialog';
+import { CancelDialog } from '$components/save/CancelDialog';
 
 export const EditorDialog = ({
   mode, routerPoints, editor, activeSticker, logo, user, title, address,
@@ -16,6 +17,7 @@ export const EditorDialog = ({
     || mode === MODES.TRASH
     || mode === MODES.LOGO
     || mode === MODES.SAVE
+    || mode === MODES.CONFIRM_CANCEL
   );
 
   return (
@@ -26,6 +28,7 @@ export const EditorDialog = ({
         { mode === MODES.TRASH && <TrashDialog editor={editor} /> }
         { mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} /> }
         { mode === MODES.SAVE && <SaveDialog editor={editor} user={user} title={title} address={address} /> }
+        { mode === MODES.CONFIRM_CANCEL && <CancelDialog editor={editor} /> }
       </div>
   );
 };
diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx
index 96dfff0..389b25e 100644
--- a/src/components/panels/EditorPanel.jsx
+++ b/src/components/panels/EditorPanel.jsx
@@ -23,7 +23,13 @@ export class EditorPanel extends React.PureComponent {
 
   startSaveMode = () => this.props.editor.changeMode(MODES.SAVE);
 
-  stopEditing = () => this.props.editor.stopEditing();
+  stopEditing = () => {
+    if (!this.props.changed){
+      this.props.editor.stopEditing();
+    } else {
+      this.props.editor.changeMode(MODES.CONFIRM_CANCEL);
+    }
+  };
 
   startEditing = () => this.props.editor.startEditing();
 
diff --git a/src/components/save/CancelDialog.jsx b/src/components/save/CancelDialog.jsx
new file mode 100644
index 0000000..22e79a0
--- /dev/null
+++ b/src/components/save/CancelDialog.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { MODES } from '$constants/modes';
+
+export class CancelDialog extends React.Component {
+  cancel = () => {
+    this.props.editor.stopEditing();
+  };
+
+  proceed = () => {
+    this.props.editor.changeMode(MODES.NONE);
+  };
+
+  save = () => {
+    this.props.editor.changeMode(MODES.SAVE);
+  };
+
+  render() {
+    return (
+      <div className="helper cancel-helper">
+        <div className="helper__text">
+          <div className="big white">Изменения не сохранены!</div>
+          <div className="small gray">Закрыть редактор?</div>
+        </div>
+        <div className="helper__buttons button-group">
+          <div className="button router-helper__button" onClick={this.cancel}>
+            Закрыть
+          </div>
+          <div className="button success router-helper__button" onClick={this.proceed}>
+            Продолжить
+          </div>
+          <div className="button primary router-helper__button" onClick={this.save}>
+            Сохранить
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/constants/modes.js b/src/constants/modes.js
index a90de73..5813132 100644
--- a/src/constants/modes.js
+++ b/src/constants/modes.js
@@ -7,4 +7,5 @@ export const MODES = {
   NONE: 'NONE',
   LOGO: 'LOGO',
   SAVE: 'SAVE',
+  CONFIRM_CANCEL: 'CONFIRM_CANCEL'
 };