f7Messages: Framework7 messages container

Description

f7Messages is an empty container targeted by updateF7Messages to include multiple f7Message.

f7Message creates a message item to be inserted in f7Messages with updateF7Messages.

updateF7Messages add messages to an f7Messages container.

Usage

f7Messages(
  id,
  title = NULL,
  autoLayout = TRUE,
  newMessagesFirst = FALSE,
  scrollMessages = TRUE,
  scrollMessagesOnEdge = TRUE
)
f7Message(
  text,
  name,
  type = c("sent", "received"),
  header = NULL,
  footer = NULL,
  avatar = NULL,
  textHeader = NULL,
  textFooter = NULL,
  image = NULL,
  imageSrc = NULL,
  cssClass = NULL
)
updateF7Messages(
  id,
  messages,
  showTyping = FALSE,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

id: Reference to linkf7Messages container.
title: Optional messages title.
autoLayout: Enable Auto Layout to add all required additional classes automatically based on passed conditions.
newMessagesFirst: Enable if you want to use new messages on top, instead of having them on bottom.
scrollMessages: Enable/disable messages auto scrolling when adding new message.
scrollMessagesOnEdge: If enabled then messages auto scrolling will happen only when user is on top/bottom of the messages view.
text: Message text.
name: Sender name.
type: Message type - sent or received.
header: Single message header.
footer: Single message footer.
avatar: Sender avatar URL string.
textHeader: Message text header.
textFooter: Message text footer.
image: Message image HTML string, e.g. <img src="path/to/image">. Can be used instead of imageSrc parameter.
imageSrc: Message image URL string. Can be used instead of image parameter.
cssClass: Additional CSS class to set on message HTML element.
messages: List of f7Messages.
showTyping: Show typing when a new message comes. Default to FALSE. Does not work yet...
session: Shiny session object

Examples

Run this code

if (interactive()) {
 library(shiny)
 library(shinyMobile)
 shinyApp(
  ui = f7Page(
    title = "Messages",
    f7SingleLayout(
      navbar = f7Navbar(
        title = "Messages",
        hairline = FALSE,
        shadow = TRUE
      ),
      toolbar = f7MessageBar(inputId = "mymessagebar", placeholder = "Message"),
      # main content
      f7Messages(id = "mymessages", title = "My message")

    )
  ),
  server = function(input, output, session) {
    observe({
      print(input[["mymessagebar-send"]])
      print(input$mymessages)
    })
    observeEvent(input[["mymessagebar-send"]], {
      updateF7Messages(
        id = "mymessages",
        list(
         f7Message(
          text = input$mymessagebar,
          name = "David",
          type = "sent",
          header = "Message Header",
          footer = "Message Footer",
          textHeader = "Text Header",
          textFooter = "text Footer",
          avatar = "https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
         )
        )
      )
    })

    observe({
      invalidateLater(5000)
      names <- c("Victor", "John")
      name <- sample(names, 1)

      updateF7Messages(
        id = "mymessages",
        list(
         f7Message(
          text = "Some message",
          name = name,
          type = "received",
          avatar = "https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
         )
        )
      )
    })

  }
 )
}

Run the code above in your browser using DataLab

Data engineering and BI courses are free!

Description

Usage

Arguments

Examples