Merge pull request #62 from Appsilon/improve-resize-sensor

`ResizeSensor.shinyInput` component added

Author: pawelchabros

NAMESPACE

@@ -67,6 +67,7 @@ export(RadioGroup.shinyInput)
 export(RangeSlider)
 export(RangeSlider.shinyInput)
 export(ResizeSensor)
+export(ResizeSensor.shinyInput)
 export(Select)
 export(Select.shinyInput)
 export(Slider)

R/components.R

@@ -26,23 +26,23 @@ properties <- function(name) {
   }
 }
 
-button <- function(name) {
-  function(inputId, ...) {
+input <- function(name, defaultValue) {
+  function(inputId, ..., value = defaultValue) {
     shiny.react::reactElement(
       module = "@/shiny.blueprint",
       name = name,
-      props = shiny.react::asProps(inputId = inputId, ...),
+      props = shiny.react::asProps(inputId = inputId, ..., value = value),
       deps = blueprintDependency()
     )
   }
 }
 
-input <- function(name, defaultValue) {
-  function(inputId, ..., value = defaultValue) {
+inputWithoutDefault <- function(name) {
+  function(inputId, ...) {
     shiny.react::reactElement(
       module = "@/shiny.blueprint",
       name = name,
-      props = shiny.react::asProps(inputId = inputId, ..., value = value),
+      props = shiny.react::asProps(inputId = inputId, ...),
       deps = blueprintDependency()
     )
   }
@@ -166,15 +166,15 @@ Button <- component("Button")
 
 #' @rdname Button
 #' @export
-Button.shinyInput <- button("Button") # nolint
+Button.shinyInput <- inputWithoutDefault("Button") # nolint
 
 #' @rdname Button
 #' @export
 AnchorButton <- component("AnchorButton")
 
 #' @rdname Button
 #' @export
-AnchorButton.shinyInput <- button("AnchorButton") # nolint
+AnchorButton.shinyInput <- inputWithoutDefault("AnchorButton") # nolint
 
 #' Button group
 #'
@@ -395,6 +395,10 @@ ProgressBar <- component("ProgressBar")
 #' @export
 ResizeSensor <- component("ResizeSensor")
 
+#' @rdname ResizeSensor
+#' @export
+ResizeSensor.shinyInput <- inputWithoutDefault("ResizeSensor") # nolint
+
 #' Spinner
 #'
 #' Documentation: <https://blueprintjs.com/docs/#core/components/spinner>
@@ -444,11 +448,12 @@ Text <- component("Text")
 #' Documentation: <https://blueprintjs.com/docs/#core/components/tree>
 #'
 #' @example inst/examples/Tree.R
-#' @param inputId The `input` slot that will be used to access the value.
-#' @param data A list of nodes data. Params:
-#'   required: `label`.
-#'   optional: `childNodes`, `icon`, `hasCaret`, `isExpanded`, `disabled`, `secondaryLabel`
-#' @param ... Component props and children. See the official Blueprint docs for details.
+#' @inherit template params
+#' @param data A list of nodes parameters:
+#' \itemize{
+#'   \item required: `label`
+#'   \item optional: `childNodes`, `icon`, `hasCaret`, `isExpanded`, `disabled`, `secondaryLabel`
+#' }
 #' @export
 Tree <- component("Tree")
 

inst/examples/ResizeSensor.R

@@ -7,6 +7,10 @@ setInput <- function(inputId, accessor = NULL) {
   ))
 }
 
+printSize <- function(content) {
+  paste0(content$width, "x", content$height)
+}
+
 ui <- function(id) {
   ns <- NS(id)
   tagList(
@@ -25,6 +29,16 @@ ui <- function(id) {
         class = "resizable",
         textOutput(ns("size"))
       )
+    ),
+    ResizeSensor.shinyInput(
+      inputId = ns("resizeSensor"),
+      content = div(
+        textOutput(ns("resizeSensorInput")),
+        style = "
+          border: 1px solid black;
+          width: 100px;
+        "
+      )
     )
   )
 }
@@ -33,7 +47,11 @@ server <- function(id) {
   moduleServer(id, function(input, output, session) {
     output$size <- renderText({
       content <- req(input$resize)
-      paste0(content$width, "x", content$height)
+      printSize(content)
+    })
+    output$resizeSensorInput <- renderText({
+      content <- req(input$resizeSensor)
+      printSize(content)
     })
   })
 }

inst/www/blueprint.min.js

@@ -1,29 +1,31 @@
-import '@blueprintjs/core/lib/css/blueprint.css';
-import '@blueprintjs/popover2/lib/css/blueprint-popover2.css';
-import '@blueprintjs/select/lib/css/blueprint-select.css';
+import "@blueprintjs/core/lib/css/blueprint.css";
+import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
+import "@blueprintjs/select/lib/css/blueprint-select.css";
 
-import * as BlueprintSelect from '@blueprintjs/select';
-import * as Blueprint from '@blueprintjs/core';
+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 ResizeSensor from "./resizeSensor.js";
 
 import './toaster';
 
 window.jsmodule = {
   ...window.jsmodule,
-  '@blueprintjs/core': Blueprint,
-  '@blueprintjs/select': BlueprintSelect,
-  '@/shiny.blueprint': {
+  "@blueprintjs/core": Blueprint,
+  "@blueprintjs/select": BlueprintSelect,
+  "@/shiny.blueprint": {
     ...Inputs,
     Suggest,
     Select,
     MultiSelect,
     MultiSlider,
     Tree,
+    ResizeSensor,
   },
 };

js/src/index.js

@@ -0,0 +1,32 @@
+import React, { useCallback } from "react";
+import PropTypes from "prop-types";
+import { ResizeSensor as BlueprintResizeSensor } from "@blueprintjs/core";
+
+const propTypes = {
+  inputId: PropTypes.string,
+  content: PropTypes.node,
+  propsRest: PropTypes.object,
+};
+
+const ResizeSensor = ({ inputId, content, ...propsRest }) => {
+  content.props.style = {
+    ...content.props.style,
+    overflow: "auto",
+    resize: "both",
+  };
+  const handleResize = useCallback(([{ contentRect }]) => {
+    Shiny.setInputValue(inputId, contentRect);
+  });
+
+  return React.createElement(
+    BlueprintResizeSensor,
+    {
+      onResize: handleResize,
+      ...propsRest,
+    },
+    content
+  );
+};
+
+ResizeSensor.propTypes = propTypes;
+export default ResizeSensor;