Add curtain context in a curtain instance.
This commit is contained in:
parent
b0905b4a4f
commit
c4423bf772
1 changed files with 65 additions and 5 deletions
|
@ -50,6 +50,8 @@ export function useCurtains(): CurtainsContextState
|
|||
return useContext(CurtainsContext);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Page curtains system.
|
||||
*/
|
||||
|
@ -117,20 +119,78 @@ function CurtainsPortal({curtains}: {
|
|||
})
|
||||
{
|
||||
return ReactDOM.createPortal(Object.entries(curtains).map(([uuid, curtainContent]) => (
|
||||
<CurtainInstance key={uuid}>
|
||||
<CurtainInstance key={uuid} uuid={uuid}>
|
||||
{curtainContent}
|
||||
</CurtainInstance>
|
||||
)), document.body);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Current curtain data and functions.
|
||||
*/
|
||||
export interface CurtainContextState
|
||||
{
|
||||
/**
|
||||
* Curtain UUID.
|
||||
*/
|
||||
uuid: CurtainUuidType;
|
||||
|
||||
/**
|
||||
* Close the curtain.
|
||||
*/
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Current curtain context.
|
||||
*/
|
||||
const CurtainContext = React.createContext<CurtainContextState>({
|
||||
// Empty values.
|
||||
uuid: "",
|
||||
close: () => {},
|
||||
});
|
||||
|
||||
/**
|
||||
* Hook to access current curtain data and functions.
|
||||
*/
|
||||
export function useCurtain(): CurtainContextState
|
||||
{
|
||||
return useContext(CurtainContext);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component of an opened curtain instance.
|
||||
*/
|
||||
function CurtainInstance({children}: React.PropsWithChildren<{}>)
|
||||
function CurtainInstance({uuid, children}: React.PropsWithChildren<{
|
||||
/**
|
||||
* Curtain UUID.
|
||||
*/
|
||||
uuid: string;
|
||||
}>)
|
||||
{
|
||||
// Get close curtain function.
|
||||
const {close} = 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(),
|
||||
}), [uuid, closeCurtain]);
|
||||
|
||||
return (
|
||||
<div className={"curtain"}>
|
||||
{children}
|
||||
</div>
|
||||
<CurtainContext.Provider value={contextState}>
|
||||
<div className={"curtain"}>
|
||||
{children}
|
||||
</div>
|
||||
</CurtainContext.Provider>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue