diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx index 7cf3f6d..a998d37 100644 --- a/demo/DemoApp.tsx +++ b/demo/DemoApp.tsx @@ -25,15 +25,22 @@ import {Outlet} from "react-router-dom"; import {ToggleSwitch} from "../src/Components/Forms/ToggleSwitch"; import {Step, Steps} from "../src/Components/Steps/Steps"; import {AsyncPaginate, AutoPaginate, Paginate} from "../src/Components/Pagination/Paginate"; -import {useCurtains} from "../src/Components/Curtains/Curtains"; -import {Subapp, useSubapps} from "../src/Components/Subapps/Subapps"; +import {useCallableCurtain, useCurtains} from "../src/Components/Curtains/Curtains"; +import {Subapp, useCallableSubapp, useSubapps} from "../src/Components/Subapps/Subapps"; import {DemoSubapp} from "./DemoSubapp"; +import {DemoCurtain} from "./DemoCurtain"; export function DemoApp() { const curtains = useCurtains(); const subapps = useSubapps(); + // Easy curtain. + const easyCurtain = useCallableCurtain(); + + // Easy subapp. + const easySubapp = useCallableSubapp(); + const [datetime, setDatetime] = useState(null); const [selected, setSelected] = useState(null); @@ -446,10 +453,10 @@ export function DemoApp() - ); + curtains.open(); }}>Open a curtain + +

Subapps

@@ -473,6 +480,10 @@ export function DemoApp() + +

Modals

diff --git a/demo/DemoCurtain.tsx b/demo/DemoCurtain.tsx new file mode 100644 index 0000000..0ba33f0 --- /dev/null +++ b/demo/DemoCurtain.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import {useCurtain} from "../src/Components/Curtains/Curtains"; +import {X} from "@phosphor-icons/react"; + +/** + * Demo curtain component. + */ +export function DemoCurtain() +{ + const {close} = useCurtain(); + + return ( + + ); +} diff --git a/src/Components/Curtains/Curtains.tsx b/src/Components/Curtains/Curtains.tsx index d5aba3a..12d6076 100644 --- a/src/Components/Curtains/Curtains.tsx +++ b/src/Components/Curtains/Curtains.tsx @@ -50,6 +50,28 @@ export function useCurtains(): CurtainsContextState return useContext(CurtainsContext); } +/** + * Curtain callable. + * @param curtains The curtains context state. + * @param curtainElement The curtain element to open when called. + */ +export function callableCurtain(curtains: CurtainsContextState, curtainElement: React.ReactNode): () => CurtainUuidType +{ + return () => curtains.open(curtainElement); +} + +/** + * Hook to create a simple curtain. + * @param curtainElement Content of the curtain to open. + */ +export function useCallableCurtain(curtainElement: React.ReactNode): () => CurtainUuidType +{ + // Get curtains context state. + const curtains = useCurtains(); + // Create and keep the curtain callable in memory. + return useCallback(callableCurtain(curtains, curtainElement), [curtains, curtainElement]); +} + /** diff --git a/src/Components/Subapps/Subapps.tsx b/src/Components/Subapps/Subapps.tsx index 4e9d67c..7713f51 100644 --- a/src/Components/Subapps/Subapps.tsx +++ b/src/Components/Subapps/Subapps.tsx @@ -1,6 +1,6 @@ import React from "react"; import {X} from "@phosphor-icons/react"; -import {useCurtain, useCurtains} from "../Curtains/Curtains"; +import {useCurtain, useCallableCurtain, useCurtains} from "../Curtains/Curtains"; /** * More natural name of useCurtains for subapps. @@ -14,6 +14,12 @@ export const useSubapps = useCurtains; */ export const useSubapp = useCurtain; +/** + * More natural name of useCallableCurtain for subapps. + * @see useCallableCurtain + */ +export const useCallableSubapp = useCallableCurtain; + /** * Subapp main component. */