From 68b7cfb3d4a04d7b20a3d853b2d975da7a0139f3 Mon Sep 17 00:00:00 2001
From: Ben Regenspan <bregenspan@gmail.com>
Date: Sun, 7 Apr 2019 14:29:03 -0400
Subject: [PATCH] Disable inapplicable context menu options

---
 client/components/ContextMenu.css     | 10 ----------
 client/components/ContextMenu.jsx     | 24 ++++++++++++++----------
 client/components/ContextMenuItem.css | 24 ++++++++++++++++++++++++
 client/components/ContextMenuItem.jsx | 17 +++++++++++++++++
 4 files changed, 55 insertions(+), 20 deletions(-)
 create mode 100644 client/components/ContextMenuItem.css
 create mode 100644 client/components/ContextMenuItem.jsx

diff --git a/client/components/ContextMenu.css b/client/components/ContextMenu.css
index 1889290c..b8441dfe 100644
--- a/client/components/ContextMenu.css
+++ b/client/components/ContextMenu.css
@@ -16,13 +16,3 @@
   opacity: 0;
   visibility: hidden;
 }
-
-.item {
-  cursor: pointer;
-  margin: 0;
-  padding: 8px 14px;
-}
-
-.item:hover {
-  background: #ffefd7;
-}
diff --git a/client/components/ContextMenu.jsx b/client/components/ContextMenu.jsx
index 5cd4d1ca..35c78969 100644
--- a/client/components/ContextMenu.jsx
+++ b/client/components/ContextMenu.jsx
@@ -1,6 +1,7 @@
 /** @jsx h */
 import {h} from 'preact';
 import cls from 'classnames';
+import ContextMenuItem from './ContextMenuItem';
 import PureComponent from '../lib/PureComponent';
 import {store} from '../store';
 import {elementIsOutside} from '../utils';
@@ -8,10 +9,6 @@ import {elementIsOutside} from '../utils';
 import s from './ContextMenu.css';
 
 export default class ContextMenu extends PureComponent {
-  constructor(props) {
-    super(props);
-  }
-
   componentDidMount() {
     this.boundingRect = this.node.getBoundingClientRect();
   }
@@ -30,15 +27,22 @@ export default class ContextMenu extends PureComponent {
       [s.container]: true,
       [s.hidden]: !visible
     });
-    const itemClassName = cls({
-      [s.item]: true
-    });
+    const multipleChunksSelected = store.selectedChunks.length > 1;
     return (
       <ul ref={this.saveNode} className={containerClassName} style={this.getStyle()}>
-        <li className={itemClassName} onClick={this.handleClickHideChunk}>Hide chunk</li>
-        <li className={itemClassName} onClick={this.handleClickFilterToChunk}>Hide all other chunks</li>
+        <ContextMenuItem disabled={!multipleChunksSelected}
+          onClick={this.handleClickHideChunk}>
+          Hide chunk
+        </ContextMenuItem>
+        <ContextMenuItem disabled={!multipleChunksSelected}
+          onClick={this.handleClickFilterToChunk}>
+          Hide all other chunks
+        </ContextMenuItem>
         <hr/>
-        <li className={itemClassName} onClick={this.handleClickShowAllChunks}>Show all chunks</li>
+        <ContextMenuItem disabled={store.allChunksSelected}
+          onClick={this.handleClickShowAllChunks}>
+          Show all chunks
+        </ContextMenuItem>
       </ul>
     );
   }
diff --git a/client/components/ContextMenuItem.css b/client/components/ContextMenuItem.css
new file mode 100644
index 00000000..cd0f84e2
--- /dev/null
+++ b/client/components/ContextMenuItem.css
@@ -0,0 +1,24 @@
+.item {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+
+  cursor: pointer;
+  margin: 0;
+  padding: 8px 14px;
+}
+
+.item:hover {
+  background: #ffefd7;
+}
+
+.disabled {
+  cursor: default;
+  color: gray;
+}
+
+.item.disabled:hover {
+  background: transparent;
+}
diff --git a/client/components/ContextMenuItem.jsx b/client/components/ContextMenuItem.jsx
new file mode 100644
index 00000000..e03e6486
--- /dev/null
+++ b/client/components/ContextMenuItem.jsx
@@ -0,0 +1,17 @@
+/** @jsx h */
+import {h} from 'preact';
+import cls from 'classnames';
+import s from './ContextMenuItem.css';
+
+function noop() {
+  return false;
+}
+
+export default function ContextMenuItem({children, disabled, onClick}) {
+  const className = cls({
+    [s.item]: true,
+    [s.disabled]: disabled
+  });
+  const handler = disabled ? noop : onClick;
+  return (<li className={className} onClick={handler}>{children}</li>);
+}