mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-20 10:47:18 +03:00
alert component
This commit is contained in:
parent
075ffe8030
commit
d7aeb64f61
@ -25,7 +25,7 @@ export const system = {
|
||||
link: "#2935ff",
|
||||
green: "#28a745",
|
||||
yellow: " #FFC940",
|
||||
red: "#ff0000",
|
||||
red: "#E05435",
|
||||
slate: "#27292e",
|
||||
moonstone: "#807d78",
|
||||
wall: "#cfced3",
|
||||
|
74
components/core/Alert.js
Normal file
74
components/core/Alert.js
Normal file
@ -0,0 +1,74 @@
|
||||
import * as React from "react";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import { error } from "~/common/messages";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const STYLES_ALERT = css`
|
||||
box-sizing: border-box;
|
||||
z-index: ${Constants.zindex.modal};
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
width: calc(100% - ${Constants.sizes.navigation}px);
|
||||
min-height: 48px;
|
||||
background-color: ${Constants.system.red};
|
||||
color: ${Constants.system.white};
|
||||
padding: 12px 48px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: calc(100% - 60px);
|
||||
}
|
||||
`;
|
||||
|
||||
export class Alert extends React.Component {
|
||||
state = {
|
||||
alert: null,
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
window.addEventListener("create-alert", this._handleCreate);
|
||||
window.addEventListener("delete-alert", this._handleDelete);
|
||||
window.addEventListener("click", this._handleDelete);
|
||||
};
|
||||
|
||||
componentWillUnmount = () => {
|
||||
window.removeEventListener("create-alert", this._handleCreate);
|
||||
window.removeEventListener("delete-alert", this._handleDelete);
|
||||
window.removeEventListener("click", this._handleDelete);
|
||||
};
|
||||
|
||||
_handleCreate = (e) => {
|
||||
this.setState({ alert: e.detail.alert });
|
||||
};
|
||||
|
||||
_handleDelete = (e) => {
|
||||
if (this.state.alert) {
|
||||
this.setState({ alert: null });
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
if (!this.state.alert) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
css={STYLES_ALERT}
|
||||
style={
|
||||
this.state.alert.status === "INFO"
|
||||
? { backgroundColor: Constants.system.brand }
|
||||
: null
|
||||
}
|
||||
>
|
||||
{this.state.alert.message
|
||||
? this.state.alert.message
|
||||
: error[this.state.alert.decorator]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@ -5,6 +5,7 @@ import * as SVG from "~/common/svg";
|
||||
import { css } from "@emotion/react";
|
||||
import { GlobalTooltip } from "~/components/system/components/fragments/GlobalTooltip";
|
||||
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
||||
import { Alert } from "~/components/core/Alert";
|
||||
|
||||
const STYLES_SCROLL = css`
|
||||
overflow-y: scroll;
|
||||
@ -197,6 +198,7 @@ export default class ApplicationLayout extends React.Component {
|
||||
|
||||
<div css={STYLES_CONTENT}>
|
||||
<GlobalTooltip elementRef={this._body} allowedTypes={["body"]} />
|
||||
<Alert />
|
||||
<div css={STYLES_HEADER}>{this.props.header}</div>
|
||||
<div
|
||||
css={STYLES_BODY_WEB}
|
||||
|
Loading…
Reference in New Issue
Block a user