feat: Add a new property to hide the delete button and display a skeleton loader without avatar if hideAvatar is enabled

Author: reshmarevi17

README.md

@@ -64,8 +64,8 @@ darkMode | Toggle to enable dark mode |  boolean | false |
 itemsPerFetch | Number of notifications fetch per api request (have a max cap of 50) | number | 20 |
 windowViewOnly | Toggle to enable fit-to-screen window or modal view |  boolean | false |
 notificationIcon | Option to use custom notification Icon |  JSX Element | null |
-inboxHeaderProps | Props for customizing the header.<br> title - Title of the notification inbox<br> hideHeader - Toggle to hide or show the header section.<br> hideClearAll - Toggle to hide or show the clear all button.<br> customHeader - Custom header component. | InboxHeaderProps| { title: '', hideHeader: false, hideClearAll: false, customHeader: null } |
-cardProps | Props for customizing the notification cards..<br> hideAvatar - Toggle to hide or show the avatar.<br> disableAutoMarkAsRead - Toggle to disable or enable the markAsRead functionality on card click | CardProps | { hideAvatar: false, disableAutoMarkAsRead: false } |
+inboxHeaderProps | Props for customizing the header.<br> title - Title of the notification inbox<br> hideHeader - Toggle to hide or show the header section.<br> hideClearAll - Toggle to hide or show the clear all button.<br> customHeader - Custom header component. | InboxHeaderProps| { title: 'Notifications', <br>hideHeader: false,<br> hideClearAll: false, <br>customHeader: null } |
+cardProps | Props for customizing the notification cards. <br>hideDelete - Toggle to hide or show delete icon<br> hideAvatar - Toggle to hide or show the avatar.<br> disableAutoMarkAsRead - Toggle to disable or enable the markAsRead functionality on card click | CardProps | { hideDelete: false,<br> hideAvatar: false,<br> disableAutoMarkAsRead: false } |
 customNotificationCard | Function for rendering custom notification cards | (notification)=> JSX Element | null |
 onNotificationCardClick | Custom click handler for notification cards | (notification)=> void | ()=>null |
 listEmptyComponent | Custom component for empty notification list | JSX Element | null |
@@ -193,6 +193,7 @@ Please note that the badgeStyle, window shadow and border props are only applica
 
 ```js
     type CardProps = {
+      hideDelete?: boolean;
       hideAvatar?: boolean,
       disableAutoMarkAsRead?: boolean,
     };
@@ -301,10 +302,13 @@ export function MyContainer(): React.JSX.Element {
   return (
     <div>
       <SirenInbox
-        title="Notifications"
-        hideHeader={false}
+        inboxHeaderProps={
+          title: "Notifications",
+          hideHeader: false
+        }
         darkMode={false}
         cardProps={{
+          hideDelete: false,
           hideAvatar: false,
           disableAutoMarkAsRead: false,
         }}

src/components/Card.tsx

@@ -52,7 +52,7 @@ const Card: FC<NotificationCardProps> = ({
 }) => {
   const { id, createdAt, message, isRead } = notification;
   const { avatar, header, subHeader, body } = message;
-  const { hideAvatar, disableAutoMarkAsRead } =  cardProps ?? {};
+  const { hideAvatar, hideDelete, disableAutoMarkAsRead } =  cardProps ?? {};
   const {
     markAsRead
   } = useSiren();
@@ -125,16 +125,18 @@ const Card: FC<NotificationCardProps> = ({
           </div>
         </div>
       </div>
-      <div
-        data-testid={`delete-${notification.id}`}
-        className="siren-sdk-delete-button"
-        onClick={onDelete}
-      >
-        <CloseIcon
-          color={styles?.deleteIcon.color}
-          size={styles.deleteIcon.size}
-        />
-      </div>
+      {!hideDelete && (
+        <div
+          data-testid={`delete-${notification.id}`}
+          className="siren-sdk-delete-button"
+          onClick={onDelete}
+        >
+          <CloseIcon
+            color={styles?.deleteIcon.color}
+            size={styles.deleteIcon.size}
+          />
+        </div>
+      )}
     </div>
   );
 };

src/components/Loader.tsx

@@ -1,13 +1,17 @@
-import React from "react";
+import React, { type FC } from "react";
 
 import "../styles/loader.css";
-import type { SirenStyleProps } from "../types";
+import type { LoaderProps } from "../types";
 
-const Loader = ({styles}: {styles: SirenStyleProps}) => {
+const Loader : FC<LoaderProps> = ({
+  hideAvatar,
+  styles,
+
+}) =>  {
   return (
     <div className="siren-sdk-skeleton-container">
-      <div className="siren-sdk-skeleton-grid">
-        <div className="siren-sdk-skeleton-avatar siren-sdk-skeleton" style={styles.loader} />
+      <div className={`${!hideAvatar ? 'siren-sdk-skeleton-grid-with-avatar' : 'siren-sdk-skeleton-grid-without-avatar' }`}>
+        {!hideAvatar && (<div className="siren-sdk-skeleton-avatar siren-sdk-skeleton" style={styles.loader} />)}
         <div className="siren-sdk-skeleton-head siren-sdk-skeleton" style={styles.loader} />
         <div className="siren-sdk-skeleton-subtitle siren-sdk-skeleton" style={styles.loader} />
         <div className="siren-sdk-skeleton-body siren-sdk-skeleton" style={styles.loader}/>

src/components/SirenPanel.tsx

@@ -315,20 +315,22 @@ const SirenPanel: FC<SirenPanelProps> = ({
   };
 
   const renderList = () => {
-    if (isLoading && isEmptyArray(notifications))
+    if (isLoading && isEmptyArray(notifications)) {
+      const hideAvatar = cardProps?.hideAvatar || false;
+      
       return (
         <div className="siren-sdk-list-loader-container">
-          {customLoader || (
-            <>
-              <AnimatedLoader styles={styles} />
-              <AnimatedLoader styles={styles} />
-              <AnimatedLoader styles={styles} />
-              <AnimatedLoader styles={styles} />
-              <AnimatedLoader styles={styles} />
-            </>
-          )}
+          {customLoader || 
+          <>
+            <AnimatedLoader styles={styles} hideAvatar={hideAvatar}/>
+            <AnimatedLoader styles={styles} hideAvatar={hideAvatar}/>
+            <AnimatedLoader styles={styles} hideAvatar={hideAvatar}/>
+            <AnimatedLoader styles={styles} hideAvatar={hideAvatar}/>
+            <AnimatedLoader styles={styles} hideAvatar={hideAvatar}/>
+          </>}
         </div>
       );
+    }
 
     if (error)
       return (

src/styles/loader.css

@@ -15,7 +15,7 @@
   }
 }
 
-.siren-sdk-skeleton-grid {
+.siren-sdk-skeleton-grid-with-avatar {
   display: grid;
   grid-template-columns: 70px 10px auto auto auto auto 25px;
   grid-template-areas:
@@ -26,6 +26,17 @@
   gap:8px ;
 }
 
+.siren-sdk-skeleton-grid-without-avatar {
+  display: grid;
+  grid-template-columns: 10px auto auto auto auto 25px;
+  grid-template-areas:
+  'header header header header header close'
+  'subheader subheader subheader subheader subheader close'
+  'body body body body body close'
+  'icon footer footer footer footer close';
+  gap:8px ;
+}
+
 .siren-sdk-skeleton-head { 
   grid-area: header;
   height: 20px;

src/types.ts

@@ -50,6 +50,7 @@ export type SirenProps = SirenInboxProps &
 export type CardProps = {
   hideAvatar?: boolean;
   showMedia?: boolean;
+  hideDelete?: boolean;
   disableAutoMarkAsRead?: boolean;
 };
 
@@ -101,6 +102,11 @@ export type HeaderProps = {
   handleClearAllNotification: () => void;
 };
 
+export type LoaderProps = {
+  styles: SirenStyleProps;
+  hideAvatar: boolean;
+}
+
 type BadgeType = "none" | "dot" | "default";
 
 export type Theme = {

tests/components/__snapshots__/sirenPanel.spec.tsx.snap

@@ -60,7 +60,7 @@ exports[`matches snapshot 1`] = `
               class="siren-sdk-skeleton-container"
             >
               <div
-                class="siren-sdk-skeleton-grid"
+                class="siren-sdk-skeleton-grid-with-avatar"
               >
                 <div
                   class="siren-sdk-skeleton-avatar siren-sdk-skeleton"
@@ -96,7 +96,7 @@ exports[`matches snapshot 1`] = `
               class="siren-sdk-skeleton-container"
             >
               <div
-                class="siren-sdk-skeleton-grid"
+                class="siren-sdk-skeleton-grid-with-avatar"
               >
                 <div
                   class="siren-sdk-skeleton-avatar siren-sdk-skeleton"
@@ -132,7 +132,7 @@ exports[`matches snapshot 1`] = `
               class="siren-sdk-skeleton-container"
             >
               <div
-                class="siren-sdk-skeleton-grid"
+                class="siren-sdk-skeleton-grid-with-avatar"
               >
                 <div
                   class="siren-sdk-skeleton-avatar siren-sdk-skeleton"
@@ -168,7 +168,7 @@ exports[`matches snapshot 1`] = `
               class="siren-sdk-skeleton-container"
             >
               <div
-                class="siren-sdk-skeleton-grid"
+                class="siren-sdk-skeleton-grid-with-avatar"
               >
                 <div
                   class="siren-sdk-skeleton-avatar siren-sdk-skeleton"
@@ -204,7 +204,7 @@ exports[`matches snapshot 1`] = `
               class="siren-sdk-skeleton-container"
             >
               <div
-                class="siren-sdk-skeleton-grid"
+                class="siren-sdk-skeleton-grid-with-avatar"
               >
                 <div
                   class="siren-sdk-skeleton-avatar siren-sdk-skeleton"