react-hook-notification - npm Package Compare versions

Comparing version 1.0.7 to 2.0.0

dist/presentation/components/Notification/index.d.ts

 import React from 'react';
 import { NotificationProps } from '../../types/Notification';
-export declare const Notification: React.MemoExoticComponent<({ type, id, onRemove, title, text, position, theme, transition, delay, showProgressBar, showButtonClose, closeOnClick, showIcon, autoClose, }: NotificationProps) => JSX.Element>;
+export declare const Notification: React.MemoExoticComponent<({ type, id, onRemove, title, text, position, theme, transition, delay, showProgressBar, showButtonClose, closeOnClick, showIcon, autoClose, pauseOnHover, }: NotificationProps) => JSX.Element>;

dist/presentation/components/Notification/index.js

@@ -10,7 +10,4 @@ import React, { memo } from 'react';
 import { Container, IconContainer, TextContainer, Title, Text, ButtonClose, } from './styles';
-const Component = ({ type, id, onRemove, title, text, position = NotificationDefaultProps.position, theme = NotificationDefaultProps.theme, transition = NotificationDefaultProps.transition, delay = NotificationDefaultProps.delay, showProgressBar = NotificationDefaultProps.showProgressBar, showButtonClose = NotificationDefaultProps.showButtonClose, closeOnClick = NotificationDefaultProps.closeOnClick, showIcon = NotificationDefaultProps.showIcon, autoClose = NotificationDefaultProps.autoClose, }) => {
-    const { buttonColor, themeSelected, withIcon, withProgressBar } = useController({
-        id,
-        onRemove,
-        delay,
+const Component = ({ type, id, onRemove, title, text, position = NotificationDefaultProps.position, theme = NotificationDefaultProps.theme, transition = NotificationDefaultProps.transition, delay = NotificationDefaultProps.delay, showProgressBar = NotificationDefaultProps.showProgressBar, showButtonClose = NotificationDefaultProps.showButtonClose, closeOnClick = NotificationDefaultProps.closeOnClick, showIcon = NotificationDefaultProps.showIcon, autoClose = NotificationDefaultProps.autoClose, pauseOnHover = NotificationDefaultProps.pauseOnHover, }) => {
+    const { buttonColor, themeSelected, withIcon, withProgressBar, setElementRef, isPaused, } = useController({
         autoClose,
@@ -21,4 +18,5 @@ type,
         showProgressBar,
+        pauseOnHover,
     });
-    return (React.createElement(Container, Object.assign({ theme: themeSelected, key: id, role: type, onClick: () => closeOnClick && onRemove(id) }, animations[transition][position]),
+    return (React.createElement(Container, Object.assign({ ref: setElementRef, theme: themeSelected, key: id, role: type, onClick: () => closeOnClick && onRemove(id) }, animations[transition][position]),
         withIcon && (React.createElement(IconContainer, { "aria-label": type },
@@ -31,4 +29,4 @@ React.createElement(Icon, { type: type, size: 20, color: colorsIcon[theme][type] }))),
             React.createElement(Text, null, text)),
-        withProgressBar && (React.createElement(ProgressBar, { delay: delay, theme: theme, type: type }))));
+        React.createElement(ProgressBar, { delay: delay, theme: theme, type: type, isPaused: isPaused, id: id, onRemove: onRemove, show: withProgressBar, autoClose: autoClose })));
 };
 export const Notification = memo(Component);

dist/presentation/components/Notification/useController.d.ts

 import { NotificationTheme, NotificationType } from '../../types/Notification';
 import { ContainerTheme } from '../../types/ContainerTheme';
 declare type UseControllerHookParams = {
-    id: string;
-    delay: number;
     autoClose: boolean;
@@ -11,3 +9,3 @@ showProgressBar: boolean;
     showIcon: boolean;
-    onRemove(id: string): void;
+    pauseOnHover: boolean;
 };
@@ -19,4 +17,6 @@ declare type UseControllerHook = (params: UseControllerHookParams) => {
     themeSelected: ContainerTheme;
+    setElementRef(elementRef: HTMLDivElement): void;
+    isPaused: boolean;
 };
 export declare const useController: UseControllerHook;
 export {};

dist/presentation/components/Notification/useController.js

@@ -1,22 +0,19 @@
-import { useEffect, useLayoutEffect, useRef } from 'react';
-const DELAY = 1000;
-export const useController = ({ id, onRemove, delay, autoClose, showIcon, theme, type, showProgressBar, }) => {
-    const delayDecrement = useRef(0);
-    const onRemoveRef = useRef(onRemove);
-    useLayoutEffect(() => {
-        onRemoveRef.current = onRemove;
-        delayDecrement.current = delay / DELAY;
-    });
-    useEffect(() => {
-        if (!autoClose) {
-            return () => null;
-        }
-        const timer = setInterval(() => {
-            delayDecrement.current -= 1;
-            if (delayDecrement.current === 0) {
-                onRemoveRef.current(id);
-            }
-        }, DELAY);
-        return () => clearInterval(timer);
-    }, [autoClose, delay, id]);
+import { useCallback } from 'react';
+import { useToggle } from '../../hooks/useToggle';
+import { useEventListener } from '../../hooks/useEventListener';
+export const useController = ({ autoClose, showIcon, theme, type, showProgressBar, pauseOnHover, }) => {
+    const [isPaused, toggleIsPaused] = useToggle(false);
+    const eventListenerOptions = {
+        disabled: !pauseOnHover || !autoClose,
+    };
+    const elementEnterRef = useEventListener('mouseenter', () => {
+        toggleIsPaused();
+    }, eventListenerOptions);
+    const elementLeaveRef = useEventListener('mouseleave', () => {
+        toggleIsPaused();
+    }, eventListenerOptions);
+    const setElementRef = useCallback((elementRef) => {
+        elementEnterRef.current = elementRef;
+        elementLeaveRef.current = elementRef;
+    }, [elementEnterRef, elementLeaveRef]);
     const withIcon = type === 'default' ? false : showIcon;
@@ -32,3 +29,5 @@ const themeSelected = `${type}-${theme}`;
         buttonColor,
+        setElementRef,
+        isPaused,
     };
 };

dist/presentation/components/ProgressBar/index.d.ts

 /// <reference types="react" />
 import { NotificationTheme, NotificationType } from '../../types/Notification';
 interface ProgressBarProps {
+    id: string;
+    show: boolean;
     delay: number;
     theme: NotificationTheme;
     type: NotificationType;
+    isPaused: boolean;
+    autoClose: boolean;
+    onRemove(id: string): void;
 }
-export declare const ProgressBar: ({ delay, theme, type, }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: ({ id, show, onRemove, delay, theme, type, isPaused, autoClose, }: ProgressBarProps) => JSX.Element;
 export {};

dist/presentation/components/ProgressBar/index.js

@@ -1,15 +0,8 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Container } from './styles';
-export const ProgressBar = ({ delay, theme, type, }) => {
-    const [isMount, setIsMoint] = useState(true);
+export const ProgressBar = ({ id, show, onRemove, delay, theme, type, isPaused, autoClose, }) => {
     const parsedTheme = `${type}-${theme}`;
-    useEffect(() => {
-        setTimeout(() => {
-            setIsMoint(false);
-        }, 100);
-    }, []);
-    return (React.createElement(Container, { theme: parsedTheme, style: {
-            width: `${isMount ? 100 : 0}%`,
-            transition: `width ${delay - 100}ms linear`,
-        }, "aria-label": "Progress bar" }));
+    return (React.createElement(Container, { style: {
+            animationDuration: `${delay}ms`,
+        }, theme: parsedTheme, show: show ? 'true' : 'false', animationState: isPaused ? 'paused' : 'running', onAnimationEnd: () => autoClose && onRemove(id), "aria-label": "Progress bar" }));
 };

dist/presentation/components/ProgressBar/styles.d.ts

 export declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     theme?: "default-colored" | "info-colored" | "warning-colored" | "success-colored" | "error-colored" | "default-light" | "info-light" | "warning-light" | "success-light" | "error-light" | "default-dark" | "info-dark" | "warning-dark" | "success-dark" | "error-dark" | undefined;
+    animationState?: "paused" | "running" | undefined;
+    show?: boolean | "true" | "false" | undefined;
 }, {}, import("@stitches/react/types/css-util").CSS<{}, {}, {}, {}>>;

dist/presentation/components/ProgressBar/styles.js

@@ -1,4 +0,9 @@
-import { styled } from '@stitches/react';
+import { styled, keyframes } from '@stitches/react';
+const widthAnimation = keyframes({
+    '0%': { width: '100%' },
+    '100%': { width: '0%' },
+});
 export const Container = styled('div', {
     height: '4px',
+    width: '0%',
     backgroundColor: '#fff',
@@ -10,2 +15,3 @@ position: 'absolute',
     borderBottomLeftRadius: '5px',
+    animation: `${widthAnimation} linear`,
     variants: {
@@ -59,3 +65,19 @@ theme: {
         },
+        animationState: {
+            paused: {
+                animationPlayState: 'paused',
+            },
+            running: {
+                animationPlayState: 'running',
+            },
+        },
+        show: {
+            true: {
+                visibility: 'visible',
+            },
+            false: {
+                visibility: 'hidden',
+            },
+        },
     },
 });

dist/presentation/constants/NotificationDefaultProps.d.ts

@@ -13,2 +13,3 @@ import { NotificationPosition, NotificationTheme, NotificationTransition } from '../types/Notification';
     autoClose: boolean;
+    pauseOnHover: boolean;
 };

dist/presentation/constants/NotificationDefaultProps.js

@@ -12,2 +12,3 @@ export const NotificationDefaultProps = {
     autoClose: true,
+    pauseOnHover: true,
 };

dist/presentation/types/Notification.d.ts

@@ -11,2 +11,3 @@ export declare type NotificationType = 'success' | 'error' | 'info' | 'warning' | 'default';
 export declare type NotificationAutoClose = boolean;
+export declare type NotificationPauseOnHover = boolean;
 export interface NotificationProps {
@@ -61,4 +62,8 @@ /**
     autoClose?: NotificationAutoClose;
+    /**
+     * Notification puase auto close on hover (Default: true)
+     */
+    pauseOnHover?: NotificationPauseOnHover;
     id: string;
     onRemove(id: string): void;
 }

package.json

 {
-  "version": "1.0.7",
+  "version": "2.0.0",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

README.md

@@ -62,2 +62,3 @@ # React Hook Notification
 | autoClose       | boolean                                                                             | no       | true      | Automatic closing of the notification after the delay ends |
+| pauseOnHover    | boolean                                                                             | no       | true      | Auto close pause on hover                                  |
 
@@ -64,0 +65,0 @@ ## LICENSE

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

64818

increased by5.16%

Number of package files

52

increased by8.33%

Lines of code

1752

increased by3.85%

Number of lines in readme file

69

increased by1.47%

No dependency changes