@twreporter/react-article-components 2.1.0 → 2.1.1-beta.0

package/lib/components/body/embedded-code.js

@@ -78,7 +78,8 @@ var _ = {
 };
 var embedNamespace = {
   infogram: 'infogram',
-  twreporter: '__twreporterEmbeddedData'
+  twreporter: '__twreporterEmbeddedData',
+  storyTellingReporter: '@story-telling-reporter'
 };
 
 var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -207,17 +208,23 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(EmbeddedCode, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$_embeddedCodeWi, _this$_embeddedCode;
-
-      // Delay loading infogram in loadEmbed()
-      if (!((_this$_embeddedCodeWi = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi !== void 0 && _this$_embeddedCodeWi.includes(embedNamespace.infogram))) {
-        this.setState({
-          isLoaded: true
-        }, this.executeScript);
-      } // Deliberately set z-index for embeded from @twreporter
-
-
-      if ((_this$_embeddedCode = this._embeddedCode) !== null && _this$_embeddedCode !== void 0 && _this$_embeddedCode.includes(embedNamespace.twreporter)) {
+      var _this$_embeddedCode, _this$_embeddedCode2;
+
+      //  !! WORKAROUND !!
+      //  After upgrading to react v18,
+      //  `EmbeddedCode` component becomes abnormal.
+      //  One case is that `EmbeddedCode` will `executeScript()` twice.
+      //  Therefore, the embedded code will generate duplicate contents.
+      //
+      //  To avoid `executeScript()` twice,
+      //  temporarily comment out the following condition.
+      //
+      //  Delay loading infogram in loadEmbed()
+      // if (!this._embeddedCodeWithoutScript?.includes(embedNamespace.infogram)) {
+      //   this.setState({ isLoaded: true }, this.executeScript)
+      // }
+      // Deliberately set z-index for embeded from @twreporter
+      if ((_this$_embeddedCode = this._embeddedCode) !== null && _this$_embeddedCode !== void 0 && _this$_embeddedCode.includes(embedNamespace.twreporter) || (_this$_embeddedCode2 = this._embeddedCode) !== null && _this$_embeddedCode2 !== void 0 && _this$_embeddedCode2.includes(embedNamespace.storyTellingReporter)) {
         this.setState({
           shouldEscalateZIndex: true
         });
@@ -234,7 +241,7 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$_embeddedCodeWi2;
+      var _this$_embeddedCodeWi;
 
       var className = this.props.className;
       var shouldEscalateZIndex = this.state.shouldEscalateZIndex;
@@ -249,7 +256,7 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
         }
       }), this._caption ? /*#__PURE__*/_react["default"].createElement(Caption, null, this._caption) : null);
 
-      if ((_this$_embeddedCodeWi2 = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi2 !== void 0 && _this$_embeddedCodeWi2.includes(embedNamespace.infogram)) {
+      if ((_this$_embeddedCodeWi = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi !== void 0 && _this$_embeddedCodeWi.includes(embedNamespace.infogram)) {
         return this.state.isLoaded ? embed : null;
       }
 
@@ -309,7 +316,7 @@ var WayPointWrapper = function WayPointWrapper(props) {
       onEnter: onEnter,
       onLeave: onLeave,
       fireOnRapidScroll: false,
-      topOffset: 5
+      topOffset: "-150%"
     }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(EmbeddedCode, _extends({}, props, {
       ref: embedRef
     }))))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.1.0",
+  "version": "2.1.1-beta.0",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -40,6 +40,5 @@
   },
   "files": [
     "lib"
-  ],
-  "gitHead": "140b33e61fd76615028d242dc55a63f9a1792a36"
+  ]
 }