Split curtains code.

This commit is contained in:
Madeorsk 2024-07-14 17:34:34 +02:00
parent 5dee63db7b
commit 70e073b99f
Signed by: Madeorsk
SSH key fingerprint: SHA256:J9G0ofIOLKf7kyS2IfrMqtMaPdfsk1W02+oGueZzDDU
2 changed files with 80 additions and 78 deletions

View file

@ -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<CurtainContextState>({
// 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 (
<CurtainContext.Provider value={contextState}>
<div className={classes("curtain", isClosed(uuid) ? "closed" : undefined)}>
{children}
</div>
</CurtainContext.Provider>
);
}

View file

@ -1,7 +1,7 @@
import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from "react"; import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import {v4 as uuidv4} from "uuid"; import {v4 as uuidv4} from "uuid";
import {classes} from "../../Utils"; import {CurtainInstance} from "./CurtainInstance";
/** /**
* Curtain UUID type. * Curtain UUID type.
@ -203,80 +203,3 @@ function CurtainsPortal({curtains}: {
</CurtainInstance> </CurtainInstance>
)), document.body); )), 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<CurtainContextState>({
// 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 (
<CurtainContext.Provider value={contextState}>
<div className={classes("curtain", isClosed(uuid) ? "closed" : undefined)}>
{children}
</div>
</CurtainContext.Provider>
);
}