-
Notifications
You must be signed in to change notification settings - Fork 308
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(content-explorer): Migrate previewDialog
- Loading branch information
1 parent
82f2cc7
commit f095b0e
Showing
7 changed files
with
417 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| README.md | ||
| flow-typed/* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import * as React from 'react'; | ||
| import { useIntl } from 'react-intl'; | ||
| import Modal from 'react-modal'; | ||
| import cloneDeep from 'lodash/cloneDeep'; | ||
|
|
||
| import ContentPreview, { ContentPreviewProps } from '../content-preview'; | ||
| import { TYPE_FILE, CLASS_MODAL_CONTENT_FULL_BLEED, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../constants'; | ||
| import type { Token, BoxItem, Collection } from '../../common/types/core'; | ||
| import type APICache from '../../utils/Cache'; | ||
|
|
||
| import messages from '../common/messages'; | ||
|
|
||
| export interface PreviewDialogProps { | ||
| appElement: HTMLElement; | ||
| 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 = ({ | ||
| appElement, | ||
| 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 | ||
| isOpen={isOpen} | ||
| parentSelector={() => parentElement} | ||
| portalClassName={`${CLASS_MODAL} be-modal-preview`} | ||
| className={CLASS_MODAL_CONTENT_FULL_BLEED} | ||
| overlayClassName={CLASS_MODAL_OVERLAY} | ||
| contentLabel={formatMessage(messages.preview)} | ||
| onRequestClose={onCancel} | ||
| appElement={appElement} | ||
| > | ||
| <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; |
80 changes: 80 additions & 0 deletions
80
src/elements/content-explorer/__tests__/PreviewDialog.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import * as React from 'react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { render, screen, waitFor } from '../../../test-utils/testing-library'; | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| import APICache from '../../../utils/Cache'; | ||
|
|
||
| import PreviewDialog, { PreviewDialogProps } from '../PreviewDialog'; | ||
|
|
||
| jest.mock('react-modal', () => { | ||
| return jest.fn(({ children }) => <div aria-label="Preview">{children}</div>); | ||
| }); | ||
|
|
||
| describe('elements/content-explorer/PreviewDialog', () => { | ||
| const defaultProps = { | ||
| appElement: document.body, | ||
| apiHost: 'https://api.box.com', | ||
| appHost: 'https://app.box.com', | ||
| cache: new APICache(), | ||
| canDownload: true, | ||
| contentPreviewProps: {}, | ||
| currentCollection: { items: [{ id: '1', type: 'file' }] }, | ||
| isOpen: true, | ||
| isTouch: false, | ||
| item: { id: '1', type: 'file' }, | ||
| onCancel: jest.fn(), | ||
| onDownload: jest.fn(), | ||
| onPreview: jest.fn(), | ||
| parentElement: document.createElement('div'), | ||
| previewLibraryVersion: '1.0.0', | ||
| staticHost: 'https://static.box.com', | ||
| staticPath: '/static', | ||
| token: 'token', | ||
| }; | ||
|
|
||
| const renderComponent = (props?: Partial<PreviewDialogProps>) => | ||
| render(<PreviewDialog {...defaultProps} {...props} />); | ||
|
|
||
| test('renders', async () => { | ||
| renderComponent(); | ||
| expect(await screen.findByLabelText('Preview')).toBeInTheDocument(); | ||
| expect(await screen.findByRole('button', { name: 'Close' })); | ||
| }); | ||
|
|
||
| test('calls onCancel when modal is closed', async () => { | ||
| renderComponent(); | ||
| const closeButton = screen.getByRole('button', { name: 'Close' }); | ||
| await userEvent.click(closeButton); | ||
| expect(defaultProps.onCancel).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| test('does not render when item is null', () => { | ||
| const props = { item: null }; | ||
| const { container } = renderComponent(props); | ||
| expect(container.firstChild).toBeNull(); | ||
| }); | ||
|
|
||
| test('does not render when items are null', () => { | ||
| const props = { currentCollection: { items: null } }; | ||
| const { container } = renderComponent(props); | ||
| expect(container.firstChild).toBeNull(); | ||
| }); | ||
|
|
||
| test('calls onPreview with cloned data on load', () => { | ||
| const data = { id: '1', type: 'file' }; | ||
| renderComponent(); | ||
| waitFor(() => { | ||
| expect(defaultProps.onPreview).toHaveBeenCalledWith(expect.objectContaining(data)); | ||
| }); | ||
| }); | ||
|
|
||
| test('does not call onPreview with cloned data on load', () => { | ||
| const data = { id: '1', type: 'file' }; | ||
| renderComponent({ onPreview: null }); | ||
| waitFor(() => { | ||
| expect(defaultProps.onPreview).not.toHaveBeenCalledWith(expect.objectContaining(data)); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.