feat: add close prop to notification

GetStream · Dec 22, 2023 · 24babd3 · 24babd3
1 parent 6572aca
commit 24babd3
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/packages/react-sdk/src/components/Notification/Notification.tsx b/packages/react-sdk/src/components/Notification/Notification.tsx
@@ -1,6 +1,8 @@
 import { PropsWithChildren, ReactNode, useEffect } from 'react';
 import { Placement } from '@floating-ui/react';
 
+import { Icon } from '../Icon';
+
 import { useFloatingUIPreset } from '../../hooks';
 
 export type NotificationProps = {
@@ -10,6 +12,7 @@ export type NotificationProps = {
   resetIsVisible?: () => void;
   placement?: Placement;
   iconClassName?: string | null;
+  close?: () => void;
 };
 
 export const Notification = (props: PropsWithChildren<NotificationProps>) => {
@@ -21,6 +24,7 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
     resetIsVisible,
     placement = 'top',
     iconClassName = 'str-video__notification__icon',
+    close,
   } = props;
 
   const { refs, x, y, strategy } = useFloatingUIPreset({
@@ -53,6 +57,12 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
         >
           {iconClassName && <i className={iconClassName} />}
           <span className="str-video__notification__message">{message}</span>
+          {close ? (
+            <i
+              className="str-video__icon str-video__icon--close str-video__notification__close"
+              onClick={close}
+            />
+          ) : null}
         </div>
       )}
       {children}

diff --git a/packages/react-sdk/src/components/Notification/RecordingInProgressNotification.tsx b/packages/react-sdk/src/components/Notification/RecordingInProgressNotification.tsx
@@ -1,7 +1,8 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import { useI18n } from '@stream-io/video-react-bindings';
 import { useToggleCallRecording } from '../../hooks';
 import { Notification } from './Notification';
+import { IconButton } from '../Button';
 
 export type RecordingInProgressNotificationProps = {
   text?: string;
@@ -14,14 +15,25 @@ export const RecordingInProgressNotification = ({
   const { t } = useI18n();
   const { isCallRecordingInProgress } = useToggleCallRecording();
 
+  const [isVisible, setVisible] = useState(false);
+
   const message = text ?? t('Recording in progress...');
 
+  useEffect(() => {
+    if (isCallRecordingInProgress) {
+      setVisible(true);
+    } else {
+      setVisible(false);
+    }
+  }, [isCallRecordingInProgress]);
+
   return (
     <Notification
       message={message}
       iconClassName="str-video__icon str-video__icon--recording-on"
-      isVisible={isCallRecordingInProgress}
+      isVisible={isVisible}
       placement="top-start"
+      close={() => setVisible(false)}
     >
       {children}
     </Notification>

diff --git a/packages/styling/src/Notification/Notification-layout.scss b/packages/styling/src/Notification/Notification-layout.scss
@@ -13,4 +13,14 @@
   .str-video__notification__message {
     flex: 1;
   }
+
+  .str-video__notification__close {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }