Merge pull request #62 from KeyValueSoftwareSystems/fix/release-110-fixes

Fix: custom delete icon issue and refactor

Author: bilta-keyvalue

README.md

@@ -112,7 +112,7 @@ theme | Object for custom themes |  Theme | {} |
 customStyles | Object for custom styling |  CustomStyleProps | {} |
 darkMode |  Toggle to enable dark mode|  boolean | false |
 itemsPerFetch | Number of notifications fetch per api request (have a max cap of 50) |  number | 20 |
-cardProps | Props for customizing the card | CardProps | { hideAvatar: false, disableAutoMarkAsRead: false, hideDelete: false, deleteIcon: JSX.Element, onAvatarClick: ()=> null } |
+cardProps | Props for customizing the card | CardProps | { hideAvatar: false, disableAutoMarkAsRead: false, hideDelete: false, deleteIcon: JSX.Element, onAvatarClick: ()=> null, hideMediaThumbnailL: false, onMediaThumbnailClick: ()=> null} |
 customCard | Function for rendering custom card | (notification)=> JSX Element | null |
 onCardClick | Custom click handler for card | (notification)=> void | ()=>null |
 listEmptyComponent | Custom component for empty list | JSX Element | null |

example/package.json

@@ -13,7 +13,7 @@
     "@react-navigation/bottom-tabs": "^6.5.14",
     "@react-navigation/native": "^6.1.12",
     "@react-navigation/native-stack": "^6.9.20",
-    "@sirenapp/react-native-inbox": "^1.0.0",
+    "@sirenapp/react-native-inbox": "^1.1.0",
     "react": "18.2.0",
     "react-native": "0.73.4",
     "react-native-modal": "^13.0.1",

src/components/card.tsx

@@ -173,10 +173,14 @@ const Card = (props: NotificationCardProps): ReactElement => {
             <Text numberOfLines={2} style={[styles.cardTitle, style.cardTitle]}>
               {notification.message?.header}
             </Text>
-            {!hideDelete &&
-              (deleteIcon || (
-                <CloseIcon onDelete={onDeleteItem} notification={notification} styles={styles} />
-              ))}
+            {!hideDelete && (
+              <CloseIcon
+                onDelete={onDeleteItem}
+                customIcon={deleteIcon}
+                notification={notification}
+                styles={styles}
+              />
+            )}
           </View>
           {Boolean(notification.message?.subHeader) && (
             <Text numberOfLines={2} style={[style.cardSubTitle, styles.cardSubTitle]}>

src/components/closeIcon.tsx

@@ -8,10 +8,12 @@ import type { StyleProps } from '../types';
 const CloseIcon = ({
   notification,
   styles,
+  customIcon,
   onDelete
 }: {
   notification: NotificationDataType;
   styles: Partial<StyleProps>;
+  customIcon?: ReactElement | null;
   onDelete: (id: string) => void;
 }): ReactElement => {
   const icon: JSX.Element[] = [];
@@ -36,7 +38,7 @@ const CloseIcon = ({
       testID='delete-button'
       accessibilityLabel={`siren-notification-delete${notification.id}`}
     >
-      <>{icon}</>
+      <>{customIcon || icon}</>
     </TouchableOpacity>
   );
 };

src/components/sirenProvider.tsx

@@ -11,7 +11,7 @@ import type {
 } from '@sirenapp/js-sdk/dist/esm/types';
 
 import type { SirenProviderConfigProps } from '../types';
-import { isNonEmptyArray, logger } from '../utils/commonUtils';
+import { generateUniqueId, isNonEmptyArray, logger } from '../utils/commonUtils';
 import {
   events,
   eventTypes,
@@ -76,10 +76,6 @@ export const useSirenContext = (): SirenContextProp => useContext(SirenContext);
 const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
   let retryCount = 0;
 
-  const generateUniqueId = (): string => {
-    return Math.random().toString(36).substring(2, 15);
-  };
-
   const { markAllAsViewed } = useSiren();
 
   const [id] = useState(generateUniqueId());

src/utils/commonUtils.ts

@@ -8,6 +8,10 @@ import { DefaultTheme } from './index';
 export const isNonEmptyArray = (arr?: unknown[] | null) =>
   Boolean(arr && typeof arr === 'object' && arr instanceof Array && arr.length > 0);
 
+export const generateUniqueId = (): string => {
+  return Math.random().toString(36).substring(2, 15);
+};
+
 export const updateNotifications = (
   eventData: {
     id?: string;