Add helper hook to ease curtains / subapps creation.
This commit is contained in:
parent
7a9062e8cd
commit
2b4965a2ee
4 changed files with 60 additions and 6 deletions
|
@ -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
15
demo/DemoCurtain.tsx
Normal 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>
|
||||
);
|
||||
}
|
|
@ -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]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
Loading…
Reference in a new issue