[EuiWindowEvent] Refactor class component to functional component

packages/eui/src/services/window_event/window_event.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { Component } from 'react';
+import { useEffect } from 'react';
 
 type EventNames = keyof WindowEventMap;
 
@@ -15,34 +15,15 @@ interface Props<Ev extends EventNames> {
   handler: (this: Window, ev: WindowEventMap[Ev]) => any;
 }
 
-export class EuiWindowEvent<E extends EventNames> extends Component<Props<E>> {
-  componentDidMount() {
-    this.addEvent(this.props);
-  }
-
-  componentDidUpdate(prevProps: Props<E>) {
-    if (
-      prevProps.event !== this.props.event ||
-      prevProps.handler !== this.props.handler
-    ) {
-      this.removeEvent(prevProps);
-      this.addEvent(this.props);
-    }
-  }
-
-  componentWillUnmount() {
-    this.removeEvent(this.props);
-  }
-
-  addEvent<Ev extends EventNames>({ event, handler }: Props<Ev>) {
+export const EuiWindowEvent = <E extends EventNames>({
+  event,
+  handler,
+}: Props<E>) => {
+  useEffect(() => {
     window.addEventListener(event, handler);
-  }
 
-  removeEvent<Ev extends EventNames>({ event, handler }: Props<Ev>) {
-    window.removeEventListener(event, handler);
-  }
+    return () => window.removeEventListener(event, handler);
+  }, [event, handler]);
 
-  render() {
-    return null;
-  }
-}
+  return null;
+};