import * as classNames from "classnames"; import { observer } from "mobx-react"; import * as React from "react"; import { Message, MessageProps, TransitionGroup } from "semantic-ui-react"; import { AppState, injectState, UiMessage, UiStore } from "@client/state/"; import "@client/styles/MessagesView"; @observer class MessageView extends React.Component<{ uiStore: UiStore, message: UiMessage, className?: string, }> { render() { const { id, ...messageProps } = this.props.message; const className = classNames(messageProps.className, this.props.className); return ( <Message {...messageProps} className={className} onDismiss={this.dismiss} /> ); } private dismiss: MessageProps["onDismiss"] = (event, data) => { const { uiStore, message } = this.props; if (message.onDismiss) { message.onDismiss(event, data); } uiStore.messages.remove(message); } } class MessagesView extends React.Component<{ appState: AppState }> { render() { const { uiStore } = this.props.appState; const messages = uiStore.messages.map((message) => ( <MessageView key={message.id} uiStore={uiStore} message={message} /> )); messages.reverse(); return ( <TransitionGroup as={Message.List} className="messages" animation="scale" duration={200}> {messages} </TransitionGroup> ); } } export default injectState(observer(MessagesView));