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} -
-
- ); -}