converts EuiCodeEditor to TypeScript

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiCodeEditor` to Typescript ([#2836](https://github.com/elastic/eui/pull/2836))
 - Converted `EuiFilePicker` to TypeScript ([#2832](https://github.com/elastic/eui/issues/2832))
 - Exported `EuiSelectOptionProps` type ([#2830](https://github.com/elastic/eui/pull/2830))
 - Added `paperClip` glyph to `EuiIcon` ([#2845](https://github.com/elastic/eui/pull/2845))

package.json

@@ -48,8 +48,8 @@
     "@types/enzyme": "^3.1.13",
     "@types/lodash": "^4.14.116",
     "@types/numeral": "^0.0.25",
-    "@types/react-virtualized": "^9.18.7",
     "@types/react-beautiful-dnd": "^10.1.0",
+    "@types/react-virtualized": "^9.18.7",
     "chroma-js": "^2.0.4",
     "classnames": "^2.2.5",
     "highlight.js": "^9.12.0",

scripts/jest/polyfills/mutation_observer.js

@@ -524,7 +524,7 @@ var MutationNotifier = /** @class */ (function (_super) {
   __extends(MutationNotifier, _super);
   function MutationNotifier() {
     var _this = _super.call(this) || this;
-    _this.setMaxListeners(150); // bump this as needed - some tests do not perform the unmounting lifecycle
+    _this.setMaxListeners(294); // bump this as needed - some tests do not perform the unmounting lifecycle
     return _this;
   }
   MutationNotifier.getInstance = function () {

src/components/code_editor/code_editor.test.js → src/components/code_editor/code_editor.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import sinon from 'sinon';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import { EuiCodeEditor } from './code_editor';
 import { keyCodes } from '../../services';
 import {
@@ -46,7 +45,7 @@ describe('EuiCodeEditor', () => {
   });
 
   describe('behavior', () => {
-    let component;
+    let component: ReactWrapper;
 
     beforeEach(() => {
       component = mount(<EuiCodeEditor />);
@@ -69,6 +68,7 @@ describe('EuiCodeEditor', () => {
       test('should be enabled when the ui ace box loses focus', () => {
         const hint = findTestSubject(component, 'codeEditorHint');
         hint.simulate('keyup', { keyCode: keyCodes.ENTER });
+        // @ts-ignore
         component.instance().onBlurAce();
         expect(
           findTestSubject(component, 'codeEditorHint').getDOMNode()
@@ -78,13 +78,15 @@ describe('EuiCodeEditor', () => {
 
     describe('interaction', () => {
       test('bluring the ace textbox should call a passed onBlur prop', () => {
-        const blurSpy = sinon.spy();
+        const blurSpy = jest.fn().mockName('blurSpy');
         const el = mount(<EuiCodeEditor onBlur={blurSpy} />);
+        // @ts-ignore
         el.instance().onBlurAce();
-        expect(blurSpy.called).toBe(true);
+        expect(blurSpy).toHaveBeenCalled();
       });
 
       test('pressing escape in ace textbox will enable overlay', () => {
+        // @ts-ignore
         component.instance().onKeydownAce({
           preventDefault: () => {},
           stopPropagation: () => {},

src/components/code_editor/code_editor.js → src/components/code_editor/code_editor.tsx

@@ -1,33 +1,72 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, AriaAttributes, KeyboardEventHandler } from 'react';
 import classNames from 'classnames';
-import AceEditor from 'react-ace';
+import AceEditor, { IAceEditorProps } from 'react-ace';
 
 import { htmlIdGenerator, keyCodes } from '../../services';
 import { EuiI18n } from '../i18n';
 
 const DEFAULT_MODE = 'text';
 
-function setOrRemoveAttribute(element, attributeName, value) {
+function setOrRemoveAttribute(
+  element: HTMLTextAreaElement,
+  attributeName: SupportedAriaAttribute,
+  value: SupportedAriaAttributes[SupportedAriaAttribute]
+) {
   if (value === null || value === undefined) {
     element.removeAttribute(attributeName);
   } else {
     element.setAttribute(attributeName, value);
   }
 }
 
-export class EuiCodeEditor extends Component {
-  state = {
+type SupportedAriaAttribute =
+  | 'aria-label'
+  | 'aria-labelledby'
+  | 'aria-describedby';
+type SupportedAriaAttributes = Pick<AriaAttributes, SupportedAriaAttribute>;
+
+export interface EuiCodeEditorProps extends SupportedAriaAttributes {
+  width?: string;
+  height?: string;
+  onBlur?: IAceEditorProps['onBlur'];
+  onFocus?: IAceEditorProps['onFocus'];
+  isReadOnly?: boolean;
+  setOptions: IAceEditorProps['setOptions'];
+  cursorStart?: number;
+  'data-test-subj'?: string;
+
+  /**
+   * Use string for a built-in mode or object for a custom mode
+   */
+  mode?: IAceEditorProps['mode'] | object;
+}
+
+export interface EuiCodeEditorState {
+  isHintActive: boolean;
+  isEditing: boolean;
+}
+
+export class EuiCodeEditor extends Component<
+  EuiCodeEditorProps,
+  EuiCodeEditorState
+> {
+  static defaultProps = {
+    setOptions: {},
+  };
+
+  state: EuiCodeEditorState = {
     isHintActive: true,
     isEditing: false,
   };
 
   idGenerator = htmlIdGenerator();
+  aceEditor: AceEditor | null = null;
+  editorHint: HTMLDivElement | null = null;
 
-  aceEditorRef = aceEditor => {
+  aceEditorRef = (aceEditor: AceEditor | null) => {
     if (aceEditor) {
       this.aceEditor = aceEditor;
-      const textbox = aceEditor.editor.textInput.getElement();
+      const textbox = aceEditor.editor.textInput.getElement() as HTMLTextAreaElement;
       textbox.tabIndex = -1;
       textbox.addEventListener('keydown', this.onKeydownAce);
       setOrRemoveAttribute(textbox, 'aria-label', this.props['aria-label']);
@@ -44,38 +83,40 @@ export class EuiCodeEditor extends Component {
     }
   };
 
-  onKeydownAce = ev => {
-    if (ev.keyCode === keyCodes.ESCAPE) {
+  onKeydownAce = (event: KeyboardEvent) => {
+    if (event.keyCode === keyCodes.ESCAPE) {
       // If the autocompletion context menu is open then we want to let ESCAPE close it but
       // **not** exit out of editing mode.
-      if (!this.aceEditor.editor.completer) {
-        ev.preventDefault();
-        ev.stopPropagation();
+      if (this.aceEditor !== null && !this.aceEditor.editor.completer) {
+        event.preventDefault();
+        event.stopPropagation();
         this.stopEditing();
-        this.editorHint.focus();
+        if (this.editorHint) {
+          this.editorHint.focus();
+        }
       }
     }
   };
 
-  onFocusAce = (...args) => {
+  onFocusAce: IAceEditorProps['onFocus'] = (event, editor) => {
     this.setState({
       isEditing: true,
     });
     if (this.props.onFocus) {
-      this.props.onFocus(...args);
+      this.props.onFocus(event, editor);
     }
   };
 
-  onBlurAce = (...args) => {
+  onBlurAce: IAceEditorProps['onBlur'] = (event, editor) => {
     this.stopEditing();
     if (this.props.onBlur) {
-      this.props.onBlur(...args);
+      this.props.onBlur(event, editor);
     }
   };
 
-  onKeyDownHint = ev => {
-    if (ev.keyCode === keyCodes.ENTER) {
-      ev.preventDefault();
+  onKeyDownHint: KeyboardEventHandler<HTMLDivElement> = event => {
+    if (event.keyCode === keyCodes.ENTER) {
+      event.preventDefault();
       this.startEditing();
     }
   };
@@ -84,7 +125,9 @@ export class EuiCodeEditor extends Component {
     this.setState({
       isHintActive: false,
     });
-    this.aceEditor.editor.textInput.focus();
+    if (this.aceEditor !== null) {
+      this.aceEditor.editor.textInput.focus();
+    }
   };
 
   stopEditing() {
@@ -99,7 +142,9 @@ export class EuiCodeEditor extends Component {
   }
 
   setCustomMode() {
-    this.aceEditor.editor.getSession().setMode(this.props.mode);
+    if (this.aceEditor !== null) {
+      this.aceEditor.editor.getSession().setMode(this.props.mode);
+    }
   }
 
   componentDidMount() {
@@ -108,7 +153,7 @@ export class EuiCodeEditor extends Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: EuiCodeEditorProps) {
     if (this.props.mode !== prevProps.mode && this.isCustomMode()) {
       this.setCustomMode();
     }
@@ -161,7 +206,7 @@ export class EuiCodeEditor extends Component {
         ref={hint => {
           this.editorHint = hint;
         }}
-        tabIndex="0"
+        tabIndex={0}
         role="button"
         onClick={this.startEditing}
         onKeyDown={this.onKeyDownHint}
@@ -206,7 +251,7 @@ export class EuiCodeEditor extends Component {
         <AceEditor
           // Setting a default, existing `mode` is necessary to properly initialize the editor
           // prior to dynamically setting a custom mode (https://github.com/elastic/eui/pull/2616)
-          mode={this.isCustomMode() ? DEFAULT_MODE : mode}
+          mode={this.isCustomMode() ? DEFAULT_MODE : (mode as string)} // https://github.com/securingsincity/react-ace/pull/771
           name={this.idGenerator()}
           ref={this.aceEditorRef}
           width={width}
@@ -224,22 +269,3 @@ export class EuiCodeEditor extends Component {
     );
   }
 }
-
-EuiCodeEditor.propTypes = {
-  width: PropTypes.string,
-  height: PropTypes.string,
-  onBlur: PropTypes.func,
-  isReadOnly: PropTypes.bool,
-  setOptions: PropTypes.object,
-  cursorStart: PropTypes.number,
-  'data-test-subj': PropTypes.string,
-
-  /**
-   * Use string for a built-in mode or object for a custom mode
-   */
-  mode: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-};
-
-EuiCodeEditor.defaultProps = {
-  setOptions: {},
-};

src/components/code_editor/index.ts

@@ -0,0 +1 @@
+export { EuiCodeEditor, EuiCodeEditorProps } from './code_editor';