WIP Convert NavDrawer to TypeScript

src/components/color_picker/utils.ts

@@ -1,4 +1,5 @@
 import { MouseEvent as ReactMouseEvent, TouchEvent, useEffect } from 'react';
+import { throttle } from '../../services/throttle'
 
 export const getEventPosition = (
   location: { x: number; y: number },
@@ -24,16 +25,6 @@ export const getEventPosition = (
   return { left: leftPos, top: topPos, width, height };
 };
 
-export const throttle = (fn: (...args: any[]) => void, wait = 50) => {
-  let time = Date.now();
-  return (...args: any[]) => {
-    if (time + wait - Date.now() < 0) {
-      fn(...args);
-      time = Date.now();
-    }
-  };
-};
-
 export function isMouseEvent<T = HTMLDivElement>(
   event: ReactMouseEvent<T> | TouchEvent<T>
 ): event is ReactMouseEvent<T> {

src/components/list_group/index.ts

@@ -1,2 +1,2 @@
-export { EuiListGroup } from './list_group';
-export { EuiListGroupItem } from './list_group_item';
+export { EuiListGroup, EuiListGroupProps } from './list_group';
+export { EuiListGroupItem, EuiListGroupItemProps } from './list_group_item';

src/components/list_group/list_group.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { EuiListGroupItem, EuiListGroupItemProps } from './list_group_item';
 import { CommonProps } from '../common';
 
-type EuiListGroupProps = CommonProps &
+export type EuiListGroupProps = CommonProps &
   HTMLAttributes<HTMLUListElement> & {
     /**
      * Add a border to the list container

src/components/nav_drawer/nav_drawer.js → src/components/nav_drawer/nav_drawer.tsx

@@ -1,29 +1,86 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, HTMLAttributes, isValidElement, ReactNode } from 'react';
 import classNames from 'classnames';
-import { EuiListGroup, EuiListGroupItem } from '../list_group';
+import {
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiListGroupProps,
+  EuiListGroupItemProps,
+} from '../list_group';
 import { EuiNavDrawerFlyout } from './nav_drawer_flyout';
-import { EuiNavDrawerGroup, ATTR_SELECTOR } from './nav_drawer_group';
+import { EuiNavDrawerGroup, ATTR_SELECTOR, EuiNavDrawerGroupProps } from './nav_drawer_group';
 import { EuiOutsideClickDetector } from '../outside_click_detector';
 import { EuiI18n } from '../i18n';
 import { EuiFlexItem, EuiFlexGroup } from '../flex';
-import { throttle } from '../color_picker/utils';
+import { throttle } from '../../services/throttle';
+import { CommonProps } from '../common';
 
 const MENU_ELEMENT_ID = 'navDrawerMenu';
 
-export class EuiNavDrawer extends Component {
-  constructor(props) {
+export type FlyoutLink =
+  EuiListGroupItemProps
+  & {
+    flyoutMenu?: {
+      title: string,
+      listItems: EuiListGroupProps["listItems"]
+    }
+  };
+
+export interface EuiNavDrawerProps
+  extends CommonProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Keep drawer locked open by default
+     */
+    isLocked?: boolean,
+    /**
+     * Returns the current state of isLocked
+     */
+    onIsLockedUpdate?: (isLocked: boolean) => void,
+    /**
+     * Adds fixed toggle button to bottom of menu area
+     */
+    showExpandButton?: boolean,
+    /**
+     * Display tooltips on side nav items
+     */
+    showToolTips?: boolean,
+    isCollapsed: boolean,
+  }
+
+interface EuiNavDrawerState {
+  isLocked: boolean,
+  isCollapsed: boolean,
+  flyoutIsCollapsed: boolean,
+  outsideClickDisabled: boolean,
+  isManagingFocus: boolean,
+  toolTipsEnabled: boolean,
+  focusReturnRef?: ReactNode,
+  navFlyoutTitle: string | null,
+  navFlyoutContent: EuiListGroupProps["listItems"],
+}
+
+export class EuiNavDrawer extends Component<EuiNavDrawerProps, EuiNavDrawerState> {
+  static get defaultProps() {
+    return {
+      showExpandButton: true,
+      showToolTips: true,
+    };
+  };
+
+  private expandButtonRef?: HTMLInputElement;
+
+  constructor(props: EuiNavDrawerProps) {
     super(props);
-    this.expandButtonRef;
 
     this.state = {
-      isLocked: props.isLocked,
+      isLocked: !!props.isLocked,
       isCollapsed: !props.isLocked,
       flyoutIsCollapsed: true,
       outsideClickDisabled: true,
       isManagingFocus: false,
       toolTipsEnabled: true,
-      focusReturnRef: null,
+      focusReturnRef: undefined,
+      navFlyoutTitle: null,
+      navFlyoutContent: undefined,
     };
   }
 
@@ -37,7 +94,7 @@ export class EuiNavDrawer extends Component {
     window.removeEventListener('resize', this.functionToCallOnWindowResize);
   }
 
-  returnOnIsLockedUpdate = isLockedState => {
+  returnOnIsLockedUpdate = (isLockedState: boolean) => {
     if (this.props.onIsLockedUpdate) {
       this.props.onIsLockedUpdate(isLockedState);
     }
@@ -124,15 +181,15 @@ export class EuiNavDrawer extends Component {
 
     // Scrolls the menu and flyout back to top when the nav drawer collapses
     setTimeout(() => {
-      document.getElementById('navDrawerMenu').scrollTop = 0;
+      document.getElementById(MENU_ELEMENT_ID)!.scrollTop = 0;
     }, 50);
 
     // In case it was locked before, remove the window resize listener
     window.removeEventListener('resize', this.functionToCallOnWindowResize);
   };
 
-  expandFlyout = (links, title, item) => {
-    const content = links;
+  expandFlyout = (items: Array<FlyoutLink>, title: string, item: FlyoutLink) => {
+    const content = items;
 
     if (this.state.navFlyoutTitle === title) {
       this.collapseFlyout();
@@ -168,7 +225,7 @@ export class EuiNavDrawer extends Component {
       {
         flyoutIsCollapsed: true,
         navFlyoutTitle: null,
-        navFlyoutContent: null,
+        navFlyoutContent: undefined,
         toolTipsEnabled: this.state.isLocked ? false : true,
         focusReturnRef: null,
       },
@@ -177,7 +234,7 @@ export class EuiNavDrawer extends Component {
         // does not allow for deep `ref` element management at present
         const element = document.querySelector(
           `#${MENU_ELEMENT_ID} [${ATTR_SELECTOR}='${focusReturn}']`
-        );
+        ) as HTMLElement;
         if (!element) return;
         requestAnimationFrame(() => {
           element.setAttribute('aria-expanded', 'false');
@@ -195,14 +252,14 @@ export class EuiNavDrawer extends Component {
     this.collapseFlyout(false);
   };
 
-  handleDrawerMenuClick = e => {
+  handleDrawerMenuClick = (e: React.MouseEvent<HTMLElement>) => {
     // walk up e.target until either:
     // 1. a[href] - close the menu
     // 2. document.body - do nothing
 
-    let element = e.target;
+    let element: HTMLElement | null = e.target as HTMLElement;
     while (
-      element !== undefined &&
+      element != null &&
       element !== document.body &&
       (element.tagName !== 'A' || element.getAttribute('href') === undefined)
     ) {
@@ -215,23 +272,24 @@ export class EuiNavDrawer extends Component {
     }
   };
 
-  modifyChildren = children => {
+  modifyChildren = (children: ReactNode): ReactNode => {
     // Loop through the EuiNavDrawer children (EuiListGroup, EuiHorizontalRules, etc)
     // Filter out falsy items
     const filteredChildren = React.Children.toArray(children);
-    return React.Children.map(filteredChildren, child => {
+    return React.Children.map(filteredChildren, (child: NonNullable<ReactNode>) => {
       // Allow for Fragments by recursive modification
-      if (child.type === React.Fragment) {
-        return this.modifyChildren(child.props.children);
-      } else if (child.type === EuiNavDrawerGroup) {
-        // Check if child is an EuiNavDrawerGroup and if it does have a flyout, add the expand function
-        return React.cloneElement(child, {
-          flyoutMenuButtonClick: this.expandFlyout,
-          showToolTips: this.state.toolTipsEnabled && this.props.showToolTips,
-        });
-      } else {
-        return child;
+      if (isValidElement(child)) {
+        if (child.type === React.Fragment) {
+          return this.modifyChildren(child.props.children);
+        } else if (child.type === EuiNavDrawerGroup) {
+          // Check if child is an EuiNavDrawerGroup and if it does have a flyout, add the expand function
+          return React.cloneElement(child, {
+            flyoutMenuButtonClick: this.expandFlyout,
+            showToolTips: this.state.toolTipsEnabled && this.props.showToolTips,
+          });
+        }
       }
+      return child;
     });
   };
 
@@ -324,7 +382,7 @@ export class EuiNavDrawer extends Component {
     const flyoutContent = (
       <EuiNavDrawerFlyout
         id="navDrawerFlyout"
-        title={this.state.navFlyoutTitle}
+        title={this.state.navFlyoutTitle || ""}
         isCollapsed={this.state.flyoutIsCollapsed}
         listItems={this.state.navFlyoutContent}
         wrapText
@@ -366,32 +424,3 @@ export class EuiNavDrawer extends Component {
   }
 }
 
-EuiNavDrawer.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-
-  /**
-   * Adds fixed toggle button to bottom of menu area
-   */
-  showExpandButton: PropTypes.bool,
-
-  /**
-   * Display tooltips on side nav items
-   */
-  showToolTips: PropTypes.bool,
-
-  /**
-   * Keep drawer locked open by default
-   */
-  isLocked: PropTypes.bool,
-
-  /**
-   * Returns the current state of isLocked
-   */
-  onIsLockedUpdate: PropTypes.func,
-};
-
-EuiNavDrawer.defaultProps = {
-  showExpandButton: true,
-  showToolTips: true,
-};

src/components/nav_drawer/nav_drawer_flyout.js → src/components/nav_drawer/nav_drawer_flyout.tsx

@@ -1,16 +1,35 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, HTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import tabbable from 'tabbable';
 
 import { keyCodes } from '../../services';
 
 import { EuiTitle } from '../title';
 import { EuiNavDrawerGroup } from './nav_drawer_group';
-import { EuiListGroup } from '../list_group/list_group';
+import { EuiListGroupProps } from '../list_group';
 import { EuiFocusTrap } from '../focus_trap';
+import { CommonProps } from '../common';
 
-export const EuiNavDrawerFlyout = ({
+export interface EuiNavDrawerFlyoutProps
+  extends CommonProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Toggle the nav drawer between collapsed and expanded
+     */
+    isCollapsed?: boolean,
+    /**
+     * Display a title atop the flyout
+     */
+    title?: string,
+    listItems: EuiListGroupProps["listItems"],
+    wrapText: EuiListGroupProps["wrapText"],
+    /**
+     * Passthrough function to be called when the flyout is closing
+     * See ./nav_drawer.js
+     */
+    onClose?: (shouldReturnFocus: boolean) => void,
+  }
+
+export const EuiNavDrawerFlyout: FunctionComponent<EuiNavDrawerFlyoutProps> = ({
   className,
   title,
   isCollapsed,
@@ -31,7 +50,7 @@ export const EuiNavDrawerFlyout = ({
     className
   );
 
-  const handleKeyDown = e => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (e.keyCode === keyCodes.ESCAPE) {
       handleClose();
     } else if (e.keyCode === keyCodes.TAB) {
@@ -51,7 +70,9 @@ export const EuiNavDrawerFlyout = ({
 
   const handleClose = (shouldReturnFocus = true) => {
     setTabbables(null);
-    onClose(shouldReturnFocus);
+    if (onClose) {
+      onClose(shouldReturnFocus);
+    }
   };
 
   return (
@@ -78,29 +99,3 @@ export const EuiNavDrawerFlyout = ({
     </div>
   );
 };
-
-EuiNavDrawerFlyout.propTypes = {
-  className: PropTypes.string,
-  listItems: EuiListGroup.propTypes.listItems,
-  wrapText: EuiListGroup.propTypes.wrapText,
-
-  /**
-   * Display a title atop the flyout
-   */
-  title: PropTypes.string,
-
-  /**
-   * Toggle the nav drawer between collapsed and expanded
-   */
-  isCollapsed: PropTypes.bool,
-
-  /**
-   * Passthrough function to be called when the flyout is closing
-   * See ./nav_drawer.js
-   */
-  onClose: PropTypes.func,
-};
-
-EuiNavDrawerFlyout.defaultProps = {
-  isCollapsed: true,
-};