Image preview modal for mobile breakpoint #2470
+774
−11
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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,57 @@ | ||
| import renderer, { act } from 'react-test-renderer'; | ||
| import MediaModal from './MediaModal'; | ||
| import React from 'react'; | ||
|
|
||
| describe('MediaModal', () => { | ||
| const mockClose = jest.fn(); | ||
|
|
||
| const renderMediaModal = (isOpen: boolean) => | ||
| renderer.create( | ||
| <MediaModal isOpen={isOpen} onClose={mockClose}> | ||
| <div>Test Content</div> | ||
| </MediaModal> | ||
| ); | ||
|
|
||
| beforeEach(() => { | ||
| mockClose.mockReset(); | ||
| }); | ||
|
|
||
| it('does not render when isOpen is false', () => { | ||
| const tree = renderMediaModal(false).toJSON(); | ||
| expect(tree).toBeNull(); | ||
| }); | ||
|
|
||
| it('renders correctly when isOpen is true', () => { | ||
| const tree = renderMediaModal(true).toJSON(); | ||
| expect(tree).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('calls onClose when overlay is clicked', () => { | ||
| const component = renderMediaModal(true); | ||
|
|
||
| const overlay = component.root | ||
| .findAllByType('div') | ||
| .find(el => el.props.onClick === mockClose); | ||
| if (!overlay) { | ||
| throw new Error('Overlay div with onClick handler not found'); | ||
| } | ||
|
|
||
| act(() => { | ||
| overlay.props.onClick(); | ||
| }); | ||
|
|
||
| expect(mockClose).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it('calls onClose when close button is clicked', () => { | ||
| const component = renderMediaModal(true); | ||
|
|
||
| const closeButton = component.root.findAllByType('button')[0]; | ||
|
|
||
| act(() => { | ||
| closeButton.props.onClick(); | ||
| }); | ||
|
|
||
| expect(mockClose).toHaveBeenCalled(); | ||
| }); | ||
| }); |
This file contains hidden or 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,95 @@ | ||
| import React from 'react'; | ||
| import styled from 'styled-components/macro'; | ||
| import ScrollLock from '../../../components/ScrollLock'; | ||
| import theme from '../../../theme'; | ||
|
|
||
| const buttonHeight = 4.2; // rem | ||
| const buttonMargin = 0.5; // rem | ||
|
|
||
| // tslint:disable-next-line:variable-name | ||
| const ScrollableContent = styled.div` | ||
| background: white; | ||
| max-width: 100vw; | ||
| max-height: calc(100vh - ${(buttonHeight + buttonMargin * 2) * 2}rem); | ||
| overflow: auto; | ||
|
|
||
| > img { | ||
| ${/* | ||
| fix ScrollableContent height issue where it is slightly larger than | ||
| the image and leaves a gap at the bottom */ ''} | ||
| display: block; | ||
| } | ||
| `; | ||
|
|
||
|
|
||
| // tslint:disable-next-line:variable-name | ||
| const FloatingCloseButton = styled.button` | ||
| position: absolute; | ||
| top: -${buttonHeight + buttonMargin}rem; | ||
| right: ${buttonMargin}rem; | ||
| z-index: 10; | ||
| background: none; | ||
| border: none; | ||
| padding: 0; | ||
| cursor: pointer; | ||
| width: ${buttonHeight}rem; | ||
| height: ${buttonHeight}rem; | ||
| `; | ||
|
|
||
| // tslint:disable-next-line:variable-name | ||
| const ContentContainer = styled.div` | ||
| position: relative; | ||
| pointer-events: auto; | ||
| `; | ||
|
|
||
| // tslint:disable-next-line:variable-name | ||
| const ModalWrapper = styled.div` | ||
| position: fixed; | ||
| inset: 0; | ||
| overflow: hidden; | ||
| z-index: ${theme.zIndex.highlightSummaryPopup + 1}; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| pointer-events: none; | ||
|
There was a problem hiding this comment. Why There was a problem hiding this comment. The modalwrapper needs to take up the whole screen for styling purposes but it eats up click events needed for the Scrolllock. We need the click event to pass through so we can click on overlay to close the modal. |
||
| `; | ||
|
|
||
|
|
||
| // tslint:disable-next-line:variable-name | ||
| const CloseIcon = () => ( | ||
| <svg width='42' height='42' viewBox='0 0 42 42' xmlns='http://www.w3.org/2000/svg'> | ||
| <rect x='1' y='1' width='40' height='40' rx='20' stroke='white' fill='none' /> | ||
| <line x1='16' y1='16' x2='26' y2='26' stroke='white' strokeWidth='2' strokeLinecap='round' /> | ||
| <line x1='26' y1='16' x2='16' y2='26' stroke='white' strokeWidth='2' strokeLinecap='round' /> | ||
| </svg> | ||
| ); | ||
|
|
||
| interface MediaModalProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| children: React.ReactNode; | ||
| } | ||
| // tslint:disable-next-line:variable-name | ||
| const MediaModal: React.FC<MediaModalProps> = ({ isOpen, onClose, children }) => { | ||
| if (!isOpen) return null; | ||
|
|
||
| return ( | ||
| <> | ||
| <ScrollLock | ||
| onClick={onClose} | ||
| overlay={true} | ||
| zIndex={theme.zIndex.highlightSummaryPopup} | ||
| /> | ||
| <ModalWrapper aria-modal='true' role='dialog'> | ||
| <ContentContainer > | ||
| <FloatingCloseButton onClick={onClose} aria-label='Close media preview'> | ||
| <CloseIcon /> | ||
| </FloatingCloseButton> | ||
| <ScrollableContent>{children}</ScrollableContent> | ||
| </ContentContainer> | ||
| </ModalWrapper> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default MediaModal; | ||
This file contains hidden or 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 hidden or 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
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this sorta needs to be taking up the whole screen so that it can center things properly, but its gobbling click events so clicking on the overlay isn't closing things. i think you can set a css prop on here to allow click events to pass through and that'll fix it