Merge pull request #270 from ThomasChln/master

Responsive f7Grid

R/f7Grid.R

@@ -5,11 +5,30 @@
 #' @param ... Row content.
 #' @param cols Columns number. Numeric between 1 and 20.
 #' @param gap Whether to display gap between columns. TRUE by default.
+#' @param responsiveCl Class for responsive behavior. 
+#' The format must be `<SIZE-NCOLS>` such as `<medium-4>`, `<large-3>`.
+#' SIZE must be one of \code{c("xsmall", "small", "medium", "large", "xlarge")}.
+#' NCOLS has to be between 1 and 20.
 #'
 #' @author David Granjon, \email{dgranjon@@ymail.com}
 #' @export
-f7Grid <- function(..., cols, gap = TRUE) {
+f7Grid <- function(..., cols, gap = TRUE, responsiveCl = NULL) {
+
   cl <- sprintf("grid grid-cols-%s", cols)
+
+  if (!is.null(responsiveCl)) {                                                  
+    # Format must be: <SIZE-NCOLS> like, <medium-4>, <large-3>
+    tmp <- strsplit(responsiveCl, "-")[[1]]
+    breakpoint <- tmp[1]
+    ncols <- as.numeric(tmp[2])
+    stopifnot(
+      ncols >= 1 && ncols <= 20,
+      breakpoint %in% c("xsmall", "small", "medium", "large", "xlarge")
+    )
+    cl <- paste(cl, sprintf("%s-grid-cols-%s", breakpoint, ncols))
+  }                                                                             
+
   if (gap) cl <- paste(cl, "grid-gap")
+
   shiny::tags$div(class = cl, ...)
 }

tests/testthat/test-f7Grid.R

@@ -5,4 +5,21 @@ test_that("grid works", {
 
   grid <- f7Grid(cols = 2, gap = FALSE)
   expect_identical(grid$attribs$class, "grid grid-cols-2")
+
+
+  # responsiveCl
+  grid <- f7Grid(cols = 2, responsiveCl = 'xsmall-1')
+  expect_identical(grid$attribs$class, "grid grid-cols-2 xsmall-grid-cols-1 grid-gap")
+
+  grid <- f7Grid(cols = 2, responsiveCl = 'small-2')
+  expect_identical(grid$attribs$class, "grid grid-cols-2 small-grid-cols-2 grid-gap")
+
+  grid <- f7Grid(cols = 2, responsiveCl = 'medium-4')
+  expect_identical(grid$attribs$class, "grid grid-cols-2 medium-grid-cols-4 grid-gap")
+
+  grid <- f7Grid(cols = 2, responsiveCl = 'large-6')
+  expect_identical(grid$attribs$class, "grid grid-cols-2 large-grid-cols-6 grid-gap")
+
+  grid <- f7Grid(cols = 2, responsiveCl = 'xlarge-8')
+  expect_identical(grid$attribs$class, "grid grid-cols-2 xlarge-grid-cols-8 grid-gap")
 })