react-detachable-window/build/index.js

Wrap a portion of the DOM or a group of react components and make it detachable into a new window

module.exports=function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t){e.exports=require("react-dom")},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=s(n(1)),l=s(n(0));function s(e){return e&&e.__esModule?e:{default:e}}var u=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.closeWindow=function(){n.setState({portal:!1}),n.externalWindow&&n.externalWindow.close(),n.externalWindow=null},n.openWindow=function(){var e=n.prepareOpenWindowProps(n.openWindowProps);n.externalWindow=window.open("","",e),n.externalWindow.document.title=n.windowProps.title,n.addCss(n.externalWindow,n.windowProps.stylesheets[0].href);var t=n;n.externalWindow.onbeforeunload=function(){t.setState({portal:!1}),t.externalWindow=null},n.externalWindow.document.body.appendChild(n.containerEl),n.setState({portal:!0})},n.containerEl=document.createElement("div"),n.externalWindow=null,n.state={portal:!1},n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.PureComponent),r(t,[{key:"addCss",value:function(e,t){var n=e.document.head,o=e.document.createElement("link");o.type="text/css",o.rel="stylesheet",o.href=t,n.appendChild(o)}},{key:"prepareOpenWindowProps",value:function(e){return Object.keys(e).map(function(t){return t+"="+e[t]}).join(",")}},{key:"getStylesheets",value:function(e){var t=e.styleSheets;if(!t)return[];for(var n=t.length,o=[],r=0;r<n;r+=1){var i=t[r];o.push({type:i.type,href:i.href})}return o}},{key:"componentDidMount",value:function(e){this.windowProps={title:this.props.title||document.title,stylesheets:this.props.stylesheets||this.getStylesheets(document)};this.openWindowProps=o({},{location:0,menubar:0,status:0,titlebar:0,toolbar:0},this.props.windowOptions||{}),console.log(this.openWindowProps),this.closeWindow()}},{key:"componentWillUnmount",value:function(){this.closeWindow()}},{key:"render",value:function(){var e=this.props.reattachButton?o({},this.props.reattachButton,{props:o({},this.props.reattachButton.props,{onClick:this.closeWindow})}):i.default.createElement("button",{type:"button",onClick:this.closeWindow},"Close me!"),t=this.props.detachButton?o({},this.props.detachButton,{props:o({},this.props.detachButton.props,{onClick:this.openWindow})}):i.default.createElement("button",{type:"button",onClick:this.openWindow},"Open in popup!");return this.state.portal?l.default.createPortal(i.default.createElement("div",null,this.props.children,e),this.containerEl):i.default.createElement("div",null,this.props.children,t)}}]),t}();t.default=u},function(e,t,n){e.exports=n(2)}]);