diff --git a/.dumi/theme/builtins/Previewer.tsx b/.dumi/theme/builtins/Previewer.tsx index ffafe02..eba4a87 100644 --- a/.dumi/theme/builtins/Previewer.tsx +++ b/.dumi/theme/builtins/Previewer.tsx @@ -1,29 +1,21 @@ -import React, { - useRef, - useEffect, - useState, - useContext, - useCallback, -} from 'react' -import { context } from 'dumi/theme' -import type { IPreviewerProps } from 'dumi-theme-default/es/builtins/Previewer' -import Previewer from 'dumi-theme-default/es/builtins/Previewer' -import './Previewer.less' +import React, { useRef, useEffect, useState, useContext, useCallback } from 'react'; +import { context } from 'dumi/theme'; +import type { IPreviewerProps } from 'dumi-theme-default/es/builtins/Previewer'; +import Previewer from 'dumi-theme-default/es/builtins/Previewer'; +import './Previewer.less'; -export const ACTIVE_MSG_TYPE = 'dumi:scroll-into-demo' +export const ACTIVE_MSG_TYPE = 'dumi:scroll-into-demo'; export default (props: IPreviewerProps) => { - const ref = useRef() - const { meta } = useContext(context) - const [previewerProps, setPreviewerProps] = useState( - null - ) - const [isActive, setIsActive] = useState(false) - const isInactive = meta.mobile !== false && !isActive - const isHidden = props.hidden == true ? true : false - + const ref = useRef(); + const { meta } = useContext(context); + const [previewerProps, setPreviewerProps] = useState(null); + const [isActive, setIsActive] = useState(false); + const isInactive = meta.mobile !== false && !isActive; + const isHidden = props.hidden == true ? true : false; + const activeSelf = useCallback(() => { - if(!isHidden) return + if (!isHidden) return; window.postMessage( { type: ACTIVE_MSG_TYPE, @@ -31,30 +23,29 @@ export default (props: IPreviewerProps) => { identifier: props.identifier, demoUrl: props.demoUrl, simulator: props.simulator, - hidden: isHidden + hidden: isHidden, }), }, '*' - ) - setIsActive(true) - }, [props]) + ); + setIsActive(true); + }, [props]); useEffect(() => { // skip if page not loaded /* istanbul ignore next */ - if (!meta.title) return + if (!meta.title) return; - if(isHidden){ - activeSelf() + if (isHidden) { + activeSelf(); } - + if ( // only render mobile phone when screen max than 960px window?.outerWidth > 960 && // do not disable mobile simulator meta.mobile !== false ) { - setPreviewerProps( Object.assign({}, props, { // omit iframe @@ -64,17 +55,15 @@ export default (props: IPreviewerProps) => { // show source code defaultShowCode: true, // hide external action - hideActions: ['EXTERNAL' as IPreviewerProps['hideActions'][0]].concat( - props.hideActions - ), + hideActions: ['EXTERNAL' as IPreviewerProps['hideActions'][0]].concat(props.hideActions), }) - ) + ); } else { // use standard mode if screen min than 960px - setPreviewerProps(props) + setPreviewerProps(props); } - return () => {} - }, [props, meta]) + return () => {}; + }, [props, meta]); useEffect(() => { const handler = ev => { @@ -83,23 +72,25 @@ export default (props: IPreviewerProps) => { isActive && JSON.parse(ev.data.value).identifier !== props.identifier ) { - setIsActive(false) + setIsActive(false); } - } + }; + + window.addEventListener('message', handler); - window.addEventListener('message', handler) - - return () => window.removeEventListener('message', handler) - }) + return () => window.removeEventListener('message', handler); + }); return (
{ if (isInactive) { - activeSelf() + activeSelf(); } }} data-inactive={isInactive || undefined} @@ -112,5 +103,5 @@ export default (props: IPreviewerProps) => { /> )}
- ) -} + ); +}; diff --git a/.dumi/theme/components/Device.tsx b/.dumi/theme/components/Device.tsx index 91d3965..5930df2 100644 --- a/.dumi/theme/components/Device.tsx +++ b/.dumi/theme/components/Device.tsx @@ -1,53 +1,50 @@ -import React, { useState, useContext, useEffect, useRef } from 'react' -import QRCode from 'qrcode.react' -import { context, usePrefersColor } from 'dumi/theme' -import { ROUTE_MSG_TYPE } from '../layouts/demo' -import './Device.less' -import type { FC } from 'react' +import React, { useState, useContext, useEffect, useRef } from 'react'; +import QRCode from 'qrcode.react'; +import { context, usePrefersColor } from 'dumi/theme'; +import { ROUTE_MSG_TYPE } from '../layouts/demo'; +import './Device.less'; +import type { FC } from 'react'; interface IDeviceProps { - className?: string - url: string + className?: string; + url: string; } const Device: FC = ({ url, className }) => { - const iframeRef = useRef() - const [iframeSrc, setIframeSrc] = useState() - const [renderKey, setRenderKey] = useState(Math.random()) - const [color] = usePrefersColor() + const iframeRef = useRef(); + const [iframeSrc, setIframeSrc] = useState(); + const [renderKey, setRenderKey] = useState(Math.random()); + const [color] = usePrefersColor(); const { config: { mode, theme }, - } = useContext(context) + } = useContext(context); - const carrier = theme?.carrier || 'dumi' - const time = theme?.time || '10:24' + const carrier = theme?.carrier || 'dumi'; + const time = theme?.time || '10:24'; // re-render iframe if prefers color changed useEffect(() => { - setRenderKey(Math.random()) - }, [color]) + setRenderKey(Math.random()); + }, [color]); // control iframe page update useEffect(() => { - const { origin } = window.location + const { origin } = window.location; if (!iframeSrc || !url?.startsWith(origin)) { // set iframe src directly if it is the first render or custom url - setIframeSrc(url) + setIframeSrc(url); } else { const pathname = url // discard origin prefix .replace(origin, '') // discard router base - .replace(`${(window as any)?.routerBase || ''}`.replace(/\/$/, ''), '') + .replace(`${(window as any)?.routerBase || ''}`.replace(/\/$/, ''), ''); // update iframe page route via postmessage, to avoid page refresh - iframeRef.current?.contentWindow.postMessage( - { type: ROUTE_MSG_TYPE, value: pathname }, - '*' - ) + iframeRef.current?.contentWindow.postMessage({ type: ROUTE_MSG_TYPE, value: pathname }, '*'); } - }, [url]) + }, [url]); return (
= ({ url, className }) => { {carrier} {time}
-