refactor(common): convert upload-dialog to TypeScript

src/elements/common/upload-dialog/UploadDialog.js

@@ -1,77 +1,2 @@
-/**
- * @flow
- * @file Content Explorer Delete Confirmation Dialog
- * @author Box
- */
-
-import * as React from 'react';
-import Modal from 'react-modal';
-import { injectIntl } from 'react-intl';
-import type { IntlShape } from 'react-intl';
-import ContentUploader from '../../content-uploader';
-import messages from '../messages';
-import { CLASS_MODAL_CONTENT_FULL_BLEED, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../../constants';
-import type { Token } from '../../../common/types/core';
-
-type Props = {
-    apiHost: string,
-    appElement: HTMLElement,
-    contentUploaderProps: ContentUploaderProps,
-    currentFolderId: ?string,
-    intl: IntlShape,
-    isOpen: boolean,
-    onClose: Function,
-    onUpload?: Function,
-    parentElement: HTMLElement,
-    requestInterceptor?: Function,
-    responseInterceptor?: Function,
-    sharedLink?: string,
-    sharedLinkPassword?: string,
-    token: Token,
-    uploadHost: string,
-};
-
-const UploadDialog = ({
-    isOpen,
-    currentFolderId,
-    token,
-    sharedLink,
-    sharedLinkPassword,
-    apiHost,
-    uploadHost,
-    onClose,
-    parentElement,
-    appElement,
-    onUpload,
-    contentUploaderProps,
-    requestInterceptor,
-    responseInterceptor,
-    intl,
-}: Props) => (
-    <Modal
-        appElement={appElement}
-        className={CLASS_MODAL_CONTENT_FULL_BLEED}
-        contentLabel={intl.formatMessage(messages.upload)}
-        isOpen={isOpen}
-        onRequestClose={onClose}
-        overlayClassName={CLASS_MODAL_OVERLAY}
-        parentSelector={() => parentElement}
-        portalClassName={`${CLASS_MODAL} be-modal-upload`}
-    >
-        <ContentUploader
-            {...contentUploaderProps}
-            apiHost={apiHost}
-            onClose={onClose}
-            onComplete={onUpload}
-            requestInterceptor={requestInterceptor}
-            responseInterceptor={responseInterceptor}
-            rootFolderId={currentFolderId}
-            sharedLink={sharedLink}
-            sharedLinkPassword={sharedLinkPassword}
-            token={token}
-            uploadHost={uploadHost}
-        />
-    </Modal>
-);
-
-export default injectIntl(UploadDialog);
+// @flow
+export { default } from './UploadDialog.tsx';

src/elements/common/upload-dialog/UploadDialog.js.flow

@@ -0,0 +1,77 @@
+/**
+ * @flow
+ * @file Content Explorer Delete Confirmation Dialog
+ * @author Box
+ */
+
+import * as React from 'react';
+import Modal from 'react-modal';
+import { injectIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+import ContentUploader from '../../content-uploader';
+import messages from '../messages';
+import { CLASS_MODAL_CONTENT_FULL_BLEED, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../../constants';
+import type { Token } from '../../../common/types/core';
+
+type Props = {
+    apiHost: string,
+    appElement: HTMLElement,
+    contentUploaderProps: ContentUploaderProps,
+    currentFolderId: ?string,
+    intl: IntlShape,
+    isOpen: boolean,
+    onClose: Function,
+    onUpload?: Function,
+    parentElement: HTMLElement,
+    requestInterceptor?: Function,
+    responseInterceptor?: Function,
+    sharedLink?: string,
+    sharedLinkPassword?: string,
+    token: Token,
+    uploadHost: string,
+};
+
+const UploadDialog = ({
+    isOpen,
+    currentFolderId,
+    token,
+    sharedLink,
+    sharedLinkPassword,
+    apiHost,
+    uploadHost,
+    onClose,
+    parentElement,
+    appElement,
+    onUpload,
+    contentUploaderProps,
+    requestInterceptor,
+    responseInterceptor,
+    intl,
+}: Props) => (
+    <Modal
+        appElement={appElement}
+        className={CLASS_MODAL_CONTENT_FULL_BLEED}
+        contentLabel={intl.formatMessage(messages.upload)}
+        isOpen={isOpen}
+        onRequestClose={onClose}
+        overlayClassName={CLASS_MODAL_OVERLAY}
+        parentSelector={() => parentElement}
+        portalClassName={`${CLASS_MODAL} be-modal-upload`}
+    >
+        <ContentUploader
+            {...contentUploaderProps}
+            apiHost={apiHost}
+            onClose={onClose}
+            onComplete={onUpload}
+            requestInterceptor={requestInterceptor}
+            responseInterceptor={responseInterceptor}
+            rootFolderId={currentFolderId}
+            sharedLink={sharedLink}
+            sharedLinkPassword={sharedLinkPassword}
+            token={token}
+            uploadHost={uploadHost}
+        />
+    </Modal>
+);
+
+export default injectIntl(UploadDialog);

src/elements/common/upload-dialog/UploadDialog.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import Modal from 'react-modal';
+import { useIntl } from 'react-intl';
+import ContentUploader from '../../content-uploader';
+import messages from '../messages';
+import { CLASS_MODAL_CONTENT_FULL_BLEED, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../../constants';
+import type { Token } from '../../../common/types/core';
+import type { ContentUploaderProps } from '../../content-uploader/ContentUploader';
+
+export interface UploadDialogProps {
+    apiHost: string;
+    appElement: HTMLElement;
+    contentUploaderProps: ContentUploaderProps;
+    currentFolderId?: string;
+    isOpen: boolean;
+    onClose: () => void;
+    onUpload?: (items: unknown[]) => void;
+    parentElement: HTMLElement;
+    requestInterceptor?: Function;
+    responseInterceptor?: Function;
+    sharedLink?: string;
+    sharedLinkPassword?: string;
+    token: Token;
+    uploadHost: string;
+}
+
+const UploadDialog = ({
+    isOpen,
+    currentFolderId,
+    token,
+    sharedLink,
+    sharedLinkPassword,
+    apiHost,
+    uploadHost,
+    onClose,
+    parentElement,
+    appElement,
+    onUpload,
+    contentUploaderProps,
+    requestInterceptor,
+    responseInterceptor,
+}: UploadDialogProps) => {
+    const { formatMessage } = useIntl();
+
+    return (
+        <Modal
+            appElement={appElement}
+            className={CLASS_MODAL_CONTENT_FULL_BLEED}
+            contentLabel={formatMessage(messages.upload)}
+            isOpen={isOpen}
+            onRequestClose={onClose}
+            overlayClassName={CLASS_MODAL_OVERLAY}
+            parentSelector={() => parentElement}
+            portalClassName={`${CLASS_MODAL} be-modal-upload`}
+        >
+            <ContentUploader
+                {...contentUploaderProps}
+                apiHost={apiHost}
+                onClose={onClose}
+                onComplete={onUpload}
+                requestInterceptor={requestInterceptor}
+                responseInterceptor={responseInterceptor}
+                rootFolderId={currentFolderId}
+                sharedLink={sharedLink}
+                sharedLinkPassword={sharedLinkPassword}
+                token={token}
+                uploadHost={uploadHost}
+            />
+        </Modal>
+    );
+};
+
+export default UploadDialog;

src/elements/common/upload-dialog/index.js

@@ -1,2 +1,2 @@
 // @flow
-export { default } from './UploadDialog';
+export { default } from './index.ts';

src/elements/common/upload-dialog/index.js.flow

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './UploadDialog';

src/elements/common/upload-dialog/index.ts

@@ -0,0 +1 @@
+export { default } from './UploadDialog';

src/elements/wrappers/ContentUploader.js

@@ -1,5 +1,4 @@
 /**
- * @flow
  * @file Base class for the Content Uploader ES6 wrapper
  * @author Box
  */
@@ -11,17 +10,14 @@ import { render } from 'react-dom';
 import ES6Wrapper from './ES6Wrapper';
 import ContentUploaderPopup from '../content-uploader/ContentUploaderPopup';
 import WrappedContentUploaderComponent from '../content-uploader/ContentUploader';
-import type { UploadFileWithAPIOptions } from '../../common/types/upload';
-import type { BoxItem } from '../../common/types/core';
-import type { ModalOptions } from '../common/flowTypes';
 
 class ContentUploader extends ES6Wrapper {
     /**
      * Callback on closing uploader. Emits 'close' event.
      *
      * @return {void}
      */
-    onClose = (): void => {
+    onClose = () => {
         this.emit('close');
     };
 
@@ -31,7 +27,7 @@ class ContentUploader extends ES6Wrapper {
      * @param {Array} data - Completed upload items
      * @return {void}
      */
-    onComplete = (data: BoxItem[]): void => {
+    onComplete = data => {
         this.emit('complete', data);
     };
 
@@ -41,7 +37,7 @@ class ContentUploader extends ES6Wrapper {
      * @param {Object} data - File and error info about failed upload
      * @return {void}
      */
-    onError = (data: any): void => {
+    onError = data => {
         this.emit('error', data);
     };
 
@@ -51,7 +47,7 @@ class ContentUploader extends ES6Wrapper {
      * @param {Object} data - Upload item
      * @return {void}
      */
-    onBeforeUpload = (data: UploadFileWithAPIOptions | File): void => {
+    onBeforeUpload = data => {
         this.emit('beforeupload', data);
     };
 
@@ -61,13 +57,13 @@ class ContentUploader extends ES6Wrapper {
      * @param {BoxItem} data - Successfully uploaded item
      * @return {void}
      */
-    onUpload = (data: BoxItem): void => {
+    onUpload = data => {
         this.emit('upload', data);
     };
 
     /** @inheritdoc */
     render() {
-        const { modal, ...rest }: { modal?: ModalOptions } = this.options;
+        const { modal, ...rest } = this.options;
         const UploaderComponent = modal ? ContentUploaderPopup : WrappedContentUploaderComponent;
 
         render(
@@ -82,7 +78,7 @@ class ContentUploader extends ES6Wrapper {
                 onError={this.onError}
                 onBeforeUpload={this.onBeforeUpload}
                 onUpload={this.onUpload}
-                modal={((modal: any): ModalOptions)}
+                modal={modal}
                 {...rest}
             />,
             this.container,