@twreporter/react-article-components 1.5.0-rc.1 → 1.5.0-rc.4

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.5.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.5.0-rc.3...@twreporter/react-article-components@1.5.0-rc.4) (2022-07-01)
+
+
+### Bug Fixes
+
+* fix tool bar defect ([e66c4d7](https://github.com/twreporter/twreporter-npm-packages/commit/e66c4d7eeb87ca61f16f1dede8a191aaf2c8ed80))
+* set snackbarText initial value as empty string ([e750c16](https://github.com/twreporter/twreporter-npm-packages/commit/e750c1636f26c837c6d96f8a7296e8e1c0ce7964))
+
+
+
+
+
+# [1.5.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.5.0-rc.2...@twreporter/react-article-components@1.5.0-rc.3) (2022-06-30)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
+# [1.5.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.5.0-rc.1...@twreporter/react-article-components@1.5.0-rc.2) (2022-06-16)
+
+
+### Bug Fixes
+
+* address review comment ([839e625](https://github.com/twreporter/twreporter-npm-packages/commit/839e625f0986212e415850f6c9db629be301f817))
+* fix defect ([9345fc3](https://github.com/twreporter/twreporter-npm-packages/commit/9345fc3996427e90b6a3759ab7fd68efaa5f054b))
+
+
+
+
+
 # [1.5.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.5.0-rc.0...@twreporter/react-article-components@1.5.0-rc.1) (2022-06-14)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/article-page.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _reactScroll = require("react-scroll");
+
 var _body = _interopRequireDefault(require("./body"));
 
 var _desktopAside = _interopRequireDefault(require("./aside/desktop-aside"));
@@ -53,7 +55,7 @@ var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/consta
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 
 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); }
 
@@ -128,30 +130,30 @@ var MetadataAndToolsBlock = /*#__PURE__*/_styledComponents["default"].div.withCo
   componentId: "sc-1wuywdb-6"
 })(["", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    padding-top: 60px;\n    padding-bottom: 60px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
-var ToolsBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "article-page__ToolsBlock",
+var DesktopToolsBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "article-page__DesktopToolsBlock",
   componentId: "sc-1wuywdb-7"
-})(["", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    ", "\n  "])), shiftLeftCss), _mediaQuery["default"].mobileOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin-top: 20px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    margin-top: 30px;\n  "]))));
+})(["", ""], _mediaQuery["default"].tabletAndBelow(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var MobileToolBar = /*#__PURE__*/(0, _styledComponents["default"])(_mobileToolBar["default"]).withConfig({
   displayName: "article-page__MobileToolBar",
   componentId: "sc-1wuywdb-8"
-})(["", ""], _mediaQuery["default"].desktopAndAbove(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["", ""], _mediaQuery["default"].desktopAndAbove(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var ContentBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-page__ContentBlock",
   componentId: "sc-1wuywdb-9"
-})(["margin:0 auto;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    ", "\n  "])), shiftLeftCss), _mediaQuery["default"].desktopOnly(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    width: 550px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    width: 730px;\n  "]))));
+})(["margin:0 auto;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    ", "\n  "])), shiftLeftCss), _mediaQuery["default"].desktopOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    width: 550px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    width: 730px;\n  "]))));
 
 var StyledSeparationCurve = /*#__PURE__*/(0, _styledComponents["default"])(_separationCurve["default"]).withConfig({
   displayName: "article-page__StyledSeparationCurve",
   componentId: "sc-1wuywdb-10"
-})(["", ""], _mediaQuery["default"].desktopAndAbove(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["", ""], _mediaQuery["default"].desktopAndAbove(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var RelatedBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-page__RelatedBlock",
   componentId: "sc-1wuywdb-11"
-})(["margin-left:auto;margin-right:auto;margin-bottom:0;width:100%;", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    max-width: 1024px;\n    margin-top: 60px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    margin-top: 90px;\n  "]))));
+})(["margin-left:auto;margin-right:auto;margin-bottom:0;width:100%;", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    max-width: 1024px;\n    margin-top: 60px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    margin-top: 90px;\n  "]))));
 
 var BackgroundBlock = /*#__PURE__*/(0, _styledComponents["default"])(BorderBox).withConfig({
   displayName: "article-page__BackgroundBlock",
@@ -343,7 +345,7 @@ var Article = /*#__PURE__*/function (_PureComponent) {
         writers: post.writers,
         engineers: post.engineers,
         rawAutherText: post.extend_byline
-      }), /*#__PURE__*/_react["default"].createElement(ToolsBlock, null, /*#__PURE__*/_react["default"].createElement(_desktopTools["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(DesktopToolsBlock, null, /*#__PURE__*/_react["default"].createElement(_desktopTools["default"], {
         articleMetaForBookmark: articleMetaForBookmark,
         backToTopic: backToTopic,
         onFontLevelChange: this.changeFontLevel
@@ -382,12 +384,14 @@ var Article = /*#__PURE__*/function (_PureComponent) {
         key: _.get(post, 'slug', 'article-page-body-key'),
         brief: _.get(post, 'brief.api_data'),
         content: _.get(post, 'content.api_data')
-      })), metadataAndToolsJSX), /*#__PURE__*/_react["default"].createElement(_donationBox["default"], null), /*#__PURE__*/_react["default"].createElement(_license["default"], {
+      })), metadataAndToolsJSX), /*#__PURE__*/_react["default"].createElement(_donationBox["default"], null), /*#__PURE__*/_react["default"].createElement(_reactScroll.Element, {
+        name: _anchor.relatedPostAnchor
+      }, /*#__PURE__*/_react["default"].createElement(_license["default"], {
         license: post.copyright,
         publishedDate: post.published_date,
         id: _anchor.relatedPostAnchor // current scroll to releated post anchor
 
-      }), /*#__PURE__*/_react["default"].createElement(StyledSeparationCurve, null), /*#__PURE__*/_react["default"].createElement(RelatedBlock, null, /*#__PURE__*/_react["default"].createElement(_related["default"], {
+      })), /*#__PURE__*/_react["default"].createElement(StyledSeparationCurve, null), /*#__PURE__*/_react["default"].createElement(RelatedBlock, null, /*#__PURE__*/_react["default"].createElement(_related["default"], {
         id: post.id,
         data: relatedPosts,
         hasMore: hasMoreRelateds,

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

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _reactScroll = require("react-scroll");
+
 var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
 
 var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
@@ -23,6 +25,8 @@ var _anchor = require("../../constants/anchor");
 
 var _theme2 = require("./utils/theme");
 
+var _hook = require("@twreporter/react-components/lib/hook");
+
 var _bookmarkWidget = _interopRequireDefault(require("@twreporter/react-components/lib/bookmark-widget"));
 
 var _icon = require("@twreporter/react-components/lib/icon");
@@ -31,6 +35,8 @@ var _button = require("@twreporter/react-components/lib/button");
 
 var _snackBar = require("@twreporter/react-components/lib/snack-bar");
 
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
 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); }
@@ -53,7 +59,10 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-// global var
+var _ = {
+  isNil: _isNil["default"]
+}; // global var
+
 var HideTextContext = /*#__PURE__*/(0, _react.createContext)();
 var defaultFbAppID = '962589903815787';
 
@@ -67,7 +76,7 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var ShareContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-tool-bar__ShareContainer",
   componentId: "do65sv-1"
-})(["display:flex;align-items:center;padding:8px;margin-right:8px;border-radius:50%;"]);
+})(["display:flex;align-items:center;padding:8px;border-radius:50%;margin-right:8px;&:last-child{margin-right:0;}"]);
 
 var OptionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-tool-bar__OptionContainer",
@@ -79,23 +88,25 @@ var OptionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-tool-bar__SnackBarContainer",
   componentId: "do65sv-3"
-})(["opacity:", ";position:absolute;left:50%;bottom:56px;transform:translateX(-50%);transition:opacity 100ms;"], function (props) {
+})(["opacity:", ";position:absolute;left:50%;transform:translateX(-50%);transition:opacity 100ms;"], function (props) {
   return props.showSnackBar ? '1' : '0';
 });
 
 var ToolBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-tool-bar__ToolBarContainer",
   componentId: "do65sv-4"
-})(["display:flex;align-items:center;width:fit-content;background-color:", ";padding:8px 16px;border-radius:60px;position:fixed;left:50%;transform:translate(-50%,0);bottom:8px;z-index:999;height:", ";transition:height 100ms;box-shadow:", ";", "{background-color:", ";box-shadow:", ";}"], function (props) {
+})(["display:flex;align-items:center;width:fit-content;background-color:", ";padding:0 16px;border-radius:60px;position:fixed;left:50%;transform:translate(-50%,0);bottom:calc(env(safe-area-inset-bottom,0) + 8px);z-index:999;height:", ";transition:height 100ms;box-shadow:", ";", "{background-color:", ";box-shadow:", ";}", "{bottom:", ";}"], function (props) {
   return props.bgColor;
 }, function (props) {
-  return props.hideText ? '46px' : '56px';
+  return props.hideText ? '38px' : '56px';
 }, function (props) {
   return props.shadow;
 }, ShareContainer, function (props) {
   return props.bgColor;
 }, function (props) {
   return props.shadow;
+}, SnackBarContainer, function (props) {
+  return props.hideText ? '46px' : '64px';
 });
 
 var FbShare = function FbShare(_ref) {
@@ -260,7 +271,13 @@ var ShareBy = function ShareBy(_ref4) {
     });
   };
 
+  var onClickOutside = function onClickOutside() {
+    return setShowState(false);
+  };
+
+  var ref = (0, _hook.useOutsideClick)(onClickOutside);
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    ref: ref,
     onClick: onButtonClick
   }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
     text: "\u5206\u4EAB",
@@ -311,6 +328,17 @@ 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 _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';
@@ -318,10 +346,18 @@ var BookmarkBlock = function BookmarkBlock(_ref6) {
 
   var renderIcon = function renderIcon(isBookmarked, addAction, removeAction) {
     var iconType = isBookmarked ? 'saved' : 'add';
+    var text = isBookmarked ? '已儲存' : '加入書籤';
+
+    var handleClick = function handleClick() {
+      var action = isBookmarked ? removeAction : addAction;
+      action();
+      toastr(isBookmarked);
+    };
+
     return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
-      onClick: isBookmarked ? removeAction : addAction
+      onClick: handleClick
     }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
-      text: "\u52A0\u5165\u66F8\u7C64",
+      text: text,
       iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
         type: iconType,
         releaseBranch: releaseBranch
@@ -331,11 +367,24 @@ var BookmarkBlock = function BookmarkBlock(_ref6) {
     }));
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_bookmarkWidget["default"], {
+  var toastr = function toastr(isBookmarked) {
+    setSnackbarText(isBookmarked ? '已取消書籤' : '已儲存');
+    setSnackBar(true);
+    setTimeout(function () {
+      setSnackBar(false);
+    }, 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 = {
@@ -353,7 +402,7 @@ var BackToTopic = function BackToTopic(_ref7) {
       to: backToTopic,
       target: "_self"
     }, /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
-      text: "\u5C08\u984C",
+      text: "\u524D\u5F80\u5C08\u984C",
       iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Topic, {
         releaseBranch: releaseBranch
       }),
@@ -374,7 +423,10 @@ var RelatedPost = function RelatedPost() {
   var releaseBranch = themeContext.releaseBranch;
 
   var scrollToBottom = function scrollToBottom() {
-    document.getElementById(_anchor.relatedPostAnchor).scrollIntoView();
+    _reactScroll.scroller.scrollTo(_anchor.relatedPostAnchor, {
+      duration: 800,
+      smooth: 'easeInOutQuint'
+    });
   };
 
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
@@ -397,10 +449,10 @@ var ToolBar = function ToolBar(_ref8) {
       onFontLevelChange = _ref8.onFontLevelChange,
       className = _ref8.className;
 
-  var _useState5 = (0, _react.useState)('init'),
-      _useState6 = _slicedToArray(_useState5, 2),
-      scrollDirection = _useState6[0],
-      setScrollDirection = _useState6[1];
+  var _useState9 = (0, _react.useState)('init'),
+      _useState10 = _slicedToArray(_useState9, 2),
+      scrollDirection = _useState10[0],
+      setScrollDirection = _useState10[1];
 
   (0, _react.useEffect)(function () {
     var threshold = 8;
@@ -410,6 +462,11 @@ var ToolBar = function ToolBar(_ref8) {
     var updateScrollDirection = function updateScrollDirection() {
       var scrollY = window.pageYOffset;
 
+      if (_.isNil(lastScrollY)) {
+        ticking = false;
+        return;
+      }
+
       if (Math.abs(scrollY - lastScrollY) < threshold) {
         ticking = false;
         return;
@@ -441,7 +498,9 @@ var ToolBar = function ToolBar(_ref8) {
       bgColor = _getToolBarTheme.bgColor,
       shadow = _getToolBarTheme.shadow;
 
-  var backToTopicJSX = backToTopic ? /*#__PURE__*/_react["default"].createElement(BackToTopic, null) : '';
+  var backToTopicJSX = backToTopic ? /*#__PURE__*/_react["default"].createElement(BackToTopic, {
+    backToTopic: backToTopic
+  }) : null;
   var hideText = scrollDirection === 'down';
   return /*#__PURE__*/_react["default"].createElement(HideTextContext.Provider, {
     value: hideText

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.5.0-rc.1",
+  "version": "1.5.0-rc.4",
   "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,19 +25,20 @@
   },
   "dependencies": {
     "@twreporter/core": "^1.4.1",
-    "@twreporter/react-components": "^8.10.0-rc.1",
-    "@twreporter/redux": "^7.2.1",
-    "@twreporter/universal-header": "^2.2.10-rc.1",
+    "@twreporter/react-components": "^8.10.0-rc.3",
+    "@twreporter/redux": "^7.2.2-rc.0",
+    "@twreporter/universal-header": "^2.2.10-rc.3",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
     "prop-types": "^15.0.0",
     "react": "^16.3.0",
+    "react-scroll": "^1.8.7",
     "react-waypoint": "^9.0.2",
     "styled-components": "^4.0.0"
   },
   "files": [
     "lib"
   ],
-  "gitHead": "648da942082304faa56026b9d5a5e597dc86fca4"
+  "gitHead": "aa5fa9054d067e7282c8487a431320910863db28"
 }