accepts HTMLAttributes AriaAttributes per review feedback

elastic · Feb 19, 2020 · a928368 · a928368
1 parent ab06cd0
commit a928368
Showing 1 changed file with 32 additions and 29 deletions.
diff --git a/src/components/code_editor/code_editor.tsx b/src/components/code_editor/code_editor.tsx
@@ -1,4 +1,9 @@
-import React, { Component, AriaAttributes, KeyboardEventHandler } from 'react';
+import React, {
+  Component,
+  AriaAttributes,
+  KeyboardEventHandler,
+  HTMLAttributes,
+} from 'react';
 import classNames from 'classnames';
 import AceEditor, { IAceEditorProps } from 'react-ace';
 
@@ -9,23 +14,17 @@ const DEFAULT_MODE = 'text';
 
 function setOrRemoveAttribute(
   element: HTMLTextAreaElement,
-  attributeName: SupportedAriaAttribute,
-  value: SupportedAriaAttributes[SupportedAriaAttribute]
+  attributeName: keyof AriaAttributes,
+  value: AriaAttributes[keyof AriaAttributes]
 ) {
   if (value === null || value === undefined) {
     element.removeAttribute(attributeName);
   } else {
-    element.setAttribute(attributeName, value);
+    element.setAttribute(attributeName, String(value));
   }
 }
 
-type SupportedAriaAttribute =
-  | 'aria-label'
-  | 'aria-labelledby'
-  | 'aria-describedby';
-type SupportedAriaAttributes = Pick<AriaAttributes, SupportedAriaAttribute>;
-
-export interface EuiCodeEditorProps extends SupportedAriaAttributes {
+export interface EuiCodeEditorProps extends HTMLAttributes<HTMLDivElement> {
   width?: string;
   height?: string;
   onBlur?: IAceEditorProps['onBlur'];
@@ -241,30 +240,34 @@ export class EuiCodeEditor extends Component<
       </div>
     );
 
+    const aceEditor = (
+      // @ts-ignore
+      <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 as string)} // https://github.com/securingsincity/react-ace/pull/771
+        name={this.idGenerator()}
+        ref={this.aceEditorRef}
+        width={width}
+        height={height}
+        onFocus={this.onFocusAce}
+        onBlur={this.onBlurAce}
+        setOptions={options}
+        editorProps={{
+          $blockScrolling: Infinity,
+        }}
+        cursorStart={filteredCursorStart}
+        {...rest}
+      />
+    );
+
     return (
       <div
         className={classes}
         style={{ width, height }}
         data-test-subj={dataTestSubj}>
         {prompt}
-
-        <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 as string)} // https://github.com/securingsincity/react-ace/pull/771
-          name={this.idGenerator()}
-          ref={this.aceEditorRef}
-          width={width}
-          height={height}
-          onFocus={this.onFocusAce}
-          onBlur={this.onBlurAce}
-          setOptions={options}
-          editorProps={{
-            $blockScrolling: Infinity,
-          }}
-          cursorStart={filteredCursorStart}
-          {...rest}
-        />
+        {aceEditor}
       </div>
     );
   }