-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* adds mobx store * adds storage service * modifies storage service * modifies yarn lock * adds modal component * updates generic modal component * updates generic modal component * updates generice model styling * updates props
- Loading branch information
1 parent
69864cb
commit 6621837
Showing
5 changed files
with
219 additions
and
1 deletion.
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
44 changes: 44 additions & 0 deletions
44
src/components/primitive/generic-modal/generic-modal.component.props.ts
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,44 @@ | ||
| import { ButtonComponentProps } from "../button/button.component.props"; | ||
| import { TextComponentProps } from "../text/text.component.props"; | ||
|
|
||
| export interface GenericModalComponentProps { | ||
| /** | ||
| * to determine if modal should show | ||
| */ | ||
| show: boolean; | ||
|
|
||
| /** | ||
| * method to close the modal | ||
| */ | ||
| onClose?: () => void; | ||
|
|
||
| /** | ||
| * body of the modal | ||
| */ | ||
| children: React.ReactNode; | ||
|
|
||
| /** | ||
| * title of the modal | ||
| */ | ||
| title?: TextComponentProps; | ||
|
|
||
| /** | ||
| * button for submit | ||
| */ | ||
| onSubmit?: ButtonComponentProps; | ||
|
|
||
| /** | ||
| * button for cancel | ||
| */ | ||
| onCancel?: ButtonComponentProps; | ||
|
|
||
| /** | ||
| * hide the buttons and close button | ||
| */ | ||
| hide?: boolean; | ||
|
|
||
| /** | ||
| * should modal close if background is clicked | ||
| */ | ||
| noClose?: boolean; | ||
| } |
40 changes: 40 additions & 0 deletions
40
src/components/primitive/generic-modal/generic-modal.component.style.ts
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,40 @@ | ||
| import styled from "styled-components"; | ||
| import Modal, { BaseModalBackground } from "styled-react-modal"; | ||
| import { Button } from ".."; | ||
|
|
||
| export const FadingBackground = styled(BaseModalBackground)` | ||
| opacity: ${(props) => props.opacity}; | ||
| transition: all 0.3s ease-in-out; | ||
| `; | ||
|
|
||
| export const ModalButton = styled(Button)` | ||
| height: 4rem !important; | ||
| width: 2rem !important; | ||
| margin: 0.5rem !important; | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| export const StyledModal = Modal.styled` | ||
| max-width: 60rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| background-color: white; | ||
| opacity: 1; | ||
| padding: 1rem; | ||
| transition : all 0.3s ease-in-out; | ||
| position: relative; | ||
| `; | ||
|
|
||
| export const CloseModal = styled.h1` | ||
| position: absolute; | ||
| top: 1rem; | ||
| right: 1rem; | ||
| font-size: 2rem; | ||
| font-weight: bold; | ||
| color: ${(props) => props.theme.colors.textLight}; | ||
| z-index: 999; | ||
| &:hover { | ||
| cursor: pointer; | ||
| } | ||
| `; |
92 changes: 92 additions & 0 deletions
92
src/components/primitive/generic-modal/generic-modal.component.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,92 @@ | ||
| import { useState } from "react"; | ||
| import { ModalProvider } from "styled-react-modal"; | ||
| import { GenericModalComponentProps } from "./generic-modal.component.props"; | ||
| import { Box, Text } from ".."; | ||
| import { | ||
| FadingBackground, | ||
| StyledModal, | ||
| CloseModal, | ||
| ModalButton, | ||
| } from "./generic-modal.component.style"; | ||
|
|
||
| const GenericModal: React.FunctionComponent<GenericModalComponentProps> = ( | ||
| props: GenericModalComponentProps | ||
| ) => { | ||
| const { | ||
| show, | ||
| onClose, | ||
| title, | ||
| onSubmit, | ||
| onCancel, | ||
| children, | ||
| hide, | ||
| noClose, | ||
| } = props; | ||
|
|
||
| const [isOpen, setIsOpen] = useState(show); | ||
| const [opacity, setOpacity] = useState(0); | ||
|
|
||
| function toggleModal(e: any) { | ||
| setOpacity(0); | ||
| setIsOpen(!isOpen); | ||
| if (onClose) onClose(); | ||
| } | ||
|
|
||
| const handleClose = () => { | ||
| if (onClose) onClose(); | ||
| }; | ||
|
|
||
| function afterOpen() { | ||
| setTimeout(() => { | ||
| setOpacity(1); | ||
| }, 100); | ||
| } | ||
|
|
||
| function beforeClose() { | ||
| return new Promise((resolve) => { | ||
| setOpacity(0); | ||
| setTimeout(resolve, 300); | ||
| }); | ||
| } | ||
|
|
||
| return ( | ||
| <ModalProvider backgroundComponent={FadingBackground}> | ||
| <StyledModal | ||
| isOpen={isOpen} | ||
| afterOpen={afterOpen} | ||
| beforeClose={beforeClose} | ||
| onBackgroundClick={noClose ? () => {} : toggleModal} | ||
| onEscapeKeydown={noClose ? () => {} : toggleModal} | ||
| backgroundProps={{ opacity }} | ||
| > | ||
| {!hide && <CloseModal onClick={toggleModal}>X</CloseModal>} | ||
| {!!title && ( | ||
| <Box vCenter hCenter paddingTop={2}> | ||
| <Text bold {...title} /> | ||
| </Box> | ||
| )} | ||
| <Box paddingVertical={2}>{children}</Box> | ||
| {!hide && ( | ||
| <Box row rightAlign paddingTop={2}> | ||
| {!onCancel && ( | ||
| <ModalButton | ||
| label={{ text: "Close", color: "black" }} | ||
| variant="ghost" | ||
| onClick={handleClose} | ||
| /> | ||
| )} | ||
| {!onSubmit && ( | ||
| <ModalButton | ||
| label={{ text: "Continue" }} | ||
| variant="small" | ||
| onClick={handleClose} | ||
| /> | ||
| )} | ||
| </Box> | ||
| )} | ||
| </StyledModal> | ||
| </ModalProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default GenericModal; |
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