Merge pull request #1602 from neelesh7singh/add-new-file/folder-bugfix

Add new file/folder bugfix

Author: catarak

client/modules/IDE/components/NewFileModal.jsx

@@ -20,10 +20,23 @@ class NewFileModal extends React.Component {
   constructor(props) {
     super(props);
     this.focusOnModal = this.focusOnModal.bind(this);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
   }
 
   componentDidMount() {
     this.focusOnModal();
+    document.addEventListener('click', this.handleOutsideClick, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick, false);
+  }
+
+  handleOutsideClick(e) {
+    // ignore clicks on the component itself
+    if (e.path.includes(this.modal)) return;
+
+    this.props.closeNewFileModal();
   }
 
   focusOnModal() {

client/modules/IDE/components/NewFolderModal.jsx

@@ -8,8 +8,25 @@ import NewFolderForm from './NewFolderForm';
 import ExitIcon from '../../../images/exit.svg';
 
 class NewFolderModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
+  }
+
   componentDidMount() {
     this.newFolderModal.focus();
+    document.addEventListener('click', this.handleOutsideClick, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick, false);
+  }
+
+  handleOutsideClick(e) {
+    // ignore clicks on the component itself
+    if (e.path.includes(this.newFolderModal)) return;
+
+    this.props.closeModal();
   }
 
   render() {

client/modules/IDE/reducers/ide.js

@@ -40,7 +40,11 @@ const ide = (state = initialState, action) => {
     case ActionTypes.CONSOLE_EVENT:
       return Object.assign({}, state, { consoleEvent: action.event });
     case ActionTypes.SHOW_MODAL:
-      return Object.assign({}, state, { modalIsVisible: true, parentId: action.parentId });
+      return Object.assign({}, state, {
+        modalIsVisible: true,
+        parentId: action.parentId,
+        newFolderModalVisible: false
+      });
     case ActionTypes.HIDE_MODAL:
       return Object.assign({}, state, { modalIsVisible: false });
     case ActionTypes.COLLAPSE_SIDEBAR:
@@ -62,7 +66,11 @@ const ide = (state = initialState, action) => {
     case ActionTypes.CLOSE_PROJECT_OPTIONS:
       return Object.assign({}, state, { projectOptionsVisible: false });
     case ActionTypes.SHOW_NEW_FOLDER_MODAL:
-      return Object.assign({}, state, { newFolderModalVisible: true, parentId: action.parentId });
+      return Object.assign({}, state, {
+        newFolderModalVisible: true,
+        parentId: action.parentId,
+        modalIsVisible: false
+      });
     case ActionTypes.CLOSE_NEW_FOLDER_MODAL:
       return Object.assign({}, state, { newFolderModalVisible: false });
     case ActionTypes.SHOW_SHARE_MODAL: