diff --git a/demo/DemoCurtain.tsx b/demo/DemoCurtain.tsx index 0ba33f0..9e56eb5 100644 --- a/demo/DemoCurtain.tsx +++ b/demo/DemoCurtain.tsx @@ -1,5 +1,5 @@ import React from "react"; -import {useCurtain} from "../src/Components/Curtains/Curtains"; +import {useCurtain} from "../src/Components/Curtains/CurtainInstance"; import {X} from "@phosphor-icons/react"; /** diff --git a/src/Components/Curtains/CurtainInstance.tsx b/src/Components/Curtains/CurtainInstance.tsx new file mode 100644 index 0000000..d513033 --- /dev/null +++ b/src/Components/Curtains/CurtainInstance.tsx @@ -0,0 +1,79 @@ +import React, {useCallback, useContext, useMemo, useRef} from "react"; +import {CurtainUuidType, useCurtains} from "./Curtains"; +import {classes} from "../../Utils"; + +/** + * Current curtain data and functions. + */ +export interface CurtainContextState +{ + /** + * Curtain UUID. + */ + uuid: CurtainUuidType; + + /** + * Close the curtain. + */ + close: () => void; + + /** + * True if the curtain is closed (while transitioning out). + */ + closed: boolean; +} + +/** + * Current curtain context. + */ +const CurtainContext = React.createContext({ + // Empty values. + uuid: "", + close: () => {}, + closed: false, +}); + +/** + * Hook to access current curtain data and functions. + */ +export function useCurtain(): CurtainContextState +{ + return useContext(CurtainContext); +} + +/** + * Component of an opened curtain instance. + */ +export function CurtainInstance({uuid, children}: React.PropsWithChildren<{ + /** + * Curtain UUID. + */ + uuid: string; +}>) +{ + // Get close curtain function. + const {close, isClosed} = useCurtains(); + + // Initialize close curtain function. + const closeCurtain = useRef<() => void>(); + closeCurtain.current = useCallback(() => { + // Close the current curtain. + close(uuid); + }, [uuid, close]); + + // Initialize context state from action functions. + const contextState = useMemo(() => ({ + uuid: uuid, + close: () => closeCurtain.current(), + closed: isClosed(uuid), + }), [uuid, closeCurtain, isClosed]); + + return ( + +
+ {children} +
+
+ ); +} + diff --git a/src/Components/Curtains/Curtains.tsx b/src/Components/Curtains/Curtains.tsx index fb3f4b7..ffa5b45 100644 --- a/src/Components/Curtains/Curtains.tsx +++ b/src/Components/Curtains/Curtains.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from "react"; import ReactDOM from "react-dom"; import {v4 as uuidv4} from "uuid"; -import {classes} from "../../Utils"; +import {CurtainInstance} from "./CurtainInstance"; /** * Curtain UUID type. @@ -203,80 +203,3 @@ function CurtainsPortal({curtains}: { )), document.body); } - - - -/** - * Current curtain data and functions. - */ -export interface CurtainContextState -{ - /** - * Curtain UUID. - */ - uuid: CurtainUuidType; - - /** - * Close the curtain. - */ - close: () => void; - - /** - * True if the curtain is closed (while transitioning out). - */ - closed: boolean; -} - -/** - * Current curtain context. - */ -const CurtainContext = React.createContext({ - // Empty values. - uuid: "", - close: () => {}, - closed: false, -}); - -/** - * Hook to access current curtain data and functions. - */ -export function useCurtain(): CurtainContextState -{ - return useContext(CurtainContext); -} - -/** - * Component of an opened curtain instance. - */ -function CurtainInstance({uuid, children}: React.PropsWithChildren<{ - /** - * Curtain UUID. - */ - uuid: string; -}>) -{ - // Get close curtain function. - const {close, isClosed} = useCurtains(); - - // Initialize close curtain function. - const closeCurtain = useRef<() => void>(); - closeCurtain.current = useCallback(() => { - // Close the current curtain. - close(uuid); - }, [uuid, close]); - - // Initialize context state from action functions. - const contextState = useMemo(() => ({ - uuid: uuid, - close: () => closeCurtain.current(), - closed: isClosed(uuid), - }), [uuid, closeCurtain, isClosed]); - - return ( - -
- {children} -
-
- ); -} diff --git a/src/Components/Modals/Modals.tsx b/src/Components/Modals/Modals.tsx index e02c8fe..1e2c17c 100644 --- a/src/Components/Modals/Modals.tsx +++ b/src/Components/Modals/Modals.tsx @@ -1,8 +1,9 @@ import React from "react"; import {X} from "@phosphor-icons/react"; -import {useCurtains, useCurtain, useCallableCurtain} from "../Curtains/Curtains"; +import {useCurtains, useCallableCurtain} from "../Curtains/Curtains"; import {classes, Modify} from "../../Utils"; import {ModalType, ModalTypeIcon} from "./ModalsTypes"; +import {useCurtain} from "../Curtains/CurtainInstance"; /** * More natural name of useCurtains for modals. diff --git a/src/Components/Subapps/Subapps.tsx b/src/Components/Subapps/Subapps.tsx index e214117..586f782 100644 --- a/src/Components/Subapps/Subapps.tsx +++ b/src/Components/Subapps/Subapps.tsx @@ -1,7 +1,8 @@ import React from "react"; import {X} from "@phosphor-icons/react"; -import {useCurtain, useCallableCurtain, useCurtains} from "../Curtains/Curtains"; +import {useCallableCurtain, useCurtains} from "../Curtains/Curtains"; import {classes, Modify} from "../../Utils"; +import {useCurtain} from "../Curtains/CurtainInstance"; /** * More natural name of useCurtains for subapps.