qureal-editor 1.0.4 → 1.0.6

package/dist/index.es.js

@@ -1,160 +1,114 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Fragment, useEffect } from 'react';
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css = "body{\n  background-color: rgb(97, 97, 97);\n}\n.styles_outerN__IxLsd{\n  padding: 10px 15px;\n  border: none;\n  outline: none;\n  background-color: black;\n  margin: 20px;\n  border-radius: 5px;\n  transition: 0.5s;\n}\n\n.styles_innerN__2mhRO{\n  font-size: 1.3rem;\n  color: #e3e3e3;\n  transition: 0.5s;\n}\n\n.styles_outerN__IxLsd:hover {\n  box-shadow: 0px 0px 22px 10px #34ebb7;\n  cursor: pointer;\n}\n\n.styles_innerN__2mhRO:hover{\n  color: #34ebb7;\n  text-shadow: 0 0 15px #34ebb7;\n}\n";
-var styles = { "outerN": "styles_outerN__IxLsd", "innerN": "styles_innerN__2mhRO" };
-styleInject(css);
-
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
-
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+  return typeof obj;
+} : function (obj) {
+  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
 };
 
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
-var NeonButton = function (_Component) {
-  inherits(NeonButton, _Component);
-
-  function NeonButton() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    classCallCheck(this, NeonButton);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = NeonButton.__proto__ || Object.getPrototypeOf(NeonButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hover: false }, _this.getInitialState = function () {
-      return { hover: false };
-    }, _this.toggleHover = function () {
-      _this.setState({ hover: !_this.state.hover });
-    }, _temp), possibleConstructorReturn(_this, _ret);
-  }
-
-  createClass(NeonButton, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          text = _props.text,
-          color = _props.color;
-
-
-      var linkStyle;
-      if (this.state.hover) {
-        linkStyle = { color: color };
-      } else {
-        linkStyle = { color: '#e3e3e3' };
-      }
+var _extends = Object.assign || function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];
 
-      var boxStyle;
-      if (this.state.hover) {
-        boxStyle = { boxShadow: '0px 0px 22px 10px ' + color };
-      } else {
-        boxStyle = { color: '#e3e3e3' };
+    for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
       }
-
-      return React.createElement(
-        'button',
-        {
-          className: styles.outerN,
-          style: boxStyle,
-          onMouseEnter: this.toggleHover,
-          onMouseLeave: this.toggleHover
-        },
-        React.createElement(
-          'div',
-          {
-            className: styles.innerN,
-            style: linkStyle
-          },
-          text
-        )
-      );
     }
-  }]);
-  return NeonButton;
-}(Component);
+  }
 
-NeonButton.propTypes = {
-  text: PropTypes.string,
-  color: PropTypes.string
+  return target;
 };
 
+function QurealiFrame(_ref) {
+    var slug = _ref.slug,
+        _ref$type = _ref.type,
+        type = _ref$type === undefined ? "creation" : _ref$type,
+        _ref$style = _ref.style,
+        style = _ref$style === undefined ? {} : _ref$style;
+
+
+    return React.createElement(
+        Fragment,
+        null,
+        React.createElement("iframe", {
+            id: "qureal_iframe",
+            title: "Qureal"
+            // src={`http://localhost:3201/embed/${creation_slug}`}
+            , src: type === "creation" ? "https://show.qureal.com/embed/" + slug : "https://show.qureal.com/ts/" + slug
+            // src={`https://show.qureal.com/embed/${slug}`}
+            , style: _extends({
+                width: "100%",
+                height: "100%"
+            }, style)
+        })
+    );
+}
 
-NeonButton.defaultProps = {
-  text: "Enter Button Text",
-  color: "#34ebb7"
-};
+// export default QurealiFrame;
+var QurealiFrame$1 = React.memo(QurealiFrame, function () {
+    return true;
+});
+
+var ALLOWED_ORIGINS = ["https://show.qureal.com", "http://localhost:3201"];
+
+function QurealViewer(_ref) {
+    var _ref$slug = _ref.slug,
+        slug = _ref$slug === undefined ? "qi_sample" : _ref$slug,
+        _ref$type = _ref.type,
+        type = _ref$type === undefined ? "creation" : _ref$type,
+        _ref$onFormSubmit = _ref.onFormSubmit,
+        onFormSubmit = _ref$onFormSubmit === undefined ? function () {} : _ref$onFormSubmit,
+        _ref$style = _ref.style,
+        style = _ref$style === undefined ? { width: "800px", height: "600px" } : _ref$style;
+
+
+    var sendToIFrame = function sendToIFrame(creation_slug) {
+        console.log("Sending data to iFrame");
+        var qureal_element = document.getElementById("qureal_iframe");
+
+        var qureal_window = qureal_element ? qureal_element.contentWindow : null;
+        if (qureal_window) {
+            qureal_window.postMessage({
+                message_type: "OPEN_CREATION",
+                data: {
+                    slug: creation_slug
+                }
+            }, "*");
+            console.log("Data sent to iframe");
+        }
+    };
+
+    useEffect(function () {
+        sendToIFrame(slug);
+    }, [slug]);
+
+    useEffect(function () {
+        var handler = function handler(ev) {
+            if (ALLOWED_ORIGINS.includes(ev.origin) && _typeof(ev.data) === "object") {
+                switch (ev.data.event_type) {
+                    case "FORM_SUBMIT":
+                        onFormSubmit(ev.data.data);
+                        break;
+                    default:
+                        console.log("No event type found");
+                        console.log(ev.data);
+                }
+            }
+        };
+
+        window.addEventListener("message", handler);
+        return function () {
+            return window.removeEventListener("message", handler);
+        };
+    }, []);
+
+    return React.createElement(QurealiFrame$1, {
+        slug: slug,
+        type: type,
+        style: style
+    });
+}
 
-export default NeonButton;
+export { QurealViewer };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/index.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nimport styles from './styles.css'\n\nclass NeonButton extends Component {\n  state={hover: false}\n  static propTypes = {\n    text: PropTypes.string,\n    color: PropTypes.string\n  }\n\n  getInitialState= ()=>{\n    return {hover: false}\n  }\n  toggleHover =()=>{\n    this.setState({hover: !this.state.hover})\n  }\n\n  render() {\n    const {\n      text, color\n    } = this.props\n\n    var linkStyle;\n    if (this.state.hover) {\n      linkStyle = {color: color}\n    } else {\n      linkStyle = {color: '#e3e3e3'}\n    }\n\n    var boxStyle;\n    if (this.state.hover) {\n      boxStyle = {boxShadow: `0px 0px 22px 10px ${color}`}\n    } else {\n       boxStyle = {color: '#e3e3e3' } \n    }\n\n\n    return (\n      <button\n        className={styles.outerN}\n        style={boxStyle}\n        onMouseEnter={this.toggleHover}\n        onMouseLeave={this.toggleHover}\n      >\n        <div\n          className={styles.innerN}\n          style={linkStyle}\n        >{text}</div>\n      </button>\n    )\n  }\n}\n\n\nNeonButton.defaultProps= {\n  text: \"Enter Button Text\",\n  color: \"#34ebb7\"\n}\n\nexport default NeonButton;\n"],"names":["NeonButton","state","hover","getInitialState","toggleHover","setState","props","text","color","linkStyle","boxStyle","boxShadow","styles","outerN","innerN","Component","propTypes","PropTypes","string","defaultProps"],"mappings":";;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;EAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;EAC/B,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;;EAE5B,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;;EAExD,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;EACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;EAC5C,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;;EAExB,IAAI,QAAQ,KAAK,KAAK,EAAE;IACtB,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C,MAAM;MACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACzB;GACF,MAAM;IACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;GACzB;;EAED,IAAI,KAAK,CAAC,UAAU,EAAE;IACpB,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;GAChC,MAAM;IACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;GACjD;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICpBKA;;;;;;;;;;;;;;6LACJC,QAAM,EAACC,OAAO,KAAR,UAMNC,kBAAiB,YAAI;aACZ,EAACD,OAAO,KAAR,EAAP;aAEFE,cAAa,YAAI;YACVC,QAAL,CAAc,EAACH,OAAO,CAAC,MAAKD,KAAL,CAAWC,KAApB,EAAd;;;;;;6BAGO;mBAGH,KAAKI,KAHF;UAELC,IAFK,UAELA,IAFK;UAECC,KAFD,UAECA,KAFD;;;UAKHC,SAAJ;UACI,KAAKR,KAAL,CAAWC,KAAf,EAAsB;oBACR,EAACM,OAAOA,KAAR,EAAZ;OADF,MAEO;oBACO,EAACA,OAAO,SAAR,EAAZ;;;UAGEE,QAAJ;UACI,KAAKT,KAAL,CAAWC,KAAf,EAAsB;mBACT,EAACS,kCAAgCH,KAAjC,EAAX;OADF,MAEO;mBACO,EAACA,OAAO,SAAR,EAAX;;;aAKD;;;qBACaI,OAAOC,MADpB;iBAESH,QAFT;wBAGgB,KAAKN,WAHrB;wBAIgB,KAAKA;;;;;uBAGNQ,OAAOE,MADpB;mBAESL;;;;OATb;;;;EAlCqBM;;AAAnBf,WAEGgB,YAAY;QACXC,UAAUC,MADC;SAEVD,UAAUC;;;;AA+CrBlB,WAAWmB,YAAX,GAAyB;QACjB,mBADiB;SAEhB;CAFT;;;;"}
+{"version":3,"file":"index.es.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, type = \"creation\", style = {} }) {\n\n\n    return (\n        <Fragment>\n            <iframe\n                id=\"qureal_iframe\"\n                title=\"Qureal\"\n                // src={`http://localhost:3201/embed/${creation_slug}`}\n                src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}` : `https://show.qureal.com/ts/${slug}`}\n                // src={`https://show.qureal.com/embed/${slug}`}\n                style={{\n                    width: \"100%\",\n                    height: \"100%\",\n                    ...style\n                }}\n            />\n        </Fragment>\n    );\n}\n\n// export default QurealiFrame;\nexport default React.memo(QurealiFrame, () => true)\n","import React, { Fragment, useEffect, useRef } from \"react\";\nimport QurealiFrame from \"./QurealiFrame\";\n\nconst ALLOWED_ORIGINS = [\"https://show.qureal.com\", \"http://localhost:3201\"];\n\nfunction QurealViewer({\n    slug = \"qi_sample\",\n    type = \"creation\", // creation or template \n    onFormSubmit = () => { },\n    style = { width: \"800px\", height: \"600px\" }\n}) {\n\n    const sendToIFrame = (creation_slug) => {\n        console.log(\"Sending data to iFrame\")\n        const qureal_element = document.getElementById(\"qureal_iframe\");\n\n        const qureal_window = qureal_element ? qureal_element.contentWindow : null;\n        if (qureal_window) {\n            qureal_window.postMessage({\n                message_type: \"OPEN_CREATION\",\n                data: {\n                    slug: creation_slug\n                }\n            }, \"*\");\n            console.log(\"Data sent to iframe\")\n        }\n    }\n\n    useEffect(() => {\n        sendToIFrame(slug)\n    }, [slug])\n\n    useEffect(() => {\n        const handler = (ev) => {\n            if (ALLOWED_ORIGINS.includes(ev.origin) && typeof ev.data === \"object\") {\n                switch (ev.data.event_type) {\n                    case \"FORM_SUBMIT\":\n                        onFormSubmit(ev.data.data);\n                        break;\n                    default:\n                        console.log(\"No event type found\");\n                        console.log(ev.data);\n                }\n            }\n        };\n\n        window.addEventListener(\"message\", handler);\n        return () => window.removeEventListener(\"message\", handler);\n    }, []);\n\n    return (\n        <QurealiFrame\n            slug={slug}\n            type={type}\n            style={style}\n        />\n    );\n}\n\n// export default QurealiFrame;\nexport default QurealViewer\n"],"names":["QurealiFrame","slug","type","style","React","memo","ALLOWED_ORIGINS","QurealViewer","onFormSubmit","width","height","sendToIFrame","creation_slug","log","qureal_element","document","getElementById","qureal_window","contentWindow","postMessage","handler","ev","includes","origin","babelHelpers.typeof","data","event_type","addEventListener","window","removeEventListener"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAGA,SAASA,YAAT,OAA+D;QAAvCC,IAAuC,QAAvCA,IAAuC;yBAAjCC,IAAiC;QAAjCA,IAAiC,6BAA1B,UAA0B;0BAAdC,KAAc;QAAdA,KAAc,8BAAN,EAAM;;;WAIvD;gBAAA;;;gBAEW,eADP;mBAEU;;cAEN,KAAKD,SAAS,UAAT,sCAAuDD,IAAvD,mCAA8FA;;cAEnG;uBACW,MADX;wBAEY;eACLE,KAHP;;KARZ;;;;AAmBJ,qBAAeC,MAAMC,IAAN,CAAWL,YAAX,EAAyB;WAAM,IAAN;CAAzB,CAAf;;ACtBA,IAAMM,kBAAkB,CAAC,yBAAD,EAA4B,uBAA5B,CAAxB;;AAEA,SAASC,YAAT,OAKG;yBAJCN,IAID;QAJCA,IAID,6BAJQ,WAIR;yBAHCC,IAGD;QAHCA,IAGD,6BAHQ,UAGR;iCAFCM,YAED;QAFCA,YAED,qCAFgB,YAAM,EAEtB;0BADCL,KACD;QADCA,KACD,8BADS,EAAEM,OAAO,OAAT,EAAkBC,QAAQ,OAA1B,EACT;;;QAEOC,eAAe,SAAfA,YAAe,CAACC,aAAD,EAAmB;gBAC5BC,GAAR,CAAY,wBAAZ;YACMC,iBAAiBC,SAASC,cAAT,CAAwB,eAAxB,CAAvB;;YAEMC,gBAAgBH,iBAAiBA,eAAeI,aAAhC,GAAgD,IAAtE;YACID,aAAJ,EAAmB;0BACDE,WAAd,CAA0B;8BACR,eADQ;sBAEhB;0BACIP;;aAHd,EAKG,GALH;oBAMQC,GAAR,CAAY,qBAAZ;;KAZR;;cAgBU,YAAM;qBACCZ,IAAb;KADJ,EAEG,CAACA,IAAD,CAFH;;cAIU,YAAM;YACNmB,UAAU,SAAVA,OAAU,CAACC,EAAD,EAAQ;gBAChBf,gBAAgBgB,QAAhB,CAAyBD,GAAGE,MAA5B,KAAuCC,QAAOH,GAAGI,IAAV,MAAmB,QAA9D,EAAwE;wBAC5DJ,GAAGI,IAAH,CAAQC,UAAhB;yBACS,aAAL;qCACiBL,GAAGI,IAAH,CAAQA,IAArB;;;gCAGQZ,GAAR,CAAY,qBAAZ;gCACQA,GAAR,CAAYQ,GAAGI,IAAf;;;SARhB;;eAaOE,gBAAP,CAAwB,SAAxB,EAAmCP,OAAnC;eACO;mBAAMQ,OAAOC,mBAAP,CAA2B,SAA3B,EAAsCT,OAAtC,CAAN;SAAP;KAfJ,EAgBG,EAhBH;;WAmBI,oBAACpB,cAAD;cACUC,IADV;cAEUC,IAFV;eAGWC;MAJf;;;;;"}

package/dist/index.js

@@ -1,165 +1,121 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css = "body{\n  background-color: rgb(97, 97, 97);\n}\n.styles_outerN__IxLsd{\n  padding: 10px 15px;\n  border: none;\n  outline: none;\n  background-color: black;\n  margin: 20px;\n  border-radius: 5px;\n  transition: 0.5s;\n}\n\n.styles_innerN__2mhRO{\n  font-size: 1.3rem;\n  color: #e3e3e3;\n  transition: 0.5s;\n}\n\n.styles_outerN__IxLsd:hover {\n  box-shadow: 0px 0px 22px 10px #34ebb7;\n  cursor: pointer;\n}\n\n.styles_innerN__2mhRO:hover{\n  color: #34ebb7;\n  text-shadow: 0 0 15px #34ebb7;\n}\n";
-var styles = { "outerN": "styles_outerN__IxLsd", "innerN": "styles_innerN__2mhRO" };
-styleInject(css);
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+  return typeof obj;
+} : function (obj) {
+  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
 };
 
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
+var _extends = Object.assign || function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
-var NeonButton = function (_Component) {
-  inherits(NeonButton, _Component);
-
-  function NeonButton() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    classCallCheck(this, NeonButton);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = NeonButton.__proto__ || Object.getPrototypeOf(NeonButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hover: false }, _this.getInitialState = function () {
-      return { hover: false };
-    }, _this.toggleHover = function () {
-      _this.setState({ hover: !_this.state.hover });
-    }, _temp), possibleConstructorReturn(_this, _ret);
-  }
-
-  createClass(NeonButton, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          text = _props.text,
-          color = _props.color;
-
-
-      var linkStyle;
-      if (this.state.hover) {
-        linkStyle = { color: color };
-      } else {
-        linkStyle = { color: '#e3e3e3' };
-      }
-
-      var boxStyle;
-      if (this.state.hover) {
-        boxStyle = { boxShadow: '0px 0px 22px 10px ' + color };
-      } else {
-        boxStyle = { color: '#e3e3e3' };
+    for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
       }
-
-      return React__default.createElement(
-        'button',
-        {
-          className: styles.outerN,
-          style: boxStyle,
-          onMouseEnter: this.toggleHover,
-          onMouseLeave: this.toggleHover
-        },
-        React__default.createElement(
-          'div',
-          {
-            className: styles.innerN,
-            style: linkStyle
-          },
-          text
-        )
-      );
     }
-  }]);
-  return NeonButton;
-}(React.Component);
+  }
 
-NeonButton.propTypes = {
-  text: PropTypes.string,
-  color: PropTypes.string
+  return target;
 };
 
+function QurealiFrame(_ref) {
+    var slug = _ref.slug,
+        _ref$type = _ref.type,
+        type = _ref$type === undefined ? "creation" : _ref$type,
+        _ref$style = _ref.style,
+        style = _ref$style === undefined ? {} : _ref$style;
+
+
+    return React__default.createElement(
+        React.Fragment,
+        null,
+        React__default.createElement("iframe", {
+            id: "qureal_iframe",
+            title: "Qureal"
+            // src={`http://localhost:3201/embed/${creation_slug}`}
+            , src: type === "creation" ? "https://show.qureal.com/embed/" + slug : "https://show.qureal.com/ts/" + slug
+            // src={`https://show.qureal.com/embed/${slug}`}
+            , style: _extends({
+                width: "100%",
+                height: "100%"
+            }, style)
+        })
+    );
+}
 
-NeonButton.defaultProps = {
-  text: "Enter Button Text",
-  color: "#34ebb7"
-};
+// export default QurealiFrame;
+var QurealiFrame$1 = React__default.memo(QurealiFrame, function () {
+    return true;
+});
+
+var ALLOWED_ORIGINS = ["https://show.qureal.com", "http://localhost:3201"];
+
+function QurealViewer(_ref) {
+    var _ref$slug = _ref.slug,
+        slug = _ref$slug === undefined ? "qi_sample" : _ref$slug,
+        _ref$type = _ref.type,
+        type = _ref$type === undefined ? "creation" : _ref$type,
+        _ref$onFormSubmit = _ref.onFormSubmit,
+        onFormSubmit = _ref$onFormSubmit === undefined ? function () {} : _ref$onFormSubmit,
+        _ref$style = _ref.style,
+        style = _ref$style === undefined ? { width: "800px", height: "600px" } : _ref$style;
+
+
+    var sendToIFrame = function sendToIFrame(creation_slug) {
+        console.log("Sending data to iFrame");
+        var qureal_element = document.getElementById("qureal_iframe");
+
+        var qureal_window = qureal_element ? qureal_element.contentWindow : null;
+        if (qureal_window) {
+            qureal_window.postMessage({
+                message_type: "OPEN_CREATION",
+                data: {
+                    slug: creation_slug
+                }
+            }, "*");
+            console.log("Data sent to iframe");
+        }
+    };
+
+    React.useEffect(function () {
+        sendToIFrame(slug);
+    }, [slug]);
+
+    React.useEffect(function () {
+        var handler = function handler(ev) {
+            if (ALLOWED_ORIGINS.includes(ev.origin) && _typeof(ev.data) === "object") {
+                switch (ev.data.event_type) {
+                    case "FORM_SUBMIT":
+                        onFormSubmit(ev.data.data);
+                        break;
+                    default:
+                        console.log("No event type found");
+                        console.log(ev.data);
+                }
+            }
+        };
+
+        window.addEventListener("message", handler);
+        return function () {
+            return window.removeEventListener("message", handler);
+        };
+    }, []);
+
+    return React__default.createElement(QurealiFrame$1, {
+        slug: slug,
+        type: type,
+        style: style
+    });
+}
 
-module.exports = NeonButton;
+exports.QurealViewer = QurealViewer;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/index.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nimport styles from './styles.css'\n\nclass NeonButton extends Component {\n  state={hover: false}\n  static propTypes = {\n    text: PropTypes.string,\n    color: PropTypes.string\n  }\n\n  getInitialState= ()=>{\n    return {hover: false}\n  }\n  toggleHover =()=>{\n    this.setState({hover: !this.state.hover})\n  }\n\n  render() {\n    const {\n      text, color\n    } = this.props\n\n    var linkStyle;\n    if (this.state.hover) {\n      linkStyle = {color: color}\n    } else {\n      linkStyle = {color: '#e3e3e3'}\n    }\n\n    var boxStyle;\n    if (this.state.hover) {\n      boxStyle = {boxShadow: `0px 0px 22px 10px ${color}`}\n    } else {\n       boxStyle = {color: '#e3e3e3' } \n    }\n\n\n    return (\n      <button\n        className={styles.outerN}\n        style={boxStyle}\n        onMouseEnter={this.toggleHover}\n        onMouseLeave={this.toggleHover}\n      >\n        <div\n          className={styles.innerN}\n          style={linkStyle}\n        >{text}</div>\n      </button>\n    )\n  }\n}\n\n\nNeonButton.defaultProps= {\n  text: \"Enter Button Text\",\n  color: \"#34ebb7\"\n}\n\nexport default NeonButton;\n"],"names":["NeonButton","state","hover","getInitialState","toggleHover","setState","props","text","color","linkStyle","boxStyle","boxShadow","React","styles","outerN","innerN","Component","propTypes","PropTypes","string","defaultProps"],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;EAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;EAC/B,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;;EAE5B,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;;EAExD,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;EACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;EAC5C,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;;EAExB,IAAI,QAAQ,KAAK,KAAK,EAAE;IACtB,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C,MAAM;MACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACzB;GACF,MAAM;IACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;GACzB;;EAED,IAAI,KAAK,CAAC,UAAU,EAAE;IACpB,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;GAChC,MAAM;IACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;GACjD;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICpBKA;;;;;;;;;;;;;;6LACJC,QAAM,EAACC,OAAO,KAAR,UAMNC,kBAAiB,YAAI;aACZ,EAACD,OAAO,KAAR,EAAP;aAEFE,cAAa,YAAI;YACVC,QAAL,CAAc,EAACH,OAAO,CAAC,MAAKD,KAAL,CAAWC,KAApB,EAAd;;;;;;6BAGO;mBAGH,KAAKI,KAHF;UAELC,IAFK,UAELA,IAFK;UAECC,KAFD,UAECA,KAFD;;;UAKHC,SAAJ;UACI,KAAKR,KAAL,CAAWC,KAAf,EAAsB;oBACR,EAACM,OAAOA,KAAR,EAAZ;OADF,MAEO;oBACO,EAACA,OAAO,SAAR,EAAZ;;;UAGEE,QAAJ;UACI,KAAKT,KAAL,CAAWC,KAAf,EAAsB;mBACT,EAACS,kCAAgCH,KAAjC,EAAX;OADF,MAEO;mBACO,EAACA,OAAO,SAAR,EAAX;;;aAKDI;;;qBACaC,OAAOC,MADpB;iBAESJ,QAFT;wBAGgB,KAAKN,WAHrB;wBAIgB,KAAKA;;;;;uBAGNS,OAAOE,MADpB;mBAESN;;;;OATb;;;;EAlCqBO;;AAAnBhB,WAEGiB,YAAY;QACXC,UAAUC,MADC;SAEVD,UAAUC;;;;AA+CrBnB,WAAWoB,YAAX,GAAyB;QACjB,mBADiB;SAEhB;CAFT;;;;"}
+{"version":3,"file":"index.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, type = \"creation\", style = {} }) {\n\n\n    return (\n        <Fragment>\n            <iframe\n                id=\"qureal_iframe\"\n                title=\"Qureal\"\n                // src={`http://localhost:3201/embed/${creation_slug}`}\n                src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}` : `https://show.qureal.com/ts/${slug}`}\n                // src={`https://show.qureal.com/embed/${slug}`}\n                style={{\n                    width: \"100%\",\n                    height: \"100%\",\n                    ...style\n                }}\n            />\n        </Fragment>\n    );\n}\n\n// export default QurealiFrame;\nexport default React.memo(QurealiFrame, () => true)\n","import React, { Fragment, useEffect, useRef } from \"react\";\nimport QurealiFrame from \"./QurealiFrame\";\n\nconst ALLOWED_ORIGINS = [\"https://show.qureal.com\", \"http://localhost:3201\"];\n\nfunction QurealViewer({\n    slug = \"qi_sample\",\n    type = \"creation\", // creation or template \n    onFormSubmit = () => { },\n    style = { width: \"800px\", height: \"600px\" }\n}) {\n\n    const sendToIFrame = (creation_slug) => {\n        console.log(\"Sending data to iFrame\")\n        const qureal_element = document.getElementById(\"qureal_iframe\");\n\n        const qureal_window = qureal_element ? qureal_element.contentWindow : null;\n        if (qureal_window) {\n            qureal_window.postMessage({\n                message_type: \"OPEN_CREATION\",\n                data: {\n                    slug: creation_slug\n                }\n            }, \"*\");\n            console.log(\"Data sent to iframe\")\n        }\n    }\n\n    useEffect(() => {\n        sendToIFrame(slug)\n    }, [slug])\n\n    useEffect(() => {\n        const handler = (ev) => {\n            if (ALLOWED_ORIGINS.includes(ev.origin) && typeof ev.data === \"object\") {\n                switch (ev.data.event_type) {\n                    case \"FORM_SUBMIT\":\n                        onFormSubmit(ev.data.data);\n                        break;\n                    default:\n                        console.log(\"No event type found\");\n                        console.log(ev.data);\n                }\n            }\n        };\n\n        window.addEventListener(\"message\", handler);\n        return () => window.removeEventListener(\"message\", handler);\n    }, []);\n\n    return (\n        <QurealiFrame\n            slug={slug}\n            type={type}\n            style={style}\n        />\n    );\n}\n\n// export default QurealiFrame;\nexport default QurealViewer\n"],"names":["QurealiFrame","slug","type","style","React","memo","ALLOWED_ORIGINS","QurealViewer","onFormSubmit","width","height","sendToIFrame","creation_slug","log","qureal_element","document","getElementById","qureal_window","contentWindow","postMessage","handler","ev","includes","origin","babelHelpers.typeof","data","event_type","addEventListener","window","removeEventListener"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAASA,YAAT,OAA+D;QAAvCC,IAAuC,QAAvCA,IAAuC;yBAAjCC,IAAiC;QAAjCA,IAAiC,6BAA1B,UAA0B;0BAAdC,KAAc;QAAdA,KAAc,8BAAN,EAAM;;;WAIvDC;sBAAA;;;gBAEW,eADP;mBAEU;;cAEN,KAAKF,SAAS,UAAT,sCAAuDD,IAAvD,mCAA8FA;;cAEnG;uBACW,MADX;wBAEY;eACLE,KAHP;;KARZ;;;;AAmBJ,qBAAeC,eAAMC,IAAN,CAAWL,YAAX,EAAyB;WAAM,IAAN;CAAzB,CAAf;;ACtBA,IAAMM,kBAAkB,CAAC,yBAAD,EAA4B,uBAA5B,CAAxB;;AAEA,SAASC,YAAT,OAKG;yBAJCN,IAID;QAJCA,IAID,6BAJQ,WAIR;yBAHCC,IAGD;QAHCA,IAGD,6BAHQ,UAGR;iCAFCM,YAED;QAFCA,YAED,qCAFgB,YAAM,EAEtB;0BADCL,KACD;QADCA,KACD,8BADS,EAAEM,OAAO,OAAT,EAAkBC,QAAQ,OAA1B,EACT;;;QAEOC,eAAe,SAAfA,YAAe,CAACC,aAAD,EAAmB;gBAC5BC,GAAR,CAAY,wBAAZ;YACMC,iBAAiBC,SAASC,cAAT,CAAwB,eAAxB,CAAvB;;YAEMC,gBAAgBH,iBAAiBA,eAAeI,aAAhC,GAAgD,IAAtE;YACID,aAAJ,EAAmB;0BACDE,WAAd,CAA0B;8BACR,eADQ;sBAEhB;0BACIP;;aAHd,EAKG,GALH;oBAMQC,GAAR,CAAY,qBAAZ;;KAZR;;oBAgBU,YAAM;qBACCZ,IAAb;KADJ,EAEG,CAACA,IAAD,CAFH;;oBAIU,YAAM;YACNmB,UAAU,SAAVA,OAAU,CAACC,EAAD,EAAQ;gBAChBf,gBAAgBgB,QAAhB,CAAyBD,GAAGE,MAA5B,KAAuCC,QAAOH,GAAGI,IAAV,MAAmB,QAA9D,EAAwE;wBAC5DJ,GAAGI,IAAH,CAAQC,UAAhB;yBACS,aAAL;qCACiBL,GAAGI,IAAH,CAAQA,IAArB;;;gCAGQZ,GAAR,CAAY,qBAAZ;gCACQA,GAAR,CAAYQ,GAAGI,IAAf;;;SARhB;;eAaOE,gBAAP,CAAwB,SAAxB,EAAmCP,OAAnC;eACO;mBAAMQ,OAAOC,mBAAP,CAA2B,SAA3B,EAAsCT,OAAtC,CAAN;SAAP;KAfJ,EAgBG,EAhBH;;WAmBIhB,6BAACJ,cAAD;cACUC,IADV;cAEUC,IAFV;eAGWC;MAJf;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qureal-editor",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Official Qureal React components",
   "author": "shivampip",
   "license": "MIT",