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

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 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.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

@@ -53,7 +53,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 +128,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 +343,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

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

@@ -31,6 +31,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 +55,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 +72,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,25 +84,44 @@ 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 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);
@@ -260,7 +284,13 @@ var ShareBy = function ShareBy(_ref4) {
     });
   };
 
+  var onClickOutside = function onClickOutside() {
+    return setShowState(false);
+  };
+
+  var ref = useOutsideClick(onClickOutside);
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    ref: ref,
     onClick: onButtonClick
   }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
     text: "\u5206\u4EAB",
@@ -318,10 +348,11 @@ var BookmarkBlock = function BookmarkBlock(_ref6) {
 
   var renderIcon = function renderIcon(isBookmarked, addAction, removeAction) {
     var iconType = isBookmarked ? 'saved' : 'add';
+    var text = isBookmarked ? '已儲存' : '加入書籤';
     return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
       onClick: isBookmarked ? removeAction : addAction
     }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
-      text: "\u52A0\u5165\u66F8\u7C64",
+      text: text,
       iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
         type: iconType,
         releaseBranch: releaseBranch
@@ -374,7 +405,9 @@ var RelatedPost = function RelatedPost() {
   var releaseBranch = themeContext.releaseBranch;
 
   var scrollToBottom = function scrollToBottom() {
-    document.getElementById(_anchor.relatedPostAnchor).scrollIntoView();
+    document.getElementById(_anchor.relatedPostAnchor).scrollIntoView({
+      behavior: 'smooth'
+    });
   };
 
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
@@ -410,6 +443,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 +479,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.2",
   "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",
@@ -39,5 +39,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "648da942082304faa56026b9d5a5e597dc86fca4"
+  "gitHead": "0c1c304760a2d20f3873ccc7d44501a8ba8b661f"
 }