Skip to content
This repository was archived by the owner on Sep 17, 2020. It is now read-only.

modal component #16

Open
suhmantha1 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

modal component #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions components/modal/_modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import { Flex, Box } from 'rebass/styled-components'
import FocusTrap from 'focus-trap-react'

const Modal = ({ open, onClose, bgStyles, modalStyles, children }) => {
const closeModal = () => {
if (onClose) {
onClose()
}
}

const handleScreenLock = (modalIsOpen) => {
const { body } = document

// TODO inline styles
if (modalIsOpen) {
body.classList.add('disable-scroll')
} else {
body.classList.remove('disable-scroll')
}
}

const _onKeydown = (event) => {
// TODO keycode deprecated
switch (event.keyCode) {
case 27:
// Escape key
closeModal()
break
default:
break
}
}

useEffect(() => {
// When the modal is open listen to keyboard events & lock body scroll
if (open) {
handleScreenLock(true)
document.addEventListener('keydown', _onKeydown, false)
} else {
handleScreenLock(false)
document.removeEventListener('keydown', _onKeydown, false)
}

return () => {
handleScreenLock(false)
document.removeEventListener('keydown', _onKeydown, false)
}
}, [open])

// TODO add motionbox to fade in
return (
<>
{open && (
<FocusTrap>
<Flex
role="dialog"
aria-modal="true"
sx={{
position: 'fixed',
top: 0,
left: 0,
alignItems: 'center',
justifyContent: 'center',
width: '100vw',
height: '100vh',
zIndex: '99999999',
}}>
<Box
onClick={closeModal}
sx={{
display: 'block',
background: 'rgba(0, 0, 0, 0.4)',
position: 'fixed',
top: '0',
left: '0',
height: '100%',
width: '100%',
zIndex: '99999999',
...bgStyles,
}}
/>
<Box
sx={{
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
zIndex: 99999999,
...modalStyles,
}}>
{children}
</Box>
</Flex>
</FocusTrap>
)}
</>
)
}

Modal.propTypes = {
open: PropTypes.bool,
onClose: PropTypes.func,
bgStyles: PropTypes.object,
modalStyles: PropTypes.object,
children: PropTypes.node,
}

export default Modal
21 changes: 21 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"express-jwt": "^6.0.0",
"express-paginate": "^1.0.0",
"express-session": "^1.17.1",
"focus-trap-react": "^8.0.0",
"framer-motion": "^1.11.0",
"next": "^9.4.0",
"next-cookies": "^2.0.3",
Expand Down
61 changes: 28 additions & 33 deletions pages/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import { useState } from 'react'
import PropTypes from 'prop-types'
import Link from 'next/link'
import { Box, Heading, Text } from 'rebass/styled-components'
import { MotionBox } from '../components/motion-box'
// import Prismic from 'prismic-javascript'
// import { query } from '../utils/prismic'
import Modal from '../components/modal/_modal'

const Page = ({ data = {} }) => {
const { results } = data
const [isModalOpen, setIsModalOpen] = useState(false)

return (
<MotionBox
initial={{ opacity: 0 }}
Expand All @@ -23,40 +27,31 @@ const Page = ({ data = {} }) => {
About
</Box>
</Link>
<Heading>Getting started with Next Base:</Heading>
<Text>
This is a starter kit for projects that wish to utilize Prismic, NextJS, and Express. Below are the
instructions for getting this base setup correctly:
</Text>
<ol>
<li>Create or login to your Prismic repo</li>
<li>Go to settings and get or generate your API key</li>
<li>
Copy the env.sample file and rename it to ".env", and place it in the root of this project:
<ul>
<li>Add your prismic key there: PRISMIC_ACCESS_TOKEN=MY_KEY_HERE</li>
<li>(optional) Add a username: USERNAME=my_username</li>
<li>(optional) Add a password: PASSWORD=my_password</li>
</ul>
</li>
<Heading>ADA MODAL</Heading>

<Box
as="button"
onClick={() => {
setIsModalOpen(true)
}}>
OPEN MODAL
</Box>
<Box sx={{ backgroundColor: 'green', mt: '40px', height: '100vh', width: '100%' }} />

<li>
Go to /constants/prismic.js and update the PRISMIC_API_URL information there to point to your
Prismic repo
</li>
<li>Go to /constants/metadata.js and update the DEFAULT_METADATA there</li>
<li>Go to /constants/analytics.js and update your GA_TRACKING_ID</li>
<li>Update the /public/manifest.json so your app can be accessed offline</li>
<li>
Uncomment this getInitialProps function in this file and update as necessary to get data for your
project. Remember to also uncomment the appropriate imports too
</li>
<li>
If connected successfully, you will see data below. Then feel free to remove these instructions and
any code that you don’t need (hopefully there’s not too much of that)
</li>
</ol>
<Box as="pre">{JSON.stringify(results, null, 2)}</Box>
<Modal
open={isModalOpen}
onClose={() => {
setIsModalOpen(false)
}}>
<Box
as="button"
onClick={() => {
setIsModalOpen(false)
}}>
CLOSE
</Box>
<Box sx={{ bg: 'white', p: '40px', textAlign: 'center' }}>THIS IS A MODAL</Box>
</Modal>
</MotionBox>
)
}
Expand Down