@front10/basic-widget - npm Package Compare versions

Comparing version 0.22.18 to 0.22.19

dist/basic-widget.cjs.development.js

@@ -5,4 +5,7 @@ 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
 var baseElements = require('@front10/base-elements');
 var React = require('react');
+var React__default = _interopDefault(React);
 var nanoid = require('nanoid');
@@ -211,29 +214,17 @@ var containerElements = require('@front10/container-elements');
       height = _ref$height === void 0 ? "auto" : _ref$height,
-      ref = _ref.ref,
-      cmpId = _ref.cmpId,
-      props = _objectWithoutPropertiesLoose(_ref, ["width", "height", "ref", "cmpId"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["width", "height", "ref"]);
 
-  React.useEffect(function () {
-    var _window2, _window2$MC;
+  var _React$useState = React__default.useState(true),
+      isLoading = _React$useState[0],
+      setIsLoading = _React$useState[1];
 
-    var sendParentId = function sendParentId() {
-      var _window, _window$MC, _ref$current;
+  var handleLoad = function handleLoad() {
+    setIsLoading(false);
+  };
 
-      // @ts-ignore
-      (_window = window) === null || _window === void 0 ? void 0 : (_window$MC = _window.MC) === null || _window$MC === void 0 ? void 0 : _window$MC.Helpers.sendMessages(ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contentWindow, "on-update-parent-id", {
-        cmpId: cmpId
-      });
-    }; // @ts-ignore
-
-
-    (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$MC = _window2.MC) === null || _window2$MC === void 0 ? void 0 : _window2$MC.Helpers.listenMessages("on-request-parent-id", sendParentId);
-    return function () {
-      window.removeEventListener("message", sendParentId);
-    };
-  }, [ref, cmpId]);
-  return React.createElement(baseElements.Embed, Object.assign({
+  return React__default.createElement(React__default.Fragment, null, isLoading && React__default.createElement(baseElements.Loader, null), React__default.createElement(baseElements.Embed, Object.assign({
+    onLoad: handleLoad,
     height: height,
-    width: width,
-    ref: ref
-  }, props));
+    width: width
+  }, props)));
 };
@@ -240,0 +231,0 @@

dist/basic-widget.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@front10/base-elements"),t=require("react"),n=require("nanoid"),i=require("@front10/container-elements");function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)t.indexOf(n=o[i])>=0||(r[n]=e[n]);return r}var a=function(n){var i=n.level,a=void 0===i?2:i,d=n.content,c=void 0===d?"":d,g=n.sx,l=o(n,["level","content","sx"]),s="h2",u="fontSize2";return 0===a||"0"===a?s="span":a>=0&&a<7&&(s="h"+a,u="fontSize"+a),t.createElement(e.Heading,Object.assign({variant:u,color:"coverHeading",sx:r({width:"100%"},g)},l,{as:s}),c)},d=function(e,t,n){return"circular"===e?"radial-gradient(at center center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"up"===e?"linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"45deg"===e?"linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"-45deg"===e?"linear-gradient(-45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)"},c=function(n){var i=n.width,r=void 0===i?"100%":i,a=n.height,d=void 0===a?"auto":a,c=n.ref,g=n.cmpId,l=o(n,["width","height","ref","cmpId"]);return t.useEffect((function(){var e,t,n=function(){var e,t,n;null===(e=window)||void 0===e||null===(t=e.MC)||void 0===t||t.Helpers.sendMessages(null==c||null===(n=c.current)||void 0===n?void 0:n.contentWindow,"on-update-parent-id",{cmpId:g})};return null===(e=window)||void 0===e||null===(t=e.MC)||void 0===t||t.Helpers.listenMessages("on-request-parent-id",n),function(){window.removeEventListener("message",n)}}),[c,g]),t.createElement(e.Embed,Object.assign({height:d,width:r,ref:c},l))},g={cover:function(n){var i=n.src,r=n.backgroundColor,c=void 0===r?"white":r,g=n.backgroundPosition,l=void 0===g?"center":g,s=n.headingContent,u=void 0===s?"":s,h=n.headingSpacing,v=void 0===h?"16px":h,p=n.subHeadingContent,b=void 0===p?"":p,m=n.subHeadingColor,f=void 0===m?"white":m,w=n.parallax,x=void 0===w||w,y=n.buttonsSpacing,E=void 0===y?"48px":y,B=n.backgroundGradient,O=void 0===B?"circular":B,k=n.gradientReduction,j=void 0===k?50:k,C=n.headingColor,S=void 0===C?"white":C,H=n.gradientColor,I=void 0===H?"#454545":H,P=n.width,q=void 0===P?"100%":P,z=n.height,L=void 0===z?"400px":z,M=n.heading,R=n.subHeading,T=n.primaryButton,Y=n.secondaryButton,A=n.align,G=void 0===A?"center":A,W=n.alignY,_=void 0===W?"center":W,N=n.showHeading,Q=void 0===N||N,U=n.showSubHeading,V=void 0===U||U,D=n.showButtons,F=void 0===D||D,J=n.showPrimaryButton,K=void 0===J||J,X=n.showSecondaryButton,Z=void 0===X||X,$=n.container,ee=o(n,["src","backgroundColor","backgroundPosition","headingContent","headingSpacing","subHeadingContent","subHeadingColor","parallax","buttonsSpacing","backgroundGradient","gradientReduction","headingColor","gradientColor","width","height","heading","subHeading","primaryButton","secondaryButton","align","alignY","showHeading","showSubHeading","showButtons","showPrimaryButton","showSecondaryButton","container"]);return t.createElement(e.Inline,Object.assign({variant:"layout.container",m:"0"},$,{as:"figure"}),t.createElement(e.Inline,Object.assign({align:G,alignY:_,sx:{position:"relative",backgroundImage:("none"===O?"":d(O,j,I)+",")+' url("'+i+'")',backgroundColor:c,backgroundSize:"cover",backgroundPosition:l,backgroundAttachment:x?"fixed":"unset",backgroundBlendMode:"multiply",width:q,height:L,"::after":{display:"block",minHeight:"inherit","font-size":0,content:"none"}}},ee),t.createElement(e.Box,{sx:{zIndex:1,paddingTop:"80px",paddingBottom:"80px"}},Q&&t.createElement(a,Object.assign({content:u,textAlign:G,p:"1",variant:"layout.heading",sx:{mb:v,color:S,textTransform:"uppercase",textShadow:"0px 3px 6px rgba(0,0,0,0)"}},M)),V&&t.createElement(e.Paragraph,Object.assign({content:b,textAlign:G,variant:"text.fontSize2",sx:{color:f,textShadow:"0px 3px 6px rgba(0,0,0,0)"}},R)),F&&t.createElement(e.Inline,{gap:4,align:G,sx:{mt:E}},K&&t.createElement(e.LinkButton,Object.assign({variant:"coverPrimary"},T)),Z&&t.createElement(e.LinkButton,Object.assign({variant:"coverSecondary"},Y))))))},heading:a,html:e.CustomHtml,paragraph:e.Paragraph,image:function(n){var i=n.width,a=n.height,d=n.sx,c=o(n,["align","width","height","sx","ref"]);return t.createElement(e.Image,Object.assign({},c,{sx:r({width:i,height:a},d)}))},quote:e.Quote,video:function(i){var a=i.align,d=void 0===a?"center":a,g=i.width,l=i.height,s=i.sx,u=i.src,h=void 0===u?"":u,v=o(i,["align","width","height","sx","ref","src"]);if(""!==h&&!function(e){return!window||""===e||"https"!==window.location.protocol.slice(0,window.location.protocol.length-1).toLowerCase()||/^https:/i.test(e)}(h))return t.createElement(e.Inline,{align:"center",alignY:"center"},t.createElement("p",null,"The source url is at different http protocol"));if(/youtube.com/.test(h)){var p=function(e){void 0===e&&(e="");var t=e.match(/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/),n=t&&11===t[7].length?t[7]:"";return""===n&&console.log("Not valid youtube URl"),"https://www.youtube.com/embed/"+n}(h);return t.createElement(c,Object.assign({},v,{align:d,src:p+=v.controls?"?controls=1":"?controls=0",width:g,height:l,sx:r({},s),title:n.nanoid()}))}return t.createElement(e.Video,Object.assign({},v,{src:h,sx:r({width:g,height:l},s)}))},embed:c,"link-button":function(n){var i=o(n,["align"]);return t.createElement(e.LinkButton,Object.assign({},i))},separator:e.Separator,box:e.Box,inline:e.Inline,grid:e.Grid,stack:e.Stack};function l(n){var i=n.container,r=function e(n){var i=n.type,r=n.settings,a=r.children,d=o(r,["children"]),c=g[i];return a?t.createElement(c,Object.assign({},d),a.map((function(t){return e(t)}))):t.createElement(c,Object.assign({},d))}(o(n,["container"]));return t.createElement(e.Inline,Object.assign({ml:"auto",mr:"auto",variant:"layout.container"},i),r)}exports.BasicWidget=i.withContainer(l,{layout:{container:{display:"flex"},quote:{variant:"text.fontSize4",paddingTop:2,paddingBottom:2,paddingLeft:4,paddingRight:4,marginBottom:4,margin:0,p:{marginBottom:3}},footer:{color:"softColor"}}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("@front10/base-elements"),n=require("react"),i=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,a=require("nanoid"),r=require("@front10/container-elements");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}function c(e,t){if(null==e)return{};var n,i,a={},r=Object.keys(e);for(i=0;i<r.length;i++)t.indexOf(n=r[i])>=0||(a[n]=e[n]);return a}var d=function(e){var i=e.level,a=void 0===i?2:i,r=e.content,d=void 0===r?"":r,g=e.sx,l=c(e,["level","content","sx"]),s="h2",u="fontSize2";return 0===a||"0"===a?s="span":a>=0&&a<7&&(s="h"+a,u="fontSize"+a),n.createElement(t.Heading,Object.assign({variant:u,color:"coverHeading",sx:o({width:"100%"},g)},l,{as:s}),d)},g=function(e,t,n){return"circular"===e?"radial-gradient(at center center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"up"===e?"linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"45deg"===e?"linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"-45deg"===e?"linear-gradient(-45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)":"linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) "+t+"%, "+n+" 100%)"},l=function(e){var n=e.width,a=void 0===n?"100%":n,r=e.height,o=void 0===r?"auto":r,d=c(e,["width","height","ref"]),g=i.useState(!0),l=g[1];return i.createElement(i.Fragment,null,g[0]&&i.createElement(t.Loader,null),i.createElement(t.Embed,Object.assign({onLoad:function(){l(!1)},height:o,width:a},d)))},s={cover:function(e){var i=e.src,a=e.backgroundColor,r=void 0===a?"white":a,o=e.backgroundPosition,l=void 0===o?"center":o,s=e.headingContent,u=void 0===s?"":s,h=e.headingSpacing,b=void 0===h?"16px":h,v=e.subHeadingContent,p=void 0===v?"":v,m=e.subHeadingColor,f=void 0===m?"white":m,x=e.parallax,w=void 0===x||x,y=e.buttonsSpacing,E=void 0===y?"48px":y,B=e.backgroundGradient,O=void 0===B?"circular":B,j=e.gradientReduction,k=void 0===j?50:j,S=e.headingColor,C=void 0===S?"white":S,H=e.gradientColor,P=void 0===H?"#454545":H,I=e.width,z=void 0===I?"100%":I,L=e.height,q=void 0===L?"400px":L,R=e.heading,T=e.subHeading,Y=e.primaryButton,A=e.secondaryButton,G=e.align,M=void 0===G?"center":G,_=e.alignY,F=void 0===_?"center":_,N=e.showHeading,Q=void 0===N||N,U=e.showSubHeading,V=void 0===U||U,W=e.showButtons,D=void 0===W||W,J=e.showPrimaryButton,K=void 0===J||J,X=e.showSecondaryButton,Z=void 0===X||X,$=e.container,ee=c(e,["src","backgroundColor","backgroundPosition","headingContent","headingSpacing","subHeadingContent","subHeadingColor","parallax","buttonsSpacing","backgroundGradient","gradientReduction","headingColor","gradientColor","width","height","heading","subHeading","primaryButton","secondaryButton","align","alignY","showHeading","showSubHeading","showButtons","showPrimaryButton","showSecondaryButton","container"]);return n.createElement(t.Inline,Object.assign({variant:"layout.container",m:"0"},$,{as:"figure"}),n.createElement(t.Inline,Object.assign({align:M,alignY:F,sx:{position:"relative",backgroundImage:("none"===O?"":g(O,k,P)+",")+' url("'+i+'")',backgroundColor:r,backgroundSize:"cover",backgroundPosition:l,backgroundAttachment:w?"fixed":"unset",backgroundBlendMode:"multiply",width:z,height:q,"::after":{display:"block",minHeight:"inherit","font-size":0,content:"none"}}},ee),n.createElement(t.Box,{sx:{zIndex:1,paddingTop:"80px",paddingBottom:"80px"}},Q&&n.createElement(d,Object.assign({content:u,textAlign:M,p:"1",variant:"layout.heading",sx:{mb:b,color:C,textTransform:"uppercase",textShadow:"0px 3px 6px rgba(0,0,0,0)"}},R)),V&&n.createElement(t.Paragraph,Object.assign({content:p,textAlign:M,variant:"text.fontSize2",sx:{color:f,textShadow:"0px 3px 6px rgba(0,0,0,0)"}},T)),D&&n.createElement(t.Inline,{gap:4,align:M,sx:{mt:E}},K&&n.createElement(t.LinkButton,Object.assign({variant:"coverPrimary"},Y)),Z&&n.createElement(t.LinkButton,Object.assign({variant:"coverSecondary"},A))))))},heading:d,html:t.CustomHtml,paragraph:t.Paragraph,image:function(e){var i=e.width,a=e.height,r=e.sx,d=c(e,["align","width","height","sx","ref"]);return n.createElement(t.Image,Object.assign({},d,{sx:o({width:i,height:a},r)}))},quote:t.Quote,video:function(e){var i=e.align,r=void 0===i?"center":i,d=e.width,g=e.height,s=e.sx,u=e.src,h=void 0===u?"":u,b=c(e,["align","width","height","sx","ref","src"]);if(""!==h&&!function(e){return!window||""===e||"https"!==window.location.protocol.slice(0,window.location.protocol.length-1).toLowerCase()||/^https:/i.test(e)}(h))return n.createElement(t.Inline,{align:"center",alignY:"center"},n.createElement("p",null,"The source url is at different http protocol"));if(/youtube.com/.test(h)){var v=function(e){void 0===e&&(e="");var t=e.match(/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/),n=t&&11===t[7].length?t[7]:"";return""===n&&console.log("Not valid youtube URl"),"https://www.youtube.com/embed/"+n}(h);return n.createElement(l,Object.assign({},b,{align:r,src:v+=b.controls?"?controls=1":"?controls=0",width:d,height:g,sx:o({},s),title:a.nanoid()}))}return n.createElement(t.Video,Object.assign({},b,{src:h,sx:o({width:d,height:g},s)}))},embed:l,"link-button":function(e){var i=c(e,["align"]);return n.createElement(t.LinkButton,Object.assign({},i))},separator:t.Separator,box:t.Box,inline:t.Inline,grid:t.Grid,stack:t.Stack};function u(e){var i=e.container,a=function e(t){var i=t.type,a=t.settings,r=a.children,o=c(a,["children"]),d=s[i];return r?n.createElement(d,Object.assign({},o),r.map((function(t){return e(t)}))):n.createElement(d,Object.assign({},o))}(c(e,["container"]));return n.createElement(t.Inline,Object.assign({ml:"auto",mr:"auto",variant:"layout.container"},i),a)}exports.BasicWidget=r.withContainer(u,{layout:{container:{display:"flex"},quote:{variant:"text.fontSize4",paddingTop:2,paddingBottom:2,paddingLeft:4,paddingRight:4,marginBottom:4,margin:0,p:{marginBottom:3}},footer:{color:"softColor"}}});
 //# sourceMappingURL=basic-widget.cjs.production.min.js.map

dist/basic-widget.esm.js

@@ -1,3 +0,3 @@
-import { Heading as Heading$1, Inline, Box, Paragraph, LinkButton as LinkButton$1, Image as Image$1, Embed as Embed$1, Video as Video$1, CustomHtml, Quote, Separator, Grid, Stack } from '@front10/base-elements';
-import { createElement, useEffect } from 'react';
+import { Heading as Heading$1, Inline, Box, Paragraph, LinkButton as LinkButton$1, Image as Image$1, Loader, Embed as Embed$1, Video as Video$1, CustomHtml, Quote, Separator, Grid, Stack } from '@front10/base-elements';
+import React__default, { createElement } from 'react';
 import { nanoid } from 'nanoid';
@@ -206,29 +206,17 @@ import { withContainer } from '@front10/container-elements';
       height = _ref$height === void 0 ? "auto" : _ref$height,
-      ref = _ref.ref,
-      cmpId = _ref.cmpId,
-      props = _objectWithoutPropertiesLoose(_ref, ["width", "height", "ref", "cmpId"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["width", "height", "ref"]);
 
-  useEffect(function () {
-    var _window2, _window2$MC;
+  var _React$useState = React__default.useState(true),
+      isLoading = _React$useState[0],
+      setIsLoading = _React$useState[1];
 
-    var sendParentId = function sendParentId() {
-      var _window, _window$MC, _ref$current;
+  var handleLoad = function handleLoad() {
+    setIsLoading(false);
+  };
 
-      // @ts-ignore
-      (_window = window) === null || _window === void 0 ? void 0 : (_window$MC = _window.MC) === null || _window$MC === void 0 ? void 0 : _window$MC.Helpers.sendMessages(ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contentWindow, "on-update-parent-id", {
-        cmpId: cmpId
-      });
-    }; // @ts-ignore
-
-
-    (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$MC = _window2.MC) === null || _window2$MC === void 0 ? void 0 : _window2$MC.Helpers.listenMessages("on-request-parent-id", sendParentId);
-    return function () {
-      window.removeEventListener("message", sendParentId);
-    };
-  }, [ref, cmpId]);
-  return createElement(Embed$1, Object.assign({
+  return React__default.createElement(React__default.Fragment, null, isLoading && React__default.createElement(Loader, null), React__default.createElement(Embed$1, Object.assign({
+    onLoad: handleLoad,
     height: height,
-    width: width,
-    ref: ref
-  }, props));
+    width: width
+  }, props)));
 };
@@ -235,0 +223,0 @@

dist/Embed.d.ts

@@ -10,3 +10,3 @@ /// <reference types="react" />
 export declare type ParagraphProps = CustomProps & BaseProps;
-export declare const Embed: ({ width, height, ref, cmpId, ...props }: ParagraphProps) => JSX.Element;
+export declare const Embed: ({ width, height, ref, ...props }: ParagraphProps) => JSX.Element;
 export {};

package.json

 {
-  "version": "0.22.18",
+  "version": "0.22.19",
   "license": "",
@@ -40,7 +40,7 @@ "main": "dist/index.js",
   "dependencies": {
-    "@front10/base-elements": "^0.22.18",
-    "@front10/container-elements": "^0.22.18",
-    "@front10/utils": "^0.22.18"
+    "@front10/base-elements": "^0.22.19",
+    "@front10/container-elements": "^0.22.19",
+    "@front10/utils": "^0.22.19"
   },
-  "gitHead": "ab3641e4580d0f429e93efd5e6d92e3987bef196"
+  "gitHead": "50c88ff1612adc1e1e838352cee7f0c3e75073ce"
 }

No alert changes

Worsened metrics

Total package byte prevSize

115282

decreased by-2.59%

Lines of code

1308

decreased by-1.58%

Dependency changes

• Updated@front10/base-elements@^0.22.19

• Updated@front10/container-elements@^0.22.19

• Updated@front10/utils@^0.22.19