Make <Notifications /> drop down on focus

src/client/components/Media.tsx

@@ -143,7 +143,7 @@ function Options(props: OptionsProps) {
   const label = labels[props.type]
   return (
     <React.Fragment>
-      <option value='false'>{label} disabled</option>
+      <option value='false'>Disable {label}</option>
       <option value={props.default}>Default {label}</option>
       {
         props.devices

src/client/components/Notifications.test.tsx

@@ -34,11 +34,9 @@ describe('Notifications', () => {
   }
 
   describe('render', () => {
-    it('renders and sets a timeout for notification', async () => {
+    it('renders', async () => {
       await render()
-      expect(dismiss.mock.calls).toEqual([])
       ReactDOM.unmountComponentAtNode(div)
-      expect(dismiss.mock.calls).toEqual([[ 'one' ]])
     })
   })
 

src/client/components/Notifications.tsx

@@ -24,13 +24,13 @@ export interface NotificationProps {
 const Notification = React.memo(
   function Notification(props: NotificationProps) {
     const { dismiss, notification } = props
-    React.useEffect(() => {
-      const timeout = setTimeout(dismiss, props.timeout, notification.id)
-      return () => {
-        clearTimeout(timeout)
-        dismiss(notification.id)
-      }
-    }, [])
+    // React.useEffect(() => {
+    //   const timeout = setTimeout(dismiss, props.timeout, notification.id)
+    //   return () => {
+    //     clearTimeout(timeout)
+    //     dismiss(notification.id)
+    //   }
+    // }, [])
     return (
       <div className={classnames(notification.type, 'notification')}>
         {notification.message}
@@ -42,24 +42,24 @@ const Notification = React.memo(
 export default class Notifications
 extends React.PureComponent<NotificationsProps> {
   static defaultProps = {
-    max: 5,
+    max: 20,
   }
   render () {
     const { dismiss, notifications, max } = this.props
     return (
-      <div className="notifications">
+      <div className="notifications" tabIndex={0}>
         <TransitionGroup>
-          {Object.keys(notifications).slice(-max).map(id => (
+          {Object.keys(notifications).slice(-max).reverse().map(id => (
             <CSSTransition
               key={id}
               classNames='fade'
               timeout={transitionTimeout}
             >
-                <Notification
-                  notification={notifications[id]}
-                  dismiss={dismiss}
-                  timeout={10000}
-                />
+              <Notification
+                notification={notifications[id]}
+                dismiss={dismiss}
+                timeout={10000}
+              />
             </CSSTransition>
           ))}
         </TransitionGroup>

src/scss/_notification.scss

@@ -1,11 +1,15 @@
 .notifications {
-  pointer-events: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 0;
+  height: 20px;
+  overflow-y: hidden;
+  transition: height 200ms ease-in, background-color 200ms ease-in;
+
   font-family: $font-monospace;
   font-size: 10px;
   text-align: right;
-  width: 100%;
-  padding: 1rem;
-  height: 100px;
 
   .notification {
     color: $color-info;
@@ -20,4 +24,11 @@
   .notification.warning {
     color: $color-warning;
   }
+
+  &:focus {
+    outline: none;
+    top: 0;
+    height: 200px;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
 }