feat: iframe 添加 loading
This commit is contained in:
parent
eab0aee334
commit
57042d280f
|
@ -5,12 +5,21 @@ type FullScreenFrameProps = {
|
|||
url: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
onload?: () => void;
|
||||
onerror?: () => void;
|
||||
};
|
||||
|
||||
function FullScreenFrame({ url, className, style }: FullScreenFrameProps) {
|
||||
function FullScreenFrame({ url, className, style, onload, onerror }: FullScreenFrameProps) {
|
||||
return (
|
||||
<div className={classNames('kf-full-screen-frame', className ?? '')} style={style}>
|
||||
{url && <iframe src={url} className="kf-full-screen-frame__iframe"></iframe>}
|
||||
{url && (
|
||||
<iframe
|
||||
src={url}
|
||||
className="kf-full-screen-frame__iframe"
|
||||
onLoad={onload}
|
||||
onError={onerror}
|
||||
></iframe>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
.kf-iframe-page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
|
@ -0,0 +1,57 @@
|
|||
import FullScreenFrame from '@/components/FullScreenFrame';
|
||||
import KFSpin from '@/components/KFSpin';
|
||||
import { getLabelStudioUrl } from '@/services/developmentEnvironment';
|
||||
import { to } from '@/utils/promise';
|
||||
import classNames from 'classnames';
|
||||
import { useEffect, useState } from 'react';
|
||||
import './index.less';
|
||||
|
||||
export enum IframePageType {
|
||||
DatasetAnnotation = 'DatasetAnnotation', // 数据标注
|
||||
AppDevelopment = 'AppDevelopment', // 应用开发
|
||||
}
|
||||
|
||||
const getRequestAPI = (type: IframePageType): (() => Promise<any>) => {
|
||||
switch (type) {
|
||||
case IframePageType.DatasetAnnotation:
|
||||
return getLabelStudioUrl;
|
||||
case IframePageType.AppDevelopment:
|
||||
return () => Promise.resolve({ code: 200, data: 'http://172.20.32.181:30080/' });
|
||||
}
|
||||
};
|
||||
|
||||
type IframePageProps = {
|
||||
type: IframePageType;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
function IframePage({ type, className, style }: IframePageProps) {
|
||||
const [iframeUrl, setIframeUrl] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
useEffect(() => {
|
||||
requestIframeUrl();
|
||||
}, []);
|
||||
const requestIframeUrl = async () => {
|
||||
setLoading(true);
|
||||
const [res] = await to(getRequestAPI(type)());
|
||||
if (res && res.data) {
|
||||
setIframeUrl(res.data);
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const hideLoading = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames('kf-iframe-page', className)} style={style}>
|
||||
{loading && <KFSpin />}
|
||||
<FullScreenFrame url={iframeUrl} onload={hideLoading} onerror={hideLoading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IframePage;
|
|
@ -1,9 +1,7 @@
|
|||
import FullScreenFrame from '@/components/FullScreenFrame';
|
||||
import { useState } from 'react';
|
||||
import IframePage, { IframePageType } from '@/components/IFramePage';
|
||||
|
||||
function Application() {
|
||||
const [iframeUrl] = useState('http://172.20.32.181:30080/');
|
||||
return <FullScreenFrame url={iframeUrl}></FullScreenFrame>;
|
||||
return <IframePage type={IframePageType.AppDevelopment}></IframePage>;
|
||||
}
|
||||
|
||||
export default Application;
|
||||
|
|
|
@ -1,20 +1,7 @@
|
|||
import FullScreenFrame from '@/components/FullScreenFrame';
|
||||
import { getLabelStudioUrl } from '@/services/developmentEnvironment';
|
||||
import { to } from '@/utils/promise';
|
||||
import { useEffect, useState } from 'react';
|
||||
import IframePage, { IframePageType } from '@/components/IFramePage';
|
||||
|
||||
function DatasetAnnotation() {
|
||||
const [iframeUrl, setIframeUrl] = useState('');
|
||||
useEffect(() => {
|
||||
requestIframeUrl();
|
||||
}, []);
|
||||
const requestIframeUrl = async () => {
|
||||
const [res] = await to(getLabelStudioUrl());
|
||||
if (res && res.data) {
|
||||
setIframeUrl(res.data);
|
||||
}
|
||||
};
|
||||
return <FullScreenFrame url={iframeUrl} />;
|
||||
return <IframePage type={IframePageType.DatasetAnnotation}></IframePage>;
|
||||
}
|
||||
|
||||
export default DatasetAnnotation;
|
||||
|
|
Loading…
Reference in New Issue