Mikhalev
8 years ago
4 changed files with 85 additions and 12 deletions
@ -1,24 +1,30 @@
@@ -1,24 +1,30 @@
|
||||
import * as React from "react"; |
||||
import { CSSTransitionGroup } from "react-transition-group"; |
||||
import {observer} from "mobx-react"; |
||||
import {UiStore, Message as UiMessage} from "../ui"; |
||||
import {Message} from "semantic-ui-react"; |
||||
|
||||
@observer |
||||
export default class MessagesView extends React.PureComponent<{ uiStore: UiStore }, {}> { |
||||
class MessagesView extends React.PureComponent<{ uiStore: UiStore }, {}> { |
||||
render() { |
||||
return <div> |
||||
{this.props.uiStore.messages.map(this.renderMessage)} |
||||
return <div className="messages"> |
||||
<CSSTransitionGroup transitionName="message" transitionAppear={true} transitionAppearTimeout={500} |
||||
transitionEnterTimeout={500} transitionLeaveTimeout={500}> |
||||
{this.props.uiStore.messages.map(this.renderMessage)} |
||||
</CSSTransitionGroup> |
||||
</div>; |
||||
} |
||||
|
||||
private renderMessage = (message: UiMessage, index: number) => { |
||||
const {header, content, type} = 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(index)}/>; |
||||
const { header, content, type } = message; |
||||
return <Message key={message.id} className="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(index)} />; |
||||
} |
||||
|
||||
private dismiss(index: number) { |
||||
this.props.uiStore.messages.splice(index, 1); |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue