Merge pull request #63 from Appsilon/improve-panel-stack

PanelStack API improved

Author: kamilzyla

NAMESPACE

@@ -57,7 +57,8 @@ export(NumericInput.shinyInput)
 export(OL)
 export(OverflowList)
 export(Overlay)
-export(PanelStack2)
+export(PanelStack)
+export(PanelStack.shinyWrapper)
 export(Popover)
 export(Pre)
 export(ProgressBar)
@@ -90,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",
@@ -368,14 +368,28 @@ NonIdealState <- component("NonIdealState")
 #' @export
 OverflowList <- component("OverflowList")
 
-#' Panel stack (v2)
+#' Panel stack
 #'
 #' Documentation: <https://blueprintjs.com/docs/#core/components/panel-stack2>
 #'
-#' @example inst/examples/PanelStack2.R
+#' @example inst/examples/PanelStack.R
 #' @inherit template params
 #' @export
-PanelStack2 <- component("PanelStack2")
+PanelStack <- component("PanelStack2")
+
+#' @rdname PanelStack
+#' @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
+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, ns = ns, size = size, ...),
+    deps = blueprintDependency()
+  )
+}
 
 #' Progress bar
 #'

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,9 +46,32 @@ customComponents <- tagList(
 ui <- function(id) {
   tagList(
     customComponents,
-    PanelStack2(
+    PanelStack(
       className = "panel-stack",
       initialPanel = JS("createPanel(1)")
+    ),
+    PanelStack.shinyWrapper(
+      panels = list(
+        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", "PanelStack"),
     item("Progress bar", "ProgressBar"),
     item("Resize sensor", "ResizeSensor"),
     item("Spinner", "Spinner"),

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, { panelStackHandlers } from "./panelStack";
 
-import './toaster';
+import "./toaster";
 
 window.jsmodule = {
   ...window.jsmodule,
@@ -27,5 +28,7 @@ window.jsmodule = {
     MultiSlider,
     Tree,
     ResizeSensor,
+    PanelStack,
+    panelStackHandlers,
   },
 };

js/src/index.js

@@ -0,0 +1,67 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+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,
+  })
+);
+
+export const panelStackHandlers = {};
+
+const Panel = ({ content }) => {
+  return React.createElement("div", { style: { padding: 10 } }, content);
+};
+Panel.propTypes = {
+  content: PropTypes.node,
+};
+
+const PanelStack = ({ panels, ns, size, ...propsRest }) => {
+  const [stack, setStack] = React.useState([
+    {
+      renderPanel: Panel,
+      title: panels[0].title,
+      props: { content: panels[0].content },
+    },
+  ]);
+  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,
+      stack: stack,
+      ...propsRest,
+    })
+  );
+};
+PanelStack.propTypes = {
+  panels: PanelsType,
+  ns: PropTypes.string,
+  size: PropTypes.arrayOf(PropTypes.number),
+  propsRest: PropTypes.object,
+};
+
+export default PanelStack;