MessageListManagerthat takes care of all of the above along with some more nifty features for fine-grained control over message rendering.
mitter-web-starterand use a message list from
MessageListManagerwe need to be able to tell the manager how to render individual messages. To do so, we'll start with creating a message component:
truesince we want to use the same producer for all messages.
NOTE The above is code adapted from the
mitter-web-starterpackage which you can use as a starting point to test out SCL.
MessageListManagercomponent. An example is as shown below:
renderMessagesfunction. The various props passed to the component are:
messagesThis is a list of messages that are to be rendered. This can be a reference to the entire message list if required, or only a subset that is available. The
MessageListManageruses a virtualized list that will create DOM elements for only the messages that are visible.
defaultViewThis is the view producer used when there is no other view available. Do note that we don't directly use the view producer, but instead use
.produceViewfunction on it. This is because
defaultViewdoes not perform any predicate checking and expects only rendering to be performed.
producersare a list of producers used to render messages. To render a particular message all producers are run (in insertion order) till one of their predicates returns
true. If no such producer is found, then the
onEndCallbackis a function called when new messages are to be fetched. We will shortly look into how to use this callback.
mitter-web-starter. In terms of functionality we haven't really added anything else. Let's now add a
PaginationManagerto handle various events where the messages would be populated.
PaginationManageris a construct available in the
@mitter-io/coremodule which makes it easy to consume paginated APIs (like
setChannelsmethod (which in turn is called by
PaginationManager(this is required because pagination managers maintain state regarding which page they are on and hence should be persisted across the component lifecycle):
this.fetchPreviousPageis called when the user scrolls to the top. To do so, pass on the method as a prop down to the
isLoadingis true, the message list will display the component returned by
loaderin the top area where the new messages would be appended.