Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 15x 15x 15x 15x 15x 15x 15x 3x 3x 15x 15x 15x 15x 15x 15x 2x 2x 2x 2x 2x 15x 15x 15x 15x 15x 15x 13x 1x 1x 1x 1x 13x 13x 3x 3x 3x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 1x 1x | /**
* @file HelpContext.tsx
* @description
* Global help context provider for managing help panel state and topic navigation.
* Provides centralized state for opening/closing help and tracking current topic.
*
* @enterprise
* - Single source of truth for help state
* - Close on Escape key for better UX
* - Type-safe context with clear API
*
* @usage
* Wrap App with <HelpProvider>
* Access anywhere with: const { openHelp, closeHelp, isOpen } = useHelp()
*/
import * as React from 'react';
import { HelpContext, type HelpContextType } from './HelpContext.types';
// Re-export types for backward compatibility
export type { HelpContextType } from './HelpContext.types';
export { HelpContext } from './HelpContext.types';
/**
* HelpProvider: Wrap around App root
* Manages help panel state and provides context to all components
*/
export const HelpProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [currentTopicId, setCurrentTopicId] = React.useState<string | null>(null);
const [isOpen, setIsOpen] = React.useState(false);
/**
* Open help with specific topic
*/
const openHelp = React.useCallback((topicId: string) => {
setCurrentTopicId(topicId);
setIsOpen(true);
}, []);
/**
* Close help panel
*/
const closeHelp = React.useCallback(() => {
setIsOpen(false);
// Keep topic ID so it can fade out smoothly, clear after animation
setTimeout(() => {
setCurrentTopicId(null);
}, 300);
}, []);
/**
* Close help on Escape key press
*/
React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape' && isOpen) {
closeHelp();
}
};
if (isOpen) {
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}
}, [isOpen, closeHelp]);
const value: HelpContextType = {
currentTopicId,
isOpen,
openHelp,
closeHelp,
};
return <HelpContext.Provider value={value}>{children}</HelpContext.Provider>;
};
export default HelpProvider;
|