react-hook-notification - npm Package Compare versions

Comparing version 3.2.0 to 3.3.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, amount, position, theme, transition, delay, showProgressBar, showButtonClose, closeOnClick, showIcon, autoClose, pauseOnHover, draggable, }: NotificationProps) => JSX.Element>;
+export declare const Notification: React.MemoExoticComponent<({ type, id, onRemove, title, text, amount, position, theme, transition, delay, showProgressBar, showButtonClose, closeOnClick, showIcon, autoClose, pauseOnHover, draggable, titleMaxLines, textMaxLines, }: NotificationProps) => JSX.Element>;

dist/presentation/components/Notification/index.js

@@ -9,4 +9,4 @@ import React, { memo } from 'react';
 import { Container, IconContainer, TextContainer, Title, Text, ButtonClose, } from './styles';
-const Component = ({ type, id, onRemove, title, text, amount, 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, draggable = NotificationDefaultProps.draggable, }) => {
-    const { buttonColor, themeSelected, withIcon, withProgressBar, setElementRef, isPaused, x, opacity, containerAnimations, clickIsAllowed, onDragEnd, onDragStart, } = useController({
+const Component = ({ type, id, onRemove, title, text, amount, 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, draggable = NotificationDefaultProps.draggable, titleMaxLines = NotificationDefaultProps.titleMaxLines, textMaxLines = NotificationDefaultProps.textMaxLines, }) => {
+    const { buttonColor, themeSelected, withIcon, withProgressBar, setElementRef, isPaused, x, opacity, containerAnimations, clickIsAllowed, onDragEnd, onDragStart, onLineCamp, } = useController({
         autoClose,
@@ -25,2 +25,4 @@ type,
         delay,
+        titleMaxLines,
+        textMaxLines,
     });
@@ -33,6 +35,6 @@ return (React.createElement(Container, Object.assign({ ref: setElementRef, theme: themeSelected, borderColor: showProgressBar ? 'no-border' : themeSelected, key: id, role: "status", onClick: () => clickIsAllowed && onRemove(id), drag: draggable ? 'x' : false, dragSnapToOrigin: true, onDragEnd: onDragEnd, onDragStart: onDragStart, style: { x, opacity } }, containerAnimations),
         React.createElement(TextContainer, { withIcon: withIcon ? 'true' : 'false' },
-            title && React.createElement(Title, null, title),
-            React.createElement(Text, null, text)),
+            title && (React.createElement(Title, { style: Object.assign({}, onLineCamp(titleMaxLines)) }, title)),
+            React.createElement(Text, { style: Object.assign({}, onLineCamp(textMaxLines)) }, text)),
         withProgressBar && (React.createElement(ProgressBar, { delay: delay, theme: theme, type: type, isPaused: isPaused, id: id, onRemove: onRemove, autoClose: autoClose }))));
 };
 export const Notification = memo(Component);

dist/presentation/components/Notification/styles.js

@@ -109,5 +109,7 @@ import { styled } from '@stitches/react';
     marginBottom: '8px',
-    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    boxOrient: 'vertical',
 });
@@ -120,4 +122,4 @@ export const Text = styled('span', {
     display: '-webkit-box',
-    WebkitLineClamp: 2,
     WebkitBoxOrient: 'vertical',
+    boxOrient: 'vertical',
 });
@@ -124,0 +126,0 @@ export const ButtonClose = styled('button', {

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

@@ -0,1 +1,2 @@
+import { CSSProperties } from 'react';
 import { MotionValue, PanInfo } from 'framer-motion';
@@ -17,2 +18,4 @@ import { NotificationPosition, NotificationTheme, NotificationTransition, NotificationType } from '../../types/Notification';
     delay: number;
+    titleMaxLines: number;
+    textMaxLines: number;
     onRemove(id: string): void;
@@ -34,4 +37,5 @@ };
     onDragStart(): void;
+    onLineCamp(value: number): CSSProperties;
 };
 export declare const useController: UseControllerHook;
 export {};

dist/presentation/components/Notification/useController.js

@@ -8,4 +8,5 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 const DELAY = 1000;
-let TIMER;
-export const useController = ({ autoClose, showIcon, theme, type, showProgressBar, pauseOnHover, id, onRemove, amount, transition, position, closeOnClick, delay, }) => {
+const TITLE_SIZE = 16;
+const TEXT_SIZE = 15;
+export const useController = ({ autoClose, showIcon, theme, type, showProgressBar, pauseOnHover, id, onRemove, amount, transition, position, closeOnClick, delay, textMaxLines, titleMaxLines, }) => {
     const [isPaused, toggleIsPaused] = useToggle(false);
@@ -56,5 +57,6 @@ const eventListenerOptions = {
     }, []);
+    const sizeToAdd = TEXT_SIZE * textMaxLines + TITLE_SIZE * titleMaxLines;
     const containerAnimations = removedOnDragEnd
         ? {}
-        : getAnimation(amount)[transition][position];
+        : getAnimation({ amount, sizeToAdd })[transition][position];
     const delayDecrement = useRef(delay / DELAY);
@@ -77,2 +79,6 @@ const timerRef = useRef();
     }, [autoClose, delay, id, isPaused, onRemove, showProgressBar]);
+    const onLineCamp = (value) => ({
+        WebkitLineClamp: value,
+        lineClamp: value,
+    });
     return {
@@ -93,3 +99,4 @@ showProgressBar,
         clickIsAllowed,
+        onLineCamp,
     };
 };

dist/presentation/constants/animations.d.ts

@@ -0,1 +1,5 @@
+declare type TopAndBottomProps = {
+    amount: number;
+    sizeToAdd: number;
+};
 export declare const fade: {
@@ -47,4 +51,4 @@ initial: {
 };
-export declare const slideBottom: (index: number) => Record<string, unknown>;
-export declare const slideTop: (index: number) => Record<string, unknown>;
+export declare const slideBottom: ({ amount, sizeToAdd, }: TopAndBottomProps) => Record<string, unknown>;
+export declare const slideTop: ({ amount, sizeToAdd, }: TopAndBottomProps) => Record<string, unknown>;
 export declare const bounceRight: {
@@ -110,4 +114,4 @@ initial: {
 };
-export declare const bounceBottom: (index: number) => Record<string, unknown>;
-export declare const bounceTop: (index: number) => Record<string, unknown>;
+export declare const bounceBottom: ({ amount, sizeToAdd, }: TopAndBottomProps) => Record<string, unknown>;
+export declare const bounceTop: ({ amount, sizeToAdd, }: TopAndBottomProps) => Record<string, unknown>;
 export declare const flip: {
@@ -163,1 +167,2 @@ initial: {
 };
+export {};

dist/presentation/constants/animations.js

@@ -20,12 +20,12 @@ import { defineAnimationSize } from '../utils/defineAnimationSize';
 };
-export const slideBottom = (index) => ({
-    initial: { bottom: -110 * index },
+export const slideBottom = ({ amount, sizeToAdd, }) => ({
+    initial: { bottom: (-110 - sizeToAdd) * amount },
     animate: { bottom: 0 },
-    exit: { bottom: -110 * index },
+    exit: { bottom: (-110 - sizeToAdd) * amount },
     transition: { type: 'spring', bounce: 0 },
 });
-export const slideTop = (index) => ({
-    initial: { top: -110 * index },
+export const slideTop = ({ amount, sizeToAdd, }) => ({
+    initial: { top: (-110 - sizeToAdd) * amount },
     animate: { top: 0 },
-    exit: { top: -110 * index },
+    exit: { top: (-110 - sizeToAdd) * amount },
     transition: { type: 'spring', bounce: 0 },
@@ -47,12 +47,21 @@ });
 };
-export const bounceBottom = (index) => ({
-    initial: { bottom: -110 * index, transition: bounceTransationOut },
+export const bounceBottom = ({ amount, sizeToAdd, }) => ({
+    initial: {
+        bottom: (-110 - sizeToAdd) * amount,
+        transition: bounceTransationOut,
+    },
     animate: { bottom: 0, transition: bounceTransationIn },
-    exit: { bottom: -110 * index, transition: bounceTransationOut },
+    exit: {
+        bottom: (-110 - sizeToAdd) * amount,
+        transition: bounceTransationOut,
+    },
     transition: { type: 'spring', bounce: 0 },
 });
-export const bounceTop = (index) => ({
-    initial: { top: -110 * index, transition: bounceTransationOut },
+export const bounceTop = ({ amount, sizeToAdd, }) => ({
+    initial: {
+        top: (-110 - sizeToAdd) * amount,
+        transition: bounceTransationOut,
+    },
     animate: { top: 0, transition: bounceTransationIn },
-    exit: { top: -110 * index, transition: bounceTransationOut },
+    exit: { top: (-110 - sizeToAdd) * amount, transition: bounceTransationOut },
     transition: { type: 'spring', bounce: 0 },
@@ -59,0 +68,0 @@ });

dist/presentation/constants/NotificationDefaultProps.d.ts

@@ -15,2 +15,4 @@ import { NotificationPosition, NotificationTheme, NotificationTransition } from '../types/Notification';
     draggable: boolean;
+    titleMaxLines: number;
+    textMaxLines: number;
 };

dist/presentation/constants/NotificationDefaultProps.js

@@ -14,2 +14,4 @@ export const NotificationDefaultProps = {
     draggable: true,
+    titleMaxLines: 1,
+    textMaxLines: 2,
 };

dist/presentation/types/Notification.d.ts

@@ -70,2 +70,10 @@ export declare type NotificationType = 'success' | 'error' | 'info' | 'warning' | 'default';
     draggable?: NotificationDraggable;
+    /**
+     * Maximum number of lines for notification title. (Default: 1)
+     */
+    titleMaxLines?: number;
+    /**
+     * Maximum number of lines for notification text. (Default: 2)
+     */
+    textMaxLines?: number;
     id: string;
@@ -72,0 +80,0 @@ amount: number;

dist/presentation/utils/getAnimation.d.ts

@@ -1,1 +0,6 @@
-export declare const getAnimation: (amount: number) => Record<string, any>;
+declare type GetAnimationProps = {
+    amount: number;
+    sizeToAdd: number;
+};
+export declare const getAnimation: ({ amount, sizeToAdd, }: GetAnimationProps) => Record<string, any>;
+export {};

dist/presentation/utils/getAnimation.js

 import { bounceBottom, bounceLeft, bounceRight, bounceTop, fade, flip, slideBottom, slideLeft, slideRight, slideTop, zoom, } from '../constants/animations';
-export const getAnimation = (amount) => ({
+export const getAnimation = ({ amount, sizeToAdd, }) => ({
     bounce: {
         'top-right': bounceRight,
-        'top-center': bounceTop(amount),
+        'top-center': bounceTop({ amount, sizeToAdd }),
         'top-left': bounceLeft,
         'bottom-right': bounceRight,
-        'bottom-center': bounceBottom(amount),
+        'bottom-center': bounceBottom({ amount, sizeToAdd }),
         'bottom-left': bounceLeft,
@@ -13,6 +13,6 @@ },
         'top-right': slideRight,
-        'top-center': slideTop(amount),
+        'top-center': slideTop({ amount, sizeToAdd }),
         'top-left': slideLeft,
         'bottom-right': slideRight,
-        'bottom-center': slideBottom(amount),
+        'bottom-center': slideBottom({ amount, sizeToAdd }),
         'bottom-left': slideLeft,
@@ -19,0 +19,0 @@ },

package.json

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

README.md

@@ -64,2 +64,4 @@ # React Hook Notification
 | draggable       | boolean                                                                             | no       | true      | Enable or disable drag              |
+| titleMaxLines   | number                                                                              | no       | 1         | Maximum number of lines for title   |
+| textMaxLines    | number                                                                              | no       | 2         | Maximum number of lines for text    |
 
@@ -66,0 +68,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

58328

increased by3.7%

Number of downloads

100

increased by21.95%

Lines of code

1388

increased by3.5%

Number of lines in readme file

72

increased by2.86%

No dependency changes