update f7Sheet (fix issues + testing)

NEWS.md

@@ -54,6 +54,7 @@ the check icon position. Default to left (like `f7CheckboxGroup()`).
 Also, `f7Radio()` inherits from `f7List()` styling parameters such as `inset`, `outline`,`dividers`, `strong` for more styling option.
 - `f7RadioChoice()`: new function to pass inside `choices` in a
 `f7Radio()`. Improved choice with title, subtitle, ...
+- `f7Sheet()` gains new `options` parameter to allow passing more configuration. See https://framework7.io/docs/sheet-modal#sheet-parameters.
 - Fix various issues in documentation.
 
 # shinyMobile 1.0.1

R/f7-inputs.R

@@ -2483,7 +2483,7 @@ updateF7Radio <- function(inputId, label = NULL, choices = NULL,
   options <- NULL
   if (!is.null(choices)) {
     options <- as.character(
-      tags$ul(
+      shiny::tags$ul(
         createOptions(inputId, choices, selected, type = "radio")
       )
     )
@@ -2501,6 +2501,7 @@ updateF7Radio <- function(inputId, label = NULL, choices = NULL,
 }
 
 #' @export
+#' @inheritParams f7CheckboxChoice
 #' @rdname radio
 f7RadioChoice <- f7CheckboxChoice
 

R/f7Sheet.R

@@ -1,6 +1,12 @@
 #' Framework7 sheet
 #'
 #' \code{f7Sheet} creates an f7 sheet modal window.
+#' The sheet modal has to be used in combination with \link{updateF7Sheet}.
+#' If you need another trigger, simply add
+#' \code{`data-sheet` = paste0("#", id)} to the tag of your choice (a button),
+#' where id refers to the sheet unique id as well as the class "sheet-open".
+#' Inversely, if you need a custom element to close a sheet, give it
+#' the "sheet-close" class.
 #'
 #' @param ... Sheet content. If wipeToStep is TRUE, these items will be visible at start.
 #' @param id Sheet unique id.
@@ -16,175 +22,122 @@
 #' when click outside of it.
 #' @param swipeHandler Whether to display a swipe handler. TRUE by default.
 #' Need either swipeToClose or swipeToStep set to TRUE to work.
-#'
-#' @note The sheet modal has to be used in combination with \link{updateF7Sheet}.
-#' Yet, if you need a specific trigger, simply add \code{`data-sheet` = paste0("#", id)},
-#' to the tag of your choice (a button), where id refers to the sheet unique id.
+#' @param options Other parameters.
+#' See \url{https://framework7.io/docs/sheet-modal#sheet-parameters}
 #'
 #' @rdname sheet
 #'
 #' @export
 f7Sheet <- function(..., id, hiddenItems = NULL, orientation = c("top", "bottom"),
                     swipeToClose = FALSE, swipeToStep = FALSE, backdrop = FALSE,
-                    closeByOutsideClick = TRUE, swipeHandler = TRUE) {
-
+                    closeByOutsideClick = TRUE, swipeHandler = TRUE, options = list()) {
   orientation <- match.arg(orientation)
 
   sheetCl <- "sheet-modal"
-  if (orientation == "top") sheetCl <- paste0(sheetCl, " sheet-modal-top")
+  if (orientation == "top" && !(swipeToStep || swipeToClose)) {
+    sheetCl <- paste0(sheetCl, " sheet-modal-top")
+  }
 
   sheetCSS <- "overflow: hidden;"
   sheetCSS <- if (orientation == "bottom") {
-    paste0(sheetCSS, " border-radius: 15px 15px 0 0;")
+    paste(sheetCSS, "border-radius: 15px 15px 0 0;")
   } else {
-    paste0(sheetCSS, "border-radius: 0 0 15px 15px;")
+    paste(sheetCSS, "border-radius: 0 0 15px 15px;")
   }
 
- # props
- sheetProps <- dropNulls(
-    list(
-       class = sheetCl,
-       id = id,
-       style = if (swipeToStep | swipeToClose) "height: auto;",
-       style = sheetCSS,
-       `data-swipe-to-close` = tolower(swipeToClose),
-       `data-swipe-to-step` = tolower(swipeToStep),
-       `data-close-by-outside-click` = tolower(closeByOutsideClick),
-       `data-backdrop` = tolower(backdrop)
+  # props
+  sheetProps <- dropNulls(
+    c(
+      list(
+        swipeToClose = swipeToClose,
+        swipeToStep = swipeToStep,
+        closeByOutsideClick = closeByOutsideClick,
+        backdrop = backdrop
+      ),
+      options
+    )
+  )
+
+  sheetConfig <- shiny::tags$script(
+    type = "application/json",
+    `data-for` = id,
+    jsonlite::toJSON(
+      x = sheetProps,
+      auto_unbox = TRUE,
+      json_verbatim = TRUE
     )
- )
+  )
 
- sheetTag <- do.call(shiny::tags$div, sheetProps)
+  sheetTag <- shiny::tags$div(
+    class = sheetCl,
+    id = id,
+    style = if (swipeToStep || swipeToClose) "height: auto;",
+    style = sheetCSS,
+    sheetConfig
+  )
 
- swiperHandlerCSS <- "height: 16px;
+  swiperHandlerCSS <- "height: 16px;
     position: absolute;
     left: 0;
     width: 100%;
     cursor: pointer;
     z-index: 10;"
- swiperHandlerCSS <- if (orientation == "bottom") {
-   paste0(swiperHandlerCSS, " top: 0;")
- } else {
-   paste0(swiperHandlerCSS, " bottom: 0;")
- }
+  swiperHandlerCSS <- if (orientation == "bottom") {
+    paste(swiperHandlerCSS, "top: 0;")
+  } else {
+    paste(swiperHandlerCSS, "bottom: 0;")
+  }
 
- # inner sheet elements
- shiny::tagAppendChildren(
+  # inner sheet elements
+  shiny::tagAppendChildren(
     sheetTag,
-    if (!(swipeToStep | swipeToClose)) {
-       shiny::tags$div(
-          class = if (orientation == "top") "toolbar toolbar-bottom" else "toolbar",
+    if (!(swipeToStep || swipeToClose)) {
+      shiny::tags$div(
+        class = if (orientation == "top") {
+          "toolbar toolbar-bottom"
+        } else {
+          "toolbar"
+        },
+        shiny::tags$div(
+          class = "toolbar-inner",
+          shiny::tags$div(class = "left"),
           shiny::tags$div(
-             class = "toolbar-inner",
-             shiny::tags$div(class = "left"),
-             shiny::tags$div(
-                class = "right",
-                shiny::a(class = "link sheet-close", href = "#", "Done")
-             )
+            class = "right",
+            shiny::a(class = "link sheet-close", href = "#", "Done")
           )
-       )
+        )
+      )
     },
     shiny::tags$div(
-       class = "sheet-modal-inner",
-       if (swipeToStep | swipeToClose) {
-          if (swipeHandler) {
-             shiny::tags$div(class = "swipe-handler", style = swiperHandlerCSS)
-          }
-       },
-       # item shown
-       shiny::tags$div(
-          class = if (swipeToStep) {
-             "block sheet-modal-swipe-step"
-          } else {
-             "block"
-          },
-          ...
-       ),
-       # hidden items
-       hiddenItems
+      class = "sheet-modal-inner",
+      if (swipeToStep || swipeToClose) {
+        if (swipeHandler) {
+          shiny::tags$div(class = "swipe-handler", style = swiperHandlerCSS)
+        }
+      },
+      # item shown
+      shiny::tags$div(
+        class = if (swipeToStep) {
+          "block sheet-modal-swipe-step"
+        } else {
+          "block"
+        },
+        ...
+      ),
+      # hidden items
+      hiddenItems
     )
- )
+  )
 }
 
-
-
-
 #' Update Framework7 sheet modal
 #'
 #' \code{updateF7Sheet} toggles an \link{f7Sheet} on the client.
 #'
-#' @param id Sheet id.
 #' @param session Shiny session object
 #' @export
 #' @rdname sheet
-#' @examples
-#' # Toggle sheet modal
-#' if (interactive()) {
-#'  library(shiny)
-#'  library(shinyMobile)
-#'  shinyApp(
-#'     ui = f7Page(
-#'        title = "Update f7Sheet",
-#'        f7SingleLayout(
-#'           navbar = f7Navbar(title = "f7Sheet"),
-#'           f7Button(inputId = "go", label = "Go"),
-#'           f7Sheet(
-#'              id = "sheet1",
-#'              label = "More",
-#'              orientation = "bottom",
-#'              swipeToClose = TRUE,
-#'              swipeToStep = TRUE,
-#'              backdrop = TRUE,
-#'              "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-#'              Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales
-#'              scelerisque est, at porta justo cursus ac",
-#'              hiddenItems = tagList(
-#'                 f7Segment(
-#'                    container = "segment",
-#'                    rounded = TRUE,
-#'                    f7Button(color = "blue", label = "My button 1", rounded = TRUE),
-#'                    f7Button(color = "green", label = "My button 2", rounded = TRUE),
-#'                    f7Button(color = "yellow", label = "My button 3", rounded = TRUE)
-#'                 ),
-#'                 f7Flex(
-#'                    f7Gauge(
-#'                       id = "mygauge",
-#'                       type  = "semicircle",
-#'                       value = 10,
-#'                       borderColor = "#2196f3",
-#'                       borderWidth = 10,
-#'                       valueFontSize = 41,
-#'                       valueTextColor = "#2196f3",
-#'                       labelText = "amount of something"
-#'                    )
-#'                 ),
-#'                 f7Slider(
-#'                    inputId = "obs",
-#'                    label = "Number of observations",
-#'                    max = 100,
-#'                    min = 0,
-#'                    value = 10,
-#'                    scale = TRUE
-#'                 ),
-#'                 plotOutput("distPlot")
-#'              )
-#'           )
-#'        )
-#'     ),
-#'     server = function(input, output, session) {
-#'        observe({print(input$sheet1)})
-#'        output$distPlot <- renderPlot({
-#'           hist(rnorm(input$obs))
-#'        })
-#'        observeEvent(input$obs, {
-#'           updateF7Gauge(id = "mygauge", value = input$obs)
-#'        })
-#'        observeEvent(input$go, {
-#'           updateF7Sheet(id = "sheet1")
-#'        })
-#'     }
-#'  )
-#' }
+#' @example inst/examples/sheet/app.R
 updateF7Sheet <- function(id, session = shiny::getDefaultReactiveDomain()) {
-   session$sendInputMessage(id, NULL)
+  session$sendInputMessage(id, NULL)
 }

inst/examples/sheet/app.R

@@ -0,0 +1,67 @@
+library(shiny)
+library(shinyMobile)
+
+app <- shinyApp(
+  ui = f7Page(
+    title = "Update f7Sheet",
+    f7SingleLayout(
+      navbar = f7Navbar(title = "f7Sheet"),
+      f7Block(f7Button(inputId = "toggle", label = "Open sheet")),
+      f7Sheet(
+        id = "sheet",
+        orientation = "bottom",
+        swipeToClose = TRUE,
+        swipeToStep = TRUE,
+        backdrop = TRUE,
+        options = list(push = TRUE, breakpoints = c(0.33, 0.66)),
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales
+        scelerisque est, at porta justo cursus ac",
+        hiddenItems = tagList(
+          f7Segment(
+            container = "segment",
+            rounded = TRUE,
+            f7Button(color = "blue", label = "My button 1", rounded = TRUE),
+            f7Button(color = "green", label = "My button 2", rounded = TRUE),
+            f7Button(color = "yellow", label = "My button 3", rounded = TRUE)
+          ),
+          f7Grid(
+            cols = 1,
+            f7Gauge(
+              id = "mygauge",
+              type = "semicircle",
+              value = 10,
+              borderColor = "#2196f3",
+              borderWidth = 10,
+              valueFontSize = 41,
+              valueTextColor = "#2196f3",
+              labelText = "amount of something"
+            )
+          ),
+          f7Slider(
+            inputId = "obs",
+            label = "Number of observations",
+            max = 100,
+            min = 0,
+            value = 10,
+            scale = TRUE
+          ),
+          plotOutput("distPlot")
+        )
+      )
+    )
+  ),
+  server = function(input, output, session) {
+    output$distPlot <- renderPlot({
+      hist(rnorm(input$obs))
+    })
+    observeEvent(input$obs, {
+      updateF7Gauge(id = "mygauge", value = input$obs)
+    })
+    observeEvent(input$toggle, {
+      updateF7Sheet(id = "sheet")
+    })
+  }
+)
+
+if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app