jsx import { SFC , useEffect , useState } from 'react' ; import { css , jsx } from '@storybook/theming' ; import { Placeholder } from '@storybook/components' ; import { IFrameConfigBase } from '../../config' ; interface Props { config : IFrameConfigBase ; default defer ? : boolean ; } export const IFrame = ( { config , defer = false } ) => { const [ url , setUrl ] = useState ( defer ? undefined : config . url ) ; const [ loaded , setLoaded ] = useState ( false ) ; useEffect ( ( ) => { if ( ! defer ) { return ; } const handle = requestAnimationFrame ( ( ) => { setUrl ( config . url ) ; } ) ; return ( ) => cancelAnimationFrame ( handle ) ; } , [ defer , config . url ] ) ; useEffect ( ( ) => { setLoaded ( false ) ; } , [ url ] ) ; return ( < div css = { $container } > { ! loaded && < Placeholder css = { $loading } > Loading ... < /Placeholder>} < iframe css = { $iframe } src = { url } allowFullScreen = { config . allowFullscreen } onLoad = { ( ) => setLoaded ( true ) } /> < /div>); } ; export default IFrame ; const $container = css `
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  overflow: hidden;
` ; const $loading = css `
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
` ; const $iframe = css `
  position: relative;
  width: 100%;
  height: 100%;
  border: none;

  z-index: 1;
` ;