Merge pull request #41 from parallaxinc/delete-file-dialog

add confirmation dialog for delete file operation - ref #27

Author: monteslu

plugins/sidebar/file-operations.js

@@ -5,7 +5,8 @@ const { Menu, MainButton, ChildButton } = require('react-mfb-iceddev');
 
 require('react-mfb-iceddev/mfb.css');
 
-const NewFileOverlay = require('./new-file-overlay');
+const NewFileOverlay = require('./overlays/new-file');
+const DeleteFileOverlay = require('./overlays/delete-file');
 
 const FileOperations = React.createClass({
   saveFile: function(evt){
@@ -31,7 +32,17 @@ const FileOperations = React.createClass({
     // TODO: these should transparently accept cursors for all non-function params
     space.saveFile(space.filename.deref(), space.current, overlay.hide);
   },
-  newFile: function(evt){
+  deleteFile: function(name){
+    const space = this.props.workspace;
+    const overlay = this.props.overlay;
+
+    if(!name){
+      return;
+    }
+
+    space.deleteFile(space.filename, overlay.hide);
+  },
+  showCreateOverlay: function(evt){
     evt.preventDefault();
 
     const overlay = this.props.overlay;
@@ -44,37 +55,35 @@ const FileOperations = React.createClass({
 
     overlay.show({ backdrop: true });
   },
-  deleteFile: function(evt){
+  showDeleteOverlay: function(evt){
     evt.preventDefault();
 
     const space = this.props.workspace;
+    const overlay = this.props.overlay;
 
-    space.deleteFile(space.filename, function(err){
-      console.log('deleted', err);
-    });
-  },
-  updateName: function(evt){
-    const space = this.props.workspace;
-    evt.stopPropagation();
-    evt.preventDefault();
-    space.filename.update(function(){
-      return evt.target.value;
-    });
+    overlay.content(
+      <DeleteFileOverlay
+        filename={space.filename.deref()}
+        onAccept={this.deleteFile}
+        onCancel={overlay.hide} />
+    );
+
+    overlay.show({ backdrop: true });
   },
   render: function(){
     return (
       <Menu effect="zoomin" method="click" position="bl">
         <MainButton iconResting="ion-plus-round" iconActive="ion-close-round" />
         <ChildButton
-          onClick={this.deleteFile}
+          onClick={this.showDeleteOverlay}
           icon="ion-backspace-outline"
           label="Delete File" />
         <ChildButton
           onClick={this.saveFile}
           icon="ion-compose"
           label="Save File" />
         <ChildButton
-          onClick={this.newFile}
+          onClick={this.showCreateOverlay}
           icon="ion-document"
           label="New File" />
       </Menu>

plugins/sidebar/overlays/delete-file.js

@@ -0,0 +1,44 @@
+'use strict';
+
+const React = require('react');
+const Card = require('react-material/components/Card');
+const Button = require('react-material/components/Button');
+
+const styles = require('../styles');
+
+class DeleteFileOverlay extends React.Component {
+  constructor(){
+    this.state = {
+      value: ''
+    };
+
+    this.onAccept = this.onAccept.bind(this);
+    this.onCancel = this.onCancel.bind(this);
+  }
+
+  onAccept(evt){
+    if(typeof this.props.onAccept === 'function'){
+      this.props.onAccept(this.props.filename, evt);
+    }
+  }
+
+  onCancel(evt){
+    if(typeof this.props.onCancel === 'function'){
+      this.props.onCancel(evt);
+    }
+  }
+
+  render(){
+    return (
+      <Card styles={styles.overlay}>
+        <h3 style={styles.overlayTitle}>Are you you want to delete {this.props.filename}?</h3>
+        <div style={styles.overlayButtonContainer}>
+          <Button onClick={this.onAccept}>Yes</Button>
+          <Button onClick={this.onCancel}>No</Button>
+        </div>
+      </Card>
+    );
+  }
+}
+
+module.exports = DeleteFileOverlay;

plugins/sidebar/new-file-overlay.js renamed to plugins/sidebar/overlays/new-file.js

@@ -5,7 +5,7 @@ const Card = require('react-material/components/Card');
 const Button = require('react-material/components/Button');
 const TextField = require('react-material/components/TextField');
 
-const styles = require('./styles');
+const styles = require('../styles');
 
 class NewFileOverlay extends React.Component {
   constructor(){