react-popout/dist/react-popout.min.js

Wraps window.open in a react component, allowing the contents to be part of your react render tree

"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importDefault(require("react")),client_1=require("react-dom/client"),DEFAULT_OPTIONS={toolbar:"no",location:"no",directories:"no",status:"no",menubar:"no",scrollbars:"yes",resizable:"yes",width:500,height:400,top:(e,t)=>(t.innerHeight-e.height)/2+t.screenY,left:(e,t)=>(t.innerWidth-e.width)/2+t.screenX},ABOUT_BLANK="about:blank";class PopoutWindow extends react_1.default.Component{constructor(t){super(t),this.mainWindowClosed=this.mainWindowClosed.bind(this),this.popoutWindowUnloading=this.popoutWindowUnloading.bind(this),this.popoutWindowLoaded=this.popoutWindowLoaded.bind(this),this.state={openedWindowComponent:null,popoutWindow:null,container:null}}createOptions(t){const o=Object.assign({},DEFAULT_OPTIONS,this.props.options);return Object.keys(o).map(n=>n+"="+(typeof o[n]=="function"?o[n].call(this,o,t):o[n])).join(",")}componentDidMount(){const t=this.props.window||window;t&&(this.openPopoutWindow(t),t.addEventListener("unload",this.mainWindowClosed))}componentWillReceiveProps(t){t.title!==this.props.title&&this.state.popoutWindow&&(this.state.popoutWindow.document.title=t.title)}componentDidUpdate(){this.renderToContainer(this.state.container,this.state.popoutWindow,this.props.children)}componentWillUnmount(){this.mainWindowClosed()}popoutWindowLoaded(t){if(!this.state.container){t=this.state.popoutWindow||t,t.document.title=this.props.title;let o=t.document.createElement("div");o.id=this.props.containerId,o.className=this.props.containerClassName,t.document.body.appendChild(o),this.setState({container:o}),this.renderToContainer(o,t,this.props.children)}}openPopoutWindow(t){const o=t.open(this.props.url,this.props.name||this.props.title,this.createOptions(t));if(!o){this.props.onError();return}this.setState({popoutWindow:o}),o.addEventListener("load",this.popoutWindowLoaded),o.addEventListener("unload",this.popoutWindowUnloading),this.props.url===ABOUT_BLANK?o.document.readyState==="complete"&&this.popoutWindowLoaded(o):this.checkForPopoutWindowClosure(o)}closeWindow(){this.mainWindowClosed()}checkForPopoutWindowClosure(t){this.interval=window.setInterval(()=>{t.closed&&(clearInterval(this.interval),this.props.onClosing&&this.props.onClosing(t))},500)}mainWindowClosed(){this.state.popoutWindow&&this.state.popoutWindow.close(),(this.props.window||window).removeEventListener("unload",this.mainWindowClosed)}popoutWindowUnloading(){this.state.container&&(clearInterval(this.interval),this.root.unmount(),this.props.onClosing&&this.props.onClosing(this.state.popoutWindow))}renderToContainer(t,o,n){if(t){const i=typeof n=="function"?n(o):n;this.root||(this.root=(0,client_1.createRoot)(t)),this.root.render(i)}}render(){return null}}PopoutWindow.defaultProps={url:ABOUT_BLANK,containerId:"popout-content-container",containerClassName:"",onError:()=>{}},exports.default=PopoutWindow;