feat:update EmptyStatePresenter and share any notification dismiss ev…

…ent back to NotificationCenter (#3)
Autodesk · May 30, 2023 · 507b355 · 507b355
1 parent a115177
commit 507b355
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 15 deletions.
diff --git a/packages/notifications-panel/src/NotificationsPanel.js b/packages/notifications-panel/src/NotificationsPanel.js
@@ -64,7 +64,9 @@ export default function NotificationsPanel(props) {
     alterCoordinates,
     anchorPoint,
     children,
+    emptyTitle,
     emptyMessage,
+    emptyImage,
     heading,
     indicatorTitle,
     loading,
@@ -74,6 +76,7 @@ export default function NotificationsPanel(props) {
     open,
     markAllAsReadTitle,
     onClickMarkAllAsRead,
+    onNotificationChanged,
     notifications: notificationsInput = children,
     unreadCount: controlledUnreadCount,
     stylesheet,
@@ -85,6 +88,7 @@ export default function NotificationsPanel(props) {
     <NotificationFlyoutBehavior
       unreadCount={controlledUnreadCount}
       notifications={notificationsInput}
+      notificationChanged={onNotificationChanged}
     >
       {({
         dismissNotification,
@@ -99,7 +103,7 @@ export default function NotificationsPanel(props) {
           onClickMarkAllAsRead={onClickMarkAllAsRead}
           heading={heading}>
           {notifications.length == 0 ? (
-            <EmptyStatePresenter message={emptyMessage} stylesheet={stylesheet} />
+            <EmptyStatePresenter title={emptyTitle} message={emptyMessage} image={emptyImage} stylesheet={stylesheet} />
           ) : (
             notifications.map(
               CreateNotificationRenderer({ dismissNotification })

diff --git a/packages/notifications-panel/src/behaviors/NotificationFlyoutBehavior.js b/packages/notifications-panel/src/behaviors/NotificationFlyoutBehavior.js
@@ -103,6 +103,9 @@ export default class NotificationFlyoutBehavior extends Component {
       // eslint-disable-next-line react/no-access-state-in-setstate
       dismissedNotifications: this.state.dismissedNotifications.concat(id),
     });
+    // This function let NotificationCenter knows about any change done in NotificationsPanel
+    // so then we could trigger the function that shares the NotificationCenter height to Dynamo
+    this.props.notificationChanged();
   };
 
   /**

diff --git a/packages/notifications-panel/src/presenters/EmptyStatePresenter.js b/packages/notifications-panel/src/presenters/EmptyStatePresenter.js
@@ -7,23 +7,30 @@ import Bell from "./Bell.svg";
 import stylesheet from "./stylesheet";
 
 export default function EmptyStatePresenter({
-  message,
-  stylesheet: customStylesheet,
+	title,
+	message,
+	image,
+	stylesheet: customStylesheet,
 }) {
-  const styles = stylesheet({ stylesheet: customStylesheet }, {});
-  return (
-    <div className={css(styles.emptyState)}>
-      <Bell role="presentation" className={css(styles.emptyStateImage)} />
-      <Typography style={styles.emptyStateMessage}>{message}</Typography>
-    </div>
-  );
+	const styles = stylesheet({ stylesheet: customStylesheet }, {});
+	const defaultImage = (
+		<Bell role="presentation" className={css(styles.emptyStateImage)} />
+	);
+	return (
+		<div className={css(styles.emptyState)}>
+			{image ? image : defaultImage}
+			<Typography variant={"h3"} style={styles.emptyStateTitle}>{title}</Typography>
+			<Typography style={styles.emptyStateMessage}>{message}</Typography>
+		</div>
+	);
 }
 
 EmptyStatePresenter.defaultProps = {
-  message: "You currently have no notifications",
+	message: "You currently have no notifications",
 };
 
 EmptyStatePresenter.propTypes = {
-  message: PropTypes.string,
-  stylesheet: PropTypes.func,
+  title: PropTypes.string,
+	message: PropTypes.string,
+	stylesheet: PropTypes.func,
 };
diff --git a/packages/notifications-panel/src/presenters/stylesheet.js b/packages/notifications-panel/src/presenters/stylesheet.js
@@ -144,10 +144,19 @@ export default function stylesheet(props, themeData) {
       alignItems: `center`,
     },
     emptyStateImage: {
-      marginTop: `20px`,
+      margin: `15px`
+    },
+    emptyStateTitle: {
+      fontFamily: themeData["notifications.fontFamily"],
+      fontSize: `14px`,
+      textAlign: `center`
     },
     emptyStateMessage: {
-      margin: `20px 0 37px`,
+      fontSize: `12px`,
+      fontFamily: themeData["notifications.fontFamily"],
+      margin: `10px 0 30px`,
+      textAlign: `center`,
+      width: `80%`
     },
   };