feat: provide UI for hiding/showing code cells (#870)

Extract the code visibility form as a separate component. Fix #838
SwissDataScienceCenter · Apr 17, 2020 · ed29c3c · ed29c3c
1 parent 5469e25
commit ed29c3c
Showing 1 changed file with 42 additions and 35 deletions.
diff --git a/src/file/File.present.js b/src/file/File.present.js
@@ -249,48 +249,55 @@ function tweakCellMetadata(nb, displayMode = NotebookSourceDisplayMode.DEFAULT)
   return result;
 }
 
+function NotebookDisplayForm(props) {
+  const displayMode = props.displayMode;
+  const setDisplayMode = props.setDisplayMode;
+  return <ListGroup key="controls" flush>
+    <ListGroupItem>
+      <div>
+        <span style={{ fontWeight: "500" }}>
+          Code Visibility &nbsp;&nbsp;
+        </span>
+        <ButtonGroup key="controls" size="sm">
+          <Button
+            color="primary"
+            outline={displayMode !== NotebookSourceDisplayMode.DEFAULT}
+            onClick={() => setDisplayMode(NotebookSourceDisplayMode.DEFAULT)}
+            active={displayMode === NotebookSourceDisplayMode.DEFAULT}
+          >
+            Default
+          </Button>
+          <Button
+            color="primary"
+            outline={displayMode !== NotebookSourceDisplayMode.SHOWN}
+            onClick={() => setDisplayMode(NotebookSourceDisplayMode.SHOWN)}
+            active={displayMode === NotebookSourceDisplayMode.SHOWN}
+          >
+            Visible
+          </Button>
+          <Button
+            color="primary"
+            outline={displayMode !== NotebookSourceDisplayMode.HIDDEN}
+            onClick={() => setDisplayMode(NotebookSourceDisplayMode.HIDDEN)}
+            active={displayMode === NotebookSourceDisplayMode.HIDDEN}
+          >
+            Hidden
+          </Button>
+        </ButtonGroup>
+      </div>
+    </ListGroupItem>
+  </ListGroup>;
+}
+
 function StyledNotebook(props) {
   const [displayMode, setDisplayMode] = useState(NotebookSourceDisplayMode.DEFAULT);
 
   if (props.notebook == null) return <div>Loading...</div>;
 
   const notebook = tweakCellMetadata(props.notebook, displayMode);
   return [
-    <ListGroup key="controls" flush>
-      <ListGroupItem>
-        <div>
-          <span style={{ fontWeight: "500" }}>
-            Code Visibility &nbsp;&nbsp;
-          </span>
-          <ButtonGroup key="controls" size="sm">
-            <Button
-              color="primary"
-              outline={displayMode !== NotebookSourceDisplayMode.DEFAULT}
-              onClick={() => setDisplayMode(NotebookSourceDisplayMode.DEFAULT)}
-              active={displayMode === NotebookSourceDisplayMode.DEFAULT}
-            >
-              Default
-            </Button>
-            <Button
-              color="primary"
-              outline={displayMode !== NotebookSourceDisplayMode.SHOWN}
-              onClick={() => setDisplayMode(NotebookSourceDisplayMode.SHOWN)}
-              active={displayMode === NotebookSourceDisplayMode.SHOWN}
-            >
-              Visible
-            </Button>
-            <Button
-              color="primary"
-              outline={displayMode !== NotebookSourceDisplayMode.HIDDEN}
-              onClick={() => setDisplayMode(NotebookSourceDisplayMode.HIDDEN)}
-              active={displayMode === NotebookSourceDisplayMode.HIDDEN}
-            >
-              Hidden
-            </Button>
-          </ButtonGroup>
-        </div>
-      </ListGroupItem>
-    </ListGroup>,
+    <NotebookDisplayForm key="notebook-display-form"
+      displayMode={displayMode} setDisplayMode={setDisplayMode} />,
     <CardBody key="notebook">
       <NotebookPreview defaultStyle={false} loadMathjax={false} notebook={notebook} />
     </CardBody>