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…
	
	Add table
		
		Reference in a new issue