You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.4 KiB
49 lines
1.4 KiB
7 years ago
|
import { observer } from "mobx-react";
|
||
8 years ago
|
import * as React from "react";
|
||
7 years ago
|
import { Message, MessageList, TransitionGroup } from "semantic-ui-react";
|
||
7 years ago
|
|
||
7 years ago
|
import { Message as UiMessage, UiStore } from "@app/ui";
|
||
7 years ago
|
|
||
|
class MessageView extends React.Component<{
|
||
|
uiStore: UiStore,
|
||
|
message: UiMessage,
|
||
|
index: number,
|
||
|
}> {
|
||
8 years ago
|
|
||
|
render() {
|
||
7 years ago
|
const { id, header, content, type } = this.props.message;
|
||
|
return (
|
||
|
<Message
|
||
|
header={header}
|
||
|
content={content}
|
||
|
success={type === UiMessage.Type.Success}
|
||
|
info={type === UiMessage.Type.Info}
|
||
|
warning={type === UiMessage.Type.Warning}
|
||
|
error={type === UiMessage.Type.Error}
|
||
|
onDismiss={this.dismiss}
|
||
|
/>
|
||
|
);
|
||
8 years ago
|
}
|
||
|
|
||
7 years ago
|
private dismiss = () => {
|
||
|
const { uiStore, index } = this.props;
|
||
|
uiStore.messages.splice(index, 1);
|
||
8 years ago
|
}
|
||
7 years ago
|
}
|
||
8 years ago
|
|
||
7 years ago
|
@observer
|
||
|
export default class MessagesView extends React.Component<{ uiStore: UiStore }> {
|
||
|
render() {
|
||
|
const messages = this.props.uiStore.messages.map((message, index) => (
|
||
|
<MessageView key={message.id} uiStore={this.props.uiStore} message={message} index={index} />
|
||
|
));
|
||
|
return (
|
||
|
<div className="messages" >
|
||
|
<TransitionGroup animation="scale" duration={200}>
|
||
|
{messages}
|
||
|
</TransitionGroup>
|
||
|
</div>
|
||
|
);
|
||
8 years ago
|
}
|
||
8 years ago
|
}
|