Convert EuiFilePicker to typescript

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `19.0.0`.
+- Converted `EuiFilePicker` to TypeScript ([#2832](https://github.com/elastic/eui/issues/2832))
 
 ## [`19.0.0`](https://github.com/elastic/eui/tree/v19.0.0)
 

src/components/form/file_picker/file_picker.js → src/components/form/file_picker/file_picker.tsx

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, InputHTMLAttributes, ReactNode } from 'react';
 import classNames from 'classnames';
 
+import { CommonProps, keysOf } from '../../common';
+
 import { EuiValidatableControl } from '../validatable_control';
 import { EuiButtonEmpty } from '../../button';
 import { EuiProgress } from '../../progress';
@@ -14,56 +15,62 @@ const displayToClassNameMap = {
   large: 'euiFilePicker--large',
 };
 
-export const DISPLAYS = Object.keys(displayToClassNameMap);
-
-export class EuiFilePicker extends Component {
-  static propTypes = {
-    id: PropTypes.string,
-    name: PropTypes.string,
-    className: PropTypes.string,
-    /**
-     * The content that appears in the dropzone if no file is attached
-     */
-    initialPromptText: PropTypes.node,
-    /**
-     * Use as a callback to access the HTML FileList API
-     */
-    onChange: PropTypes.func,
-    /**
-     * Reduces the size to a typical (compressed) input
-     */
-    compressed: PropTypes.bool,
-    /**
-     * Size or type of display;
-     * `default` for normal height, similar to other controls;
-     * `large` for taller size
-     */
-    display: PropTypes.oneOf(DISPLAYS),
-    fullWidth: PropTypes.bool,
-    isInvalid: PropTypes.bool,
-    isLoading: PropTypes.bool,
-  };
+export const DISPLAYS = keysOf(displayToClassNameMap);
+
+export type EuiFilePickerDisplay = keyof typeof displayToClassNameMap;
+
+export interface EuiFilePickerProps
+  extends CommonProps,
+    InputHTMLAttributes<HTMLInputElement> {
+  id?: string;
+  name?: string;
+  className?: string;
+  /**
+   * The content that appears in the dropzone if no file is attached
+   */
+  initialPromptText?: ReactNode;
+  /**
+   * Use as a callback to access the HTML FileList API
+   */
+  onChange?: (e: any) => void;
+  /**
+   * Reduces the size to a typical (compressed) input
+   */
+  compressed?: boolean;
+  /**
+   * Size or type of display;
+   * `default` for normal height, similar to other controls;
+   * `large` for taller size
+   */
+  display?: EuiFilePickerDisplay;
+  fullWidth?: boolean;
+  isInvalid?: boolean;
+  isLoading?: boolean;
+  disabled?: boolean;
+}
 
+export class EuiFilePicker extends Component<EuiFilePickerProps> {
   static defaultProps = {
     initialPromptText: 'Select or drag and drop a file',
     compressed: false,
     display: 'large',
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      promptText: null,
-      isHoveringDrop: false,
-    };
-  }
+  state = {
+    promptText: null,
+    isHoveringDrop: false,
+  };
+
+  fileInput: HTMLInputElement | null = null;
+
+  handleChange = (filesSelected?: any) => {
+    if (!this.fileInput) return;
 
-  handleChange = filesSelected => {
     if (this.fileInput.files && this.fileInput.files.length > 1) {
       this.setState({
         promptText: `${this.fileInput.files.length} ${filesSelected}`,
       });
-    } else if (this.fileInput.files.length === 0) {
+    } else if (this.fileInput.files && this.fileInput.files.length === 0) {
       this.setState({ promptText: null });
     } else {
       this.setState({ promptText: this.fileInput.value.split('\\').pop() });
@@ -76,10 +83,13 @@ export class EuiFilePicker extends Component {
     }
   };
 
-  removeFiles = e => {
+  removeFiles = (e: any) => {
     e.stopPropagation();
     e.preventDefault();
-    this.fileInput.value = null;
+
+    if (!this.fileInput) return;
+
+    this.fileInput.value = '';
     this.handleChange();
   };
 
@@ -101,7 +111,7 @@ export class EuiFilePicker extends Component {
           'euiFilePicker.filesSelected',
         ]}
         defaults={['Clear selected files', 'files selected']}>
-        {([clearSelectedFiles, filesSelected]) => {
+        {([clearSelectedFiles, filesSelected]: any) => {
           const {
             id,
             name,
@@ -123,7 +133,7 @@ export class EuiFilePicker extends Component {
 
           const classes = classNames(
             'euiFilePicker',
-            displayToClassNameMap[display],
+            displayToClassNameMap[display!],
             {
               euiFilePicker__showDrop: this.state.isHoveringDrop,
               'euiFilePicker--compressed': compressed,