@blaze-cms/react-page-builder 0.119.0 → 0.119.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/lib/components/Banner/AdSlotRender.js +23 -9
- package/lib/components/Banner/AdSlotRender.js.map +1 -1
- package/lib-es/components/Banner/AdSlotRender.js +23 -11
- package/lib-es/components/Banner/AdSlotRender.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Banner/AdSlotRender.js +11 -7
- package/tests/unit/src/components/Banner/AdSlotRender.test.js +4 -3
- package/tests/unit/src/components/Banner/__snapshots__/AdSlotRender.test.js.snap +10 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.119.1](https://github.com/thebyte9/blaze/compare/v0.119.0...v0.119.1) (2022-01-31)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* make banner styles ssr consistent with client ([#3324](https://github.com/thebyte9/blaze/issues/3324)) ([fecfb34](https://github.com/thebyte9/blaze/commit/fecfb34d46ec624f3affc53e5f572784b1bfaf5e))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [0.119.0](https://github.com/thebyte9/blaze/compare/v0.119.0-alpha.2...v0.119.0) (2022-01-28)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @blaze-cms/react-page-builder
|
|
@@ -29,6 +29,8 @@ require("core-js/modules/es.array.map.js");
|
|
|
29
29
|
|
|
30
30
|
require("core-js/modules/es.array.concat.js");
|
|
31
31
|
|
|
32
|
+
require("core-js/modules/es.array.join.js");
|
|
33
|
+
|
|
32
34
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
33
35
|
|
|
34
36
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
@@ -53,9 +55,12 @@ var AdSlotRender = function AdSlotRender(_ref) {
|
|
|
53
55
|
parsedSizes = _ref.parsedSizes,
|
|
54
56
|
targetingArguments = _ref.targetingArguments;
|
|
55
57
|
|
|
56
|
-
var _useState = (0, _react.useState)(
|
|
58
|
+
var _useState = (0, _react.useState)({}),
|
|
57
59
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
58
|
-
|
|
60
|
+
_useState2$ = _useState2[0],
|
|
61
|
+
_useState2$$loadingSt = _useState2$.loadingStatus,
|
|
62
|
+
loadingStatus = _useState2$$loadingSt === void 0 ? _constants.BANNER_LOADING : _useState2$$loadingSt,
|
|
63
|
+
minHeight = _useState2$.minHeight,
|
|
59
64
|
setLoadingStatus = _useState2[1];
|
|
60
65
|
|
|
61
66
|
var bannerClass = "banner-".concat(sizeId);
|
|
@@ -64,26 +69,35 @@ var AdSlotRender = function AdSlotRender(_ref) {
|
|
|
64
69
|
_ref2$viewport = (0, _slicedToArray2["default"])(_ref2.viewport, 1),
|
|
65
70
|
minWidth = _ref2$viewport[0];
|
|
66
71
|
|
|
67
|
-
var
|
|
72
|
+
var minimumHeight = Math.min.apply(Math, (0, _toConsumableArray2["default"])(styleSizes.map(function (_ref3) {
|
|
68
73
|
var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
|
|
69
74
|
height = _ref4[1];
|
|
70
75
|
|
|
71
76
|
return height;
|
|
72
77
|
})));
|
|
73
|
-
return "@media(min-width:".concat(minWidth, "px){.").concat(bannerClass, "{min-height:").concat(
|
|
78
|
+
return "@media(min-width:".concat(minWidth, "px){.").concat(bannerClass, "{min-height:").concat(minimumHeight, "px;}");
|
|
74
79
|
}).sort();
|
|
75
80
|
var className = "ad-slot ad-slot-".concat(loadingStatus, " ").concat(bannerClass);
|
|
76
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, styles && /*#__PURE__*/_react["default"].createElement("style", null, styles), /*#__PURE__*/_react["default"].createElement("div", {
|
|
77
|
-
className: className
|
|
81
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, styles && /*#__PURE__*/_react["default"].createElement("style", null, styles.join('\n')), /*#__PURE__*/_react["default"].createElement("div", {
|
|
82
|
+
className: className,
|
|
83
|
+
style: {
|
|
84
|
+
minHeight: minHeight
|
|
85
|
+
}
|
|
78
86
|
}, shouldShowBanner && /*#__PURE__*/_react["default"].createElement(_reactDfp.AdSlot, {
|
|
79
87
|
adUnit: parsedAdunit,
|
|
80
88
|
sizes: parsedSizes,
|
|
81
89
|
targetingArguments: targetingArguments,
|
|
82
90
|
sizeMapping: sizeMapping,
|
|
83
|
-
onSlotRender: function onSlotRender(
|
|
84
|
-
var
|
|
91
|
+
onSlotRender: function onSlotRender(slotData) {
|
|
92
|
+
var _slotData$event = slotData.event,
|
|
93
|
+
isEmpty = _slotData$event.isEmpty,
|
|
94
|
+
size = _slotData$event.size;
|
|
95
|
+
var slotHeight = size && size.length ? size[1] : undefined;
|
|
85
96
|
var newLoadingStatus = isEmpty ? _constants.BANNER_EMPTY : _constants.BANNER_LOADED;
|
|
86
|
-
setLoadingStatus(
|
|
97
|
+
setLoadingStatus({
|
|
98
|
+
loadingStatus: newLoadingStatus,
|
|
99
|
+
minHeight: slotHeight
|
|
100
|
+
});
|
|
87
101
|
}
|
|
88
102
|
})));
|
|
89
103
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Banner/AdSlotRender.js"],"names":["AdSlotRender","shouldShowBanner","sizeMapping","sizeId","parsedAdunit","parsedSizes","targetingArguments","BANNER_LOADING","
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Banner/AdSlotRender.js"],"names":["AdSlotRender","shouldShowBanner","sizeMapping","sizeId","parsedAdunit","parsedSizes","targetingArguments","loadingStatus","BANNER_LOADING","minHeight","setLoadingStatus","bannerClass","styles","map","styleSizes","sizes","viewport","minWidth","minimumHeight","Math","min","height","sort","className","join","slotData","event","isEmpty","size","slotHeight","length","undefined","newLoadingStatus","BANNER_EMPTY","BANNER_LOADED","propTypes","PropTypes","bool","isRequired","array","string","object","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAOf;AAAA,MANJC,gBAMI,QANJA,gBAMI;AAAA,MALJC,WAKI,QALJA,WAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,YAGI,QAHJA,YAGI;AAAA,MAFJC,WAEI,QAFJA,WAEI;AAAA,MADJC,kBACI,QADJA,kBACI;;AACJ,kBAA0E,qBAAS,EAAT,CAA1E;AAAA;AAAA;AAAA,0CAASC,aAAT;AAAA,MAASA,aAAT,sCAAyBC,yBAAzB;AAAA,MAAyCC,SAAzC,eAAyCA,SAAzC;AAAA,MAAsDC,gBAAtD;;AAEA,MAAMC,WAAW,oBAAaR,MAAb,CAAjB;AAEA,MAAMS,MAAM,GACVL,aAAa,KAAKC,yBAAlB,IACAN,WAAW,CACRW,GADH,CACO,iBAAiD;AAAA,QAAvCC,UAAuC,SAA9CC,KAA8C;AAAA,+DAA3BC,QAA2B;AAAA,QAAhBC,QAAgB;;AACpD,QAAMC,aAAa,GAAGC,IAAI,CAACC,GAAL,OAAAD,IAAI,sCAAQL,UAAU,CAACD,GAAX,CAAe;AAAA;AAAA,UAAIQ,MAAJ;;AAAA,aAAgBA,MAAhB;AAAA,KAAf,CAAR,EAA1B;AACA,sCAA2BJ,QAA3B,kBAA2CN,WAA3C,yBAAqEO,aAArE;AACD,GAJH,EAKGI,IALH,EAFF;AAQA,MAAMC,SAAS,6BAAsBhB,aAAtB,cAAuCI,WAAvC,CAAf;AAEA,sBACE,kEACGC,MAAM,iBAAI,+CAAQA,MAAM,CAACY,IAAP,CAAY,IAAZ,CAAR,CADb,eAEE;AAAK,IAAA,SAAS,EAAED,SAAhB;AAA2B,IAAA,KAAK,EAAE;AAAEd,MAAAA,SAAS,EAATA;AAAF;AAAlC,KACGR,gBAAgB,iBACf,gCAAC,gBAAD;AACE,IAAA,MAAM,EAAEG,YADV;AAEE,IAAA,KAAK,EAAEC,WAFT;AAGE,IAAA,kBAAkB,EAAEC,kBAHtB;AAIE,IAAA,WAAW,EAAEJ,WAJf;AAKE,IAAA,YAAY,EAAE,sBAAAuB,QAAQ,EAAI;AACxB,4BAEIA,QAFJ,CACEC,KADF;AAAA,UACWC,OADX,mBACWA,OADX;AAAA,UACoBC,IADpB,mBACoBA,IADpB;AAGA,UAAMC,UAAU,GAAGD,IAAI,IAAIA,IAAI,CAACE,MAAb,GAAsBF,IAAI,CAAC,CAAD,CAA1B,GAAgCG,SAAnD;AACA,UAAMC,gBAAgB,GAAGL,OAAO,GAAGM,uBAAH,GAAkBC,wBAAlD;AACAxB,MAAAA,gBAAgB,CAAC;AAAEH,QAAAA,aAAa,EAAEyB,gBAAjB;AAAmCvB,QAAAA,SAAS,EAAEoB;AAA9C,OAAD,CAAhB;AACD;AAZH,IAFJ,CAFF,CADF;AAuBD,CA7CD;;AA+CA7B,YAAY,CAACmC,SAAb,GAAyB;AACvBlC,EAAAA,gBAAgB,EAAEmC,sBAAUC,IAAV,CAAeC,UADV;AAEvBpC,EAAAA,WAAW,EAAEkC,sBAAUG,KAAV,CAAgBD,UAFN;AAGvBnC,EAAAA,MAAM,EAAEiC,sBAAUI,MAAV,CAAiBF,UAHF;AAIvBlC,EAAAA,YAAY,EAAEgC,sBAAUI,MAAV,CAAiBF,UAJR;AAKvBjC,EAAAA,WAAW,EAAE+B,sBAAUG,KALA;AAMvBjC,EAAAA,kBAAkB,EAAE8B,sBAAUK,MAAV,CAAiBH;AANd,CAAzB;AASAtC,YAAY,CAAC0C,YAAb,GAA4B;AAC1BrC,EAAAA,WAAW,EAAE;AADa,CAA5B;eAIeL,Y","sourcesContent":["import React, { useState } from 'react';\nimport { AdSlot } from 'react-dfp';\nimport PropTypes from 'prop-types';\nimport { BANNER_LOADING, BANNER_EMPTY, BANNER_LOADED } from '../../constants';\n\nconst AdSlotRender = ({\n shouldShowBanner,\n sizeMapping,\n sizeId,\n parsedAdunit,\n parsedSizes,\n targetingArguments\n}) => {\n const [{ loadingStatus = BANNER_LOADING, minHeight }, setLoadingStatus] = useState({});\n\n const bannerClass = `banner-${sizeId}`;\n\n const styles =\n loadingStatus === BANNER_LOADING &&\n sizeMapping\n .map(({ sizes: styleSizes, viewport: [minWidth] }) => {\n const minimumHeight = Math.min(...styleSizes.map(([, height]) => height));\n return `@media(min-width:${minWidth}px){.${bannerClass}{min-height:${minimumHeight}px;}`;\n })\n .sort();\n const className = `ad-slot ad-slot-${loadingStatus} ${bannerClass}`;\n\n return (\n <>\n {styles && <style>{styles.join('\\n')}</style>}\n <div className={className} style={{ minHeight }}>\n {shouldShowBanner && (\n <AdSlot\n adUnit={parsedAdunit}\n sizes={parsedSizes}\n targetingArguments={targetingArguments}\n sizeMapping={sizeMapping}\n onSlotRender={slotData => {\n const {\n event: { isEmpty, size }\n } = slotData;\n const slotHeight = size && size.length ? size[1] : undefined;\n const newLoadingStatus = isEmpty ? BANNER_EMPTY : BANNER_LOADED;\n setLoadingStatus({ loadingStatus: newLoadingStatus, minHeight: slotHeight });\n }}\n />\n )}\n </div>\n </>\n );\n};\n\nAdSlotRender.propTypes = {\n shouldShowBanner: PropTypes.bool.isRequired,\n sizeMapping: PropTypes.array.isRequired,\n sizeId: PropTypes.string.isRequired,\n parsedAdunit: PropTypes.string.isRequired,\n parsedSizes: PropTypes.array,\n targetingArguments: PropTypes.object.isRequired\n};\n\nAdSlotRender.defaultProps = {\n parsedSizes: null\n};\n\nexport default AdSlotRender;\n"],"file":"AdSlotRender.js"}
|
|
@@ -11,30 +11,42 @@ const AdSlotRender = ({
|
|
|
11
11
|
parsedSizes,
|
|
12
12
|
targetingArguments
|
|
13
13
|
}) => {
|
|
14
|
-
const [
|
|
14
|
+
const [{
|
|
15
|
+
loadingStatus = BANNER_LOADING,
|
|
16
|
+
minHeight
|
|
17
|
+
}, setLoadingStatus] = useState({});
|
|
15
18
|
const bannerClass = `banner-${sizeId}`;
|
|
16
19
|
const styles = loadingStatus === BANNER_LOADING && sizeMapping.map(({
|
|
17
20
|
sizes: styleSizes,
|
|
18
21
|
viewport: [minWidth]
|
|
19
22
|
}) => {
|
|
20
|
-
const
|
|
21
|
-
return `@media(min-width:${minWidth}px){.${bannerClass}{min-height:${
|
|
23
|
+
const minimumHeight = Math.min(...styleSizes.map(([, height]) => height));
|
|
24
|
+
return `@media(min-width:${minWidth}px){.${bannerClass}{min-height:${minimumHeight}px;}`;
|
|
22
25
|
}).sort();
|
|
23
26
|
const className = `ad-slot ad-slot-${loadingStatus} ${bannerClass}`;
|
|
24
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, styles && /*#__PURE__*/React.createElement("style", null, styles), /*#__PURE__*/React.createElement("div", {
|
|
25
|
-
className: className
|
|
27
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, styles && /*#__PURE__*/React.createElement("style", null, styles.join('\n')), /*#__PURE__*/React.createElement("div", {
|
|
28
|
+
className: className,
|
|
29
|
+
style: {
|
|
30
|
+
minHeight
|
|
31
|
+
}
|
|
26
32
|
}, shouldShowBanner && /*#__PURE__*/React.createElement(AdSlot, {
|
|
27
33
|
adUnit: parsedAdunit,
|
|
28
34
|
sizes: parsedSizes,
|
|
29
35
|
targetingArguments: targetingArguments,
|
|
30
36
|
sizeMapping: sizeMapping,
|
|
31
|
-
onSlotRender:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
37
|
+
onSlotRender: slotData => {
|
|
38
|
+
const {
|
|
39
|
+
event: {
|
|
40
|
+
isEmpty,
|
|
41
|
+
size
|
|
42
|
+
}
|
|
43
|
+
} = slotData;
|
|
44
|
+
const slotHeight = size && size.length ? size[1] : undefined;
|
|
36
45
|
const newLoadingStatus = isEmpty ? BANNER_EMPTY : BANNER_LOADED;
|
|
37
|
-
setLoadingStatus(
|
|
46
|
+
setLoadingStatus({
|
|
47
|
+
loadingStatus: newLoadingStatus,
|
|
48
|
+
minHeight: slotHeight
|
|
49
|
+
});
|
|
38
50
|
}
|
|
39
51
|
})));
|
|
40
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Banner/AdSlotRender.js"],"names":["React","useState","AdSlot","PropTypes","BANNER_LOADING","BANNER_EMPTY","BANNER_LOADED","AdSlotRender","shouldShowBanner","sizeMapping","sizeId","parsedAdunit","parsedSizes","targetingArguments","loadingStatus","setLoadingStatus","bannerClass","styles","map","sizes","styleSizes","viewport","minWidth","
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Banner/AdSlotRender.js"],"names":["React","useState","AdSlot","PropTypes","BANNER_LOADING","BANNER_EMPTY","BANNER_LOADED","AdSlotRender","shouldShowBanner","sizeMapping","sizeId","parsedAdunit","parsedSizes","targetingArguments","loadingStatus","minHeight","setLoadingStatus","bannerClass","styles","map","sizes","styleSizes","viewport","minWidth","minimumHeight","Math","min","height","sort","className","join","slotData","event","isEmpty","size","slotHeight","length","undefined","newLoadingStatus","propTypes","bool","isRequired","array","string","object","defaultProps"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,cAAT,EAAyBC,YAAzB,EAAuCC,aAAvC,QAA4D,iBAA5D;;AAEA,MAAMC,YAAY,GAAG,CAAC;AACpBC,EAAAA,gBADoB;AAEpBC,EAAAA,WAFoB;AAGpBC,EAAAA,MAHoB;AAIpBC,EAAAA,YAJoB;AAKpBC,EAAAA,WALoB;AAMpBC,EAAAA;AANoB,CAAD,KAOf;AACJ,QAAM,CAAC;AAAEC,IAAAA,aAAa,GAAGV,cAAlB;AAAkCW,IAAAA;AAAlC,GAAD,EAAgDC,gBAAhD,IAAoEf,QAAQ,CAAC,EAAD,CAAlF;AAEA,QAAMgB,WAAW,GAAI,UAASP,MAAO,EAArC;AAEA,QAAMQ,MAAM,GACVJ,aAAa,KAAKV,cAAlB,IACAK,WAAW,CACRU,GADH,CACO,CAAC;AAAEC,IAAAA,KAAK,EAAEC,UAAT;AAAqBC,IAAAA,QAAQ,EAAE,CAACC,QAAD;AAA/B,GAAD,KAAiD;AACpD,UAAMC,aAAa,GAAGC,IAAI,CAACC,GAAL,CAAS,GAAGL,UAAU,CAACF,GAAX,CAAe,CAAC,GAAGQ,MAAH,CAAD,KAAgBA,MAA/B,CAAZ,CAAtB;AACA,WAAQ,oBAAmBJ,QAAS,QAAON,WAAY,eAAcO,aAAc,MAAnF;AACD,GAJH,EAKGI,IALH,EAFF;AAQA,QAAMC,SAAS,GAAI,mBAAkBf,aAAc,IAAGG,WAAY,EAAlE;AAEA,sBACE,0CACGC,MAAM,iBAAI,mCAAQA,MAAM,CAACY,IAAP,CAAY,IAAZ,CAAR,CADb,eAEE;AAAK,IAAA,SAAS,EAAED,SAAhB;AAA2B,IAAA,KAAK,EAAE;AAAEd,MAAAA;AAAF;AAAlC,KACGP,gBAAgB,iBACf,oBAAC,MAAD;AACE,IAAA,MAAM,EAAEG,YADV;AAEE,IAAA,KAAK,EAAEC,WAFT;AAGE,IAAA,kBAAkB,EAAEC,kBAHtB;AAIE,IAAA,WAAW,EAAEJ,WAJf;AAKE,IAAA,YAAY,EAAEsB,QAAQ,IAAI;AACxB,YAAM;AACJC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,OAAF;AAAWC,UAAAA;AAAX;AADH,UAEFH,QAFJ;AAGA,YAAMI,UAAU,GAAGD,IAAI,IAAIA,IAAI,CAACE,MAAb,GAAsBF,IAAI,CAAC,CAAD,CAA1B,GAAgCG,SAAnD;AACA,YAAMC,gBAAgB,GAAGL,OAAO,GAAG5B,YAAH,GAAkBC,aAAlD;AACAU,MAAAA,gBAAgB,CAAC;AAAEF,QAAAA,aAAa,EAAEwB,gBAAjB;AAAmCvB,QAAAA,SAAS,EAAEoB;AAA9C,OAAD,CAAhB;AACD;AAZH,IAFJ,CAFF,CADF;AAuBD,CA7CD;;AA+CA5B,YAAY,CAACgC,SAAb,GAAyB;AACvB/B,EAAAA,gBAAgB,EAAEL,SAAS,CAACqC,IAAV,CAAeC,UADV;AAEvBhC,EAAAA,WAAW,EAAEN,SAAS,CAACuC,KAAV,CAAgBD,UAFN;AAGvB/B,EAAAA,MAAM,EAAEP,SAAS,CAACwC,MAAV,CAAiBF,UAHF;AAIvB9B,EAAAA,YAAY,EAAER,SAAS,CAACwC,MAAV,CAAiBF,UAJR;AAKvB7B,EAAAA,WAAW,EAAET,SAAS,CAACuC,KALA;AAMvB7B,EAAAA,kBAAkB,EAAEV,SAAS,CAACyC,MAAV,CAAiBH;AANd,CAAzB;AASAlC,YAAY,CAACsC,YAAb,GAA4B;AAC1BjC,EAAAA,WAAW,EAAE;AADa,CAA5B;AAIA,eAAeL,YAAf","sourcesContent":["import React, { useState } from 'react';\nimport { AdSlot } from 'react-dfp';\nimport PropTypes from 'prop-types';\nimport { BANNER_LOADING, BANNER_EMPTY, BANNER_LOADED } from '../../constants';\n\nconst AdSlotRender = ({\n shouldShowBanner,\n sizeMapping,\n sizeId,\n parsedAdunit,\n parsedSizes,\n targetingArguments\n}) => {\n const [{ loadingStatus = BANNER_LOADING, minHeight }, setLoadingStatus] = useState({});\n\n const bannerClass = `banner-${sizeId}`;\n\n const styles =\n loadingStatus === BANNER_LOADING &&\n sizeMapping\n .map(({ sizes: styleSizes, viewport: [minWidth] }) => {\n const minimumHeight = Math.min(...styleSizes.map(([, height]) => height));\n return `@media(min-width:${minWidth}px){.${bannerClass}{min-height:${minimumHeight}px;}`;\n })\n .sort();\n const className = `ad-slot ad-slot-${loadingStatus} ${bannerClass}`;\n\n return (\n <>\n {styles && <style>{styles.join('\\n')}</style>}\n <div className={className} style={{ minHeight }}>\n {shouldShowBanner && (\n <AdSlot\n adUnit={parsedAdunit}\n sizes={parsedSizes}\n targetingArguments={targetingArguments}\n sizeMapping={sizeMapping}\n onSlotRender={slotData => {\n const {\n event: { isEmpty, size }\n } = slotData;\n const slotHeight = size && size.length ? size[1] : undefined;\n const newLoadingStatus = isEmpty ? BANNER_EMPTY : BANNER_LOADED;\n setLoadingStatus({ loadingStatus: newLoadingStatus, minHeight: slotHeight });\n }}\n />\n )}\n </div>\n </>\n );\n};\n\nAdSlotRender.propTypes = {\n shouldShowBanner: PropTypes.bool.isRequired,\n sizeMapping: PropTypes.array.isRequired,\n sizeId: PropTypes.string.isRequired,\n parsedAdunit: PropTypes.string.isRequired,\n parsedSizes: PropTypes.array,\n targetingArguments: PropTypes.object.isRequired\n};\n\nAdSlotRender.defaultProps = {\n parsedSizes: null\n};\n\nexport default AdSlotRender;\n"],"file":"AdSlotRender.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/react-page-builder",
|
|
3
|
-
"version": "0.119.
|
|
3
|
+
"version": "0.119.1",
|
|
4
4
|
"description": "Blaze react page builder",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-es/index.js",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"lib/*",
|
|
84
84
|
"lib-es/*"
|
|
85
85
|
],
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "304de40876cd01eac0bdfeca3d020a1004b1a8fd"
|
|
87
87
|
}
|
|
@@ -11,7 +11,7 @@ const AdSlotRender = ({
|
|
|
11
11
|
parsedSizes,
|
|
12
12
|
targetingArguments
|
|
13
13
|
}) => {
|
|
14
|
-
const [loadingStatus, setLoadingStatus] = useState(
|
|
14
|
+
const [{ loadingStatus = BANNER_LOADING, minHeight }, setLoadingStatus] = useState({});
|
|
15
15
|
|
|
16
16
|
const bannerClass = `banner-${sizeId}`;
|
|
17
17
|
|
|
@@ -19,25 +19,29 @@ const AdSlotRender = ({
|
|
|
19
19
|
loadingStatus === BANNER_LOADING &&
|
|
20
20
|
sizeMapping
|
|
21
21
|
.map(({ sizes: styleSizes, viewport: [minWidth] }) => {
|
|
22
|
-
const
|
|
23
|
-
return `@media(min-width:${minWidth}px){.${bannerClass}{min-height:${
|
|
22
|
+
const minimumHeight = Math.min(...styleSizes.map(([, height]) => height));
|
|
23
|
+
return `@media(min-width:${minWidth}px){.${bannerClass}{min-height:${minimumHeight}px;}`;
|
|
24
24
|
})
|
|
25
25
|
.sort();
|
|
26
26
|
const className = `ad-slot ad-slot-${loadingStatus} ${bannerClass}`;
|
|
27
27
|
|
|
28
28
|
return (
|
|
29
29
|
<>
|
|
30
|
-
{styles && <style>{styles}</style>}
|
|
31
|
-
<div className={className}>
|
|
30
|
+
{styles && <style>{styles.join('\n')}</style>}
|
|
31
|
+
<div className={className} style={{ minHeight }}>
|
|
32
32
|
{shouldShowBanner && (
|
|
33
33
|
<AdSlot
|
|
34
34
|
adUnit={parsedAdunit}
|
|
35
35
|
sizes={parsedSizes}
|
|
36
36
|
targetingArguments={targetingArguments}
|
|
37
37
|
sizeMapping={sizeMapping}
|
|
38
|
-
onSlotRender={
|
|
38
|
+
onSlotRender={slotData => {
|
|
39
|
+
const {
|
|
40
|
+
event: { isEmpty, size }
|
|
41
|
+
} = slotData;
|
|
42
|
+
const slotHeight = size && size.length ? size[1] : undefined;
|
|
39
43
|
const newLoadingStatus = isEmpty ? BANNER_EMPTY : BANNER_LOADED;
|
|
40
|
-
setLoadingStatus(newLoadingStatus);
|
|
44
|
+
setLoadingStatus({ loadingStatus: newLoadingStatus, minHeight: slotHeight });
|
|
41
45
|
}}
|
|
42
46
|
/>
|
|
43
47
|
)}
|
|
@@ -9,8 +9,8 @@ jest.mock('react-dfp', () => {
|
|
|
9
9
|
<div
|
|
10
10
|
data-testid="adslot-test"
|
|
11
11
|
role="button"
|
|
12
|
-
onMouseLeave={() => onSlotRender({ event: { isEmpty: true } })}
|
|
13
|
-
onMouseOver={() => onSlotRender({ event: { isEmpty: false } })}
|
|
12
|
+
onMouseLeave={() => onSlotRender({ event: { isEmpty: true, size: null } })}
|
|
13
|
+
onMouseOver={() => onSlotRender({ event: { isEmpty: false, size: [970, 250] } })}
|
|
14
14
|
/>
|
|
15
15
|
);
|
|
16
16
|
return { AdSlot };
|
|
@@ -61,7 +61,7 @@ describe('Banner render component', () => {
|
|
|
61
61
|
expect(asFragment()).toMatchSnapshot();
|
|
62
62
|
});
|
|
63
63
|
|
|
64
|
-
it('should change class and remove styles after loaded events', async () => {
|
|
64
|
+
it('should change class and remove responsive styles after loaded events', async () => {
|
|
65
65
|
const { asFragment, container, getByTestId } = render(<AdSlotRender {...defaultProps} />);
|
|
66
66
|
const adSlot = getByTestId(slotTestId);
|
|
67
67
|
|
|
@@ -69,6 +69,7 @@ describe('Banner render component', () => {
|
|
|
69
69
|
await waitFor(() =>
|
|
70
70
|
expect(container.childNodes[0]).toHaveClass('ad-slot ad-slot-loaded banner-sizeId')
|
|
71
71
|
);
|
|
72
|
+
expect(container.childNodes[0]).toHaveStyle('min-height: 250px');
|
|
72
73
|
expect(asFragment()).toMatchSnapshot();
|
|
73
74
|
|
|
74
75
|
fireEvent.mouseLeave(adSlot);
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
-
exports[`Banner render component AdSlot loading should change class and remove styles after loaded events 1`] = `
|
|
3
|
+
exports[`Banner render component AdSlot loading should change class and remove responsive styles after loaded events 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
5
|
<div
|
|
6
6
|
class="ad-slot ad-slot-loaded banner-sizeId"
|
|
7
|
+
style="min-height: 250px;"
|
|
7
8
|
>
|
|
8
9
|
<div
|
|
9
10
|
data-testid="adslot-test"
|
|
@@ -13,10 +14,11 @@ exports[`Banner render component AdSlot loading should change class and remove s
|
|
|
13
14
|
</DocumentFragment>
|
|
14
15
|
`;
|
|
15
16
|
|
|
16
|
-
exports[`Banner render component AdSlot loading should change class and remove styles after loaded events 2`] = `
|
|
17
|
+
exports[`Banner render component AdSlot loading should change class and remove responsive styles after loaded events 2`] = `
|
|
17
18
|
<DocumentFragment>
|
|
18
19
|
<div
|
|
19
20
|
class="ad-slot ad-slot-empty banner-sizeId"
|
|
21
|
+
style=""
|
|
20
22
|
>
|
|
21
23
|
<div
|
|
22
24
|
data-testid="adslot-test"
|
|
@@ -29,7 +31,9 @@ exports[`Banner render component AdSlot loading should change class and remove s
|
|
|
29
31
|
exports[`Banner render component AdSlot loading should render AdSlot 1`] = `
|
|
30
32
|
<DocumentFragment>
|
|
31
33
|
<style>
|
|
32
|
-
@media(min-width:320px){.banner-sizeId{min-height:100px;}
|
|
34
|
+
@media(min-width:320px){.banner-sizeId{min-height:100px;}
|
|
35
|
+
@media(min-width:728px){.banner-sizeId{min-height:100px;}
|
|
36
|
+
@media(min-width:970px){.banner-sizeId{min-height:250px;}
|
|
33
37
|
</style>
|
|
34
38
|
<div
|
|
35
39
|
class="ad-slot ad-slot-loading banner-sizeId"
|
|
@@ -45,7 +49,9 @@ exports[`Banner render component AdSlot loading should render AdSlot 1`] = `
|
|
|
45
49
|
exports[`Banner render component should not render AdSlot if shouldShowBanner=false but should render styles and wrapper 1`] = `
|
|
46
50
|
<DocumentFragment>
|
|
47
51
|
<style>
|
|
48
|
-
@media(min-width:320px){.banner-sizeId{min-height:100px;}
|
|
52
|
+
@media(min-width:320px){.banner-sizeId{min-height:100px;}
|
|
53
|
+
@media(min-width:728px){.banner-sizeId{min-height:100px;}
|
|
54
|
+
@media(min-width:970px){.banner-sizeId{min-height:250px;}
|
|
49
55
|
</style>
|
|
50
56
|
<div
|
|
51
57
|
class="ad-slot ad-slot-loading banner-sizeId"
|