@twreporter/react-article-components 1.6.4-rc.2 → 1.6.4-rc.5

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.6.4-rc.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.4-rc.4...@twreporter/react-article-components@1.6.4-rc.5) (2022-09-08)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
+## [1.6.4-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.4-rc.3...@twreporter/react-article-components@1.6.4-rc.4) (2022-09-05)
+
+
+### Bug Fixes
+
+* make `useSnackBar` headless ([ddaf3dd](https://github.com/twreporter/twreporter-npm-packages/commit/ddaf3ddbd44abba3684f9209fc1b9e8b4c678c15))
+
+
+
+
+
+## [1.6.4-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.4-rc.2...@twreporter/react-article-components@1.6.4-rc.3) (2022-08-25)
+
+
+### Bug Fixes
+
+* fix empty subcategory part ([#305](https://github.com/twreporter/twreporter-npm-packages/issues/305)) ([492d347](https://github.com/twreporter/twreporter-npm-packages/commit/492d347f00427ccf2e8f3b93590d91309ea05676))
+
+
+
+
+
 ## [1.6.4-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.4-rc.1...@twreporter/react-article-components@1.6.4-rc.2) (2022-08-22)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/aside/metadata.js

@@ -243,7 +243,7 @@ var Metadata = /*#__PURE__*/function (_PureComponent) {
       var categorySet = this.props.categorySet;
       return /*#__PURE__*/_react["default"].createElement(CategorySetFlexBox, null, /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Consumer, null, function (components) {
         var categorySetJSX = _.map(categorySet, function (set, index) {
-          var _set$category, _set$category2, _set$subcategory, _set$subcategory2;
+          var _set$category, _set$category2, _set$subcategory, _set$subcategory2, _set$category3;
 
           var genLink = function genLink(path, name) {
             var isCategory = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -261,7 +261,7 @@ var Metadata = /*#__PURE__*/function (_PureComponent) {
 
           return /*#__PURE__*/_react["default"].createElement(LinkContainer, {
             key: "categorySet-".concat(index)
-          }, genLink("/categories/".concat(set === null || set === void 0 ? void 0 : (_set$category = set.category) === null || _set$category === void 0 ? void 0 : _set$category.id), set === null || set === void 0 ? void 0 : (_set$category2 = set.category) === null || _set$category2 === void 0 ? void 0 : _set$category2.name, true), genLink("/tags/".concat(set === null || set === void 0 ? void 0 : (_set$subcategory = set.subcategory) === null || _set$subcategory === void 0 ? void 0 : _set$subcategory.id), set === null || set === void 0 ? void 0 : (_set$subcategory2 = set.subcategory) === null || _set$subcategory2 === void 0 ? void 0 : _set$subcategory2.name));
+          }, genLink("/categories/".concat(set === null || set === void 0 ? void 0 : (_set$category = set.category) === null || _set$category === void 0 ? void 0 : _set$category.id), set === null || set === void 0 ? void 0 : (_set$category2 = set.category) === null || _set$category2 === void 0 ? void 0 : _set$category2.name, true), set !== null && set !== void 0 && (_set$subcategory = set.subcategory) !== null && _set$subcategory !== void 0 && _set$subcategory.id && set !== null && set !== void 0 && (_set$subcategory2 = set.subcategory) !== null && _set$subcategory2 !== void 0 && _set$subcategory2.name ? genLink("/tags/".concat(set.subcategory.id), set.subcategory.name) : genLink("/categories/".concat(set === null || set === void 0 ? void 0 : (_set$category3 = set.category) === null || _set$category3 === void 0 ? void 0 : _set$category3.id), '全部'));
         });
 
         return categorySetJSX;

package/lib/components/aside/mobile-tool-bar.js

@@ -65,7 +65,7 @@ var _ = {
   isNil: _isNil["default"]
 }; // global var
 
-var HideTextContext = /*#__PURE__*/(0, _react.createContext)();
+var ToolBarContext = /*#__PURE__*/(0, _react.createContext)();
 var defaultFbAppID = '962589903815787';
 
 var defaultFunc = function defaultFunc() {};
@@ -90,8 +90,8 @@ var OptionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-tool-bar__SnackBarContainer",
   componentId: "do65sv-3"
-})(["z-index:5;opacity:", ";position:absolute;left:50%;transform:translateX(-50%);transition:opacity 100ms;"], function (props) {
-  return props.showSnackBar ? '1' : '0';
+})(["z-index:5;position:absolute;left:50%;transform:translateX(-50%);transition:opacity 100ms;opacity:", ";"], function (props) {
+  return props.showSnackBar ? 1 : 0;
 });
 
 var ToolBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -246,12 +246,10 @@ var ShareBy = function ShareBy(_ref4) {
       showOption = _useState2[0],
       setShowState = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showSnackBar = _useState4[0],
-      setSnackBar = _useState4[1];
+  var _useContext = (0, _react.useContext)(ToolBarContext),
+      hideText = _useContext.hideText,
+      toastr = _useContext.toastr;
 
-  var hideText = (0, _react.useContext)(HideTextContext);
   var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
   var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
   var releaseBranch = themeContext.releaseBranch;
@@ -261,10 +259,10 @@ var ShareBy = function ShareBy(_ref4) {
       return;
     }
 
-    setSnackBar(true);
-    setTimeout(function () {
-      setSnackBar(false);
-    }, 3000);
+    toastr({
+      text: '已複製',
+      timeout: 3000
+    });
   };
 
   var onButtonClick = function onButtonClick() {
@@ -294,11 +292,6 @@ var ShareBy = function ShareBy(_ref4) {
     appID: fbAppID
   }), /*#__PURE__*/_react["default"].createElement(LineShare, null), /*#__PURE__*/_react["default"].createElement(TwitterShare, null), /*#__PURE__*/_react["default"].createElement(CopyUrl, {
     onclick: onCopyUrl
-  })), /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
-    showSnackBar: showSnackBar
-  }, /*#__PURE__*/_react["default"].createElement(_snackBar.SnackBar, {
-    text: "\u5DF2\u8907\u88FD",
-    theme: theme
   })));
 };
 
@@ -308,7 +301,10 @@ ShareBy.propTypes = {
 
 var FontLevel = function FontLevel(_ref5) {
   var changeFontLevel = _ref5.changeFontLevel;
-  var hideText = (0, _react.useContext)(HideTextContext);
+
+  var _useContext2 = (0, _react.useContext)(ToolBarContext),
+      hideText = _useContext2.hideText;
+
   var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
   var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
   var releaseBranch = themeContext.releaseBranch;
@@ -331,17 +327,10 @@ FontLevel.propTypes = {
 var BookmarkBlock = function BookmarkBlock(_ref6) {
   var articleMeta = _ref6.articleMeta;
 
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      showSnackBar = _useState6[0],
-      setSnackBar = _useState6[1];
+  var _useContext3 = (0, _react.useContext)(ToolBarContext),
+      hideText = _useContext3.hideText,
+      toastr = _useContext3.toastr;
 
-  var _useState7 = (0, _react.useState)(''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      snackbarText = _useState8[0],
-      setSnackbarText = _useState8[1];
-
-  var hideText = (0, _react.useContext)(HideTextContext);
   var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
   var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
   var releaseBranch = themeContext.releaseBranch;
@@ -373,7 +362,7 @@ var BookmarkBlock = function BookmarkBlock(_ref6) {
                 console.error('add bookmark fail', _context2.t0);
 
               case 9:
-                toastr(isBookmarked);
+                onClickButton(isBookmarked);
 
               case 10:
               case "end":
@@ -402,24 +391,19 @@ var BookmarkBlock = function BookmarkBlock(_ref6) {
     }));
   };
 
-  var toastr = function toastr(isBookmarked) {
-    setSnackbarText(isBookmarked ? '已取消書籤' : '已儲存');
-    setSnackBar(true);
-    setTimeout(function () {
-      setSnackBar(false);
-    }, 3000);
+  var onClickButton = function onClickButton(isBookmarked) {
+    var text = isBookmarked ? '已取消書籤' : '已儲存';
+    toastr({
+      text: text,
+      timeout: 3000
+    });
   };
 
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_bookmarkWidget["default"], {
     toAutoCheck: false,
     articleMeta: articleMeta,
     renderIcon: renderIcon
-  }), /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
-    showSnackBar: showSnackBar
-  }, /*#__PURE__*/_react["default"].createElement(_snackBar.SnackBar, {
-    text: snackbarText,
-    theme: theme
-  })));
+  }));
 };
 
 BookmarkBlock.propTypes = {
@@ -428,7 +412,10 @@ BookmarkBlock.propTypes = {
 
 var BackToTopic = function BackToTopic(_ref8) {
   var backToTopic = _ref8.backToTopic;
-  var hideText = (0, _react.useContext)(HideTextContext);
+
+  var _useContext4 = (0, _react.useContext)(ToolBarContext),
+      hideText = _useContext4.hideText;
+
   var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
   var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
   var releaseBranch = themeContext.releaseBranch;
@@ -452,7 +439,9 @@ BackToTopic.propTypes = {
 };
 
 var RelatedPost = function RelatedPost() {
-  var hideText = (0, _react.useContext)(HideTextContext);
+  var _useContext5 = (0, _react.useContext)(ToolBarContext),
+      hideText = _useContext5.hideText;
+
   var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
   var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
   var releaseBranch = themeContext.releaseBranch;
@@ -479,10 +468,10 @@ var ToolBar = function ToolBar(_ref9) {
       onFontLevelChange = _ref9.onFontLevelChange,
       className = _ref9.className;
 
-  var _useState9 = (0, _react.useState)('init'),
-      _useState10 = _slicedToArray(_useState9, 2),
-      scrollDirection = _useState10[0],
-      setScrollDirection = _useState10[1];
+  var _useState3 = (0, _react.useState)('init'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      scrollDirection = _useState4[0],
+      setScrollDirection = _useState4[1];
 
   (0, _react.useEffect)(function () {
     var threshold = 8;
@@ -523,17 +512,27 @@ var ToolBar = function ToolBar(_ref9) {
     };
   }, [scrollDirection]);
   var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
 
   var _getToolBarTheme = (0, _theme2.getToolBarTheme)(themeContext.name),
       bgColor = _getToolBarTheme.bgColor,
       shadow = _getToolBarTheme.shadow;
 
+  var _useSnackBar = (0, _snackBar.useSnackBar)(),
+      showSnackBar = _useSnackBar.showSnackBar,
+      snackBarText = _useSnackBar.snackBarText,
+      toastr = _useSnackBar.toastr;
+
   var backToTopicJSX = backToTopic ? /*#__PURE__*/_react["default"].createElement(BackToTopic, {
     backToTopic: backToTopic
   }) : null;
   var hideText = scrollDirection === 'down';
-  return /*#__PURE__*/_react["default"].createElement(HideTextContext.Provider, {
-    value: hideText
+  var contextValue = {
+    hideText: hideText,
+    toastr: toastr
+  };
+  return /*#__PURE__*/_react["default"].createElement(ToolBarContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/_react["default"].createElement(ToolBarContainer, {
     bgColor: bgColor,
     shadow: shadow,
@@ -545,7 +544,12 @@ var ToolBar = function ToolBar(_ref9) {
     fbAppID: fbAppID
   }), /*#__PURE__*/_react["default"].createElement(BookmarkBlock, {
     articleMeta: articleMetaForBookmark
-  }), /*#__PURE__*/_react["default"].createElement(RelatedPost, null), backToTopicJSX));
+  }), /*#__PURE__*/_react["default"].createElement(RelatedPost, null), backToTopicJSX, /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
+    showSnackBar: showSnackBar
+  }, /*#__PURE__*/_react["default"].createElement(_snackBar.SnackBar, {
+    text: snackBarText,
+    theme: theme
+  }))));
 };
 
 ToolBar.propTypes = _aside["default"].tools;

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

@@ -21,12 +21,14 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _merge = _interopRequireDefault(require("lodash/merge"));
 
-var _theme = _interopRequireDefault(require("../../constants/theme"));
-
 var _color = _interopRequireDefault(require("../../constants/color"));
 
 var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
 
+var _theme = _interopRequireDefault(require("../../constants/theme"));
+
+var _positionZIndex = _interopRequireDefault(require("../../constants/position-z-index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -74,11 +76,17 @@ var _ = {
   get: _get["default"],
   merge: _merge["default"]
 };
+var embedNamespace = {
+  infogram: 'infogram',
+  twreporter: '__twreporterEmbeddedData'
+};
 
 var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "embedded-code__Block",
   componentId: "tkafgt-0"
-})(["position:relative;img.img-responsive{margin:0 auto;max-width:100%;height:auto;display:block;}"]);
+})(["position:relative;z-index:", ";img.img-responsive{margin:0 auto;max-width:100%;height:auto;display:block;}"], function (props) {
+  return props.shouldEscalateZIndex ? _positionZIndex["default"].embed : 0;
+});
 
 exports.Block = Block;
 
@@ -112,8 +120,6 @@ function dispatchWindowLoadEvent() {
   window.dispatchEvent(loadEvent);
 }
 
-var infogramEmbed = 'infogram';
-
 var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(EmbeddedCode, _React$PureComponent);
 
@@ -127,7 +133,8 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
     _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isLoaded: false
+      isLoaded: false,
+      shouldEscalateZIndex: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "executeScript", function () {
@@ -188,23 +195,32 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
 
     var _$get = _.get(_this.props, ['data', 'content', 0], {}),
         caption = _$get.caption,
+        embeddedCode = _$get.embeddedCode,
         embeddedCodeWithoutScript = _$get.embeddedCodeWithoutScript;
 
     _this._caption = caption;
     _this._embeddedCodeWithoutScript = embeddedCodeWithoutScript;
+    _this._embeddedCode = embeddedCode;
     return _this;
   }
 
   _createClass(EmbeddedCode, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$_embeddedCodeWi;
+      var _this$_embeddedCodeWi, _this$_embeddedCode;
 
       // Delay loading infogram in loadEmbed()
-      if (!((_this$_embeddedCodeWi = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi !== void 0 && _this$_embeddedCodeWi.includes(infogramEmbed))) {
+      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)) {
+        this.setState({
+          shouldEscalateZIndex: true
+        });
       }
     }
   }, {
@@ -212,6 +228,7 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
     value: function componentWillUnmount() {
       this._embedded = null;
       this._caption = null;
+      this._embeddedCode = null;
       this._embeddedCodeWithoutScript = null;
     }
   }, {
@@ -220,17 +237,19 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
       var _this$_embeddedCodeWi2;
 
       var className = this.props.className;
+      var shouldEscalateZIndex = this.state.shouldEscalateZIndex;
 
       var embed = /*#__PURE__*/_react["default"].createElement("div", {
         className: className
       }, /*#__PURE__*/_react["default"].createElement(Block, {
         ref: this._embedded,
+        shouldEscalateZIndex: shouldEscalateZIndex,
         dangerouslySetInnerHTML: {
           __html: this._embeddedCodeWithoutScript
         }
       }), this._caption ? /*#__PURE__*/_react["default"].createElement(Caption, null, this._caption) : null);
 
-      if ((_this$_embeddedCodeWi2 = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi2 !== void 0 && _this$_embeddedCodeWi2.includes(infogramEmbed)) {
+      if ((_this$_embeddedCodeWi2 = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi2 !== void 0 && _this$_embeddedCodeWi2.includes(embedNamespace.infogram)) {
         return this.state.isLoaded ? embed : null;
       }
 

package/lib/constants/position-z-index.js

@@ -9,6 +9,10 @@ var _default = {
   // z-index is set for covering web-push & header.
   // Set z-index to 1002 because web-push has z-index 1001,
   // And header has z-index 1000.
-  toc: 1002
+  toc: 1002,
+  // embeded code
+  // when z-index is escalated, it is above toolbar
+  // but under the header hamburger menu which has z-index 1000
+  embed: 999
 };
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.6.4-rc.2",
+  "version": "1.6.4-rc.5",
   "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",
@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "@twreporter/core": "^1.6.0-rc.0",
-    "@twreporter/react-components": "^8.12.1-rc.1",
+    "@twreporter/react-components": "^8.13.0-rc.0",
     "@twreporter/redux": "^7.3.0-rc.0",
-    "@twreporter/universal-header": "^2.2.14-rc.1",
+    "@twreporter/universal-header": "^2.2.14-rc.2",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -40,5 +40,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "bd76b2c13e84ed0675cd7af84b5647e6d629d29e"
+  "gitHead": "34a3eab10de26513fdddc05e8fdc241183b03885"
 }