55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import React, { useCallback, useEffect, useRef } from 'react';
|
|
import { MemoryRouter, useLocation, UNSAFE_NavigationContext } from 'react-router-dom';
|
|
import { useAppNavigationHandler } from '../../os/hooks/useAppNavigationHandler';
|
|
import { themeToCssVars } from '../../os/utils/themeToCssVars';
|
|
import { applySkinToThemeColors } from '../../os/SkinService';
|
|
import { manifest } from './manifest';
|
|
import SheetPage from './pages/SheetPage';
|
|
|
|
// ── Navigation handler ──
|
|
const AnswerSheetNavigationHandler: React.FC = () => {
|
|
const location = useLocation();
|
|
const { navigator } = React.useContext(UNSAFE_NavigationContext);
|
|
const historyIndexRef = useRef(0);
|
|
|
|
useEffect(() => {
|
|
const memoryNavigator = navigator as any;
|
|
if (typeof memoryNavigator.index === 'number') {
|
|
historyIndexRef.current = memoryNavigator.index;
|
|
}
|
|
}, [location, navigator]);
|
|
|
|
const handleBackPress = useCallback((): boolean => {
|
|
const memoryNavigator = navigator as any;
|
|
const currentIndex =
|
|
typeof memoryNavigator.index === 'number'
|
|
? memoryNavigator.index
|
|
: historyIndexRef.current;
|
|
if (currentIndex > 0) {
|
|
memoryNavigator.go(-1);
|
|
return true;
|
|
}
|
|
return false;
|
|
}, [navigator]);
|
|
|
|
useAppNavigationHandler('answer_sheet', { onBack: handleBackPress });
|
|
return null;
|
|
};
|
|
|
|
// ── App entry point ──
|
|
const AnswerSheetApp: React.FC = () => {
|
|
const themeColors = manifest.theme.colors;
|
|
const cssVars = themeToCssVars(applySkinToThemeColors(themeColors));
|
|
|
|
return (
|
|
<div className="h-full w-full" style={cssVars as React.CSSProperties}>
|
|
<MemoryRouter>
|
|
<AnswerSheetNavigationHandler />
|
|
<SheetPage />
|
|
</MemoryRouter>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AnswerSheetApp;
|