slate/components/core/Alert.js
2020-10-18 12:57:39 -07:00

176 lines
4.7 KiB
JavaScript

import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import { error } from "~/common/messages";
import { css } from "@emotion/react";
import { LoaderSpinner } from "~/components/system/components/Loaders";
const STYLES_ALERT = `
box-sizing: border-box;
z-index: ${Constants.zindex.alert};
position: fixed;
top: 56px;
width: 100%;
color: ${Constants.system.white};
min-height: 48px;
padding: 12px 48px;
display: flex;
flex-wrap: wrap;
align-items: center;
transition: top 0.25s;
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
padding: 12px 24px 12px 24px;
left: 0px;
right: 0px;
width: 100%;
}
`;
const STYLES_WARNING = css`
${STYLES_ALERT}
background-color: ${Constants.system.red};
@supports ((-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px))) {
-webkit-backdrop-filter: blur(25px);
backdrop-filter: blur(25px);
background-color: rgba(255, 212, 201, 0.75);
color: ${Constants.system.red};
}
`;
const STYLES_INFO = css`
${STYLES_ALERT}
background-color: ${Constants.system.brand};
@supports ((-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px))) {
-webkit-backdrop-filter: blur(25px);
backdrop-filter: blur(25px);
background-color: rgba(212, 233, 250, 0.75);
color: ${Constants.system.brand};
}
`;
const STYLES_MESSAGE = css`
${STYLES_ALERT}
background-color: ${Constants.system.foreground};
color: ${Constants.system.grayBlack};
@supports ((-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px))) {
-webkit-backdrop-filter: blur(25px);
backdrop-filter: blur(25px);
background-color: rgba(244, 244, 244, 0.75);
color: ${Constants.system.grayBlack};
}
`;
const STYLES_TEXT = css`
border-bottom: 1px solid ${Constants.system.white};
max-width: ${Constants.sizes.mobile}px;
width: 100%;
@supports ((-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px))) {
border-bottom: 1px solid ${Constants.system.brand};
}
`;
const STYLES_MESSAGE_BOX = css`
display: flex;
align-items: center;
`;
export class Alert extends React.Component {
state = {
message: null,
status: null,
};
componentDidMount = () => {
window.addEventListener("create-alert", this._handleCreate);
};
componentWillUnmount = () => {
window.removeEventListener("create-alert", this._handleCreate);
};
_handleCreate = (e) => {
if (e.detail.alert) {
if (e.detail.alert.decorator && error[e.detail.alert.decorator]) {
this.setState({
message: error[e.detail.alert.decorator],
status: e.detail.alert.status || null,
});
} else {
this.setState({
message: e.detail.alert.message || "Whoops something went wrong! Please try again.",
status: e.detail.alert.status || null,
});
}
window.setTimeout(this._handleDelete, 5000);
}
};
_handleDelete = (e) => {
if (this.state.message) {
this.setState({ message: null, status: null });
}
};
render() {
if (!this.state.message) {
if (!this.props.fileLoading || !Object.keys(this.props.fileLoading).length) {
if (this.props.noWarning) {
return null;
}
return (
<div css={STYLES_MESSAGE} style={this.props.style}>
<div css={STYLES_MESSAGE_BOX} style={{ fontSize: 14 }}>
Please don't upload sensitive information to Slate yet. Private storage is coming
soon.
</div>
</div>
);
}
let total = Object.values(this.props.fileLoading).filter((upload) => {
return !upload.cancelled;
}).length;
let uploaded =
Object.values(this.props.fileLoading).filter((upload) => {
return upload.loaded === upload.total;
}).length || 0;
return (
<div
css={STYLES_INFO}
style={{ cursor: "pointer", ...this.props.style }}
onClick={() =>
this.props.onAction({
type: "SIDEBAR",
value: "SIDEBAR_ADD_FILE_TO_BUCKET",
})
}
>
<div css={STYLES_MESSAGE_BOX}>
<LoaderSpinner style={{ height: 16, width: 16, marginRight: 16 }} />
<span css={STYLES_TEXT}>
{uploaded} / {total} file
{total === 1 ? "" : "s"} uploading{" "}
</span>
</div>
</div>
);
}
return (
<div
css={this.state.status === "INFO" ? STYLES_INFO : STYLES_WARNING}
style={this.props.style}
>
{this.state.message}
</div>
);
}
}