Add types

This commit is contained in:
Nicola Benaglia 2025-05-30 09:22:07 +02:00
parent be5c3af318
commit 1f5a604932
2 changed files with 50 additions and 33 deletions

View File

@ -7,7 +7,14 @@ import { useQortalMessageListener } from '../../hooks/useQortalMessageListener';
import { useThemeContext } from '../Theme/ThemeContext'; import { useThemeContext } from '../Theme/ThemeContext';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
export const AppViewer = forwardRef( type AppViewerProps = {
app: any;
hide: boolean;
isDevMode: boolean;
skipAuth?: boolean;
};
export const AppViewer = forwardRef<HTMLIFrameElement, AppViewerProps>(
({ app, hide, isDevMode, skipAuth }, iframeRef) => { ({ app, hide, isDevMode, skipAuth }, iframeRef) => {
const { window: frameWindow } = useFrame(); const { window: frameWindow } = useFrame();
const { path, history, changeCurrentIndex, resetHistory } = const { path, history, changeCurrentIndex, resetHistory } =

View File

@ -2,15 +2,26 @@ import { forwardRef } from 'react';
import { AppViewer } from './AppViewer'; import { AppViewer } from './AppViewer';
import Frame from 'react-frame-component'; import Frame from 'react-frame-component';
const AppViewerContainer = forwardRef( type AppViewerContainerProps = {
({ app, isSelected, hide, isDevMode, customHeight, skipAuth }, ref) => { app: any; // Replace `any` with the correct type of `tab` if available
return ( isSelected: boolean;
<Frame hide: boolean;
id={`browser-iframe-${app?.tabId}`} isDevMode: boolean;
head={ customHeight?: string;
<> skipAuth?: boolean;
<style> };
{`
const AppViewerContainer = forwardRef<
HTMLIFrameElement,
AppViewerContainerProps
>(({ app, isSelected, hide, isDevMode, customHeight, skipAuth }, ref) => {
return (
<Frame
id={`browser-iframe-${app?.tabId}`}
head={
<>
<style>
{`
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -27,28 +38,27 @@ const AppViewerContainer = forwardRef(
height: 100vh; height: 100vh;
} }
`} `}
</style> </style>
</> </>
} }
style={{ style={{
border: 'none', border: 'none',
height: customHeight || '100vh', height: customHeight || '100vh',
left: (!isSelected || hide) && '-200vw', left: (!isSelected || hide) && '-200vw',
overflow: 'hidden', overflow: 'hidden',
position: (!isSelected || hide) && 'fixed', position: (!isSelected || hide) && 'fixed',
width: '100%', width: '100%',
}} }}
> >
<AppViewer <AppViewer
app={app} app={app}
hide={!isSelected || hide} hide={!isSelected || hide}
isDevMode={isDevMode} isDevMode={isDevMode}
ref={ref} ref={ref}
skipAuth={skipAuth} skipAuth={skipAuth}
/> />
</Frame> </Frame>
); );
} });
);
export default AppViewerContainer; export default AppViewerContainer;