UNPKG

@times-components/interactive-wrapper

Version:

Wrapper for legacy Interactive components

1 lines 4.23 kB
module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},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=4)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@times-components/image/rnw")},function(e,t){e.exports=require("prop-types")},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r),i=(n(3),n(2)),c=n(1),s=n.n(c);const l=s.a.div.withConfig({displayName:"styles__Container",componentId:"sc-1rzy94h-0"})(["position:",";width:100%;height:","px;"," "," ",""],e=>{let t=e.$height;return t&&t.xs?"absolute":"relative"},e=>{let t=e.$height;return t&&t.xs?t.xs:150},e=>{let t=e.$height;return t&&t.sm&&"\n media (min-width: 520px) {\n height: ".concat(t.sm,"px;\n }\n ")},e=>{let t=e.$height;return t&&t.md&&"\n @media (min-width: 768px) {\n height: ".concat(t.md,"px;\n }\n ")},e=>{let t=e.$height;return t&&t.lg&&"\n @media (min-width: 1024px) {\n height: ".concat(t.lg,"px;\n }\n ")}),u=s()(l).withConfig({displayName:"styles__InteractiveContainer",componentId:"sc-1rzy94h-1"})(["position:relative;height:",";"],e=>{let t=e.$height;return t&&t.xs?"".concat(t.xs,"px"):"auto"}),a=s.a.div.withConfig({displayName:"styles__InteractiveWrapperContainer",componentId:"sc-1rzy94h-2"})(["position:relative;"]);function p(e,t,n,r,o,i,c){try{var s=e[i](c),l=s.value}catch(e){return void n(e)}s.done?t(l):Promise.resolve(l).then(r,o)}function d(e,t){return document.body.querySelector(e)?Promise.resolve(null):new Promise((e,n)=>{const r=t();r.onload=e,r.onerror=n,document.body.appendChild(r)})}function m(){const e="import"in document.createElement("link"),t=!!document.registerElement;return e&&t?Promise.resolve():Promise.all([(n="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.min.js",d('script[src="'.concat(n,'"]'),()=>{const e=document.createElement("script");return e.setAttribute("async","async"),e.setAttribute("src",n),e})),new Promise(e=>{window.addEventListener("WebComponentsReady",e)})]);var n}n.d(t,"polyfillWCIfNecessary",(function(){return m})),n.d(t,"default",(function(){return h}));class h extends r.Component{constructor(e){super(e),this.placeholder=o.a.createRef(null),this.component=o.a.createRef(null)}componentDidMount(){(0,this.props.fetchPolyfill)().then(()=>{this.insertComponent()})}componentDidUpdate(){this.insertComponent()}insertComponent(){var e,t=this;return(e=function*(){const e=t.props,n=e.attributes,r=e.element,o=e.source,i=t.placeholder.current,c=t.component.current;c.innerHTML="",i.style.cssText+="display: block !important",c.innerHTML="";const s=document.createElement(r);var l;Object.keys(n).forEach(e=>s.setAttribute(e,n[e])),c.appendChild(s),s.outerHTML+="",i.style.cssText+="display: none !important",yield(l=o,d('link[href="'.concat(l,'"]'),()=>{const e=document.createElement("link");return e.setAttribute("href",l),e.setAttribute("rel","import"),e}))},function(){var t=this,n=arguments;return new Promise((function(r,o){var i=e.apply(t,n);function c(e){p(i,r,o,c,s,"next",e)}function s(e){p(i,r,o,c,s,"throw",e)}c(void 0)}))})()}render(){const e=this.props.attributes;return o.a.createElement(a,null,o.a.createElement(l,{ref:this.placeholder,$height:e.height},o.a.createElement(i.Placeholder,null)),o.a.createElement(u,{ref:this.component,$height:e.height}))}}h.defaultProps={attributes:{},fetchPolyfill:m}}]);