sass-notification 1.0.0

package/dist/samples/js/components/Content.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function Content(): JSX.Element;
+export default Content;

package/dist/samples/js/components/Header.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import 'react-github-button/assets/style.css';
+export default function Header(): JSX.Element;

package/dist/samples/js/components/examples/AnimationExample.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function AnimationWrapper(): JSX.Element;

package/dist/samples/js/components/examples/ContainerExample.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function ContainerExample(): JSX.Element;

package/dist/samples/js/components/examples/CustomContentExample.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function CustomContentExample(): JSX.Element;

package/dist/samples/js/components/examples/InsertExample.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function InsertExample(): JSX.Element;

package/dist/samples/js/components/examples/TypeExample.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function TypeExample(): JSX.Element;

package/dist/samples/js/helpers/code.d.ts

@@ -0,0 +1,2 @@
+export declare const install = "npm install react-notifications-component";
+export declare const usage = "import React from \"react\";\nimport ReactNotification from \"react-notifications-component\";\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.addNotification = this.addNotification.bind(this);\n    this.notificationDOMRef = React.createRef();\n  }\n\n  addNotification() {\n    this.notificationDOMRef.current.addNotification({\n      title: \"Awesomeness\",\n      message: \"Awesome Notifications!\",\n      type: \"success\",\n      insert: \"top\",\n      container: \"top-right\",\n      animationIn: [\"animate__animated\", \"animate__fadeIn\"],\n      animationOut: [\"animate__animated\", \"animate__fadeOut\"],\n      dismiss: { duration: 2000 }\n    });\n  }\n\n  render() {\n    return (\n      <div className=\"app-content\">\n        <ReactNotification ref={this.notificationDOMRef} />\n        <button onClick={this.addNotification} className=\"btn btn-primary\">\n          Add Awesome Notification\n        </button>\n      </div>\n    );\n  }\n}";

package/dist/samples/js/helpers/notification.d.ts

@@ -0,0 +1,46 @@
+declare const _default: {
+    title: string;
+    message: string;
+    type: string;
+    container: string;
+    insert: string;
+    animationIn: string[];
+    animationOut: string[];
+    slidingEnter: {
+        duration: number;
+        timingFunction: string;
+        delay: number;
+    };
+    slidingExit: {
+        duration: number;
+        timingFunction: string;
+        delay: number;
+    };
+    touchRevert: {
+        duration: number;
+        timingFunction: string;
+        delay: number;
+    };
+    touchSlidingExit: {
+        swipe: {
+            duration: number;
+            timingFunction: string;
+            delay: number;
+        };
+        fade: {
+            duration: number;
+            timingFunction: string;
+            delay: number;
+        };
+    };
+    dismiss: {
+        duration: number;
+        onScreen: boolean;
+        pauseOnHover: boolean;
+        waitForAnimation: boolean;
+        showIcon: boolean;
+        click: boolean;
+        touch: boolean;
+    };
+};
+export default _default;

package/dist/samples/js/helpers/randomize.d.ts

@@ -0,0 +1,4 @@
+export declare function getContainer(): string;
+export declare function getType(): string;
+export declare function getTitle(type: string): "Success" | "Error" | "Warning";
+export declare function getMessage(type: string): string;

package/dist/samples/js/index.d.ts

@@ -0,0 +1 @@
+import 'styles/stylesheet.scss';

package/dist/scss/_containers.scss

@@ -0,0 +1,100 @@
+.rnc__notification-container--top-center,
+.rnc__notification-container--top-left,
+.rnc__notification-container--top-right,
+.rnc__notification-container--bottom-center,
+.rnc__notification-container--bottom-left,
+.rnc__notification-container--bottom-right,
+.rnc__notification-container--center,
+.rnc__notification-container--top-full,
+.rnc__notification-container--bottom-full {
+  min-width: 325px;
+  position: absolute;
+  pointer-events: all;
+}
+
+.rnc__notification-container--center,
+.rnc__notification-container--top-center,
+.rnc__notification-container--bottom-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  left: calc(50% - 175px);
+}
+
+.rnc__notification-container--center,
+.rnc__notification-container--top-center,
+.rnc__notification-container--bottom-center {
+  max-width: 350px;
+}
+
+.rnc__notification-container--center {
+  top: 20px;
+  height: 100%;
+  pointer-events: none;
+}
+
+.rnc__notification-container--top-full,
+.rnc__notification-container--bottom-full {
+  width: 100%;
+  min-width: 100%;
+}
+
+.rnc__notification-container--bottom-full {
+  bottom: 0;
+}
+
+.rnc__util--flex-center {
+  min-width: 325px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  pointer-events: all;
+}
+
+.rnc__notification-container--top-center {
+  top: 20px;
+}
+.rnc__notification-container--bottom-center {
+  bottom: 20px;
+}
+
+.rnc__notification-container--top-left {
+  left: 20px;
+  top: 20px;
+}
+
+.rnc__notification-container--top-right {
+  right: 20px;
+  top: 20px;
+}
+
+.rnc__notification-container--bottom-left {
+  left: 20px;
+  bottom: 20px;
+}
+
+.rnc__notification-container--bottom-right {
+  bottom: 20px;
+  right: 20px;
+}
+
+.rnc__notification-container--mobile-top,
+.rnc__notification-container--mobile-bottom {
+  pointer-events: all;
+  position: absolute;
+}
+
+.rnc__notification-container--mobile-top {
+  right: 20px;
+  left: 20px;
+  top: 20px;
+}
+
+.rnc__notification-container--mobile-bottom {
+  right: 20px;
+  left: 20px;
+  bottom: 20px;
+  margin-bottom: -15px;
+}

package/dist/scss/_types.scss

@@ -0,0 +1,91 @@
+@import "_variables.scss";
+
+.rnc__notification-item--default {
+  background-color: $default;
+  border-left: 8px solid $default_dark;
+
+  .rnc__notification-timer {
+    background-color: $default_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $default_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $default;
+  }
+}
+
+.rnc__notification-item--success {
+  background-color: $success;
+  border-left: 8px solid $success_dark;
+
+  .rnc__notification-timer {
+    background-color: $success_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $success_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $success;
+  }
+}
+
+.rnc__notification-item--danger {
+  background-color: $danger;
+  border-left: 8px solid $danger_dark;
+
+  .rnc__notification-timer {
+    background-color: $danger_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $danger_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $danger;
+  }
+}
+
+.rnc__notification-item--info {
+  background-color: $info;
+  border-left: 8px solid $info_dark;
+
+  .rnc__notification-timer {
+    background-color: $info_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $info_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $info;
+  }
+}
+
+.rnc__notification-item--warning {
+  background-color: $warning;
+  border-left: 8px solid $warning_dark;
+
+  .rnc__notification-timer {
+    background-color: $warning_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $warning_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $warning;
+  }
+}
+
+.rnc__notification-item--awesome {
+  background-color: $awesome;
+  border-left: 8px solid $awesome_dark;
+
+  .rnc__notification-timer {
+    background-color: $awesome_timer;
+  }
+  .rnc__notification-timer-filler {
+    background-color: $awesome_timer_filler;
+  }
+  .rnc__notification-close-mark {
+    background-color: $awesome;
+  }
+}

package/dist/scss/_variables.scss

@@ -0,0 +1,35 @@
+$default: #007bff !default;
+$default_dark: #0562c7 !default;
+
+$success: #28a745 !default;
+$success_dark: #1f8838 !default;
+
+$danger: #dc3545 !default;
+$danger_dark: #bd1120 !default;
+
+$info: #17a2b8 !default;
+$info_dark: #138b9e !default;
+
+$warning: #eab000 !default;
+$warning_dark: #ce9c09 !default;
+
+$awesome: #685dc3 !default;
+$awesome_dark: #4c3fb1 !default;
+
+$default_timer: #007bff !default;
+$default_timer_filler: #fff !default;
+
+$success_timer: #28a745 !default;
+$success_timer_filler: #fff !default;
+
+$danger_timer: #dc3545 !default;
+$danger_timer_filler: #fff !default;
+
+$info_timer: #17a2b8 !default;
+$info_timer_filler: #fff !default;
+
+$warning_timer: #eab000 !default;
+$warning_timer_filler: #fff !default;
+
+$awesome_timer: #685dc3 !default;
+$awesome_timer_filler: #fff !default;

package/dist/scss/notification.scss

@@ -0,0 +1,110 @@
+@import "./_containers.scss";
+@import "./_types.scss";
+
+@keyframes timer {
+  0% { width: 100%; }
+  100% { width: 0%; }
+}
+
+.rnc__base {
+  position: fixed;
+  z-index: 9000;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}
+
+.rnc__notification-item {
+  display: flex;
+  position: relative;
+  border-radius: 3px;
+  margin-bottom: 15px;
+  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+}
+
+.rnc__notification-container--top-full .rnc__notification-item,
+.rnc__notification-container--bottom-full .rnc__notification-item {
+  margin-bottom: 0;
+  border-radius: 0;
+}
+
+.rnc__notification-container--top-full .rnc__notification,
+.rnc__notification-container--bottom-full .rnc__notification {
+  width: 100% !important;
+}
+
+.rnc__notification-timer {
+  width: 100%;
+  height: 3px;
+  margin-top: 10px;
+  border-radius: 5px;
+}
+.rnc__notification-timer-filler {
+  height: 3px;
+  border-radius: 5px;
+}
+.rnc__notification-title {
+  color: #fff;
+  font-weight: 700;
+  font-size: 14px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.rnc__notification-message {
+  color: #fff;
+  max-width: calc(100% - 15px);
+  font-size: 14px;
+  line-height: 150%;
+  word-wrap: break-word;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.rnc__notification-content {
+  padding: 8px 15px;
+  display: inline-block;
+  width: 100%;
+}
+.rnc__notification-close-mark {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+
+  &::after {
+    content: '\D7';
+    position: absolute;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 12px;
+    left: 50%;
+    top: 50%;
+  }
+}
+
+.rnc__notification-container--mobile-top .rnc__notification-item,
+.rnc__notification-container--mobile-bottom .rnc__notification-item,
+.rnc__notification-container--mobile-top .notification,
+.rnc__notification-container--mobile-bottom .notification {
+  max-width: 100%;
+  width: 100%;
+}
+
+.rnc__notification-container--top-right .notification,
+.rnc__notification-container--bottom-right .notification {
+  margin-left: auto;
+}
+
+.rnc__notification-container--top-left .notification,
+.rnc__notification-container--bottom-left .notification {
+  margin-right: auto;
+}
+
+.rnc__notification-container--mobile-top .notification,
+.rnc__notification-container--mobile-bottom .notification {
+  margin-left: auto;
+  margin-right: auto;
+}

package/dist/src/components/Container.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { iNotificationCustomType, iNotification } from '../../src/typings';
+import "src/scss/notification.scss";
+export { Container, iContainerProps, iContainerState };
+interface iContainerProps {
+    isMobile?: boolean;
+    breakpoint?: number;
+    types?: iNotificationCustomType[];
+    defaultNotificationWidth?: number;
+    className?: string;
+}
+interface iContainerState {
+    isMobile: boolean;
+    breakpoint: number;
+    notifications: iNotification[];
+    windowWidth: number;
+}
+declare class Container extends React.Component<iContainerProps, iContainerState> {
+    constructor(props: iContainerProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleResize: () => void;
+    add: (notification: iNotification) => string;
+    remove: (id: string) => void;
+    removeAllNotifications: () => void;
+    toggleRemoval: (id: string, callback: () => void) => void;
+    renderNotifications(notifications: iNotification[], isMobile: boolean): JSX.Element[];
+    renderMobileNotifications(props: any): JSX.Element;
+    renderScreenNotifications(props: any): JSX.Element;
+    render(): JSX.Element;
+}

package/dist/src/components/Notification.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { iNotificationProps, iNotificationState } from '../../src/typings';
+export { Notification };
+declare class Notification extends React.Component<iNotificationProps, iNotificationState> {
+    constructor(props: iNotificationProps);
+    private readonly rootElementRef;
+    private timer;
+    componentWillUnmount(): void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: iNotificationProps): void;
+    removeNotification(removalFlag: string): void;
+    onClick: () => void;
+    onTouchStart: (event: React.TouchEvent<HTMLDivElement>) => void;
+    onTouchMove: (event: React.TouchEvent) => void;
+    onTouchEnd: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    renderTimer(): JSX.Element;
+    renderCustomContent(): JSX.Element;
+    renderNotification(): JSX.Element;
+    render(): JSX.Element;
+}

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+import { iContainerProps, iContainerState, Container } from '../src/components/Container';
+import Store from '../src/store';
+import { iNotification, NotificationTitleMessage, NotificationContent, iTransition, iTouchTransition, iNotificationDismiss, iNotificationCustomType, iNotificationProps, iNotificationState, iNotificationParentStyle, iStore, iNotificationStoreParams, NOTIFICATION_CONTAINER, NOTIFICATION_TYPE, NOTIFICATION_INSERTION, NOTIFICATION_REMOVAL_SOURCE } from '../src/typings';
+export { Container as ReactNotifications, Store, iContainerProps, iContainerState, iNotification, NotificationTitleMessage, NotificationContent, iTransition, iTouchTransition, iNotificationDismiss, iNotificationCustomType, iNotificationProps, iNotificationState, iNotificationParentStyle, iStore, iNotificationStoreParams, NOTIFICATION_CONTAINER, NOTIFICATION_TYPE, NOTIFICATION_INSERTION, NOTIFICATION_REMOVAL_SOURCE };

package/dist/src/store/index.d.ts

@@ -0,0 +1,16 @@
+import { iNotification, iNotificationStoreParams, iStore } from '../../src/typings';
+declare class Store implements iStore {
+    constructor();
+    removeNotification: (id: string) => void;
+    removeAllNotifications: () => void;
+    private types;
+    private add;
+    private defaultNotificationWidth;
+    private counter;
+    private incrementCounter;
+    addNotification(notification: iNotification): string;
+    getCounter: () => number;
+    register(parameters: iNotificationStoreParams): void;
+}
+declare const _default: Store;
+export default _default;

package/dist/src/typings.d.ts

@@ -0,0 +1,90 @@
+/// <reference types="react" />
+export { iNotification, NotificationTitleMessage, NotificationContent, iTransition, iTouchTransition, iNotificationDismiss, iNotificationCustomType, iNotificationProps, iNotificationState, iNotificationParentStyle, iStore, iNotificationStoreParams, NOTIFICATION_CONTAINER, NOTIFICATION_INSERTION, NOTIFICATION_TYPE, NOTIFICATION_REMOVAL_SOURCE, };
+declare type NOTIFICATION_CONTAINER = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center' | 'center' | 'top-full' | 'bottom-full';
+declare type NOTIFICATION_INSERTION = 'top' | 'bottom';
+declare type NOTIFICATION_TYPE = 'success' | 'danger' | 'info' | 'default' | 'warning';
+declare type NOTIFICATION_REMOVAL_SOURCE = 'timeout' | 'click' | 'touch' | 'manual';
+interface iNotification {
+    id?: string;
+    onRemoval?: (id: string, removalFlag: string) => void;
+    title?: NotificationTitleMessage;
+    message?: NotificationTitleMessage;
+    content?: NotificationContent;
+    type?: NOTIFICATION_TYPE;
+    container: NOTIFICATION_CONTAINER;
+    insert?: NOTIFICATION_INSERTION;
+    dismiss?: iNotificationDismiss;
+    animationIn?: string[];
+    animationOut?: string[];
+    slidingEnter?: iTransition;
+    slidingExit?: iTransition;
+    touchRevert?: iTransition;
+    touchSlidingExit?: {
+        fade: iTransition;
+        swipe: iTransition;
+    };
+    userDefinedTypes?: iNotificationCustomType[];
+    width?: number;
+    hasBeenRemoved?: boolean;
+}
+declare type NotificationTitleMessage = string | React.ReactNode | React.FunctionComponent;
+declare type NotificationContent = React.ComponentClass<any, any> | React.FunctionComponent<any> | React.ReactElement;
+interface iTransition {
+    duration: number;
+    timingFunction: string;
+    delay: number;
+}
+interface iTouchTransition {
+    swipe: iTransition;
+    fade: iTransition;
+}
+interface iNotificationDismiss {
+    duration: number;
+    onScreen?: boolean;
+    pauseOnHover?: boolean;
+    waitForAnimation?: boolean;
+    click?: boolean;
+    touch?: boolean;
+    showIcon?: boolean;
+}
+interface iNotificationCustomType {
+    htmlClasses: string[];
+    name: string;
+}
+interface iNotificationProps {
+    id: string;
+    notification: iNotification;
+    defaultNotificationWidth: number;
+    notificationsCount: number;
+    isMobile: boolean;
+    hasBeenRemoved: boolean;
+    toggleRemoval: (id: string, callback: () => void) => void;
+}
+interface iNotificationState {
+    parentStyle?: iNotificationParentStyle;
+    htmlClassList?: string[];
+    animationPlayState?: string;
+    touchEnabled?: boolean;
+    onTransitionEnd?: (event: React.TransitionEvent<HTMLDivElement>) => void;
+    onAnimationEnd?: (event: React.AnimationEvent<HTMLDivElement>) => void;
+    startX?: number;
+    currentX?: number;
+}
+interface iNotificationParentStyle {
+    height?: string;
+    overflow?: string;
+    width?: string;
+    transition?: string;
+}
+interface iStore {
+    addNotification(notification: iNotification): string;
+    removeNotification(id: string): void;
+    register(param: iNotificationStoreParams): void;
+}
+interface iNotificationStoreParams {
+    addNotification: (notification: iNotification) => string;
+    removeNotification: (id: string) => void;
+    removeAllNotifications: () => void;
+    types: iNotificationCustomType[];
+    defaultNotificationWidth: number;
+}

package/dist/src/utils/constants.d.ts

@@ -0,0 +1,37 @@
+export declare const DEFAULT_CONTAINER_VALUES: {
+    isMobile: boolean;
+    breakpoint: number;
+    defaultNotificationWidth: number;
+};
+export declare const NOTIFICATION_BASE_CLASS = "rnc__notification-item";
+export declare const ERROR: {
+    ANIMATION_IN: string;
+    ANIMATION_OUT: string;
+    DISMISS_REQUIRED: string;
+    DISMISS_NUMBER: string;
+    DISMISS_POSITIVE: string;
+    DISMISS_CLICK_BOOL: string;
+    DISMISS_TOUCH_BOOL: string;
+    DISMISS_WAIT: string;
+    DISMISS_PAUSE_BOOL: string;
+    DISMISS_ONSCREEN_BOOL: string;
+    DISMISS_ICON: string;
+    TITLE_STRING: string;
+    TITLE_ELEMENT: string;
+    MESSAGE_REQUIRED: string;
+    MESSAGE_STRING: string;
+    MESSAGE_ELEMENT: string;
+    TYPE_REQUIRED: string;
+    TYPE_STRING: string;
+    TYPE_NOT_EXISTENT: string;
+    CONTAINER_REQUIRED: string;
+    CONTAINER_STRING: string;
+    CONTENT_INVALID: string;
+    WIDTH_NUMBER: string;
+    INSERT_STRING: string;
+    TRANSITION_DURATION_NUMBER: string;
+    TRANSITION_TIMING_FUNCTION: string;
+    TRANSITION_DELAY_NUMBER: string;
+    TYPE_NOT_FOUND: string;
+    REMOVAL_FUNC: string;
+};

package/dist/src/utils/enums.d.ts

@@ -0,0 +1,29 @@
+export { NOTIFICATION_CONTAINER, NOTIFICATION_INSERTION, NOTIFICATION_TYPE, NOTIFICATION_REMOVAL_SOURCE };
+declare enum NOTIFICATION_CONTAINER {
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right",
+    BOTTOM_CENTER = "bottom-center",
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right",
+    TOP_CENTER = "top-center",
+    CENTER = "center",
+    TOP_FULL = "top-full",
+    BOTTOM_FULL = "bottom-full"
+}
+declare enum NOTIFICATION_INSERTION {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+declare enum NOTIFICATION_TYPE {
+    SUCCESS = "success",
+    DANGER = "danger",
+    INFO = "info",
+    DEFAULT = "default",
+    WARNING = "warning"
+}
+declare enum NOTIFICATION_REMOVAL_SOURCE {
+    TIMEOUT = "timeout",
+    CLICK = "click",
+    TOUCH = "touch",
+    MANUAL = "manual"
+}