slate/components/core/Alert.js

196 lines
5.2 KiB
JavaScript
Raw Normal View History

2020-09-11 06:57:17 +03:00
import * as React from "react";
import * as Constants from "~/common/constants";
2020-12-09 07:22:17 +03:00
import * as SVG from "~/common/svg";
import * as Actions from "~/common/actions";
2020-09-11 06:57:17 +03:00
import { error } from "~/common/messages";
2020-11-30 08:24:22 +03:00
import { css } from "@emotion/react";
import { LoaderSpinner } from "~/components/system/components/Loaders";
2020-09-11 06:57:17 +03:00
const STYLES_ALERT = `
2020-09-11 06:57:17 +03:00
box-sizing: border-box;
z-index: ${Constants.zindex.alert};
2020-09-11 06:57:17 +03:00
position: fixed;
top: 56px;
width: 100%;
2020-09-11 06:57:17 +03:00
color: ${Constants.system.white};
min-height: 40px;
2020-11-28 02:02:16 +03:00
padding: 12px 56px;
2020-09-11 06:57:17 +03:00
display: flex;
flex-wrap: wrap;
align-items: center;
2020-10-01 03:41:53 +03:00
transition: top 0.25s;
2020-09-25 09:31:56 +03:00
@media (max-width: ${Constants.sizes.mobile}px) {
2020-09-29 07:39:05 +03:00
width: 100%;
padding: 12px 24px 12px 24px;
2020-09-29 07:39:05 +03:00
left: 0px;
right: 0px;
2020-10-01 03:41:53 +03:00
width: 100%;
2020-09-25 09:31:56 +03:00
}
2020-09-11 06:57:17 +03:00
`;
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}
2020-09-25 09:31:56 +03:00
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};
}
`;
2020-09-25 09:31:56 +03:00
const STYLES_MESSAGE = css`
${STYLES_ALERT}
2020-12-18 00:49:39 +03:00
background-color: ${Constants.system.gray};
2020-09-27 07:43:25 +03:00
color: ${Constants.system.grayBlack};
2020-09-25 09:31:56 +03:00
@supports ((-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px))) {
2020-09-25 09:31:56 +03:00
-webkit-backdrop-filter: blur(25px);
backdrop-filter: blur(25px);
2020-12-18 00:49:39 +03:00
background-color: rgba(224, 224, 224, 0.75);
2020-09-25 09:31:56 +03:00
}
`;
const STYLES_TEXT = css`
max-width: ${Constants.sizes.mobile}px;
width: 100%;
`;
const STYLES_MESSAGE_BOX = css`
display: flex;
align-items: center;
`;
2020-09-11 06:57:17 +03:00
export class Alert extends React.Component {
state = {
message: null,
status: null,
2020-09-11 06:57:17 +03:00
};
componentDidMount = () => {
window.addEventListener("create-alert", this._handleCreate);
2020-09-12 01:25:33 +03:00
};
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);
2020-09-12 01:25:33 +03:00
}
2020-09-11 06:57:17 +03:00
};
_handleDelete = (e) => {
if (this.state.message) {
this.setState({ message: null, status: null });
2020-09-11 06:57:17 +03:00
}
};
2020-12-09 07:22:17 +03:00
_handleDismissPrivacyAlert = (e) => {
Actions.updateStatus({ status: { hidePrivacyAlert: true } });
2021-05-06 03:08:14 +03:00
this.props.onAction({
type: "UDPATE_VIEWER",
viewer: {
data: {
...this.props.viewer.data,
status: { ...this.props.viewer.data.status, hidePrivacyAlert: true },
},
},
});
2020-12-09 07:22:17 +03:00
};
2020-09-11 06:57:17 +03:00
render() {
2021-06-01 02:41:00 +03:00
//NOTE(martina): alert
if (this.state.message) {
return (
<div
css={this.state.status === "INFO" ? STYLES_INFO : STYLES_WARNING}
style={this.props.style}
>
{this.state.message}
</div>
);
}
//NOTE(martina): uploading message
if (this.props.fileLoading && Object.keys(this.props.fileLoading).length) {
2020-10-02 07:24:10 +03:00
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;
2020-11-08 05:32:17 +03:00
return (
<div
css={STYLES_INFO}
2020-10-01 03:41:53 +03:00
style={{ cursor: "pointer", ...this.props.style }}
onClick={() =>
this.props.onAction({
type: "SIDEBAR",
value: "SIDEBAR_ADD_FILE_TO_BUCKET",
})
}
>
<div css={STYLES_MESSAGE_BOX}>
2020-10-23 21:38:30 +03:00
<div style={{ height: 16, width: 16, marginRight: 16 }}>
<LoaderSpinner style={{ height: 16, width: 16 }} />
</div>
<span css={STYLES_TEXT}>
{uploaded} / {total} file
{total === 1 ? "" : "s"} uploading{" "}
</span>
</div>
</div>
);
2020-09-11 06:57:17 +03:00
}
2021-06-01 02:41:00 +03:00
//NOTE(martina): don't upload sensitive info alert
if (this.props.viewer && !this.props.noWarning) {
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.
<span
style={{ position: "absolute", right: 24, padding: 4, cursor: "pointer" }}
onClick={this._handleDismissPrivacyAlert}
>
<SVG.Dismiss height="20px" />
</span>
</div>
</div>
);
}
return null;
2020-09-11 06:57:17 +03:00
}
}