@phoenixreisen/notification v1.0.6
Phoenix Status Notification
JS-/Mithril-Komponente für die Darstellung von Status Notification.
Die Komponente ist Teil des Phoenix Reisen Design-Systems.
Demo
https://phoenixreisen.github.io/notification/
Installation
Mithril wird benötigt.
npm install --save @phoenixreisen/notification
Mehrere Notifications rendern
Nach einem Benutzerereignis (z.B. Speichern oder Löschen) wird ein Notification-Objekt zum Set()
auszugebender Notifications hinzugefügt. Das Set
ist entweder lokal von der aufrufenden View zu deklarieren oder kann quasi global aus dem Modul importiert werden. Anschließend wird es der Notifications
-Komponente als Parameter übergeben.
Notifications
iteriert über die Liste und rendert entsprechend oft die Notification
-Komponente mit den jeweiligen Objektdaten. Danach, nach ca. 5 Sekunden, ruft Notification
die als Parameter übergebene toggle()
-Funktion auf, die dafür sorgt, dass das jeweilige Notification-Objekt aus der Liste gelöscht wird.
// Entweder lokal
const notes = new Set();
// oder global
import {notes} from '@phoenixreisen/notification';
const submit = () => {
Promise.resolve('saved!')
.then(() => {
notes.add({
status: 'success',
text: 'Erfolgreich gespeichert!',
});
});
}
const ExampleView = {
view() {
// entweder JSX
<Notifications list={notes} />;
// oder Hyperscript
m(Notifications, { list: notes });
}
};
Nur eine spezielle Notification rendern
Einfach mit entsprechenden Parametern aufrufen.
const ExampleView = {
view() {
// entweder JSX
showNotification &&
<Notification
status="success"
text="Erfolgreich gespeichert!"
toggle={() => (showNotification = false)}
/>
// oder Hyperscript
showNotification &&
m(Notification, {
status: "success",
text: "Erfolgreich gespeichert!"
toggle: () => (showNotification = false)
});
}
}
Test
npm install
npm test
Deployment
Mit npm publish
wird automatisch auch npm test
aufgerufen.
[npm install] # Abhängigkeiten installieren
npm version [major|minor|patch] # increase version x.x.x => major.minor.patch
npm publish # upload to npm
git push
Github Page
Demo wird mittels Rollup gebaut.
[npm i]
npm run compile:example
Nach dem git push
zu erreichen unter:
https://phoenixreisen.github.io/notification/