PanelStack API improved

Author: pawelchabros

NAMESPACE

@@ -57,6 +57,7 @@ export(NumericInput.shinyInput)
 export(OL)
 export(OverflowList)
 export(Overlay)
+export(PanelStack)
 export(PanelStack2)
 export(Popover)
 export(Pre)

R/components.R

@@ -374,9 +374,22 @@ OverflowList <- component("OverflowList")
 #'
 #' @example inst/examples/PanelStack2.R
 #' @inherit template params
+#' @param panels List of lists - each list contains `title` (string) and `content` (HTML)
+#' @param size Numeric vector of length 2 - `c(width, height)`
 #' @export
 PanelStack2 <- component("PanelStack2")
 
+#' @rdname PanelStack2
+#' @export
+PanelStack <- function(panels, size = c(300, 250), ...) {
+  shiny.react::reactElement(
+    module = "@/shiny.blueprint",
+    name = "PanelStack",
+    props = shiny.react::asProps(panels = panels, size = size, ...),
+    deps = blueprintDependency()
+  )
+}
+
 #' Progress bar
 #'
 #' Documentation: <https://blueprintjs.com/docs/#core/components/progress-bar>

inst/examples/PanelStack2.R

@@ -49,6 +49,15 @@ ui <- function(id) {
     PanelStack2(
       className = "panel-stack",
       initialPanel = JS("createPanel(1)")
+    ),
+    PanelStack(
+      panels = list(
+        list(title = "Panel 1", content = div("Content 1")),
+        list(title = "Panel 2", content = div("Content 2")),
+        list(title = "Panel 3", content = div("Content 3")),
+        list(title = "Panel 4", content = div("Content 4")),
+        list(title = "Panel 5", content = div("Content 5"))
+      )
     )
   )
 }

inst/www/blueprint.min.js

@@ -0,0 +1,5 @@
+.panelStack {
+  border: 1px solid lightgrey;
+  height: 100%;
+  width: 100%;
+}

js/src/PanelStack.module.css

@@ -5,15 +5,16 @@ import "@blueprintjs/select/lib/css/blueprint-select.css";
 import * as BlueprintSelect from "@blueprintjs/select";
 import * as Blueprint from "@blueprintjs/core";
 
-import * as Inputs from './inputs';
-import Suggest from './suggest';
-import Select from './select';
-import MultiSelect from './multiselect';
-import MultiSlider from './multiSlider';
-import Tree from './tree';
+import * as Inputs from "./inputs";
+import Suggest from "./suggest";
+import Select from "./select";
+import MultiSelect from "./multiselect";
+import MultiSlider from "./multiSlider";
+import Tree from "./tree";
 import ResizeSensor from "./resizeSensor.js";
+import PanelStack from "./panelStack";
 
-import './toaster';
+import "./toaster";
 
 window.jsmodule = {
   ...window.jsmodule,
@@ -27,5 +28,6 @@ window.jsmodule = {
     MultiSlider,
     Tree,
     ResizeSensor,
+    PanelStack,
   },
 };

js/src/index.js

@@ -0,0 +1,124 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { Button, PanelStack2, Classes } from "@blueprintjs/core";
+import styles from "./PanelStack.module.css";
+
+const PanelsType = PropTypes.arrayOf(
+  PropTypes.shape({
+    title: PropTypes.string,
+    content: PropTypes.node,
+  })
+);
+
+const NavigationButton = ({ text, onClick, direction }) => {
+  const icon =
+    direction === "left"
+      ? { icon: "chevron-left" }
+      : { rightIcon: "chevron-right" };
+  return React.createElement(Button, {
+    className: Classes.PANEL_STACK_HEADER_BACK,
+    minimal: true,
+    onClick: onClick,
+    small: true,
+    text: text,
+    ...icon,
+  });
+};
+NavigationButton.propTypes = {
+  text: PropTypes.string,
+  onClick: PropTypes.func,
+  direction: PropTypes.string,
+};
+
+const Panel = ({ panels, index, title, openPanel, closePanel }) => {
+  const nextIndex = index + 1;
+  const prevIndex = index - 1;
+  let prevButton, nextButton;
+  if (panels[prevIndex]) {
+    prevButton = React.createElement(NavigationButton, {
+      text: panels[prevIndex].title,
+      onClick: closePanel,
+      direction: "left",
+    });
+  }
+  if (panels[nextIndex]) {
+    const nextTitle = panels[nextIndex].title;
+    const openNext = () => {
+      openPanel({
+        renderPanel: Panel,
+        props: { panels, index: nextIndex, title: nextTitle },
+      });
+    };
+    nextButton = React.createElement(NavigationButton, {
+      text: nextTitle,
+      onClick: openNext,
+      direction: "right",
+    });
+  }
+  return React.createElement(
+    React.Fragment,
+    {},
+    React.createElement(
+      "div",
+      { className: "bp4-panel-stack-header" },
+      React.createElement("span", {}, prevButton),
+      React.createElement(
+        "div",
+        { className: "bp4-heading bp4-text-overflow-ellipsis" },
+        title
+      ),
+      React.createElement(
+        "span",
+        { style: { justifyContent: "end" } },
+        nextButton
+      )
+    ),
+    React.createElement(
+      "div",
+      { style: { padding: 10 } },
+      panels[index].content
+    )
+  );
+};
+Panel.propTypes = {
+  panels: PanelsType,
+  index: PropTypes.number,
+  title: PropTypes.string,
+  openPanel: PropTypes.func,
+  closePanel: PropTypes.func,
+};
+
+const PanelStack = ({ panels, size, ...propsRest }) => {
+  const [stack, setStack] = React.useState([
+    {
+      renderPanel: Panel,
+      props: { panels, index: 0, title: panels[0].title },
+    },
+  ]);
+  const addToPanelStack = React.useCallback(
+    (newPanel) => setStack((stack) => [...stack, newPanel]),
+    []
+  );
+  const removeFromPanelStack = React.useCallback(
+    () => setStack((stack) => stack.slice(0, -1)),
+    []
+  );
+  return React.createElement(
+    "div",
+    { style: { width: size[0], height: size[1] } },
+    React.createElement(PanelStack2, {
+      className: styles.panelStack,
+      onOpen: addToPanelStack,
+      onClose: removeFromPanelStack,
+      showPanelHeader: false,
+      stack: stack,
+      ...propsRest,
+    })
+  );
+};
+PanelStack.propTypes = {
+  panels: PanelsType,
+  size: PropTypes.arrayOf(PropTypes.number),
+  propsRest: PropTypes.object,
+};
+export default PanelStack;