react-push-notification - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

dist/index.d.ts

 import Notifications from './notifications/Notifications';
 import { Options } from './notifications/Storage';
+/**
+* Add a new notification.
+* Must pass an object with the params to the function.
+*
+ * @param {string} options.title - Title of the push notification.
+ * @param {string} [options.subtitle] - Subtitle of the push notification.
+ * @param {string} [options.message] - Message of the push notification.
+ * @param {('darkblue'|'red'|'light')} [options.theme=undefined] - Theme of the push notification.
+ * @param {number} [options.duration=3000] - duration of the push notification in ms.
+ * @param {string} [options.backgroundTop=undefined] - Background color of the top container of push notification.
+ * @param {string} [options.backgroundBottom=undefined] - Background color of the bottom container of push notification.
+ * @param {string} [options.colorTop=undefined] - Color of the top text of push notification.
+ * @param {string} [options.colorBottom=undefined] - Color of the bottom text of push notification.
+ * @param {(string|JSX.Element)} [options.closeButton="close"] - Color of the bottom text of push notification.
+ *
+*/
 declare const addNotification: (options: Options) => void;
 export { Notifications };
 export default addNotification;

dist/index.js

@@ -9,3 +9,19 @@ "use strict";
 const Storage_1 = __importDefault(require("./notifications/Storage"));
+/**
+* Add a new notification.
+* Must pass an object with the params to the function.
+*
+ * @param {string} options.title - Title of the push notification.
+ * @param {string} [options.subtitle] - Subtitle of the push notification.
+ * @param {string} [options.message] - Message of the push notification.
+ * @param {('darkblue'|'red'|'light')} [options.theme=undefined] - Theme of the push notification.
+ * @param {number} [options.duration=3000] - duration of the push notification in ms.
+ * @param {string} [options.backgroundTop=undefined] - Background color of the top container of push notification.
+ * @param {string} [options.backgroundBottom=undefined] - Background color of the bottom container of push notification.
+ * @param {string} [options.colorTop=undefined] - Color of the top text of push notification.
+ * @param {string} [options.colorBottom=undefined] - Color of the bottom text of push notification.
+ * @param {(string|JSX.Element)} [options.closeButton="close"] - Color of the bottom text of push notification.
+ *
+*/
 const addNotification = Storage_1.default.addNotification;
 exports.default = addNotification;

dist/notifications/Notifications.d.ts

@@ -11,2 +11,12 @@ import React from 'react';
 }
+/**
+ * Notification injector, which renders
+ * the push notifications rendered
+ * by the addNotifcation({}) function.
+ *
+ * @param {string} position - Must pass as prop. Sets the position of the push notification.
+ * position can me 'top-left', 'top-middle', 'top-right', 'bottom-left', 'bottom-middle', 'bottom-right'.
+ * Example <Notifications position='top-middle' />
+ *
+ */
 declare class Notifications extends React.Component<Props> {
@@ -13,0 +23,0 @@ state: State;

dist/notifications/Notifications.js

@@ -10,2 +10,12 @@ "use strict";
 const PushNotification_1 = __importDefault(require("./PushNotification"));
+/**
+ * Notification injector, which renders
+ * the push notifications rendered
+ * by the addNotifcation({}) function.
+ *
+ * @param {string} position - Must pass as prop. Sets the position of the push notification.
+ * position can me 'top-left', 'top-middle', 'top-right', 'bottom-left', 'bottom-middle', 'bottom-right'.
+ * Example <Notifications position='top-middle' />
+ *
+ */
 class Notifications extends react_1.default.Component {
@@ -24,4 +34,4 @@ constructor() {
         const classN = `rpn-notification-holder ${position || 'top-middle'} supertest`;
-        return react_1.default.createElement("div", { className: classN }, this.state.value.map((note) => {
-            return react_1.default.createElement(PushNotification_1.default, { closeNotification: Storage_1.default.popAndPush, id: note.id, theme: note.theme, title: note.title, subtitle: note.subtitle, message: note.message });
+        return react_1.default.createElement("div", { className: classN }, this.state.value.map((note, i) => {
+            return react_1.default.createElement(PushNotification_1.default, { key: i, closeNotification: Storage_1.default.popAndPush, id: note.id, theme: note.theme, title: note.title, subtitle: note.subtitle, closeButton: note.closeButton, message: note.message, styling: note.styling });
         }));
@@ -28,0 +38,0 @@ }

dist/notifications/PushNotification.d.ts

 /// <reference types="react" />
-import { Color } from './Storage';
+import { Color, Styling } from './Storage';
 interface Props {
@@ -9,2 +9,4 @@ title: string;
     theme?: Color;
+    styling?: Styling;
+    closeButton?: JSX.Element | string;
     closeNotification: (id: number) => void;
@@ -11,0 +13,0 @@ }

dist/notifications/PushNotification.js

@@ -8,8 +8,16 @@ "use strict";
 const PushNotification = (props) => {
-    const { title, subtitle, message, theme, id, closeNotification } = props;
+    const { title, subtitle, message, theme, id, closeNotification, styling, closeButton } = props;
+    let topStyling = {};
+    let bottomStyling = {};
+    if (styling) {
+        topStyling.backgroundColor = styling.backgroundTop;
+        topStyling.color = styling.colorTop;
+        bottomStyling.backgroundColor = styling.backgroundBottom;
+        bottomStyling.color = styling.colorBottom;
+    }
     return react_1.default.createElement("div", { className: `rpn-notification-card ${theme}` },
-        react_1.default.createElement("div", { className: `rpn-notification-card-top ${theme}` },
+        react_1.default.createElement("div", { className: `rpn-notification-card-top ${theme}`, style: Object.keys(topStyling).length ? topStyling : undefined },
             react_1.default.createElement("span", null, title),
-            react_1.default.createElement("span", { className: `rpn-notification-card-close ${theme}`, onClick: () => closeNotification(id) }, "close")),
-        react_1.default.createElement("div", { className: `rpn-notification-card-bottom ${theme}` },
+            react_1.default.createElement("span", { className: `rpn-notification-card-close ${theme}`, onClick: () => closeNotification(id) }, closeButton || 'close')),
+        react_1.default.createElement("div", { className: `rpn-notification-card-bottom ${theme}`, style: Object.keys(bottomStyling).length ? bottomStyling : undefined },
             react_1.default.createElement("span", { className: 'subtitle' }, subtitle),
@@ -16,0 +24,0 @@ react_1.default.createElement("span", { className: 'message' }, message)));

dist/notifications/Storage.d.ts

@@ -0,3 +1,8 @@
+/// <reference types="react" />
 export declare type Color = 'light' | 'darkblue' | 'red' | undefined;
-export declare class Notification {
+/**
+* option: {}
+* @param options This is a object with the following properties:
+*/
+export declare type Options = {
     title: string;
@@ -7,6 +12,24 @@ subtitle?: string;
     theme?: Color;
-    id: number;
-    constructor(title: string, subtitle: string | undefined, message: string | undefined, theme: Color);
+    duration?: number;
+    backgroundTop?: string;
+    backgroundBottom?: string;
+    colorTop?: string;
+    colorBottom?: string;
+    closeButton?: JSX.Element | string;
+};
+export declare type Styling = {
+    backgroundTop?: string;
+    backgroundBottom?: string;
+    colorTop?: string;
+    colorBottom?: string;
+};
+export interface PNotification {
+    title: string;
+    subtitle?: string;
+    message?: string;
+    theme?: Color;
+    styling?: Styling;
+    closeButton?: JSX.Element | string;
 }
-export interface Options {
+export declare class Notification {
     title: string;
@@ -16,3 +39,6 @@ subtitle?: string;
     theme?: Color;
-    duration?: number;
+    id: number;
+    styling?: Styling;
+    closeButton?: JSX.Element | string;
+    constructor(op: PNotification);
 }
@@ -19,0 +45,0 @@ declare class Storage {

dist/notifications/Storage.js

@@ -5,8 +5,10 @@ "use strict";
 class Notification {
-    constructor(title, subtitle, message, theme) {
-        this.title = title;
-        this.subtitle = subtitle;
-        this.message = message;
-        this.theme = theme;
+    constructor(op) {
+        this.title = op.title;
+        this.subtitle = op.subtitle;
+        this.message = op.message;
+        this.theme = op.theme;
         this.id = Math.random();
+        this.styling = op.styling;
+        this.closeButton = op.closeButton;
     }
@@ -38,4 +40,10 @@ }
         this.addNotification = (options) => {
-            const { title, subtitle, message, theme, duration } = options;
-            const newNotification = new Notification(title, subtitle, message, theme);
+            const { title, subtitle, message, theme, duration, backgroundBottom, backgroundTop, colorBottom, colorTop, closeButton } = options;
+            const styling = {
+                backgroundTop,
+                backgroundBottom,
+                colorTop,
+                colorBottom
+            };
+            const newNotification = new Notification({ title, subtitle, message, theme, styling, closeButton });
             this.Storage.push(newNotification);
@@ -42,0 +50,0 @@ this.setTimer(newNotification.id, duration || defaultDuration);

package.json

 {
   "name": "react-push-notification",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "React push notifications",
@@ -30,4 +30,8 @@ "main": "dist/index.js",
     "notifications",
-    "messages"
+    "messages",
+    "react",
+    "react push notification",
+    "react push notifications",
+    "react notifications"
   ]
 }

src/index.ts

 import Notifications from './notifications/Notifications';
 import Storage, { Options } from './notifications/Storage';
 
+/**
+* Add a new notification. 
+* Must pass an object with the params to the function.
+*
+ * @param {string} options.title - Title of the push notification.
+ * @param {string} [options.subtitle] - Subtitle of the push notification.
+ * @param {string} [options.message] - Message of the push notification.
+ * @param {('darkblue'|'red'|'light')} [options.theme=undefined] - Theme of the push notification.
+ * @param {number} [options.duration=3000] - duration of the push notification in ms.
+ * @param {string} [options.backgroundTop=undefined] - Background color of the top container of push notification.
+ * @param {string} [options.backgroundBottom=undefined] - Background color of the bottom container of push notification.
+ * @param {string} [options.colorTop=undefined] - Color of the top text of push notification.
+ * @param {string} [options.colorBottom=undefined] - Color of the bottom text of push notification.
+ * @param {(string|JSX.Element)} [options.closeButton="close"] - Color of the bottom text of push notification.
+ *
+*/
 const addNotification: (options: Options) => void = Storage.addNotification;
 export { Notifications };
 export default addNotification;

src/notifications/Storage.ts

@@ -6,3 +6,27 @@
 
-export class Notification {
+/**
+* option: {}
+* @param options This is a object with the following properties:
+*/
+export type Options = {
+    title: string,
+    subtitle?: string,
+    message?: string,
+    theme?: Color,
+    duration?: number,
+    backgroundTop?: string,
+    backgroundBottom?: string,
+    colorTop?: string,
+    colorBottom?: string,
+    closeButton?: JSX.Element | string
+}
+
+export type Styling = {
+    backgroundTop?: string,
+    backgroundBottom?: string,
+    colorTop?: string,
+    colorBottom?: string
+}
+
+export interface PNotification {
     title: string;
@@ -12,13 +36,7 @@ subtitle?: string;
     theme?: Color;
-    id: number;
-    constructor(title: string, subtitle: string | undefined, message: string | undefined, theme: Color) {
-        this.title = title;
-        this.subtitle = subtitle;
-        this.message = message;
-        this.theme = theme;
-        this.id = Math.random();
-    }
+    styling?: Styling;
+    closeButton?: JSX.Element | string;
 }
 
-export interface Options {
+export class Notification {
     title: string;
@@ -28,6 +46,16 @@ subtitle?: string;
     theme?: Color;
-    duration?: number;
+    id: number;
+    styling?: Styling;
+    closeButton?: JSX.Element | string;
+    constructor(op: PNotification) {
+        this.title = op.title;
+        this.subtitle = op.subtitle;
+        this.message = op.message;
+        this.theme = op.theme;
+        this.id = Math.random();
+        this.styling = op.styling;
+        this.closeButton = op.closeButton;
+    }
 }
 
-
 class Storage {
@@ -59,4 +87,10 @@ Storage: Array<Notification> = [];
     addNotification = (options: Options): void => {
-        const { title, subtitle, message, theme, duration } = options;
-        const newNotification: Notification = new Notification(title, subtitle, message, theme);
+        const { title, subtitle, message, theme, duration, backgroundBottom, backgroundTop, colorBottom, colorTop, closeButton } = options;
+        const styling: Styling = {
+            backgroundTop,
+            backgroundBottom,
+            colorTop,
+            colorBottom
+        };
+        const newNotification: Notification = new Notification({ title, subtitle, message, theme, styling, closeButton });
         this.Storage.push(newNotification);
@@ -63,0 +97,0 @@ this.setTimer(newNotification.id, duration || defaultDuration);

tsconfig.json

@@ -9,2 +9,3 @@ {
         "noImplicitAny": true,
+        "removeComments": false,
         "outDir": "dist/",
@@ -11,0 +12,0 @@ "rootDir": "src",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28287

increased by36.17%

Lines of code

720

increased by31.63%

No dependency changes