PanelStack - openPanel & removePanel handlers exported

Author: pawelchabros

NAMESPACE

@@ -58,7 +58,7 @@ export(OL)
 export(OverflowList)
 export(Overlay)
 export(PanelStack)
-export(PanelStack2)
+export(PanelStack.shinyWrapper)
 export(Popover)
 export(Pre)
 export(ProgressBar)
@@ -91,6 +91,8 @@ export(Toaster)
 export(Tree)
 export(Tree.shinyInput)
 export(UL)
+export(closePanel)
+export(openPanel)
 export(reactOutput)
 export(renderReact)
 export(runExample)

R/components.R

@@ -85,10 +85,10 @@ select <- function(name) {
     checkmate::assert_string(noResults)
     items <- unique(items)
     items <- purrr::map(items, function(item) {
-       if (is.null(item$key)) {
-         item$key <- paste0(item$text, "-", item$label)
-       }
-       item
+      if (is.null(item$key)) {
+        item$key <- paste0(item$text, "-", item$label)
+      }
+      item
     })
     shiny.react::reactElement(
       module = "@/shiny.blueprint",
@@ -375,17 +375,18 @@ 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 ns Namespace of given panel stack (required if there's more than 1 panel stack)
 #' @param size Numeric vector of length 2 - `c(width, height)`
 #' @export
-PanelStack2 <- component("PanelStack2")
+PanelStack <- component("PanelStack2")
 
-#' @rdname PanelStack2
+#' @rdname PanelStack
 #' @export
-PanelStack <- function(panels, size = c(300, 250), ...) {
+PanelStack.shinyWrapper <- function(panels, ns = "ps", size = c(300, 250), ...) { # nolint
   shiny.react::reactElement(
     module = "@/shiny.blueprint",
     name = "PanelStack",
-    props = shiny.react::asProps(panels = panels, size = size, ...),
+    props = shiny.react::asProps(panels = panels, ns = ns, size = size, ...),
     deps = blueprintDependency()
   )
 }

R/handlers.R

@@ -0,0 +1,18 @@
+handlersObject <- function(ns) {
+  paste0("window.jsmodule['@/shiny.blueprint'].panelStackHandlers['", ns, "']")
+}
+
+#' @rdname PanelStack
+#' @param panelId Id of the panel to be closed
+#' @export
+openPanel <- function(panelId, ns = "ps") {
+  JS(paste0(
+    "() => ", handlersObject(ns), ".openPanel('", panelId, "')"
+  ))
+}
+
+#' @rdname PanelStack
+#' @export
+closePanel <- function(ns = "ps") {
+  JS("() => ", handlersObject(ns), ".closePanel()")
+}

inst/examples/PanelStack2.R renamed to inst/examples/PanelStack.R

@@ -46,17 +46,31 @@ customComponents <- tagList(
 ui <- function(id) {
   tagList(
     customComponents,
-    PanelStack2(
+    PanelStack(
       className = "panel-stack",
       initialPanel = JS("createPanel(1)")
     ),
-    PanelStack(
+    PanelStack.shinyWrapper(
       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"))
+        list(id = "panel1", title = "Panel 1", content = div(
+          class = "panel",
+          Button(text = "Open 2", onClick = openPanel("panel2")),
+          Button(text = "Open 4", onClick = openPanel("panel4"))
+        )),
+        list(id = "panel2", title = "Panel 2", content = div(
+          class = "panel",
+          Button(text = "Open 3", onClick = openPanel("panel3")),
+          Button(text = "Close", onClick = closePanel())
+        )),
+        list(id = "panel3", title = "Panel 3", content = div(
+          class = "panel",
+          Button(text = "Open 4", onClick = openPanel("panel4")),
+          Button(text = "Close", onClick = closePanel())
+        )),
+        list(id = "panel4", title = "Panel 4", content = div(
+          class = "panel",
+          Button(text = "Close", onClick = closePanel())
+        ))
       )
     )
   )

inst/examples/showcase/app.R

@@ -24,7 +24,7 @@ sections <- list(
     item("Navbar", "Navbar"),
     item("Non-ideal state", "NonIdealState"),
     item("Overflow list", "OverflowList"),
-    item("Panel stack (v2)", "PanelStack2"),
+    item("Panel stack (v2)", "PanelStack"),
     item("Progress bar", "ProgressBar"),
     item("Resize sensor", "ResizeSensor"),
     item("Spinner", "Spinner"),

inst/www/blueprint.min.js

@@ -12,7 +12,7 @@ import MultiSelect from "./multiselect";
 import MultiSlider from "./multiSlider";
 import Tree from "./tree";
 import ResizeSensor from "./resizeSensor.js";
-import PanelStack from "./panelStack";
+import PanelStack, { panelStackHandlers } from "./panelStack";
 
 import "./toaster";
 
@@ -29,5 +29,6 @@ window.jsmodule = {
     Tree,
     ResizeSensor,
     PanelStack,
+    panelStackHandlers,
   },
 };

js/src/index.js

@@ -1,124 +1,67 @@
 import * as React from "react";
 import PropTypes from "prop-types";
-import { Button, PanelStack2, Classes } from "@blueprintjs/core";
+import { PanelStack2 } from "@blueprintjs/core";
 import styles from "./PanelStack.module.css";
 
 const PanelsType = PropTypes.arrayOf(
   PropTypes.shape({
+    id: PropTypes.string,
     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,
-};
+export const panelStackHandlers = {};
 
-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
-    )
-  );
+const Panel = ({ content }) => {
+  return React.createElement("div", { style: { padding: 10 } }, content);
 };
 Panel.propTypes = {
-  panels: PanelsType,
-  index: PropTypes.number,
-  title: PropTypes.string,
-  openPanel: PropTypes.func,
-  closePanel: PropTypes.func,
+  content: PropTypes.node,
 };
 
-const PanelStack = ({ panels, size, ...propsRest }) => {
+const PanelStack = ({ panels, ns, size, ...propsRest }) => {
   const [stack, setStack] = React.useState([
     {
       renderPanel: Panel,
-      props: { panels, index: 0, title: panels[0].title },
+      title: panels[0].title,
+      props: { content: panels[0].content },
     },
   ]);
-  const addToPanelStack = React.useCallback(
-    (newPanel) => setStack((stack) => [...stack, newPanel]),
-    []
-  );
-  const removeFromPanelStack = React.useCallback(
-    () => setStack((stack) => stack.slice(0, -1)),
-    []
-  );
+  const addToPanelStack = (newPanel) =>
+    setStack((stack) => [...stack, newPanel]);
+  const removeFromPanelStack = () => setStack((stack) => stack.slice(0, -1));
+  React.useEffect(() => {
+    panelStackHandlers[ns] = {
+      openPanel: (panelId) => {
+        const { title, content } = panels.find(({ id }) => id == panelId);
+        addToPanelStack({
+          renderPanel: Panel,
+          title,
+          props: { content },
+        });
+      },
+      closePanel: removeFromPanelStack,
+    };
+    return () => delete panelStackHandlers[ns];
+  }, [panels]);
   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,
+  ns: PropTypes.string,
   size: PropTypes.arrayOf(PropTypes.number),
   propsRest: PropTypes.object,
 };
+
 export default PanelStack;