[WIP] Migrate FileInput and related components to TypeScript

- [x] FileInputPreview
- [x] ImageInputPreview
- [ ] FileInput
- [ ] ImageInput

Author: djhi

packages/ra-ui-materialui/src/input/FileInputPreview.spec.js packages/ra-ui-materialui/src/input/FileInputPreview.spec.tsx

@@ -4,7 +4,21 @@ import { render, cleanup, fireEvent } from '@testing-library/react';
 import FileInputPreview from './FileInputPreview';
 
 describe('<FileInputPreview />', () => {
-    afterEach(cleanup);
+    beforeAll(() => {
+        // @ts-ignore
+        global.URL.revokeObjectURL = jest.fn();
+    });
+
+    afterAll(() => {
+        // @ts-ignore
+        delete global.URL.revokeObjectURL;
+    });
+
+    afterEach(() => {
+        // @ts-ignore
+        global.URL.revokeObjectURL.mockClear();
+        cleanup();
+    });
 
     const file = {
         preview: 'previewUrl',
@@ -13,7 +27,6 @@ describe('<FileInputPreview />', () => {
     const defaultProps = {
         file,
         onRemove: jest.fn(),
-        revokeObjectURL: jest.fn(),
     };
 
     it('should call `onRemove` prop when clicking on remove button', () => {
@@ -41,36 +54,28 @@ describe('<FileInputPreview />', () => {
     });
 
     it('should clean up generated URLs for preview', () => {
-        const revokeObjectURL = jest.fn();
-
         const { unmount } = render(
-            <FileInputPreview
-                {...defaultProps}
-                revokeObjectURL={revokeObjectURL}
-            >
+            <FileInputPreview {...defaultProps}>
                 <div id="child">Child</div>
             </FileInputPreview>
         );
 
         unmount();
-        expect(revokeObjectURL).toHaveBeenCalledWith('previewUrl');
+        // @ts-ignore
+        expect(global.URL.revokeObjectURL).toHaveBeenCalledWith('previewUrl');
     });
 
     it('should not try to clean up preview urls if not passed a File object with a preview', () => {
         const file = {};
-        const revokeObjectURL = jest.fn();
 
         const { unmount } = render(
-            <FileInputPreview
-                {...defaultProps}
-                file={file}
-                revokeObjectURL={revokeObjectURL}
-            >
+            <FileInputPreview {...defaultProps} file={file}>
                 <div id="child">Child</div>
             </FileInputPreview>
         );
 
         unmount();
-        expect(revokeObjectURL).not.toHaveBeenCalled();
+        // @ts-ignore
+        expect(global.URL.revokeObjectURL).not.toHaveBeenCalled();
     });
 });

packages/ra-ui-materialui/src/input/FileInputPreview.js packages/ra-ui-materialui/src/input/FileInputPreview.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, ReactNode, FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core';
 import RemoveCircle from '@material-ui/icons/RemoveCircle';
@@ -12,11 +12,17 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const FileInputPreview = ({
+interface Props {
+    children: ReactNode;
+    className?: string;
+    onRemove: () => void;
+    file: any;
+}
+
+const FileInputPreview: FunctionComponent<Props> = ({
     children,
     className,
     onRemove,
-    revokeObjectURL,
     file,
     ...rest
 }) => {
@@ -28,12 +34,10 @@ const FileInputPreview = ({
             const preview = file.rawFile ? file.rawFile.preview : file.preview;
 
             if (preview) {
-                revokeObjectURL
-                    ? revokeObjectURL(preview)
-                    : window.URL.revokeObjectURL(preview);
+                window.URL.revokeObjectURL(preview);
             }
         };
-    }, [file, revokeObjectURL]);
+    }, [file]);
 
     return (
         <div className={className} {...rest}>
@@ -55,7 +59,6 @@ FileInputPreview.propTypes = {
     className: PropTypes.string,
     file: PropTypes.object,
     onRemove: PropTypes.func.isRequired,
-    revokeObjectURL: PropTypes.func,
 };
 
 FileInputPreview.defaultProps = {