diff --git a/public/index.html b/public/index.html index 9168eeb..bc69452 100644 --- a/public/index.html +++ b/public/index.html @@ -1,17 +1,19 @@ - - - - - - - - - - React App - + React App + - - -
- - - - \ No newline at end of file + + diff --git a/src/components/notification-view.tsx b/src/components/notification-view.tsx new file mode 100644 index 0000000..3ae7d14 --- /dev/null +++ b/src/components/notification-view.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import styles from "./notifications.module.css"; +import Overlay from "./overlay"; + +type NotificationType = "normal" | "warning" | "danger" | "informative"; + +const getNotificationClass = (type: NotificationType) => { + switch (type) { + default: + case "normal": + return styles.colorNormal; + case "warning": + return styles.colorWarning; + case "danger": + return styles.colorDanger; + case "informative": + return styles.colorInformative; + } +}; + +type NotificationProps = { + type: NotificationType; + onClose?: () => void; +}; +const Notification: React.SFC = ({ + children, + type, + onClose +}) => ( +
+ {onClose && ( +
+ X +
+ )} + {children} +
+); + +const NotificationView: React.FC = props => ( + + + +); + +export default NotificationView; diff --git a/src/components/notifications.module.css b/src/components/notifications.module.css new file mode 100644 index 0000000..af1883b --- /dev/null +++ b/src/components/notifications.module.css @@ -0,0 +1,48 @@ +.notification { + background-color: white; + color: black; + border-radius: 10px 10px 0 0; + min-width: 300px; + padding-top: 20px; + padding-bottom: 20px; + padding-left: 25px; + padding-right: 25px; + + position: absolute; + bottom: 0; + + display: flex; + justify-content: center; +} + +.colorNormal { + background-color: lightgreen; +} + +.colorWarning { + background-color: lightyellow; +} + +.colorDanger { + background-color: lightcoral; +} + +.colorInformative { + background-color: lightblue; +} + +.notificationButton { + color: white; + background-color: rgba(0, 0, 0, 0.75); + border-radius: 50%; + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + position: absolute; + top: 5px; + right: 5px; +} diff --git a/src/components/overlay.module.css b/src/components/overlay.module.css new file mode 100644 index 0000000..50acd35 --- /dev/null +++ b/src/components/overlay.module.css @@ -0,0 +1,13 @@ +.overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + display: flex; + justify-content: center; + align-items: center; + + z-index: 100; +} diff --git a/src/components/overlay.tsx b/src/components/overlay.tsx new file mode 100644 index 0000000..17412eb --- /dev/null +++ b/src/components/overlay.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import styles from "./overlay.module.css"; + +type OverlayProps = { + backgroundColor?: string; + onClick?: () => void; +}; +export const Overlay: React.SFC = ({ + children, + backgroundColor, + ...props +}) => ( +
+ {children} +
+); + +export default Overlay; diff --git a/src/index.tsx b/src/index.tsx index 1cd7ae7..ae98c16 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./components/app"; +import NotificationView from "./components/notification-view"; import * as serviceWorker from "./serviceWorker"; const element = document.getElementById("root"); @@ -10,10 +11,39 @@ ReactDOM.render(, element); // Learn more about service workers: http://bit.ly/CRA-PWA serviceWorker.register({ onSuccess(serviceWorkerRegistration) { - // TODO: Warn about service worker installation and offline use + // Warn about service worker installation and offline use + const notificationsElement = document.getElementById("notifications"); + if (notificationsElement) { + ReactDOM.render( + { + ReactDOM.unmountComponentAtNode(notificationsElement); + }} + > + Content is cached for offline use. + , + document.getElementById("notifications") + ); + } }, onUpdate(serviceWorkerRegistration) { - // TODO: Warn about new content received + // Warn about new content received + const notificationsElement = document.getElementById("notifications"); + if (notificationsElement) { + ReactDOM.render( + { + ReactDOM.unmountComponentAtNode(notificationsElement); + }} + > + New content is available and will be used when all tabs for this page + are closed. + , + document.getElementById("notifications") + ); + } } }); diff --git a/yarn.lock b/yarn.lock index 397f2af..d3df761 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1,4 +1,4 @@ -y# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. # yarn lockfile v1