[Canvas] Refactor fullscreen component (#104554)

x-pack/plugins/canvas/public/components/fullscreen/fullscreen.js

@@ -1,59 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { debounce } from 'lodash';
-import { getWindow } from '../../lib/get_window';
-
-export class Fullscreen extends React.Component {
-  static propTypes = {
-    isFullscreen: PropTypes.bool,
-    children: PropTypes.func,
-  };
-
-  state = {
-    width: 0,
-    height: 0,
-  };
-
-  UNSAFE_componentWillMount() {
-    this.win = getWindow();
-    this.setState({
-      width: this.win.innerWidth,
-      height: this.win.innerHeight,
-    });
-  }
-
-  componentDidMount() {
-    this.win.addEventListener('resize', this.onWindowResize);
-  }
-
-  componentWillUnmount() {
-    this.win.removeEventListener('resize', this.onWindowResize);
-  }
-
-  getWindowSize = () => ({
-    width: this.win.innerWidth,
-    height: this.win.innerHeight,
-  });
-
-  onWindowResize = debounce(() => {
-    const { width, height } = this.getWindowSize();
-    this.setState({ width, height });
-  }, 100);
-
-  render() {
-    const { isFullscreen, children } = this.props;
-    const windowSize = {
-      width: this.state.width,
-      height: this.state.height,
-    };
-
-    return children({ isFullscreen, windowSize });
-  }
-}

x-pack/plugins/canvas/public/components/fullscreen/fullscreen.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FC, useEffect, useState } from 'react';
+import { debounce } from 'lodash';
+import { getWindow } from '../../lib/get_window';
+
+interface Props {
+  isFullscreen?: boolean;
+  children: (props: {
+    isFullscreen: boolean;
+    windowSize: { width: number; height: number };
+  }) => JSX.Element;
+}
+
+export const Fullscreen: FC<Props> = ({ isFullscreen = false, children }) => {
+  const [width, setWidth] = useState(getWindow().innerWidth);
+  const [height, setHeight] = useState(getWindow().innerHeight);
+
+  const onWindowResize = debounce(({ target }) => {
+    const { innerWidth, innerHeight } = target as Window;
+    setWidth(innerWidth);
+    setHeight(innerHeight);
+  }, 100);
+
+  useEffect(() => {
+    const window = getWindow();
+    window.addEventListener('resize', onWindowResize);
+
+    return () => window.removeEventListener('resize', onWindowResize);
+  });
+
+  const windowSize = {
+    width,
+    height,
+  };
+
+  return children({ isFullscreen, windowSize });
+};

x-pack/plugins/canvas/public/components/fullscreen/index.tsx

@@ -6,12 +6,18 @@
  */
 
 import React, { FC, useContext } from 'react';
-// @ts-expect-error
 import { Fullscreen as Component } from './fullscreen';
 
 import { WorkpadRoutingContext } from '../../routes/workpad';
 
-export const Fullscreen: FC = ({ children }) => {
+interface Props {
+  children: (props: {
+    isFullscreen: boolean;
+    windowSize: { width: number; height: number };
+  }) => JSX.Element;
+}
+
+export const Fullscreen: FC<Props> = ({ children }) => {
   const { isFullscreen } = useContext(WorkpadRoutingContext);
 
   return <Component isFullscreen={isFullscreen} children={children} />;

x-pack/plugins/canvas/public/lib/get_window.ts

@@ -10,14 +10,12 @@ const windowObj = {
   location: null,
   localStorage: {} as Window['localStorage'],
   sessionStorage: {} as Window['sessionStorage'],
+  innerWidth: 0,
+  innerHeight: 0,
+  addEventListener: () => {},
+  removeEventListener: () => {},
 };
 
-export const getWindow = ():
-  | Window
-  | {
-      location: Location | null;
-      localStorage: Window['localStorage'];
-      sessionStorage: Window['sessionStorage'];
-    } => {
+export const getWindow = (): Window | typeof windowObj => {
   return typeof window === 'undefined' ? windowObj : window;
 };