Merge branch 'f7-v8.3.2' of github.com:RinteRface/shinyMobile into f7…

…-v8.3.2

.gitignore

@@ -12,3 +12,4 @@ docs
 inst/examples/chat_widget
 inst/tests/**
 node_modules
+_.new.png

NEWS.md

@@ -58,7 +58,7 @@ Also, `f7Radio()` inherits from `f7List()` styling parameters such as `inset`, `
 - `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.
-- `f7Picker()` has new `...` parameter to pass custom options.
+- `f7Picker()` has new `...` parameter to pass custom options. Also `f7Picker()` now can have NULL as `value`, allowing you to display a placeholder.
 - `f7DatePicker()` has new `...` parameter to pass custom options. `f7DatePicker()` now also supports usage of the `timePicker`, and returns a posixct object when this is enabled. See https://framework7.io/docs/calendar#examples.
 - Added `tapHoldPreventClicks`, `touchClicksDistanceThreshold`, `mdTouchRipple` to `f7Page()` touch options.
 - `showF7Preloader()` has new `type` parameter and a new modal dialog support (if `type` is passed). New `id` parameter that has to be set when `type` is not NULL.

R/f7-inputs.R

@@ -187,11 +187,14 @@ f7Picker <- function(inputId, label, placeholder = NULL, value = choices[1], cho
                      rotateEffect = TRUE, openIn = "auto", scrollToInput = FALSE,
                      closeByOutsideClick = TRUE, toolbar = TRUE, toolbarCloseText = "Done",
                      sheetSwipeToClose = FALSE, ...) {
-  # For JS
-  if (is.null(value)) stop("value cannot be NULL.")
-  if (!is.null(value) && length(value) == 1) {
-    # needed by JS (array)
+
+  if (length(value) > 1) stop("value must be a single element")
+
+  # JS needs array
+  if (!is.null(value)) {
     value <- list(value)
+  } else {
+    value <- list()
   }
 
   # TO DO: create helper function for sheet, picker, ...
@@ -212,13 +215,19 @@ f7Picker <- function(inputId, label, placeholder = NULL, value = choices[1], cho
     )
   )
 
-  buildPickerInput(inputId, label, config, "picker-input")
+  buildPickerInput(
+    inputId,
+    label,
+    config,
+    "picker-input",
+    placeholder
+  )
 }
 
 #' Build input tag for picker elements
 #'
 #' @keywords internal
-buildPickerInput <- function(id, label, config, class) {
+buildPickerInput <- function(id, label, config, class, placeholder = NULL) {
   inputTag <- shiny::tags$li(
     shiny::tags$div(
       class = "item-content item-input",
@@ -229,7 +238,8 @@ buildPickerInput <- function(id, label, config, class) {
           shiny::tags$input(
             id = id,
             class = class,
-            type = "text"
+            type = "text",
+            placeholder = placeholder
           ),
           buildConfig(id, config)
         )
@@ -387,11 +397,17 @@ f7ColorPicker <- function(inputId, label, value = "#ff0000", placeholder = NULL,
                           sliderValue = TRUE, sliderValueEditable = TRUE,
                           sliderLabel = TRUE, hexLabel = TRUE,
                           hexValueEditable = TRUE, groupedModules = TRUE, ...) {
-  # if the value is provided as a rgb, hsl, hsb, rgba or hsla
-  if (is.numeric(value) & length(value) > 1) value <- jsonlite::toJSON(value)
+
+
+  if (!is.null(value) && length(value) == 1) {
+    # needed by JS (array)
+    value <- list(hex = value)
+  } else {
+    stop("value cannot be NULL and must be a single color")
+  }
 
   config <- dropNulls(list(
-    value = list(hex = value),
+    value = value,
     modules = modules,
     palettes = palettes,
     sliderValue = sliderValue,
@@ -403,31 +419,12 @@ f7ColorPicker <- function(inputId, label, value = "#ff0000", placeholder = NULL,
     ...
   ))
 
-  modules <- jsonlite::toJSON(modules)
-  palettes <- jsonlite::toJSON(palettes)
-  # We define a global variable that is
-  # reused in the pickerInputBinding.js
-  pickerProps <- shiny::tags$script(
-    paste0(
-      "var colorPickerModules = ", modules, ";
-       var colorPickerPalettes = ", palettes, ';
-       var colorPickerValue = "', value, '";
-       var colorPickerSliderValue = ', tolower(sliderValue), ";
-       var colorPickerSliderValueEditable = ", tolower(sliderValueEditable), ";
-       var colorPickerSliderLabel = ", tolower(sliderLabel), ";
-       var colorPickerHexLabel = ", tolower(hexLabel), ";
-       var colorPickerHexValueEditable = ", tolower(hexValueEditable), ";
-       var colorPickerGroupedModules = ", tolower(groupedModules), ";
-      "
-    )
-  )
-
-  # TO DO: placeholder?
   buildPickerInput(
     inputId,
     label,
     config,
-    "color-picker-input"
+    "color-picker-input",
+    placeholder
   )
 }
 
@@ -729,7 +726,7 @@ f7Select <- function(inputId, label, choices, selected = NULL, width = NULL) {
     shiny::tags$select(
       class = "input-select",
       id = inputId,
-      placeholer = "Please choose...",
+      placeholder = "Please choose...",
       options
     ),
     label = label,

R/f7-validate-inputs.R

@@ -8,50 +8,14 @@
 #' @param error Error text.
 #' @param session Shiny session object.
 #'
-#' @note Only works for \link{f7Text}, \link{f7Password}, \link{f7TextArea} and \link{f7Select}.
+#' @note Only works for \link{f7Text}, \link{f7Password} and \link{f7TextArea}.
 #' See more at \url{https://framework7.io/docs/inputs.html}.
 #'
-#' @export
+#' @example inst/examples/validateinput/app.R
+#'
 #' @rdname validation
-#' @examples
-#' if (interactive()) {
-#'   library(shiny)
-#'   library(shinyMobile)
 #'
-#'   shinyApp(
-#'     ui = f7Page(
-#'       title = "Validate inputs",
-#'       f7SingleLayout(
-#'         navbar = f7Navbar(title = "validateF7Input"),
-#'         f7Text(
-#'           inputId = "caption",
-#'           label = "Caption",
-#'           value = "Data Summary"
-#'         ),
-#'         verbatimTextOutput("value"),
-#'         hr(),
-#'         f7Text(
-#'           inputId = "caption2",
-#'           label = "Enter a number",
-#'           value = 1
-#'         )
-#'       )
-#'     ),
-#'     server = function(input, output, session) {
-#'       observe({
-#'         validateF7Input(inputId = "caption", info = "Whatever")
-#'         validateF7Input(
-#'           inputId = "caption2",
-#'           pattern = "[0-9]*",
-#'           error = "Only numbers please!"
-#'         )
-#'       })
-#'       output$value <- renderPrint({
-#'         input$caption
-#'       })
-#'     }
-#'   )
-#' }
+#' @export
 validateF7Input <- function(inputId, info = NULL, pattern = NULL, error = NULL,
                             session = shiny::getDefaultReactiveDomain()) {
   message <- dropNulls(

inst/examples/validateinput/app.R

@@ -0,0 +1,50 @@
+library(shiny)
+library(shinyMobile)
+
+app <- shinyApp(
+  ui = f7Page(
+    title = "Validate inputs",
+    f7SingleLayout(
+      navbar = f7Navbar(title = "validateF7Input"),
+      f7Text(
+        inputId = "caption",
+        label = "Caption",
+        value = "Data Summary"
+      ),
+      verbatimTextOutput("value"),
+      hr(),
+      f7Text(
+        inputId = "caption2",
+        label = "Enter a number",
+        value = 1
+      ),
+      hr(),
+      f7Password(
+        inputId = "password",
+        label = "Password"
+      )
+    )
+  ),
+  server = function(input, output, session) {
+
+    observe({
+      validateF7Input(inputId = "caption", info = "Whatever")
+      validateF7Input(
+        inputId = "caption2",
+        pattern = "[0-9]*",
+        error = "Only numbers please!"
+      )
+      validateF7Input(
+        inputId = "password",
+        pattern = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,}$",
+        error = "Password must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
+      )
+    })
+
+    output$value <- renderPrint({
+      input$caption
+    })
+  }
+)
+
+if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app

tests/testthat/_snaps/mac-4.3/f7ColorPicker/colorpicker-app-001.json

@@ -0,0 +1,36 @@
+{
+  "input": {
+    "mycolorpicker": {
+      "hex": "#ff0000",
+      "alpha": 1,
+      "hue": 0,
+      "rgb": [
+        255,
+        0,
+        0
+      ],
+      "hsl": [
+        0,
+        1,
+        0.5
+      ],
+      "hsb": [
+        0,
+        1,
+        1
+      ],
+      "rgba": [
+        255,
+        0,
+        0,
+        1
+      ],
+      "hsla": [
+        0,
+        1,
+        0.5,
+        1
+      ]
+    }
+  }
+}