Skip to content
Notification-Komponente, umgesetzt mit Mithril. Außerdem ein Template-Repo für weitere Komponenten.
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tests
.babelrc
.gitignore
.npmignore
README.md
package-lock.json
package.json
test-setup.js

README.md

Phoenix Status Notification

JS-/Mithril-Komponente für die Darstellung von Status Notification.

Die Komponente ist Teil des Phoenix Reisen Design-Systems.

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 von der aufrufenden View zu deklarieren und der Notifications-Komponente als Parameter zu ü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.

const notifications = new Set();
const save = () => Promise.resolve('saved!');

const submit = () => {
    save().then(() => {
        notifications.add({
            status: 'success',
            text: 'Erfolgreich gespeichert!',
        });
    });
}

const ExampleView = {
    view() {
        // entweder ES6+
        <Notifications list={notifications} />;

        // oder Hyperscript
        m(Notifications, { list: notifications });
    }
};

Nur eine spezielle Notification rendern

const ExampleView = {
    view() {

        // entweder ES6+
        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 version [major|minor|patch]     # increase version x.x.x => major.minor.patch
npm publish                         # upload to npm
git push
You can’t perform that action at this time.