Merge pull request #16512 from alitaheri/improve-react-file-reader-input

[react-file-reader-input] Improve typings

types/react-file-reader-input/index.d.ts

@@ -1,19 +1,47 @@
-// Type definitions for react-file-reader-input
+// Type definitions for react-file-reader-input 1.1
 // Project: https://www.npmjs.com/package/react-file-reader-input
-// Definitions by: Dmitry Rogozhny <https://github.com/dmitryrogozhny>
+// Definitions by: Dmitry Rogozhny <https://github.com/dmitryrogozhny>, Ali Taheri <https://github.com/alitaheri>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.1
 
-///<reference types="react" />
+import * as React from 'react';
 
-declare module "react-file-reader-input" {
-    interface FileInputProps {
-        as?: string;
-        onChange?: (event: React.SyntheticEvent<any>, results: any) => void;
-    }
-
-    class FileInput extends React.Component<FileInputProps, {}> {
-    }
-
-    export = FileInput;
+declare class FileInput extends React.Component<FileInput.Props, {}> {
 }
+
+declare namespace FileInput {
+    type Format = 'buffer' | 'binary' | 'url' | 'text';
+    type Result = [ProgressEvent, File];
+
+    interface Props {
+        /**
+         * what format the `FileReader` should read the file as
+         * (i.e., `'buffer'`, `'binary'`, `'url'`, `'text'`).
+         *
+         * Defaults to `'url'`.
+         */
+        as?: Format;
+
+        /**
+         * Callback function called when the files are choosen by the user.
+         *
+         * Results will be an array of arrays, the size of which depending
+         * on how many files were selected.
+         *
+         * Each result will be an array of two items:
+         *
+         * `progressEvent`: `result[0]` is a `ProgressEvent` object.
+         * You can retrieve the raw results at `progressEvent.target.result`
+         * among other things.
+         *
+         * `file`: `result[1]` is a `File` object. You can retrieve the file name
+         * at file.name among other things.
+         *
+         * @param event The event that triggered file changes
+         * @param results The array of files
+         */
+        onChange(event: React.SyntheticEvent<any>, results: Result[]): void;
+    }
+}
+
+export = FileInput;

types/react-file-reader-input/react-file-reader-input-tests.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
-import FileReaderInput = require("react-file-reader-input");
+import * as React from 'react';
+import * as FileReaderInput from 'react-file-reader-input';
 
 class MyComponent extends React.Component<{}, {}> {
-  handleChange = (event: React.SyntheticEvent<any>, results: any) => {
-    results.forEach((result: any) => {
+  handleChange = (event: React.SyntheticEvent<any>, results: FileReaderInput.Result[]) => {
+    results.forEach(result => {
       const [event, file] = result;
       console.log(`Selected file ${file.name}!`);
     });

types/react-file-reader-input/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }