Disable notifications (#1421)
* Remove notifications * remove dead component
This commit is contained in:
parent
692ceece65
commit
cca15b0640
@ -1,33 +0,0 @@
|
|||||||
.Toast__container {
|
|
||||||
position: fixed;
|
|
||||||
bottom: calc(var(--space-factor) * 2);
|
|
||||||
right: calc(var(--space-factor) * 2);
|
|
||||||
left: calc(var(--space-factor) * 2);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toast {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toast__content {
|
|
||||||
padding-right: calc(var(--space-factor) * 9);
|
|
||||||
max-width: calc(var(--space-factor) * 50);
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toast__close {
|
|
||||||
position: absolute;
|
|
||||||
width: calc(var(--space-factor) * 5);
|
|
||||||
height: calc(var(--space-factor) * 5);
|
|
||||||
top: calc(var(--space-factor) * -1);
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Toast__close svg {
|
|
||||||
height: calc(var(--space-factor) * 3);
|
|
||||||
}
|
|
@ -1,97 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { render } from "react-dom";
|
|
||||||
import Stack from "./Stack";
|
|
||||||
import { Island } from "./Island";
|
|
||||||
import "./Toast.css";
|
|
||||||
import { close } from "./icons";
|
|
||||||
|
|
||||||
const TOAST_TIMEOUT = 7000;
|
|
||||||
|
|
||||||
function ToastRenderer(props: {
|
|
||||||
toasts: Map<number, React.ReactNode>;
|
|
||||||
onCloseRequest: (id: number) => void;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<Stack.Col gap={2} align="center">
|
|
||||||
{[...props.toasts.entries()].map(([id, toast]) => (
|
|
||||||
<Island key={id} padding={3}>
|
|
||||||
<div className="Toast">
|
|
||||||
<div className="Toast__content">{toast}</div>
|
|
||||||
<button
|
|
||||||
className="Toast__close"
|
|
||||||
onClick={() => props.onCloseRequest(id)}
|
|
||||||
>
|
|
||||||
{close}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</Island>
|
|
||||||
))}
|
|
||||||
</Stack.Col>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let toastsRootNode: HTMLDivElement;
|
|
||||||
function getToastsRootNode() {
|
|
||||||
return toastsRootNode || (toastsRootNode = initToastsRootNode());
|
|
||||||
}
|
|
||||||
|
|
||||||
function initToastsRootNode() {
|
|
||||||
const div = window.document.createElement("div");
|
|
||||||
document.body.appendChild(div);
|
|
||||||
div.className = "Toast__container";
|
|
||||||
return div;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderToasts(
|
|
||||||
toasts: Map<number, React.ReactNode>,
|
|
||||||
onCloseRequest: (id: number) => void,
|
|
||||||
) {
|
|
||||||
render(
|
|
||||||
<ToastRenderer toasts={toasts} onCloseRequest={onCloseRequest} />,
|
|
||||||
getToastsRootNode(),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let incrementalId = 0;
|
|
||||||
function getToastId() {
|
|
||||||
return incrementalId++;
|
|
||||||
}
|
|
||||||
|
|
||||||
class ToastManager {
|
|
||||||
private toasts = new Map<number, React.ReactNode>();
|
|
||||||
private timers = new Map<number, number>();
|
|
||||||
|
|
||||||
public push(message: React.ReactNode, shiftAfterMs: number) {
|
|
||||||
const id = getToastId();
|
|
||||||
this.toasts.set(id, message);
|
|
||||||
if (isFinite(shiftAfterMs)) {
|
|
||||||
const handle = window.setTimeout(() => this.pop(id), shiftAfterMs);
|
|
||||||
this.timers.set(id, handle);
|
|
||||||
}
|
|
||||||
this.render();
|
|
||||||
}
|
|
||||||
|
|
||||||
private pop = (id: number) => {
|
|
||||||
const handle = this.timers.get(id);
|
|
||||||
if (handle) {
|
|
||||||
window.clearTimeout(handle);
|
|
||||||
this.timers.delete(id);
|
|
||||||
}
|
|
||||||
this.toasts.delete(id);
|
|
||||||
this.render();
|
|
||||||
};
|
|
||||||
|
|
||||||
private render() {
|
|
||||||
renderToasts(this.toasts, this.pop);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let toastManagerInstance: ToastManager;
|
|
||||||
function getToastManager(): ToastManager {
|
|
||||||
return toastManagerInstance ?? (toastManagerInstance = new ToastManager());
|
|
||||||
}
|
|
||||||
|
|
||||||
export function push(message: React.ReactNode, manualClose = false) {
|
|
||||||
const toastManager = getToastManager();
|
|
||||||
toastManager.push(message, manualClose ? Infinity : TOAST_TIMEOUT);
|
|
||||||
}
|
|
@ -1,8 +1,6 @@
|
|||||||
// This optional code is used to register a service worker.
|
// This optional code is used to register a service worker.
|
||||||
// register() is not called by default.
|
// register() is not called by default.
|
||||||
|
|
||||||
import { push } from "./components/Toast";
|
|
||||||
|
|
||||||
// This lets the app load faster on subsequent visits in production, and gives
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
// it offline capabilities. However, it also means that developers (and users)
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
// will only see deployed updates on subsequent visits to a page, after all the
|
// will only see deployed updates on subsequent visits to a page, after all the
|
||||||
@ -76,10 +74,11 @@ function registerValidSW(swUrl: string, config?: Config) {
|
|||||||
// At this point, the updated precached content has been fetched,
|
// At this point, the updated precached content has been fetched,
|
||||||
// but the previous service worker will still serve the older
|
// but the previous service worker will still serve the older
|
||||||
// content until all client tabs are closed.
|
// content until all client tabs are closed.
|
||||||
push(
|
|
||||||
"New content is available and will be used when all " +
|
// console.log(
|
||||||
"tabs for this page are closed.",
|
// "New content is available and will be used when all " +
|
||||||
);
|
// "tabs for this page are closed.",
|
||||||
|
// );
|
||||||
|
|
||||||
// Execute callback
|
// Execute callback
|
||||||
if (config && config.onUpdate) {
|
if (config && config.onUpdate) {
|
||||||
@ -89,7 +88,8 @@ function registerValidSW(swUrl: string, config?: Config) {
|
|||||||
// At this point, everything has been precached.
|
// At this point, everything has been precached.
|
||||||
// It's the perfect time to display a
|
// It's the perfect time to display a
|
||||||
// "Content is cached for offline use." message.
|
// "Content is cached for offline use." message.
|
||||||
push("Content is cached for offline use.");
|
|
||||||
|
// console.log("Content is cached for offline use.");
|
||||||
|
|
||||||
// Execute callback
|
// Execute callback
|
||||||
if (config && config.onSuccess) {
|
if (config && config.onSuccess) {
|
||||||
@ -129,7 +129,9 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
push("No internet connection found. App is running in offline mode.");
|
// console.log(
|
||||||
|
// "No internet connection found. App is running in offline mode.",
|
||||||
|
// );
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user