From 438cdc8341998fe06ab584a9eff6f1f66be001e0 Mon Sep 17 00:00:00 2001 From: Viktor Riabkov Date: Thu, 7 Mar 2024 19:34:13 +0800 Subject: [PATCH 1/7] Add Notification.displayName for Notification component --- src/shared/ui/NotificationCenter/ui/Notification.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/shared/ui/NotificationCenter/ui/Notification.tsx b/src/shared/ui/NotificationCenter/ui/Notification.tsx index dd8db0531..56cc7bc17 100644 --- a/src/shared/ui/NotificationCenter/ui/Notification.tsx +++ b/src/shared/ui/NotificationCenter/ui/Notification.tsx @@ -36,3 +36,5 @@ export const Notification = forwardRef( } }, ); + +Notification.displayName = 'Notification'; From db79bd64ca483a5d702e2fec7554f7e4eb6c05e1 Mon Sep 17 00:00:00 2001 From: Viktor Riabkov Date: Fri, 8 Mar 2024 15:10:38 +0800 Subject: [PATCH 2/7] Added component name for Notifications --- src/shared/ui/NotificationCenter/ui/ErrorNotification.tsx | 2 ++ src/shared/ui/NotificationCenter/ui/SuccessNotification.tsx | 2 ++ src/shared/ui/NotificationCenter/ui/WarningNotification.tsx | 2 ++ 3 files changed, 6 insertions(+) diff --git a/src/shared/ui/NotificationCenter/ui/ErrorNotification.tsx b/src/shared/ui/NotificationCenter/ui/ErrorNotification.tsx index 1e6df85dc..6630206e3 100644 --- a/src/shared/ui/NotificationCenter/ui/ErrorNotification.tsx +++ b/src/shared/ui/NotificationCenter/ui/ErrorNotification.tsx @@ -31,3 +31,5 @@ export const ErrorNotification = forwardRef((props: Props, ref) => { ); }); + +ErrorNotification.displayName = 'ErrorNotification'; diff --git a/src/shared/ui/NotificationCenter/ui/SuccessNotification.tsx b/src/shared/ui/NotificationCenter/ui/SuccessNotification.tsx index b8ea22974..ac3292390 100644 --- a/src/shared/ui/NotificationCenter/ui/SuccessNotification.tsx +++ b/src/shared/ui/NotificationCenter/ui/SuccessNotification.tsx @@ -30,3 +30,5 @@ export const SuccessNotification = forwardRef((props: Props, ref) => { ); }); + +SuccessNotification.displayName = 'SuccessNotification'; diff --git a/src/shared/ui/NotificationCenter/ui/WarningNotification.tsx b/src/shared/ui/NotificationCenter/ui/WarningNotification.tsx index b1ec2fa0e..502b31685 100644 --- a/src/shared/ui/NotificationCenter/ui/WarningNotification.tsx +++ b/src/shared/ui/NotificationCenter/ui/WarningNotification.tsx @@ -31,3 +31,5 @@ export const WarningNotification = forwardRef((props: Props, ref) => { ); }); + +WarningNotification.displayName = 'WarningNotification'; From 7eec23c2e35fd8a7d57b8a5390bc65a1864629a2 Mon Sep 17 00:00:00 2001 From: Viktor Riabkov Date: Fri, 8 Mar 2024 15:12:28 +0800 Subject: [PATCH 3/7] Create useIntersectionObserver hook --- src/shared/utils/hooks/index.ts | 1 + .../utils/hooks/useIntersectionObserver.ts | 35 +++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 src/shared/utils/hooks/useIntersectionObserver.ts diff --git a/src/shared/utils/hooks/index.ts b/src/shared/utils/hooks/index.ts index b618ff1cb..5e5e57ce2 100644 --- a/src/shared/utils/hooks/index.ts +++ b/src/shared/utils/hooks/index.ts @@ -10,3 +10,4 @@ export * from './useIsPublic'; export * from './useFlowType'; export * from './useForceUpdate'; export * from './usePrevious'; +export * from './useIntersectionObserver'; diff --git a/src/shared/utils/hooks/useIntersectionObserver.ts b/src/shared/utils/hooks/useIntersectionObserver.ts new file mode 100644 index 000000000..434f14b38 --- /dev/null +++ b/src/shared/utils/hooks/useIntersectionObserver.ts @@ -0,0 +1,35 @@ +import { useEffect, useRef, useState } from 'react'; + +type Return = { + containerRef: React.RefObject; + targetRef: React.RefObject; + isIntersecting: boolean; +}; + +export const useIntersectionObserver = (): Return => { + const containerRef = useRef(null); + const targetRef = useRef(null); + + const [isIntersecting, setIsIntersecting] = useState(false); + + const observer = new IntersectionObserver( + ([notificationCenter]) => { + setIsIntersecting(notificationCenter.isIntersecting); + }, + { + root: containerRef.current, + rootMargin: '0px', + threshold: 1, + }, + ); + + useEffect(() => { + observer.observe(targetRef.current as Element); + + return () => { + observer.disconnect(); + }; + }, []); + + return { containerRef, targetRef, isIntersecting }; +}; From 3763d51981284b47dd71a4ac2908f7bc4276e8b9 Mon Sep 17 00:00:00 2001 From: Viktor Riabkov Date: Fri, 8 Mar 2024 15:14:48 +0800 Subject: [PATCH 4/7] Fix deps array in useIntersectionObserver hook --- .../utils/hooks/useIntersectionObserver.ts | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/shared/utils/hooks/useIntersectionObserver.ts b/src/shared/utils/hooks/useIntersectionObserver.ts index 434f14b38..fd585d64c 100644 --- a/src/shared/utils/hooks/useIntersectionObserver.ts +++ b/src/shared/utils/hooks/useIntersectionObserver.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useMemo, useRef, useState } from 'react'; type Return = { containerRef: React.RefObject; @@ -12,16 +12,18 @@ export const useIntersectionObserver = (): Return => { const [isIntersecting, setIsIntersecting] = useState(false); - const observer = new IntersectionObserver( - ([notificationCenter]) => { - setIsIntersecting(notificationCenter.isIntersecting); - }, - { - root: containerRef.current, - rootMargin: '0px', - threshold: 1, - }, - ); + const observer = useMemo(() => { + return new IntersectionObserver( + ([notificationCenter]) => { + setIsIntersecting(notificationCenter.isIntersecting); + }, + { + root: containerRef.current, + rootMargin: '0px', + threshold: 1, + }, + ); + }, []); useEffect(() => { observer.observe(targetRef.current as Element); @@ -29,7 +31,7 @@ export const useIntersectionObserver = (): Return => { return () => { observer.disconnect(); }; - }, []); + }, [observer]); return { containerRef, targetRef, isIntersecting }; }; From a61bd32890507c0398a067325ed9259d0631bbef Mon Sep 17 00:00:00 2001 From: Viktor Riabkov Date: Fri, 8 Mar 2024 15:16:32 +0800 Subject: [PATCH 5/7] Change NotificationAnimation --- src/shared/ui/NotificationCenter/ui/NotificationAnimation.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/shared/ui/NotificationCenter/ui/NotificationAnimation.tsx b/src/shared/ui/NotificationCenter/ui/NotificationAnimation.tsx index 7879ba8fe..77d2594cd 100644 --- a/src/shared/ui/NotificationCenter/ui/NotificationAnimation.tsx +++ b/src/shared/ui/NotificationCenter/ui/NotificationAnimation.tsx @@ -11,7 +11,9 @@ type Props = PropsWithChildren<{ }>; export const NotificationAnimation = ({ notifications, refMap }: Props) => { - const transitions = useTransition(notifications, { + const lastNotification = notifications[notifications.length - 1]; + + const transitions = useTransition(lastNotification, { from: { height: '0px' }, enter: (item) => async (next) => { await next({ height: `${refMap.get(item)?.offsetHeight ?? 72}px` }); From 362876bb1267bbefd8e897148803dd84f12d1592 Mon Sep 17 00:00:00 2001 From: Viktor Riabkov Date: Fri, 8 Mar 2024 15:18:26 +0800 Subject: [PATCH 6/7] Change the notificationCenterContainer position to sticky --- .../NotificationCenter/ui/NotificationCenter.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/shared/ui/NotificationCenter/ui/NotificationCenter.tsx b/src/shared/ui/NotificationCenter/ui/NotificationCenter.tsx index 38d1aa170..e626773b1 100644 --- a/src/shared/ui/NotificationCenter/ui/NotificationCenter.tsx +++ b/src/shared/ui/NotificationCenter/ui/NotificationCenter.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo } from 'react'; +import { forwardRef, useCallback, useEffect, useMemo } from 'react'; import Box from '@mui/material/Box'; @@ -8,7 +8,11 @@ import { Notification as TNotification } from '../lib/types'; import { eventEmitter, useForceUpdate } from '~/shared/utils'; -export const NotificationCenter = () => { +type Props = { + isIntersecting?: boolean; +}; + +export const NotificationCenter = forwardRef((props, ref) => { const forceUpdate = useForceUpdate(); const refMap: WeakMap = useMemo(() => new WeakMap(), []); // Collect refs for each notification element to calculate their height @@ -45,11 +49,13 @@ export const NotificationCenter = () => { }, [onNotificationAdded, onNotificationRemoved]); return ( - + ); -}; +}); + +NotificationCenter.displayName = 'NotificationCenter'; From ba8da14163c4329e63da195b620f32282acd6b49 Mon Sep 17 00:00:00 2001 From: Viktor Riabkov Date: Mon, 11 Mar 2024 20:42:52 +0800 Subject: [PATCH 7/7] Change color with opacity to analogue withou opacity --- src/shared/constants/theme.ts | 1 + .../ui/NotificationCenter/ui/NotificationCenter.tsx | 9 ++++++++- .../ui/NotificationCenter/ui/WarningNotification.tsx | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/shared/constants/theme.ts b/src/shared/constants/theme.ts index d6f208625..0c4818b91 100644 --- a/src/shared/constants/theme.ts +++ b/src/shared/constants/theme.ts @@ -21,6 +21,7 @@ export const Theme = { accentGreen30: 'rgba(15, 123, 108, 0.30)', accentYellow: '#DFAC03', accentYellow30: 'rgba(223, 172, 3, 0.30)', + accentYellow30AnalogueWithoutOpacity: 'rgb(245, 230, 179)', // Formula: Color * alpha + Background * (1 - alpha) accentOrange: '#D9730D', accentOrange30: 'rgba(217, 115, 13, 0.30)', inverseOnSurface: '#F0F0F4', diff --git a/src/shared/ui/NotificationCenter/ui/NotificationCenter.tsx b/src/shared/ui/NotificationCenter/ui/NotificationCenter.tsx index e626773b1..f8817c902 100644 --- a/src/shared/ui/NotificationCenter/ui/NotificationCenter.tsx +++ b/src/shared/ui/NotificationCenter/ui/NotificationCenter.tsx @@ -49,7 +49,14 @@ export const NotificationCenter = forwardRef((props, ref) }, [onNotificationAdded, onNotificationRemoved]); return ( - + { padding="12px 16px" gap="12px" minHeight="72px" - bgcolor={Theme.colors.light.accentYellow30} + bgcolor={Theme.colors.light.accentYellow30AnalogueWithoutOpacity} >