Move notification to function component

lib/components/notification.tsx

@@ -1,87 +1,75 @@
-import React from 'react';
-import type {NotificationProps, NotificationState} from '../hyper';
+import React, {forwardRef, useEffect, useRef, useState} from 'react';
+import type {NotificationProps} from '../hyper';
 
-export default class Notification extends React.PureComponent<
-  React.PropsWithChildren<NotificationProps>,
-  NotificationState
-> {
-  dismissTimer!: NodeJS.Timeout;
-  constructor(props: NotificationProps) {
-    super(props);
-    this.state = {
-      dismissing: false
-    };
-  }
+const Notification = forwardRef<HTMLDivElement, React.PropsWithChildren<NotificationProps>>((props, ref) => {
+  const dismissTimer = useRef<NodeJS.Timeout | undefined>(undefined);
+  const [dismissing, setDismissing] = useState(false);
 
-  componentDidMount() {
-    if (this.props.dismissAfter) {
-      this.setDismissTimer();
-    }
-  }
+  useEffect(() => {
+    setDismissTimer();
+  }, []);
 
-  componentDidUpdate(prevProps: NotificationProps, prevState: NotificationState) {
+  useEffect(() => {
     // if we have a timer going and the notification text
     // changed we reset the timer
-    if (this.props.text !== prevProps.text) {
-      if (prevProps.dismissAfter) {
-        this.resetDismissTimer();
-      }
-      if (prevState.dismissing) {
-        this.setState({dismissing: false});
-      }
-    }
-  }
+    resetDismissTimer();
+    setDismissing(false);
+  }, [props.text]);
 
-  handleDismiss = () => {
-    this.setState({dismissing: true});
+  const handleDismiss = () => {
+    setDismissing(true);
   };
 
-  onElement = (el: HTMLDivElement | null) => {
+  const onElement = (el: HTMLDivElement | null) => {
     if (el) {
       el.addEventListener('webkitTransitionEnd', () => {
-        if (this.state.dismissing) {
-          this.props.onDismiss();
+        if (dismissing) {
+          props.onDismiss();
         }
       });
-      const {backgroundColor} = this.props;
+      const {backgroundColor} = props;
       if (backgroundColor) {
         el.style.setProperty('background-color', backgroundColor, 'important');
       }
+
+      if (ref) {
+        if (typeof ref === 'function') ref(el);
+        else ref.current = el;
+      }
     }
   };
 
-  setDismissTimer() {
-    this.dismissTimer = setTimeout(() => {
-      this.handleDismiss();
-    }, this.props.dismissAfter);
+  const setDismissTimer = () => {
+    if (typeof props.dismissAfter === 'number') {
+      dismissTimer.current = setTimeout(() => {
+        handleDismiss();
+      }, props.dismissAfter);
     }
+  };
 
-  resetDismissTimer() {
-    clearTimeout(this.dismissTimer);
-    this.setDismissTimer();
-  }
+  const resetDismissTimer = () => {
+    clearTimeout(dismissTimer.current);
+    setDismissTimer();
+  };
 
-  componentWillUnmount() {
-    clearTimeout(this.dismissTimer);
-  }
+  useEffect(() => {
+    return () => {
+      clearTimeout(dismissTimer.current);
+    };
+  }, []);
 
-  render() {
-    const {backgroundColor, color} = this.props;
-    const opacity = this.state.dismissing ? 0 : 1;
+  const {backgroundColor, color} = props;
+  const opacity = dismissing ? 0 : 1;
   return (
-      <div ref={this.onElement} style={{opacity, backgroundColor, color}} className="notification_indicator">
-        {this.props.customChildrenBefore}
-        {this.props.children || this.props.text}
-        {this.props.userDismissable ? (
-          <a
-            className="notification_dismissLink"
-            onClick={this.handleDismiss}
-            style={{color: this.props.userDismissColor}}
-          >
+    <div ref={onElement} style={{opacity, backgroundColor, color}} className="notification_indicator">
+      {props.customChildrenBefore}
+      {props.children || props.text}
+      {props.userDismissable ? (
+        <a className="notification_dismissLink" onClick={handleDismiss} style={{color: props.userDismissColor}}>
           [x]
         </a>
       ) : null}
-        {this.props.customChildren}
+      {props.customChildren}
 
       <style jsx>{`
         .notification_indicator {
@@ -114,5 +102,8 @@ export default class Notification extends React.PureComponent<
       `}</style>
     </div>
   );
-  }
-}
+});
+
+Notification.displayName = 'Notification';
+
+export default Notification;

lib/hyper.d.ts

@@ -259,10 +259,6 @@ export type NotificationProps = {
   userDismissColor?: string;
 } & extensionProps;
 
-export type NotificationState = {
-  dismissing: boolean;
-};
-
 export type SplitPaneProps = {
   borderColor: string;
   direction: 'horizontal' | 'vertical';