feat(ui): customization option for viewport notification (#4638)

platform/docs/docs/platform/services/customization-service/sampleCustomizations.tsx

@@ -22,6 +22,7 @@ import segDisplayEditingFalse from '../../../assets/img/segDisplayEditingFalse.p
 import thumbnailMenuItemsImage from '../../../assets/img/thumbnailMenuItemsImage.png';
 import studyMenuItemsImage from '../../../assets/img/studyMenuItemsImage.png';
 import windowLevelActionMenu from '../../../assets/img/windowLevelActionMenu.png';
+import viewPortNotificationImage from '../../../assets/img/viewport-notification.png';
 
 export const viewportOverlayCustomizations = [
   {
@@ -614,6 +615,24 @@ window.config = {
       },
     },
   ],
+};
+  `,
+  },
+  {
+    id: 'ui.notificationComponent',
+    description: 'Define the component which is used to render viewport notifications',
+    default: 'Default Notification component in viewport',
+    image: [viewPortNotificationImage],
+    configuration: `
+window.config = {
+  // rest of window config
+  customizationService: [
+    {
+      'ui.notificationComponent': {
+          $set: CustomizedComponent,
+      },
+    },
+  ],
 };
     `,
   },

platform/ui/src/components/Notification/Notification.tsx

@@ -1,11 +1,28 @@
 import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 
 import Button, { ButtonEnums } from '../Button';
 import { Icons } from '@ohif/ui-next';
 
-const Notification = ({
+type NotificationAction = {
+  id: string;
+  text: string;
+  value: any;
+  type: ButtonEnums.type.primary | ButtonEnums.type.secondary;
+  size?: ButtonEnums.size.small | ButtonEnums.size.medium;
+};
+
+export type NotificationProps = {
+  id: string;
+  type: 'error' | 'warning' | 'info' | 'success';
+  message: string | React.ReactNode;
+  actions: NotificationAction[];
+  onSubmit: (e: any) => void;
+  onOutsideClick?: () => void;
+  onKeyPress?: (e: React.KeyboardEvent) => void;
+};
+
+const Notification: React.FC<NotificationProps> = ({
   id,
   type = 'info',
   message,
@@ -107,21 +124,4 @@ const Notification = ({
   );
 };
 
-Notification.propTypes = {
-  type: PropTypes.oneOf(['error', 'warning', 'info', 'success']),
-  message: PropTypes.string.isRequired,
-  actions: PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.string.isRequired,
-      value: PropTypes.any.isRequired,
-      type: PropTypes.oneOf([ButtonEnums.type.primary, ButtonEnums.type.secondary]).isRequired,
-      size: PropTypes.oneOf([ButtonEnums.size.small, ButtonEnums.size.medium]),
-    })
-  ).isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  /** Can be used as a callback to dismiss the notification for clicks that occur outside of it */
-  onOutsideClick: PropTypes.func,
-  onKeyPress: PropTypes.func,
-};
-
 export default Notification;