Notifications Components :: NotificationsAnchor

[nathanstilwell]

NotificationsAnchor

repo: cockroachdb/admin-ui-components

API (rough draft)

<NotificationsAnchor
   unread={ Number }
   onActivate={ Function }
   onDeactivate={ Function}
   activateEvent={ "hover" | "click" | "focus" }
/>

The NotificationsAnchor component will be used as an anchor to the popover notifications widget while providing an indication of the number of unread messages as well as a visual indication of the widget being "open" or "closed".

Give the simplicity of this component and it's partnership with other component state, I think this component should be purely presentational and contain no state of its own. The API above is a rough guess at what the component might need to know. The activateEvent represents not having a final decision as to what events this component might respond to. For instance, will the widget open and close on hover and by clicking, the user will be taken to the Notification Center? Or will the widget be opened and closed by clicking, and the user will get to the Notification Center by interacting with individual Notifications? Time will tell.

On thing is clear, and that is that this component will display a number of unread notifications. For this prop, I have imagined it as a Number where if the number is greater than zero then a numeric pimple will be rendered. If the number is less than one, or null, or undefined, or NaN then a numeric indicator will not be rendered. The may also be an upper limit to the how large this numeric indicator could be, in which case the limit would probably be shown (something like "99+" if there were 127 notifications if the upper limit was 99)