f7Messages {shinyMobile}

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 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