Disabled action buttons while one is active

Author: jarekwg

src/browser.js

@@ -379,7 +379,9 @@ class RawFileBrowser extends React.Component {
 
     let actions
     if (selectedItem) {
+      // Something is selected. Build custom actions depending on what it is.
       if (selectedItem.action) {
+        // Selected item has an active action against it. Disable all other actions.
         let actionText
         switch (selectedItem.action) {
           case 'delete':
@@ -402,61 +404,63 @@ class RawFileBrowser extends React.Component {
         )
       } else {
         actions = []
-        if (
-          selectionIsFolder &&
-          typeof this.props.onCreateFolder === 'function' &&
-          !this.state.nameFilter
-        ) {
-          actions.push(
-            <li key="action-add-folder">
-              <a
-                onClick={this.handleActionBarAddFolderClick}
-                href="#"
-                role="button"
-              >
-                <i className="fa fa-folder-o" aria-hidden="true" />
-                &nbsp;Add Subfolder
-              </a>
-            </li>
-          )
-        }
-        if (
-          selectedItem.keyDerived && (
-            (selectionIsFolder && typeof this.props.onRenameFile === 'function') ||
-            (!selectionIsFolder && typeof this.props.onRenameFolder === 'function')
-          )
-        ) {
-          actions.push(
-            <li key="action-rename">
-              <a
-                onClick={this.handleActionBarRenameClick}
-                href="#"
-                role="button"
-              >
-                <i className="fa fa-i-cursor" aria-hidden="true" />
-                &nbsp;Rename
-              </a>
-            </li>
-          )
-        }
-        if (
-          selectedItem.keyDerived && (
-            (!selectionIsFolder && typeof this.props.onDeleteFile === 'function') ||
-            (selectionIsFolder && typeof this.props.onDeleteFolder === 'function')
-          )
-        ) {
-          actions.push(
-            <li key="action-delete">
-              <a
-                onClick={this.handleActionBarDeleteClick}
-                href="#"
-                role="button"
-              >
-                <i className="fa fa-trash-o" aria-hidden="true" />
-                &nbsp;Delete
-              </a>
-            </li>
-          )
+        if (this.state.activeAction === null) {
+          if (
+            selectionIsFolder &&
+            typeof this.props.onCreateFolder === 'function' &&
+            !this.state.nameFilter
+          ) {
+            actions.push(
+              <li key="action-add-folder">
+                <a
+                  onClick={this.handleActionBarAddFolderClick}
+                  href="#"
+                  role="button"
+                >
+                  <i className="fa fa-folder-o" aria-hidden="true" />
+                  &nbsp;Add Subfolder
+                </a>
+              </li>
+            )
+          }
+          if (
+            selectedItem.keyDerived && (
+              (selectionIsFolder && typeof this.props.onRenameFile === 'function') ||
+              (!selectionIsFolder && typeof this.props.onRenameFolder === 'function')
+            )
+          ) {
+            actions.push(
+              <li key="action-rename">
+                <a
+                  onClick={this.handleActionBarRenameClick}
+                  href="#"
+                  role="button"
+                >
+                  <i className="fa fa-i-cursor" aria-hidden="true" />
+                  &nbsp;Rename
+                </a>
+              </li>
+            )
+          }
+          if (
+            selectedItem.keyDerived && (
+              (!selectionIsFolder && typeof this.props.onDeleteFile === 'function') ||
+              (selectionIsFolder && typeof this.props.onDeleteFolder === 'function')
+            )
+          ) {
+            actions.push(
+              <li key="action-delete">
+                <a
+                  onClick={this.handleActionBarDeleteClick}
+                  href="#"
+                  role="button"
+                >
+                  <i className="fa fa-trash-o" aria-hidden="true" />
+                  &nbsp;Delete
+                </a>
+              </li>
+            )
+          }
         }
         if (actions.length) {
           actions = (<ul className="item-actions">{actions}</ul>)
@@ -465,9 +469,13 @@ class RawFileBrowser extends React.Component {
         }
       }
     } else {
+      // Nothing selected: We're in the 'root' folder. Only allowed action is adding a folder.
       actions = []
-
-      if (typeof this.props.onCreateFolder === 'function' && !this.state.nameFilter) {
+      if (
+        this.state.activeAction === null &&
+        typeof this.props.onCreateFolder === 'function' &&
+        !this.state.nameFilter
+      ) {
         actions.push(
           <li key="action-add-folder">
             <a
@@ -481,7 +489,6 @@ class RawFileBrowser extends React.Component {
           </li>
         )
       }
-
       if (actions.length) {
         actions = (<ul className="item-actions">{actions}</ul>)
       } else {