added numericInputIcon()

NAMESPACE

@@ -30,6 +30,7 @@ export(knobInput)
 export(materialSwitch)
 export(multiInput)
 export(noUiSliderInput)
+export(numericInputIcon)
 export(numericRangeInput)
 export(panel)
 export(pickerGroupServer)

R/input-icon.R

@@ -17,7 +17,8 @@
 #' @importFrom htmltools tags validateCssUnit
 #'
 #' @example examples/textInputIcon.R
-textInputIcon <- function(inputId, label, value = "", placeholder = NULL, icon = NULL, size = NULL, width = NULL) {
+textInputIcon <- function(inputId, label, value = "", placeholder = NULL,
+                          icon = NULL, size = NULL, width = NULL) {
   value <- shiny::restoreInput(id = inputId, default = value)
   addons <- validate_addon(icon)
   tags$div(
@@ -30,7 +31,8 @@ textInputIcon <- function(inputId, label, value = "", placeholder = NULL, icon =
       class = "input-group",
       class = validate_size(size),
       addons$left, tags$input(
-        id = inputId, type = "text",
+        id = inputId,
+        type = "text",
         class = "form-control",
         value = value,
         placeholder = placeholder
@@ -39,6 +41,54 @@ textInputIcon <- function(inputId, label, value = "", placeholder = NULL, icon =
   )
 }
 
+
+
+
+#' @title Create a numeric input control with icon(s)
+#'
+#' @description Extend form controls by adding text or icons before,
+#'  after, or on both sides of a classic \code{numericInput}.
+#'
+#' @inheritParams shiny::numericInput
+#' @param icon An \code{icon} or a \code{list}, containing \code{icon}s
+#'  or text, to be displayed on the right or left of the numeric input.
+#' @param size Size of the input, default to \code{NULL}, can
+#'  be \code{"sm"} (small) or \code{"lg"} (large).
+#'
+#' @return A numeric input control that can be added to a UI definition.
+#' @export
+#'
+#' @importFrom shiny restoreInput
+#' @importFrom htmltools tags validateCssUnit
+#'
+#' @example examples/numericInputIcon.R
+numericInputIcon <- function(inputId, label, value,
+                             min = NULL, max = NULL, step = NULL,
+                             icon = NULL, size = NULL, width = NULL) {
+  value <- shiny::restoreInput(id = inputId, default = value)
+  addons <- validate_addon(icon)
+  tags$div(
+    class = "form-group shiny-input-container",
+    if (!is.null(label)) {
+      tags$label(label, `for` = inputId)
+    },
+    style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
+    tags$div(
+      class = "input-group",
+      class = validate_size(size),
+      addons$left, tags$input(
+        id = inputId,
+        type = "number",
+        class = "form-control",
+        value = value,
+        min = min,
+        max = max,
+        step = step
+      ), addons$right
+    )
+  )
+}
+
 validate_size <- function(size) {
   if (is.null(size) || !nchar(size)) {
     return(NULL)

examples/numericInputIcon.R

@@ -0,0 +1,62 @@
+if (interactive()) {
+  library(shiny)
+  library(shinyWidgets)
+
+  ui <- fluidPage(
+    tags$h2("numericInputIcon examples"),
+    fluidRow(
+      column(
+        width = 6,
+        numericInputIcon(
+          inputId = "ex1",
+          label = "With an icon",
+          value = 10,
+          icon = icon("percent")
+        ),
+        verbatimTextOutput("res1"),
+        numericInputIcon(
+          inputId = "ex2",
+          label = "With an icon (right)",
+          value = 90,
+          step = 10,
+          icon = list(NULL, icon("percent"))
+        ),
+        verbatimTextOutput("res2"),
+        numericInputIcon(
+          inputId = "ex3",
+          label = "With text",
+          value = 50,
+          icon = list("km/h")
+        ),
+        verbatimTextOutput("res3"),
+        numericInputIcon(
+          inputId = "ex4",
+          label = "Both side",
+          value = 10000,
+          icon = list(icon("dollar"), ".00")
+        ),
+        verbatimTextOutput("res4"),
+        numericInputIcon(
+          inputId = "ex5",
+          label = "Sizing",
+          value = 10000,
+          icon = list(icon("dollar"), ".00"),
+          size = "lg"
+        ),
+        verbatimTextOutput("res5")
+      )
+    )
+  )
+
+  server <- function(input, output, session) {
+
+    output$res1 <- renderPrint(input$ex1)
+    output$res2 <- renderPrint(input$ex2)
+    output$res3 <- renderPrint(input$ex3)
+    output$res4 <- renderPrint(input$ex4)
+    output$res5 <- renderPrint(input$ex5)
+
+  }
+
+  shinyApp(ui, server)
+}

examples/textInputIcon.R

@@ -12,33 +12,44 @@ if (interactive()) {
           label = "With an icon",
           icon = icon("user-circle-o")
         ),
+        verbatimTextOutput("res1"),
         textInputIcon(
           inputId = "ex2",
           label = "With an icon (right)",
           icon = list(NULL, icon("user-circle-o"))
         ),
+        verbatimTextOutput("res2"),
         textInputIcon(
           inputId = "ex3",
           label = "With text",
           icon = list("https://")
         ),
+        verbatimTextOutput("res3"),
         textInputIcon(
           inputId = "ex4",
           label = "Both side",
           icon = list(icon("envelope"), "@mail.com")
         ),
+        verbatimTextOutput("res4"),
         textInputIcon(
           inputId = "ex5",
           label = "Sizing",
           icon = list(icon("envelope"), "@mail.com"),
           size = "lg"
-        )
+        ),
+        verbatimTextOutput("res5")
       )
     )
   )
 
   server <- function(input, output, session) {
 
+    output$res1 <- renderPrint(input$ex1)
+    output$res2 <- renderPrint(input$ex2)
+    output$res3 <- renderPrint(input$ex3)
+    output$res4 <- renderPrint(input$ex4)
+    output$res5 <- renderPrint(input$ex5)
+
   }
 
   shinyApp(ui, server)