Allow tab closing with middle mouse button (codesandbox#355)

* Allow tab closing with middle mouse button

* Don't allow closing tabs with 1 tab.

Author: CompuIves

packages/app/src/app/components/sandbox/CodeEditor/Tabs/Tab.js

@@ -113,6 +113,13 @@ export default class Tab extends React.PureComponent<Props, State> {
     });
   };
 
+  onMouseDown = (e: MouseEvent) => {
+    if (e.button === 1) {
+      // Middle mouse button
+      this.closeTab(e);
+    }
+  };
+
   closeTab = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -143,6 +150,7 @@ export default class Tab extends React.PureComponent<Props, State> {
         isOver={isOver}
         onClick={onClick}
         onDoubleClick={onDoubleClick}
+        onMouseDown={this.onMouseDown}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
       >

packages/app/src/app/store/entities/sandboxes/reducer.js

@@ -95,6 +95,10 @@ function singleSandboxReducer(sandbox: Sandbox, action: Action): Sandbox {
       return newSandbox;
     }
     case CLOSE_TAB: {
+      if (sandbox.tabs.length === 1) {
+        return sandbox;
+      }
+
       const tabPos = action.position;
       let currentModule = sandbox.currentModule;
       const tabModuleId = sandbox.tabs[tabPos].moduleId;