41 lines
872 B
JavaScript
41 lines
872 B
JavaScript
// @flow
|
|
import { observer, inject } from "mobx-react";
|
|
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import UiStore from "../../stores/UiStore";
|
|
import Toast from "./components/Toast";
|
|
|
|
type Props = {
|
|
ui: UiStore,
|
|
};
|
|
@observer
|
|
class Toasts extends React.Component<Props> {
|
|
render() {
|
|
const { ui } = this.props;
|
|
|
|
return (
|
|
<List>
|
|
{ui.orderedToasts.map((toast) => (
|
|
<Toast
|
|
key={toast.id}
|
|
toast={toast}
|
|
onRequestClose={() => ui.removeToast(toast.id)}
|
|
/>
|
|
))}
|
|
</List>
|
|
);
|
|
}
|
|
}
|
|
|
|
const List = styled.ol`
|
|
position: fixed;
|
|
left: ${(props) => props.theme.hpadding};
|
|
bottom: ${(props) => props.theme.vpadding};
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
z-index: ${(props) => props.theme.depths.toasts};
|
|
`;
|
|
|
|
export default inject("ui")(Toasts);
|