unsaved changes cancel confirmation

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>
   );
 };

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();
 

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>
+    );
+  }
+}

src/constants/modes.js

@@ -7,4 +7,5 @@ export const MODES = {
   NONE: 'NONE',
   LOGO: 'LOGO',
   SAVE: 'SAVE',
+  CONFIRM_CANCEL: 'CONFIRM_CANCEL'
 };