Merge pull request #7217 from DeividasBakanas/typing/react-notification-system

Add react-notification-system
2026-08-16 23:10:29 +00:00 · 2016-01-12 00:14:12 +09:00
parent 573977cb11 acce45cb00
commit 1e71995122
2 changed files with 151 additions and 0 deletions
@@ -0,0 +1,62 @@
+/// <reference path="react-notification-system.d.ts" />
+/// <reference path="../react/react.d.ts" />
+
+import React = require('react');
+import NotificationSystem = require('react-notification-system');
+
+
+class MyComponent extends React.Component<any, any> {
+    private notificationSystem: NotificationSystem.System = null;
+
+    private notification: NotificationSystem.Notification = {
+        message: 'Notification message',
+        level: 'success',
+        action: {
+            label: "Button inside this notification",
+            callback: () => {
+                this.notificationSystem.removeNotification(this.notification);
+            }
+        }
+    };
+
+    private addNotification() {
+        this.notification = this.notificationSystem.addNotification(this.notification);
+    }
+
+    componentDidMount() {
+        this.notificationSystem = this.refs['notificationSystem'] as NotificationSystem.System;
+        this.addNotification();
+    }
+
+    render() {
+
+        var style = {
+            NotificationItem: { // Override the notification item 
+                DefaultStyle: { // Applied to every notification, regardless of the notification level 
+                    margin: '10px 5px 2px 1px'
+                },
+
+                success: { // Applied only to the success notification item 
+                    color: 'red'
+                }
+            }
+        };
+
+        var attributes: NotificationSystem.Attributes = {            
+            style: {
+                Containers: {
+                    DefaultStyle: {
+                        margin: '10px 5px 2px 1px'
+                    }
+                },
+                Title: {
+                    success: {
+                        color: 'green'
+                    }
+                }
+            }
+        };               
+
+        return React.createElement(NotificationSystem, { title: "NotificationTitile", style: style, } as NotificationSystem.Attributes);
+    }
+}
@@ -0,0 +1,89 @@
+// Type definitions for React Notification System v0.2.6
+// Project: https://www.npmjs.com/package/react-notification-system
+// Definitions by: Giedrius Grabauskas <https://github.com/GiedriusGrabauskas>, Deividas Bakanas <https://github.com/DeividasBakanas>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+/// <reference path="../react/react.d.ts" />
+
+declare module NotificationSystem {
+
+    import React = __React;
+
+    export interface System extends React.Component<any, any> {
+        addNotification(notification: Notification): Notification;   
+        removeNotification(notification: Notification): void;        
+        removeNotification(uid: string): void;
+    }
+
+    export interface CallBackFunction {
+        (notification: Notification): void;
+    }
+
+    export interface Notification {
+        title?: string;
+        message?: string;
+        level?: string;
+        position?: string;
+        autoDismiss?: number;
+        dismissible?: boolean;
+        action?: ActionObject;
+        onAdd?: CallBackFunction;
+        onRemove?: CallBackFunction;
+        uid?: number | string;
+    }
+
+    export interface ActionObject {
+        label: string;
+        callback?: Function;
+    }
+
+    export interface ContainersStyle {
+        DefaultStyle: React.CSSProperties;
+        tl?: React.CSSProperties;
+        tr?: React.CSSProperties;
+        tc?: React.CSSProperties;
+        bl?: React.CSSProperties;
+        br?: React.CSSProperties;
+        bc?: React.CSSProperties;
+    }
+
+    export interface ItemStyle {
+        DefaultStyle?: React.CSSProperties;
+        success?: React.CSSProperties;
+        error?: React.CSSProperties;
+        warning?: React.CSSProperties;
+        info?: React.CSSProperties;
+    }
+
+    export interface WrapperStyle {
+        DefaultStyle?: React.CSSProperties;
+    }
+
+    export interface Style {
+        Wrapper?: any;
+        Containers?: ContainersStyle;
+        NotificationItem?: ItemStyle;
+        Title?: ItemStyle;
+        MessageWrapper?: WrapperStyle;
+        Dismiss?: ItemStyle;
+        Action?: ItemStyle;
+        ActionWrapper?: WrapperStyle;
+    }
+
+    export interface Attributes {
+        noAnimation?: boolean;
+        ref?: string;
+        style?: Style | boolean;
+    }
+    
+
+    export interface Component {
+        (): React.ReactElement<Attributes>;
+    }
+}
+
+
+declare module 'react-notification-system' {
+    var component: NotificationSystem.Component;
+    export = component;
+}