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

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 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.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.5.0-rc.4...@twreporter/react-article-components@1.5.0-rc.5) (2022-07-04)
+
+
+### Bug Fixes
+
+* fix tool bar defect ([afc4a56](https://github.com/twreporter/twreporter-npm-packages/commit/afc4a568c27c0614ff2bec460cb07813fbfdfe5a))
+
+
+
+
+
+# [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)
 
 

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"));
@@ -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");
@@ -77,14 +81,14 @@ var ShareContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var OptionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-tool-bar__OptionContainer",
   componentId: "do65sv-2"
-})(["opacity:", ";transition:opacity 100ms;position:absolute;top:-55px;left:50%;transform:translateX(-50%);display:flex;"], function (props) {
+})(["z-index:6;opacity:", ";transition:opacity 100ms;position:absolute;top:-55px;left:50%;transform:translateX(-50%);display:flex;"], function (props) {
   return props.isShow ? '1' : '0';
 });
 
 var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-tool-bar__SnackBarContainer",
   componentId: "do65sv-3"
-})(["opacity:", ";position:absolute;left:50%;transform:translateX(-50%);transition:opacity 100ms;"], function (props) {
+})(["z-index:5;opacity:", ";position:absolute;left:50%;transform:translateX(-50%);transition:opacity 100ms;"], function (props) {
   return props.showSnackBar ? '1' : '0';
 });
 
@@ -105,23 +109,6 @@ var ToolBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig(
   return props.hideText ? '46px' : '64px';
 });
 
-var useOutsideClick = function useOutsideClick(callback) {
-  var ref = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    var handleClick = function handleClick(event) {
-      if (ref.current && !ref.current.contains(event.target)) {
-        callback(event);
-      }
-    };
-
-    document.addEventListener('click', handleClick);
-    return function () {
-      document.removeEventListener('click', handleClick);
-    };
-  }, [ref]);
-  return ref;
-};
-
 var FbShare = function FbShare(_ref) {
   var appID = _ref.appID;
   var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
@@ -288,7 +275,7 @@ var ShareBy = function ShareBy(_ref4) {
     return setShowState(false);
   };
 
-  var ref = useOutsideClick(onClickOutside);
+  var ref = (0, _hook.useOutsideClick)(onClickOutside);
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
     ref: ref,
     onClick: onButtonClick
@@ -341,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';
@@ -349,8 +347,17 @@ 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();
+      setTimeout(function () {
+        toastr(isBookmarked);
+      }, 500);
+    };
+
     return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
-      onClick: isBookmarked ? removeAction : addAction
+      onClick: handleClick
     }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
       text: text,
       iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
@@ -362,11 +369,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 = {
@@ -384,7 +404,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
       }),
@@ -405,8 +425,9 @@ var RelatedPost = function RelatedPost() {
   var releaseBranch = themeContext.releaseBranch;
 
   var scrollToBottom = function scrollToBottom() {
-    document.getElementById(_anchor.relatedPostAnchor).scrollIntoView({
-      behavior: 'smooth'
+    _reactScroll.scroller.scrollTo(_anchor.relatedPostAnchor, {
+      duration: 800,
+      smooth: 'easeInOutQuint'
     });
   };
 
@@ -430,10 +451,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.5.0-rc.2",
+  "version": "1.5.0-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,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.4",
+    "@twreporter/redux": "^7.2.2-rc.0",
+    "@twreporter/universal-header": "^2.2.10-rc.4",
     "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": "0c1c304760a2d20f3873ccc7d44501a8ba8b661f"
+  "gitHead": "228b4ec5da6b28307b17b7ac8c7d79c836359d69"
 }