chore(content-explorer): Migrate previewDialog

.prettierignore

@@ -1 +1,2 @@
 README.md
+flow-typed/*

flow-typed/npm/react-intl_v2.x.x.js

@@ -260,4 +260,5 @@ declare module "react-intl" {
   > {}
   declare type IntlShape = $npm$ReactIntl$IntlShape;
   declare type MessageDescriptor = $npm$ReactIntl$MessageDescriptor;
+  declare function useIntl(): $npm$ReactIntl$IntlShape;
 }

src/elements/content-explorer/PreviewDialog.js.flow

@@ -0,0 +1,110 @@
+/**
+ * @flow
+ * @file Content Explorer Preview Dialog
+ * @author Box
+ */
+
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { Modal } from '@box/blueprint-web';
+import cloneDeep from 'lodash/cloneDeep';
+
+import ContentPreview from '../content-preview';
+import { TYPE_FILE } from '../../constants';
+import type { ContentPreviewProps } from '../content-preview';
+import type { Token, BoxItem, Collection } from '../../common/types/core';
+import type APICache from '../../utils/Cache';
+
+import messages from '../common/messages';
+
+type PreviewDialogProps = {
+    apiHost: string,
+    appHost: string,
+    cache: APICache,
+    canDownload: boolean,
+    contentPreviewProps: ContentPreviewProps,
+    currentCollection: Collection,
+    isOpen: boolean,
+    isTouch: boolean,
+    item: BoxItem,
+    onCancel: any,
+    onDownload: any,
+    onPreview: any,
+    parentElement: HTMLElement,
+    previewLibraryVersion: string,
+    responseInterceptor?: any,
+    requestInterceptor?: any,
+    sharedLink?: string,
+    sharedLinkPassword?: string,
+    staticHost: string,
+    staticPath: string,
+    token: Token,
+};
+
+const PreviewDialog = ({
+    apiHost,
+    appHost,
+    cache,
+    canDownload,
+    contentPreviewProps,
+    currentCollection,
+    isOpen,
+    item,
+    onCancel,
+    onDownload,
+    onPreview,
+    parentElement,
+    previewLibraryVersion,
+    requestInterceptor,
+    responseInterceptor,
+    sharedLink,
+    sharedLinkPassword,
+    staticHost,
+    staticPath,
+    token,
+}: PreviewDialogProps) => {
+    const { formatMessage } = useIntl();
+    const { items }: Collection = currentCollection;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onLoad = (data: any): void => {
+        if (onPreview) {
+            onPreview(cloneDeep(data));
+        }
+    };
+
+    if (!item || !items) {
+        return null;
+    }
+
+    const files: BoxItem[] = items.filter(({ type }) => type === TYPE_FILE);
+    return (
+        <Modal onOpenChange={onCancel} open={isOpen}>
+            <Modal.Content aria-label={formatMessage(messages.preview)} container={parentElement} size="xlarge">
+                <ContentPreview
+                    {...contentPreviewProps}
+                    autoFocus
+                    apiHost={apiHost}
+                    appHost={appHost}
+                    cache={cache}
+                    canDownload={canDownload}
+                    collection={files}
+                    fileId={item.id}
+                    hasHeader
+                    onClose={onCancel}
+                    onDownload={onDownload}
+                    onLoad={onLoad}
+                    previewLibraryVersion={previewLibraryVersion}
+                    staticHost={staticHost}
+                    staticPath={staticPath}
+                    sharedLink={sharedLink}
+                    sharedLinkPassword={sharedLinkPassword}
+                    requestInterceptor={requestInterceptor}
+                    responseInterceptor={responseInterceptor}
+                    token={token}
+                />
+            </Modal.Content>
+        </Modal>
+    );
+};
+
+export default PreviewDialog;

src/elements/content-explorer/PreviewDialog.scss

@@ -0,0 +1,16 @@
+[class^='bp_modal_module_content'].bce-PreviewDialog {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 1000;
+    display: grid;
+    max-width: 100%;
+    max-height: 100%;
+    margin: 0;
+    inset: 0;
+    border-radius: 0;
+
+    .be.bcpr {
+        height: 100vh;
+    }
+}

src/elements/content-explorer/PreviewDialog.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { Modal } from '@box/blueprint-web';
+import cloneDeep from 'lodash/cloneDeep';
+
+import ContentPreview, { ContentPreviewProps } from '../content-preview';
+import { TYPE_FILE } from '../../constants';
+import type { Token, BoxItem, Collection } from '../../common/types/core';
+import type APICache from '../../utils/Cache';
+
+import messages from '../common/messages';
+
+import './PreviewDialog.scss';
+
+export interface PreviewDialogProps {
+    apiHost: string;
+    appHost: string;
+    cache: APICache;
+    canDownload: boolean;
+    contentPreviewProps: ContentPreviewProps;
+    currentCollection: Collection;
+    isOpen: boolean;
+    isTouch: boolean;
+    item: BoxItem;
+    onCancel: () => void;
+    onDownload: () => void;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onPreview: (data: any) => void;
+    parentElement: HTMLElement;
+    previewLibraryVersion: string;
+    requestInterceptor?: () => void;
+    responseInterceptor?: () => void;
+    sharedLink?: string;
+    sharedLinkPassword?: string;
+    staticHost: string;
+    staticPath: string;
+    token: Token;
+}
+
+const PreviewDialog = ({
+    apiHost,
+    appHost,
+    cache,
+    canDownload,
+    contentPreviewProps,
+    currentCollection,
+    isOpen,
+    item,
+    onCancel,
+    onDownload,
+    onPreview,
+    parentElement,
+    previewLibraryVersion,
+    requestInterceptor,
+    responseInterceptor,
+    sharedLink,
+    sharedLinkPassword,
+    staticHost,
+    staticPath,
+    token,
+}: PreviewDialogProps) => {
+    const { formatMessage } = useIntl();
+    const { items }: Collection = currentCollection;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onLoad = (data: any): void => {
+        if (onPreview) {
+            onPreview(cloneDeep(data));
+        }
+    };
+
+    if (!item || !items) {
+        return null;
+    }
+
+    const files: BoxItem[] = items.filter(({ type }) => type === TYPE_FILE);
+    return (
+        <Modal onOpenChange={onCancel} open={isOpen}>
+            <Modal.Content aria-label={formatMessage(messages.preview)} container={parentElement} size="xlarge">
+                <ContentPreview
+                    {...contentPreviewProps}
+                    autoFocus
+                    apiHost={apiHost}
+                    appHost={appHost}
+                    cache={cache}
+                    canDownload={canDownload}
+                    collection={files}
+                    fileId={item.id}
+                    hasHeader
+                    onClose={onCancel}
+                    onDownload={onDownload}
+                    onLoad={onLoad}
+                    previewLibraryVersion={previewLibraryVersion}
+                    staticHost={staticHost}
+                    staticPath={staticPath}
+                    sharedLink={sharedLink}
+                    sharedLinkPassword={sharedLinkPassword}
+                    requestInterceptor={requestInterceptor}
+                    responseInterceptor={responseInterceptor}
+                    token={token}
+                />
+            </Modal.Content>
+        </Modal>
+    );
+};
+
+export default PreviewDialog;