35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
|
import React, { useRef, useEffect, useState } from 'react';
|
||
|
|
import './Example.less';
|
||
|
|
|
||
|
|
export default (props: { route: any }) => {
|
||
|
|
const elm = useRef<HTMLIFrameElement>();
|
||
|
|
const [height, setHeight] = useState(0);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setHeight(elm.current.contentWindow.document.documentElement.scrollHeight);
|
||
|
|
}, [elm]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
props.route.meta.examplePath && (
|
||
|
|
<div className="__dumi-default-example-wrapper">
|
||
|
|
<div className="__dumi-default-example-wrapper-toolbar">
|
||
|
|
{props.route.meta.description || props.route.meta.title}
|
||
|
|
<span>
|
||
|
|
<button
|
||
|
|
className="__dumi-default-icon"
|
||
|
|
onClick={() => elm.current.contentWindow.location.reload()}
|
||
|
|
/>
|
||
|
|
<a
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
href={props.route.meta.examplePath}
|
||
|
|
className="__dumi-default-icon"
|
||
|
|
/>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<iframe src={props.route.meta.examplePath} ref={elm} style={{ height }} title="dumi" />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
};
|