@orfeas126/box-ui-elements/src/elements/content-explorer/PreviewDialog.js.flow

Box UI Elements

/**
 * @flow
 * @file Content Explorer Preview Dialog
 * @author Box
 */

import * as React from 'react';
import { useIntl } from 'react-intl';
import Modal from 'react-modal';
import cloneDeep from 'lodash/cloneDeep';

import ContentPreview from '../content-preview';
import { TYPE_FILE, CLASS_MODAL_CONTENT_FULL_BLEED, CLASS_MODAL_OVERLAY, CLASS_MODAL } 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,
    appElement: HTMLElement,
    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,
   appElement,
   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;
    const onLoad = (data: any): void => {
        onPreview(cloneDeep(data));
    };

    if (!item || !items) {
        return null;
    }

    const files: BoxItem[] = items.filter(({ type }) => type === TYPE_FILE);
    return (
        <Modal
            appElement={appElement}
            className={CLASS_MODAL_CONTENT_FULL_BLEED}
            contentLabel={formatMessage(messages.preview)}
            isOpen={isOpen}
            onRequestClose={onCancel}
            overlayClassName={CLASS_MODAL_OVERLAY}
            parentSelector={() => parentElement}
            portalClassName={CLASS_MODAL}
        >
            <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>
    );
};
export default PreviewDialog;