Add helper hook to ease curtains / subapps creation.

This commit is contained in:
Madeorsk 2024-07-14 15:37:12 +02:00
parent 7a9062e8cd
commit 2b4965a2ee
Signed by: Madeorsk
SSH key fingerprint: SHA256:J9G0ofIOLKf7kyS2IfrMqtMaPdfsk1W02+oGueZzDDU
4 changed files with 60 additions and 6 deletions

View file

@ -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(<DemoCurtain />);
// Easy subapp.
const easySubapp = useCallableSubapp(<DemoSubapp />);
const [datetime, setDatetime] = useState(null);
const [selected, setSelected] = useState(null);
@ -446,10 +453,10 @@ export function DemoApp()
<Card>
<button onClick={() => {
const curtainId = curtains.open(
<button className={"close"} onClick={() => { curtains.close(curtainId); }}><X /> Close the curtain</button>
);
curtains.open(<DemoCurtain />);
}}>Open a curtain</button>
<button onClick={easyCurtain}>Easy with callable curtain</button>
</Card>
<h3>Subapps</h3>
@ -473,6 +480,10 @@ export function DemoApp()
<button onClick={() => { subapps.open(<DemoSubapp />) }}>
Complex subapp with component
</button>
<button onClick={easySubapp}>
Easy with callable subapp
</button>
</Card>
<h3>Modals</h3>

15
demo/DemoCurtain.tsx Normal file
View file

@ -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 (
<button className={"close"} onClick={close}><X/> Close the curtain</button>
);
}

View file

@ -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]);
}
/**

View file

@ -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.
*/