Convert observer utility components to TypeScript

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Convert observer utility components to TypeScript ([#2009](https://github.com/elastic/eui/pull/2009))
+
 **Bug fixes**
 
 - Fixed `EuiCallOut` header icon alignment ([#2006](https://github.com/elastic/eui/pull/2006))

package.json

@@ -82,6 +82,7 @@
     "@types/react-dom": "^16.8.2",
     "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
+    "@types/resize-observer-browser": "^0.1.1",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",

scripts/babel/proptypes-from-ts-props/index.js

@@ -1184,8 +1184,14 @@ module.exports = function propTypesFromTypeScript({ types }) {
                 const typeName = idTypeAnnotation.typeAnnotation.typeName.name;
                 if (typeName === 'SFC' || typeName === 'FunctionComponent') {
                   if (state.get('importsFromReact').has(typeName)) {
-                    processComponentDeclaration(idTypeAnnotation.typeAnnotation.typeParameters.params[0], nodePath, state);
-                    fileCodeNeedsUpdating = true;
+                    // Declarations like `const Foo: FunctionComponent`
+                    // don't have type parameters. It's a valid declaration
+                    // because the generic argument has a default of empty
+                    // props.
+                    if (idTypeAnnotation.typeAnnotation.typeParameters) {
+                      processComponentDeclaration(idTypeAnnotation.typeAnnotation.typeParameters.params[0], nodePath, state);
+                      fileCodeNeedsUpdating = true;
+                    }
                   }
                 } else {
                   // reprocess this variable declaration but use the identifier lookup

src/components/index.d.ts

@@ -20,8 +20,6 @@
 /// <reference path="./key_pad_menu/index.d.ts" />
 /// <reference path="./link/index.d.ts" />
 /// <reference path="./modal/index.d.ts" />
-/// <reference path="./observer/mutation_observer/index.d.ts" />
-/// <reference path="./observer/resize_observer/index.d.ts" />
 /// <reference path="./page/index.d.ts" />
 /// <reference path="./pagination/index.d.ts" />
 /// <reference path="./panel/index.d.ts" />

src/components/observer/mutation_observer/mutation_observer.test.js → src/components/observer/mutation_observer/mutation_observer.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { mount } from 'enzyme';
 import { EuiMutationObserver } from './mutation_observer';
 
-async function sleep(duration) {
+async function sleep(duration: number) {
   return new Promise(resolve => {
     setTimeout(resolve, duration);
   });
@@ -18,7 +18,7 @@ describe('EuiMutationObserver', () => {
     expect.assertions(1);
     const onMutation = jest.fn();
 
-    function Wrapper({ value }) {
+    const Wrapper: FunctionComponent<{ value: number }> = ({ value }) => {
       return (
         <EuiMutationObserver
           observerOptions={{ attributes: true }}
@@ -30,7 +30,7 @@ describe('EuiMutationObserver', () => {
           )}
         </EuiMutationObserver>
       );
-    }
+    };
 
     const component = mount(<Wrapper value={5} />);
 

src/components/observer/mutation_observer/mutation_observer.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+import { EuiObserver } from '../observer';
+
+interface Props {
+  children: (ref: (e: HTMLElement | null) => void) => ReactNode;
+  onMutation: MutationCallback;
+  observerOptions?: MutationObserverInit;
+}
+
+export class EuiMutationObserver extends EuiObserver<Props> {
+  name = 'EuiMutationObserver';
+
+  beginObserve = () => {
+    this.observer = new MutationObserver(this.props.onMutation);
+    this.observer.observe(this.childNode!, this.props.observerOptions);
+  };
+}

src/components/observer/observer.js → src/components/observer/observer.ts

@@ -1,13 +1,18 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-
-class EuiObserver extends Component {
-  constructor(...args) {
-    super(...args);
-    this.name = 'EuiObserver';
-    this.childNode = null;
-    this.observer = null;
-  }
+import { Component, ReactNode } from 'react';
+
+interface BaseProps {
+  children: (ref: any) => ReactNode;
+}
+
+interface Observer {
+  disconnect: () => void;
+  observe: (element: Element, options?: { [key: string]: any }) => void;
+}
+
+export class EuiObserver<Props extends BaseProps> extends Component<Props> {
+  protected name: string = 'EuiObserver';
+  protected childNode: null | Element = null;
+  protected observer: null | Observer = null;
 
   componentDidMount() {
     if (this.childNode == null) {
@@ -21,7 +26,7 @@ class EuiObserver extends Component {
     }
   }
 
-  updateChildNode = ref => {
+  updateChildNode = (ref: Element) => {
     if (this.childNode === ref) return; // node hasn't changed
 
     // if there's an existing observer disconnect it
@@ -37,17 +42,11 @@ class EuiObserver extends Component {
     }
   };
 
-  beginObserve = () => {
+  beginObserve: () => void = () => {
     throw new Error('EuiObserver has no default observation method');
   };
 
   render() {
     return this.props.children(this.updateChildNode);
   }
 }
-
-EuiObserver.propTypes = {
-  children: PropTypes.func.isRequired,
-};
-
-export { EuiObserver };

src/components/observer/resize_observer/resize_observer.test.js → src/components/observer/resize_observer/resize_observer.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { mount } from 'enzyme';
 import { EuiResizeObserver } from './resize_observer';
 
-async function sleep(duration) {
+async function sleep(duration: number) {
   return new Promise(resolve => {
     setTimeout(resolve, duration);
   });
@@ -18,13 +18,15 @@ describe('EuiResizeObserver', () => {
     expect.assertions(1);
     const onResize = jest.fn();
 
-    function Wrapper({ children }) {
+    const Wrapper: FunctionComponent<{}> = ({ children }) => {
       return (
         <EuiResizeObserver onResize={onResize}>
-          {resizeRef => <div ref={resizeRef}>{children}</div>}
+          {(resizeRef: (e: HTMLElement | null) => void) => (
+            <div ref={resizeRef}>{children}</div>
+          )}
         </EuiResizeObserver>
       );
-    }
+    };
 
     const component = mount(<Wrapper children={<div>Hello World</div>} />);
 

src/components/observer/resize_observer/resize_observer.js → src/components/observer/resize_observer/resize_observer.tsx

@@ -1,14 +1,17 @@
-import PropTypes from 'prop-types';
+import { ReactNode } from 'react';
 
 import { EuiObserver } from '../observer';
 
-class EuiResizeObserver extends EuiObserver {
-  constructor(...args) {
-    super(...args);
-    this.name = 'EuiResizeObserver';
-    // Only Chrome and Opera support the `ResizeObserver` API at the time of writing
-    this.hasResizeObserver = typeof ResizeObserver !== 'undefined';
-  }
+interface Props {
+  children: (ref: (e: HTMLElement | null) => void) => ReactNode;
+  onResize: (dimensions: { height: number; width: number }) => void;
+}
+
+export class EuiResizeObserver extends EuiObserver<Props> {
+  name = 'EuiResizeObserver';
+
+  // Only Chrome and Opera support the `ResizeObserver` API at the time of writing
+  hasResizeObserver = typeof window.ResizeObserver !== 'undefined';
 
   onResize = () => {
     if (this.childNode != null) {
@@ -24,7 +27,7 @@ class EuiResizeObserver extends EuiObserver {
   beginObserve = () => {
     let observerOptions;
     if (this.hasResizeObserver) {
-      this.observer = new ResizeObserver(this.onResize);
+      this.observer = new window.ResizeObserver(this.onResize);
     } else {
       // MutationObserver fallback
       observerOptions = {
@@ -37,13 +40,8 @@ class EuiResizeObserver extends EuiObserver {
       this.observer = new MutationObserver(this.onResize);
       requestAnimationFrame(this.onResize); // Mimic ResizeObserver behavior of triggering a resize event on init
     }
-    this.observer.observe(this.childNode, observerOptions);
+    // The superclass checks that childNode is not null before invoking
+    // beginObserve()
+    this.observer.observe(this.childNode!, observerOptions);
   };
 }
-
-EuiResizeObserver.propTypes = {
-  children: PropTypes.func.isRequired,
-  onResize: PropTypes.func.isRequired,
-};
-
-export { EuiResizeObserver };

yarn.lock

@@ -1151,6 +1151,11 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/resize-observer-browser@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.1.tgz#9b7cdae9cdc8b1a7020ca7588018dac64c770866"
+  integrity sha512-5/bJS/uGB5kmpRrrAWXQnmyKlv+4TlPn4f+A2NBa93p+mt6Ht+YcNGkQKf8HMx28a9hox49ZXShtbGqZkk41Sw==
+
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"