From 6e7c8309ddad1e2286a9b6c2362406d6163db804 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 25 Feb 2025 00:12:57 +0000 Subject: [PATCH 1/4] refactor(common): convert upload-dialog to TypeScript --- .../{UploadDialog.js => UploadDialog.js.flow} | 0 .../common/upload-dialog/UploadDialog.tsx | 73 +++++++++++++++++++ .../upload-dialog/{index.js => index.js.flow} | 0 src/elements/common/upload-dialog/index.ts | 1 + 4 files changed, 74 insertions(+) rename src/elements/common/upload-dialog/{UploadDialog.js => UploadDialog.js.flow} (100%) create mode 100644 src/elements/common/upload-dialog/UploadDialog.tsx rename src/elements/common/upload-dialog/{index.js => index.js.flow} (100%) create mode 100644 src/elements/common/upload-dialog/index.ts diff --git a/src/elements/common/upload-dialog/UploadDialog.js b/src/elements/common/upload-dialog/UploadDialog.js.flow similarity index 100% rename from src/elements/common/upload-dialog/UploadDialog.js rename to src/elements/common/upload-dialog/UploadDialog.js.flow diff --git a/src/elements/common/upload-dialog/UploadDialog.tsx b/src/elements/common/upload-dialog/UploadDialog.tsx new file mode 100644 index 0000000000..5d5ec3a270 --- /dev/null +++ b/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 ( + parentElement} + portalClassName={`${CLASS_MODAL} be-modal-upload`} + > + + + ); +}; + +export default UploadDialog; diff --git a/src/elements/common/upload-dialog/index.js b/src/elements/common/upload-dialog/index.js.flow similarity index 100% rename from src/elements/common/upload-dialog/index.js rename to src/elements/common/upload-dialog/index.js.flow diff --git a/src/elements/common/upload-dialog/index.ts b/src/elements/common/upload-dialog/index.ts new file mode 100644 index 0000000000..0083f83248 --- /dev/null +++ b/src/elements/common/upload-dialog/index.ts @@ -0,0 +1 @@ +export { default } from './UploadDialog'; From 3166f9bec0bc337d5153d6e4c65b3fe120c7dd16 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 25 Feb 2025 00:22:23 +0000 Subject: [PATCH 2/4] fix: resolve TypeScript syntax errors --- src/elements/common/upload-dialog/UploadDialog.js | 2 ++ src/elements/common/upload-dialog/index.js | 2 ++ src/elements/wrappers/ContentUploader.js | 9 +++++++++ 3 files changed, 13 insertions(+) create mode 100644 src/elements/common/upload-dialog/UploadDialog.js create mode 100644 src/elements/common/upload-dialog/index.js diff --git a/src/elements/common/upload-dialog/UploadDialog.js b/src/elements/common/upload-dialog/UploadDialog.js new file mode 100644 index 0000000000..8f3f0c7a5c --- /dev/null +++ b/src/elements/common/upload-dialog/UploadDialog.js @@ -0,0 +1,2 @@ +// @flow +export { default } from './UploadDialog.tsx'; diff --git a/src/elements/common/upload-dialog/index.js b/src/elements/common/upload-dialog/index.js new file mode 100644 index 0000000000..f34cd60e40 --- /dev/null +++ b/src/elements/common/upload-dialog/index.js @@ -0,0 +1,2 @@ +// @flow +export { default } from './index.ts'; diff --git a/src/elements/wrappers/ContentUploader.js b/src/elements/wrappers/ContentUploader.js index 036b261269..c99751b6ac 100644 --- a/src/elements/wrappers/ContentUploader.js +++ b/src/elements/wrappers/ContentUploader.js @@ -11,8 +11,11 @@ import { render } from 'react-dom'; import ES6Wrapper from './ES6Wrapper'; import ContentUploaderPopup from '../content-uploader/ContentUploaderPopup'; import WrappedContentUploaderComponent from '../content-uploader/ContentUploader'; +// @ts-ignore import type { UploadFileWithAPIOptions } from '../../common/types/upload'; +// @ts-ignore import type { BoxItem } from '../../common/types/core'; +// @ts-ignore import type { ModalOptions } from '../common/flowTypes'; class ContentUploader extends ES6Wrapper { @@ -21,6 +24,7 @@ class ContentUploader extends ES6Wrapper { * * @return {void} */ + // @ts-ignore onClose = (): void => { this.emit('close'); }; @@ -31,6 +35,7 @@ class ContentUploader extends ES6Wrapper { * @param {Array} data - Completed upload items * @return {void} */ + // @ts-ignore onComplete = (data: BoxItem[]): void => { this.emit('complete', data); }; @@ -41,6 +46,7 @@ class ContentUploader extends ES6Wrapper { * @param {Object} data - File and error info about failed upload * @return {void} */ + // @ts-ignore onError = (data: any): void => { this.emit('error', data); }; @@ -51,6 +57,7 @@ class ContentUploader extends ES6Wrapper { * @param {Object} data - Upload item * @return {void} */ + // @ts-ignore onBeforeUpload = (data: UploadFileWithAPIOptions | File): void => { this.emit('beforeupload', data); }; @@ -61,12 +68,14 @@ class ContentUploader extends ES6Wrapper { * @param {BoxItem} data - Successfully uploaded item * @return {void} */ + // @ts-ignore onUpload = (data: BoxItem): void => { this.emit('upload', data); }; /** @inheritdoc */ render() { + // @ts-ignore const { modal, ...rest }: { modal?: ModalOptions } = this.options; const UploaderComponent = modal ? ContentUploaderPopup : WrappedContentUploaderComponent; From aa8771414299e1da6871f73302e71b0fca62e2d0 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 25 Feb 2025 00:27:30 +0000 Subject: [PATCH 3/4] fix: remove Flow type annotations to resolve syntax errors --- src/elements/wrappers/ContentUploader.js | 27 ++++++------------------ 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/src/elements/wrappers/ContentUploader.js b/src/elements/wrappers/ContentUploader.js index c99751b6ac..2a9e76a157 100644 --- a/src/elements/wrappers/ContentUploader.js +++ b/src/elements/wrappers/ContentUploader.js @@ -1,5 +1,4 @@ /** - * @flow * @file Base class for the Content Uploader ES6 wrapper * @author Box */ @@ -11,12 +10,6 @@ import { render } from 'react-dom'; import ES6Wrapper from './ES6Wrapper'; import ContentUploaderPopup from '../content-uploader/ContentUploaderPopup'; import WrappedContentUploaderComponent from '../content-uploader/ContentUploader'; -// @ts-ignore -import type { UploadFileWithAPIOptions } from '../../common/types/upload'; -// @ts-ignore -import type { BoxItem } from '../../common/types/core'; -// @ts-ignore -import type { ModalOptions } from '../common/flowTypes'; class ContentUploader extends ES6Wrapper { /** @@ -24,8 +17,7 @@ class ContentUploader extends ES6Wrapper { * * @return {void} */ - // @ts-ignore - onClose = (): void => { + onClose = () => { this.emit('close'); }; @@ -35,8 +27,7 @@ class ContentUploader extends ES6Wrapper { * @param {Array} data - Completed upload items * @return {void} */ - // @ts-ignore - onComplete = (data: BoxItem[]): void => { + onComplete = data => { this.emit('complete', data); }; @@ -46,8 +37,7 @@ class ContentUploader extends ES6Wrapper { * @param {Object} data - File and error info about failed upload * @return {void} */ - // @ts-ignore - onError = (data: any): void => { + onError = data => { this.emit('error', data); }; @@ -57,8 +47,7 @@ class ContentUploader extends ES6Wrapper { * @param {Object} data - Upload item * @return {void} */ - // @ts-ignore - onBeforeUpload = (data: UploadFileWithAPIOptions | File): void => { + onBeforeUpload = data => { this.emit('beforeupload', data); }; @@ -68,15 +57,13 @@ class ContentUploader extends ES6Wrapper { * @param {BoxItem} data - Successfully uploaded item * @return {void} */ - // @ts-ignore - onUpload = (data: BoxItem): void => { + onUpload = data => { this.emit('upload', data); }; /** @inheritdoc */ render() { - // @ts-ignore - const { modal, ...rest }: { modal?: ModalOptions } = this.options; + const { modal, ...rest } = this.options; const UploaderComponent = modal ? ContentUploaderPopup : WrappedContentUploaderComponent; render( @@ -91,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, From a653c4946b57450be8b0a42aa101eb1ef3c41ac1 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 27 Feb 2025 02:32:19 +0000 Subject: [PATCH 4/4] fix: address PR feedback --- .../common/upload-dialog/UploadDialog.js | 2 -- src/elements/common/upload-dialog/index.js | 2 -- src/elements/wrappers/ContentUploader.js | 18 +++++++++++------- 3 files changed, 11 insertions(+), 11 deletions(-) delete mode 100644 src/elements/common/upload-dialog/UploadDialog.js delete mode 100644 src/elements/common/upload-dialog/index.js diff --git a/src/elements/common/upload-dialog/UploadDialog.js b/src/elements/common/upload-dialog/UploadDialog.js deleted file mode 100644 index 8f3f0c7a5c..0000000000 --- a/src/elements/common/upload-dialog/UploadDialog.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './UploadDialog.tsx'; diff --git a/src/elements/common/upload-dialog/index.js b/src/elements/common/upload-dialog/index.js deleted file mode 100644 index f34cd60e40..0000000000 --- a/src/elements/common/upload-dialog/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './index.ts'; diff --git a/src/elements/wrappers/ContentUploader.js b/src/elements/wrappers/ContentUploader.js index 2a9e76a157..036b261269 100644 --- a/src/elements/wrappers/ContentUploader.js +++ b/src/elements/wrappers/ContentUploader.js @@ -1,4 +1,5 @@ /** + * @flow * @file Base class for the Content Uploader ES6 wrapper * @author Box */ @@ -10,6 +11,9 @@ 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 { /** @@ -17,7 +21,7 @@ class ContentUploader extends ES6Wrapper { * * @return {void} */ - onClose = () => { + onClose = (): void => { this.emit('close'); }; @@ -27,7 +31,7 @@ class ContentUploader extends ES6Wrapper { * @param {Array} data - Completed upload items * @return {void} */ - onComplete = data => { + onComplete = (data: BoxItem[]): void => { this.emit('complete', data); }; @@ -37,7 +41,7 @@ class ContentUploader extends ES6Wrapper { * @param {Object} data - File and error info about failed upload * @return {void} */ - onError = data => { + onError = (data: any): void => { this.emit('error', data); }; @@ -47,7 +51,7 @@ class ContentUploader extends ES6Wrapper { * @param {Object} data - Upload item * @return {void} */ - onBeforeUpload = data => { + onBeforeUpload = (data: UploadFileWithAPIOptions | File): void => { this.emit('beforeupload', data); }; @@ -57,13 +61,13 @@ class ContentUploader extends ES6Wrapper { * @param {BoxItem} data - Successfully uploaded item * @return {void} */ - onUpload = data => { + onUpload = (data: BoxItem): void => { this.emit('upload', data); }; /** @inheritdoc */ render() { - const { modal, ...rest } = this.options; + const { modal, ...rest }: { modal?: ModalOptions } = this.options; const UploaderComponent = modal ? ContentUploaderPopup : WrappedContentUploaderComponent; render( @@ -78,7 +82,7 @@ class ContentUploader extends ES6Wrapper { onError={this.onError} onBeforeUpload={this.onBeforeUpload} onUpload={this.onUpload} - modal={modal} + modal={((modal: any): ModalOptions)} {...rest} />, this.container,