Framework7 messages container — f7Messages • shinyMobile

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 a 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 f7Messages 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 f7Message.
showTyping: Show typing when a new message comes. Default to FALSE. Does not work yet...
session: Shiny session object

Examples

library(shiny)
library(shinyMobile)

app <- shinyApp(
  ui = f7Page(
    title = "Messages",
    f7SingleLayout(
      navbar = f7Navbar(
        title = "Messages",
        hairline = FALSE
      ),
      toolbar = f7MessageBar(inputId = "mymessagebar", placeholder = "Message"),
      # main content
      f7Messages(id = "mymessages", title = "My message")
    )
  ),
  server = function(input, output, session) {
    # Send a message
    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"
          )
        )
      )
    })

    # Receive a message
    observeEvent(TRUE, {
      updateF7Messages(
        id = "mymessages",
        showTyping = FALSE, # DOES NOT WORK YET WHEN TRUE ...
        list(
          f7Message(
            text = "Some message",
            name = "Victor",
            type = "received",
            avatar = "https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
          )
        )
      )
    })
  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app