-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
234 additions
and
95 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
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
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,30 @@ | ||
| import React from "react"; | ||
|
|
||
| /** | ||
| * Placeholder for context callbacks | ||
| */ | ||
| const noop = () => undefined; | ||
|
|
||
| /** | ||
| * Modals, represented as stateless functions, are react | ||
| * components, but class components will work also. | ||
| */ | ||
| export type ModalType = React.ComponentType<any>; | ||
|
|
||
| /** | ||
| * Shape of the modal context | ||
| */ | ||
| export interface ModalContextType { | ||
| modal: ModalType | undefined; | ||
| showModal(component: ModalType): void; | ||
| hideModal(): void; | ||
| } | ||
|
|
||
| /** | ||
| * Modal Context Object | ||
| */ | ||
| export const ModalContext = React.createContext<ModalContextType>({ | ||
| modal: undefined, | ||
| showModal: noop, | ||
| hideModal: noop | ||
| }); |
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,37 @@ | ||
| import React, { useState } from "react"; | ||
| import { ModalType, ModalContext } from "./ModalContext"; | ||
| import { ModalRoot } from "./ModalRoot"; | ||
|
|
||
| /** | ||
| * Modal Provider Props | ||
| */ | ||
| export interface ModalProviderProps { | ||
| /** | ||
| * Children which will receive Modal Context | ||
| */ | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| /** | ||
| * Modal Provider | ||
| * | ||
| * Provides Modal Context to children. | ||
| */ | ||
| export const ModalProvider = ({ children }: ModalProviderProps) => { | ||
| const [modal, setModal] = useState<ModalType | undefined>(undefined); | ||
|
|
||
| return ( | ||
| <ModalContext.Provider | ||
| value={{ | ||
| modal, | ||
| showModal: modal => setModal(() => modal), | ||
| hideModal: () => setModal(undefined) | ||
| }} | ||
| > | ||
| <React.Fragment> | ||
| {children} | ||
| <ModalRoot /> | ||
| </React.Fragment> | ||
| </ModalContext.Provider> | ||
| ); | ||
| }; |
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,18 @@ | ||
| import React, { useContext } from "react"; | ||
| import ReactDOM from "react-dom"; | ||
| import { ModalContext } from "./ModalContext"; | ||
|
|
||
| /** | ||
| * Modal Root | ||
| * | ||
| * Renders modals using a portal. | ||
| */ | ||
| export const ModalRoot = () => { | ||
| const { modal: Component } = useContext(ModalContext); | ||
|
|
||
| if (Component === undefined) { | ||
| return null; | ||
| } | ||
|
|
||
| return ReactDOM.createPortal(<Component />, document.body); | ||
| }; |
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,38 @@ | ||
| import "react-testing-library/cleanup-after-each"; | ||
| import * as React from "react"; | ||
| import { render, fireEvent } from "react-testing-library"; | ||
| import { ModalProvider } from "../ModalProvider"; | ||
| import { useModal } from "../useModal"; | ||
|
|
||
| // Helper to render components in modal context | ||
| const renderWithProvider = (content: React.ReactNode) => | ||
| render(<ModalProvider>{content}</ModalProvider>); | ||
|
|
||
| // Test component which calls useModal | ||
| const Component = () => { | ||
| const [showModal, hideModal] = useModal(() => <div>Modal content</div>); | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <button onClick={showModal}>Show modal</button> | ||
| <button onClick={hideModal}>Hide modal</button> | ||
| </React.Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| test("showModal works", () => { | ||
| const { getByText } = renderWithProvider(<Component />); | ||
|
|
||
| fireEvent.click(getByText("Show modal")); | ||
|
|
||
| expect(getByText("Modal content")).toBeTruthy(); | ||
| }); | ||
|
|
||
| test("hideModal works", () => { | ||
| const { getByText, queryByText } = renderWithProvider(<Component />); | ||
|
|
||
| fireEvent.click(getByText("Show modal")); | ||
| fireEvent.click(getByText("Hide modal")); | ||
|
|
||
| expect(queryByText("Modal content")).not.toBeTruthy(); | ||
| }); |
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,23 +1,4 @@ | ||
| /** | ||
| * @class ExampleComponent | ||
| */ | ||
|
|
||
| import * as React from 'react' | ||
|
|
||
| import styles from './styles.css' | ||
|
|
||
| export type Props = { text: string } | ||
|
|
||
| export default class ExampleComponent extends React.Component<Props> { | ||
| render() { | ||
| const { | ||
| text | ||
| } = this.props | ||
|
|
||
| return ( | ||
| <div className={styles.test}> | ||
| Example Component: {text} | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
| export * from "./ModalContext"; | ||
| export * from "./ModalProvider"; | ||
| export * from "./ModalRoot"; | ||
| export * from "./useModal"; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
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,21 @@ | ||
| import { useContext } from "react"; | ||
| import { ModalType, ModalContext } from "./ModalContext"; | ||
|
|
||
| /** | ||
| * Callback for showing the modal | ||
| */ | ||
| type ShowModal = () => void; | ||
|
|
||
| /** | ||
| * Callback for hiding the modal | ||
| */ | ||
| type HideModal = () => void; | ||
|
|
||
| /** | ||
| * React hook for showing modal windows | ||
| */ | ||
| export const useModal = (modal: ModalType): [ShowModal, HideModal] => { | ||
| const { showModal, hideModal } = useContext(ModalContext); | ||
|
|
||
| return [() => showModal(modal), () => hideModal()]; | ||
| }; |
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
Oops, something went wrong.