@twreporter/react-article-components 1.11.4-rc.0 → 1.12.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.12.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.11.4-rc.1...@twreporter/react-article-components@1.12.0-rc.0) (2024-02-07)
+
+
+### Features
+
+* add `my reading` related entry on universal navigator ([79cadc2](https://github.com/twreporter/twreporter-npm-packages/commit/79cadc293493bc517fcf95139ff208633acd699b))
+
+
+
+
+
+## [1.11.4-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.11.4-rc.0...@twreporter/react-article-components@1.11.4-rc.1) (2024-01-25)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
 ## [1.11.4-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.11.3...@twreporter/react-article-components@1.11.4-rc.0) (2024-01-24)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/article-page.js

@@ -27,16 +27,12 @@ var _link = _interopRequireDefault(require("./link"));
 
 var _metadata = _interopRequireDefault(require("./aside/metadata"));
 
-var _mobileToolBar = _interopRequireDefault(require("./aside/mobile-tool-bar"));
-
 var _related = _interopRequireDefault(require("./related"));
 
 var _separationCurve = _interopRequireDefault(require("./separation-curve"));
 
 var _uiManager = _interopRequireDefault(require("../managers/ui-manager"));
 
-var _desktopTools = _interopRequireDefault(require("./aside/desktop-tools"));
-
 var _theme = _interopRequireDefault(require("../constants/theme"));
 
 var _anchor = require("../constants/anchor");
@@ -49,6 +45,16 @@ var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/consta
 
 var _color = require("@twreporter/core/lib/constants/color");
 
+var _featureFlag = require("@twreporter/core/lib/constants/feature-flag");
+
+var _desktopTools = _interopRequireDefault(require("./aside/desktop-tools"));
+
+var _desktopToolsOld = _interopRequireDefault(require("./aside/desktop-tools-old"));
+
+var _mobileToolBar = _interopRequireDefault(require("./aside/mobile-tool-bar"));
+
+var _mobileToolBarOld = _interopRequireDefault(require("./aside/mobile-tool-bar-old"));
+
 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;
@@ -83,6 +89,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+var Tools = _featureFlag.MY_READING ? _desktopTools["default"] : _desktopToolsOld["default"];
+var ToolBar = _featureFlag.MY_READING ? _mobileToolBar["default"] : _mobileToolBarOld["default"];
 var _ = {
   get: _get["default"]
 };
@@ -130,7 +138,7 @@ var DesktopToolsBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig
   componentId: "sc-1wuywdb-7"
 })(["", ""], _mediaQuery["default"].tabletAndBelow(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
-var MobileToolBar = /*#__PURE__*/(0, _styledComponents["default"])(_mobileToolBar["default"]).withConfig({
+var MobileToolBar = /*#__PURE__*/(0, _styledComponents["default"])(ToolBar).withConfig({
   displayName: "article-page__MobileToolBar",
   componentId: "sc-1wuywdb-8"
 })(["", ""], _mediaQuery["default"].desktopAndAbove(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
@@ -340,7 +348,7 @@ var Article = /*#__PURE__*/function (_PureComponent) {
         writers: post.writers,
         engineers: post.engineers,
         rawAutherText: post.extend_byline
-      }), /*#__PURE__*/_react["default"].createElement(DesktopToolsBlock, null, /*#__PURE__*/_react["default"].createElement(_desktopTools["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(DesktopToolsBlock, null, /*#__PURE__*/_react["default"].createElement(Tools, {
         articleMetaForBookmark: articleMetaForBookmark,
         backToTopic: backToTopic,
         onFontLevelChange: this.changeFontLevel

package/lib/components/aside/desktop-tools-old.js

@@ -0,0 +1,245 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _theme = _interopRequireDefault(require("../../constants/theme"));
+
+var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
+
+var _icon = require("@twreporter/react-components/lib/icon");
+
+var _bookmarkWidget = _interopRequireDefault(require("@twreporter/react-components/lib/bookmark-widget"));
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function changeFontSizeOffsetToPct(fontSizeOffset) {
+  switch (fontSizeOffset) {
+    case 2:
+      {
+        return '110%';
+      }
+
+    case 4:
+      {
+        return '120%';
+      }
+
+    case 0:
+    default:
+      {
+        return '100%';
+      }
+  }
+}
+
+var iconBlockCSS = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;cursor:pointer;line-height:1;padding:6px;svg{width:18px;height:18px;background-color:", ";}&::after{position:absolute;top:10px;left:34px;color:", ";font-size:10px;visibility:hidden;width:100px;}&:hover{svg{background-color:", ";}&::after{visibility:visible;}}", ""], _color.colorGrayscale.gray600, _color.colorGrayscale.gray800, _color.colorGrayscale.gray800, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &::after {\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      text-align: center;\n    }\n  "]))));
+
+var TextIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "desktop-tools-old__TextIconBlock",
+  componentId: "sc-14dm8uk-0"
+})(["", " &::after{content:'\u5B57\u7D1A\u5927\u5C0F", "';}"], iconBlockCSS, function (props) {
+  return changeFontSizeOffsetToPct(props.theme.fontSizeOffset);
+});
+
+var BackToTopicBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "desktop-tools-old__BackToTopicBlock",
+  componentId: "sc-14dm8uk-1"
+})(["", " &::after{content:'\u56DE\u5230\u5C08\u984C';}"], iconBlockCSS);
+
+var PrintIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "desktop-tools-old__PrintIconBlock",
+  componentId: "sc-14dm8uk-2"
+})(["", " &::after{content:'\u5217\u5370';}"], iconBlockCSS);
+
+var BookmarkIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "desktop-tools-old__BookmarkIconBlock",
+  componentId: "sc-14dm8uk-3"
+})(["", " &::after{content:'", "';}"], iconBlockCSS, function (props) {
+  return props.isBookmarked ? '取消書籤' : '加入書籤';
+});
+
+var ShareIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "desktop-tools-old__ShareIconBlock",
+  componentId: "sc-14dm8uk-4"
+})(["svg{width:18px;height:18px;background-color:", ";}background-color:", ";border-radius:50%;padding:6px;cursor:pointer;display:flex;"], _color.colorGrayscale.gray800, _color.colorGrayscale.white);
+
+var ToolsBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "desktop-tools-old__ToolsBlock",
+  componentId: "sc-14dm8uk-5"
+})(["display:flex;", " ", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: calc(300/375*100%);\n    margin-left: auto;\n    margin-right: auto;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: calc(453/768*100%);\n    max-width: 453px;\n    margin-left: auto;\n    margin-right: auto;\n    > svg, > div, > a {\n      margin-right: 30px;\n    }\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    justify-content: space-between;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 36px;\n    height: ", ";\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n  "])), function (props) {
+  return props.height || 'auto';
+}), function (props) {
+  switch (props.theme.name) {
+    case _theme["default"].article.v2.photo:
+      return (0, _styledComponents.css)(["", "{background-color:", ";svg{background-color:", ";}}", ",", ",", ",", "{svg{background-color:", ";}&::after{color:", ";}&:hover svg{background-color:", ";}}"], ShareIconBlock, _color.colorPhoto.heavy, _color.colorGrayscale.gray100, TextIconBlock, BackToTopicBlock, PrintIconBlock, BookmarkIconBlock, _color.colorGrayscale.gray100, _color.colorSupportive.pastel, _color.colorSupportive.pastel);
+
+    default:
+      return '';
+  }
+});
+
+function FBShareBT(props) {
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+
+  var handleClick = function handleClick() {
+    var currentURL = window.location.href;
+    var location = 'https://www.facebook.com/dialog/feed?' + 'display=page' + "&app_id=".concat(props.appID) + "&link=".concat(encodeURIComponent(currentURL)) + "&redirect_uri=".concat(encodeURIComponent('https://www.facebook.com/'));
+    window.open(location, '_blank');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ShareIconBlock, {
+    id: "fb-share"
+  }, /*#__PURE__*/_react["default"].createElement(_icon.Facebook, {
+    onClick: handleClick,
+    releaseBranch: releaseBranch
+  }));
+}
+
+FBShareBT.propTypes = {
+  appID: _propTypes["default"].string.isRequired
+};
+
+function TwitterShareBT(props) {
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+
+  var handleClick = function handleClick() {
+    var currentURL = window.location.href;
+    var location = 'https://twitter.com/intent/tweet?' + "url=".concat(encodeURIComponent(currentURL), "&text=").concat(encodeURIComponent(document.title + ' #報導者'));
+    window.open(location, '_blank');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ShareIconBlock, {
+    id: "twitter-share"
+  }, /*#__PURE__*/_react["default"].createElement(_icon.Twitter, {
+    onClick: handleClick,
+    releaseBranch: releaseBranch
+  }));
+}
+
+function LineShareBT(props) {
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+
+  var handleClick = function handleClick() {
+    var currentURL = window.location.href;
+    var location = "https://social-plugins.line.me/lineit/share?url=".concat(encodeURIComponent(currentURL));
+    window.open(location, '_blank');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ShareIconBlock, {
+    id: "line-share"
+  }, /*#__PURE__*/_react["default"].createElement(_icon.Line, {
+    onClick: handleClick,
+    releaseBranch: releaseBranch
+  }));
+}
+
+var BookmarkBlock = function BookmarkBlock(_ref) {
+  var articleMeta = _ref.articleMeta;
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+
+  var renderIcon = function renderIcon(isBookmarked, addAction, removeAction) {
+    var iconType = isBookmarked ? 'saved' : 'add';
+    var id = isBookmarked ? 'remove-bookmark' : 'add-bookmark';
+    return /*#__PURE__*/_react["default"].createElement(BookmarkIconBlock, {
+      onClick: isBookmarked ? removeAction : addAction,
+      isBookmarked: isBookmarked,
+      id: id
+    }, /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+      type: iconType,
+      releaseBranch: releaseBranch
+    }));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_bookmarkWidget["default"], {
+    toAutoCheck: true,
+    articleMeta: articleMeta,
+    renderIcon: renderIcon
+  });
+};
+
+BookmarkBlock.propTypes = {
+  articleMeta: _aside["default"].tools.articleMetaForBookmark
+};
+
+var BackToTopic = function BackToTopic(_ref2) {
+  var backToTopic = _ref2.backToTopic;
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+  return /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Consumer, null, function (components) {
+    return /*#__PURE__*/_react["default"].createElement(components.Link, {
+      to: backToTopic,
+      target: "_self"
+    }, /*#__PURE__*/_react["default"].createElement(BackToTopicBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Topic, {
+      releaseBranch: releaseBranch
+    })));
+  });
+};
+
+BackToTopic.propTypes = {
+  backToTopic: _aside["default"].tools.backToTopic
+};
+var defaultFbAppID = '962589903815787';
+
+var Tools = function Tools(_ref3) {
+  var backToTopic = _ref3.backToTopic,
+      fbAppID = _ref3.fbAppID,
+      height = _ref3.height,
+      onFontLevelChange = _ref3.onFontLevelChange,
+      articleMetaForBookmark = _ref3.articleMetaForBookmark;
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var releaseBranch = themeContext.releaseBranch;
+  var backToTopicJSX = backToTopic ? /*#__PURE__*/_react["default"].createElement(BackToTopic, {
+    backToTopic: backToTopic
+  }) : null;
+
+  var onPrinterClick = function onPrinterClick() {
+    return window.print();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ToolsBlock, {
+    height: height
+  }, backToTopicJSX, /*#__PURE__*/_react["default"].createElement(BookmarkBlock, {
+    articleMeta: articleMetaForBookmark
+  }), /*#__PURE__*/_react["default"].createElement(TextIconBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Text, {
+    onClick: onFontLevelChange,
+    releaseBranch: releaseBranch
+  })), /*#__PURE__*/_react["default"].createElement(PrintIconBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Printer, {
+    onClick: onPrinterClick,
+    releaseBranch: releaseBranch
+  })), /*#__PURE__*/_react["default"].createElement(FBShareBT, {
+    appID: fbAppID || defaultFbAppID
+  }), /*#__PURE__*/_react["default"].createElement(TwitterShareBT, null), /*#__PURE__*/_react["default"].createElement(LineShareBT, null));
+};
+
+Tools.propTypes = _aside["default"].tools;
+var _default = Tools;
+exports["default"] = _default;

package/lib/components/aside/desktop-tools.js

@@ -80,7 +80,7 @@ var BookmarkIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig
   displayName: "desktop-tools__BookmarkIconBlock",
   componentId: "eihdd4-3"
 })(["", " &::after{content:'", "';}"], iconBlockCSS, function (props) {
-  return props.isBookmarked ? '取消書籤' : '加入書籤';
+  return props.isBookmarked ? '取消收藏' : '收藏';
 });
 
 var ShareIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({

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

@@ -0,0 +1,559 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
+
+var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
+
+var _theme = _interopRequireDefault(require("../../constants/theme"));
+
+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");
+
+var _button = require("@twreporter/react-components/lib/button");
+
+var _snackBar = require("@twreporter/react-components/lib/snack-bar");
+
+var _zIndex = _interopRequireDefault(require("@twreporter/core/lib/constants/z-index"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+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); }); }; }
+
+var _ = {
+  isNil: _isNil["default"]
+}; // global var
+
+var ToolBarContext = /*#__PURE__*/(0, _react.createContext)();
+var defaultFbAppID = '962589903815787';
+
+var defaultFunc = function defaultFunc() {};
+
+var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-tool-bar-old__ButtonContainer",
+  componentId: "sc-12vlkqc-0"
+})(["display:flex;flex-direction:column;align-items:center;width:50px;margin-right:8px;&:last-child{margin-right:0;}"]);
+
+var ShareContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-tool-bar-old__ShareContainer",
+  componentId: "sc-12vlkqc-1"
+})(["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-old__OptionContainer",
+  componentId: "sc-12vlkqc-2"
+})(["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-old__SnackBarContainer",
+  componentId: "sc-12vlkqc-3"
+})(["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({
+  displayName: "mobile-tool-bar-old__ToolBarContainer",
+  componentId: "sc-12vlkqc-4"
+})(["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:", ";height:", ";transition:height 100ms;box-shadow:", ";", "{background-color:", ";box-shadow:", ";}", "{bottom:", ";}"], function (props) {
+  return props.bgColor;
+}, _zIndex["default"].mobileToolBar, function (props) {
+  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) {
+  var appID = _ref.appID;
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var shareToFb = function shareToFb() {
+    var currentURL = window.location.href;
+    var location = 'https://www.facebook.com/dialog/feed?' + 'display=page' + "&app_id=".concat(appID) + "&link=".concat(encodeURIComponent(currentURL)) + "&redirect_uri=".concat(encodeURIComponent('https://www.facebook.com/'));
+    window.open(location, '_blank');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ShareContainer, {
+    id: "fb-share",
+    onClick: shareToFb
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Facebook, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme
+  }));
+};
+
+FbShare.propTypes = {
+  appID: _aside["default"].tools.fbAppID
+};
+
+var LineShare = function LineShare() {
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var shareToLine = function shareToLine() {
+    var currentURL = window.location.href;
+    var location = "https://social-plugins.line.me/lineit/share?url=".concat(encodeURIComponent(currentURL));
+    window.open(location, '_blank');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ShareContainer, {
+    id: "line-share",
+    onClick: shareToLine
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Line, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme
+  }));
+};
+
+var TwitterShare = function TwitterShare() {
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var shareToTwitter = function shareToTwitter() {
+    var currentURL = window.location.href;
+    var location = 'https://twitter.com/intent/tweet?' + "url=".concat(encodeURIComponent(currentURL), "&text=").concat(encodeURIComponent(document.title + ' #報導者'));
+    window.open(location, '_blank');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ShareContainer, {
+    id: "twitter-share",
+    onClick: shareToTwitter
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Twitter, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme
+  }));
+};
+
+var CopyUrl = function CopyUrl(_ref2) {
+  var _ref2$onclick = _ref2.onclick,
+      onclick = _ref2$onclick === void 0 ? defaultFunc : _ref2$onclick;
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var copyUrl = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var currentURL;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              currentURL = window.location.href;
+              _context.next = 4;
+              return navigator.clipboard.writeText(currentURL);
+
+            case 4:
+              onclick(true);
+              _context.next = 10;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              onclick(false);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+
+    return function copyUrl() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react["default"].createElement(ShareContainer, {
+    onClick: copyUrl
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Copy, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme
+  }));
+};
+
+CopyUrl.propTypes = {
+  onclick: _propTypes["default"].func
+};
+
+var ShareBy = function ShareBy(_ref4) {
+  var fbAppID = _ref4.fbAppID;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showOption = _useState2[0],
+      setShowState = _useState2[1];
+
+  var _useContext = (0, _react.useContext)(ToolBarContext),
+      hideText = _useContext.hideText,
+      toastr = _useContext.toastr;
+
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var onCopyUrl = function onCopyUrl(isCopied) {
+    if (!isCopied) {
+      return;
+    }
+
+    toastr({
+      text: '已複製',
+      timeout: 3000
+    });
+  };
+
+  var onButtonClick = function onButtonClick() {
+    return setShowState(function (prevValue) {
+      return !prevValue;
+    });
+  };
+
+  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",
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme,
+    hideText: hideText
+  }), /*#__PURE__*/_react["default"].createElement(OptionContainer, {
+    isShow: showOption
+  }, /*#__PURE__*/_react["default"].createElement(FbShare, {
+    appID: fbAppID
+  }), /*#__PURE__*/_react["default"].createElement(LineShare, null), /*#__PURE__*/_react["default"].createElement(TwitterShare, null), /*#__PURE__*/_react["default"].createElement(CopyUrl, {
+    onclick: onCopyUrl
+  })));
+};
+
+ShareBy.propTypes = {
+  fbAppID: _aside["default"].tools.fbAppID
+};
+
+var FontLevel = function FontLevel(_ref5) {
+  var changeFontLevel = _ref5.changeFontLevel;
+
+  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;
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    onClick: changeFontLevel
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u6587\u5B57\u5927\u5C0F",
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Text, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme,
+    hideText: hideText
+  }));
+};
+
+FontLevel.propTypes = {
+  changeFontLevel: _aside["default"].tools.onFontLevelChange
+};
+
+var BookmarkBlock = function BookmarkBlock(_ref6) {
+  var articleMeta = _ref6.articleMeta;
+
+  var _useContext3 = (0, _react.useContext)(ToolBarContext),
+      hideText = _useContext3.hideText,
+      toastr = _useContext3.toastr;
+
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
+  var releaseBranch = themeContext.releaseBranch;
+
+  var renderIcon = function renderIcon(isBookmarked, addAction, removeAction) {
+    var iconType = isBookmarked ? 'saved' : 'add';
+    var text = isBookmarked ? '已儲存' : '加入書籤';
+    var id = isBookmarked ? 'remove-bookmark' : 'add-bookmark';
+
+    var handleClick = /*#__PURE__*/function () {
+      var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+        var action;
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                action = isBookmarked ? removeAction : addAction;
+                _context2.prev = 1;
+                _context2.next = 4;
+                return action();
+
+              case 4:
+                _context2.next = 9;
+                break;
+
+              case 6:
+                _context2.prev = 6;
+                _context2.t0 = _context2["catch"](1);
+                console.error('add bookmark fail', _context2.t0);
+
+              case 9:
+                onClickButton(isBookmarked);
+
+              case 10:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[1, 6]]);
+      }));
+
+      return function handleClick() {
+        return _ref7.apply(this, arguments);
+      };
+    }();
+
+    return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+      onClick: handleClick,
+      id: id
+    }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+      text: text,
+      iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+        type: iconType,
+        releaseBranch: releaseBranch
+      }),
+      theme: theme,
+      hideText: hideText
+    }));
+  };
+
+  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: true,
+    articleMeta: articleMeta,
+    renderIcon: renderIcon
+  }));
+};
+
+BookmarkBlock.propTypes = {
+  articleMeta: _aside["default"].tools.articleMetaForBookmark
+};
+
+var BackToTopic = function BackToTopic(_ref8) {
+  var backToTopic = _ref8.backToTopic;
+
+  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;
+  return /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Consumer, null, function (components) {
+    return /*#__PURE__*/_react["default"].createElement(components.Link, {
+      to: backToTopic,
+      target: "_self"
+    }, /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+      text: "\u524D\u5F80\u5C08\u984C",
+      iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Topic, {
+        releaseBranch: releaseBranch
+      }),
+      theme: theme,
+      hideText: hideText
+    })));
+  });
+};
+
+BackToTopic.propTypes = {
+  backToTopic: _aside["default"].tools.backToTopic
+};
+
+var RelatedPost = function RelatedPost() {
+  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;
+
+  var anchorScrollAttr = _defineProperty({}, _anchor.ARTICLE_ANCHOR_SCROLL, 'true');
+
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement("a", _extends({
+    href: "#".concat(_anchor.RELATED_POST_ANCHOR_ID)
+  }, anchorScrollAttr), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: "\u76F8\u95DC\u6587\u7AE0",
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Article, {
+      releaseBranch: releaseBranch
+    }),
+    theme: theme,
+    hideText: hideText
+  })));
+};
+
+var ToolBar = function ToolBar(_ref9) {
+  var backToTopic = _ref9.backToTopic,
+      _ref9$fbAppID = _ref9.fbAppID,
+      fbAppID = _ref9$fbAppID === void 0 ? defaultFbAppID : _ref9$fbAppID,
+      articleMetaForBookmark = _ref9.articleMetaForBookmark,
+      onFontLevelChange = _ref9.onFontLevelChange,
+      className = _ref9.className;
+
+  var _useState3 = (0, _react.useState)('init'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      scrollDirection = _useState4[0],
+      setScrollDirection = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    var threshold = 8;
+    var lastScrollY = window.pageYOffset;
+    var ticking = false;
+
+    var updateScrollDirection = function updateScrollDirection() {
+      var scrollY = window.pageYOffset;
+
+      if (_.isNil(lastScrollY)) {
+        ticking = false;
+        return;
+      }
+
+      if (Math.abs(scrollY - lastScrollY) < threshold) {
+        ticking = false;
+        return;
+      }
+
+      var scrollDirection = scrollY > lastScrollY ? 'down' : 'up';
+      setScrollDirection(scrollDirection);
+      lastScrollY = scrollY > 0 ? scrollY : 0;
+      ticking = false;
+    };
+
+    var onScroll = function onScroll() {
+      if (!ticking) {
+        window.requestAnimationFrame(updateScrollDirection);
+        ticking = true;
+      }
+    };
+
+    window.addEventListener('scroll', onScroll);
+    return function () {
+      window.removeEventListener('scroll', onScroll);
+      lastScrollY = null;
+      ticking = null;
+    };
+  }, [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';
+  var contextValue = {
+    hideText: hideText,
+    toastr: toastr
+  };
+  return /*#__PURE__*/_react["default"].createElement(ToolBarContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react["default"].createElement(ToolBarContainer, {
+    bgColor: bgColor,
+    shadow: shadow,
+    hideText: hideText,
+    className: className
+  }, /*#__PURE__*/_react["default"].createElement(FontLevel, {
+    changeFontLevel: onFontLevelChange
+  }), /*#__PURE__*/_react["default"].createElement(ShareBy, {
+    fbAppID: fbAppID
+  }), /*#__PURE__*/_react["default"].createElement(BookmarkBlock, {
+    articleMeta: articleMetaForBookmark
+  }), /*#__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;
+var _default = ToolBar;
+exports["default"] = _default;

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

@@ -339,7 +339,7 @@ var BookmarkBlock = function BookmarkBlock(_ref6) {
 
   var renderIcon = function renderIcon(isBookmarked, addAction, removeAction) {
     var iconType = isBookmarked ? 'saved' : 'add';
-    var text = isBookmarked ? '已儲存' : '加入書籤';
+    var text = isBookmarked ? '已收藏' : '收藏';
     var id = isBookmarked ? 'remove-bookmark' : 'add-bookmark';
 
     var handleClick = /*#__PURE__*/function () {
@@ -394,7 +394,7 @@ var BookmarkBlock = function BookmarkBlock(_ref6) {
   };
 
   var onClickButton = function onClickButton(isBookmarked) {
-    var text = isBookmarked ? '已取消書籤' : '已儲存';
+    var text = isBookmarked ? '已取消收藏' : '已收藏';
     toastr({
       text: text,
       timeout: 3000

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.11.4-rc.0",
+  "version": "1.12.0-rc.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",
@@ -24,10 +24,10 @@
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "@twreporter/core": "^1.17.0",
-    "@twreporter/react-components": "^8.24.1-rc.0",
-    "@twreporter/redux": "^7.10.1-rc.0",
-    "@twreporter/universal-header": "^2.10.1-rc.0",
+    "@twreporter/core": "^1.17.1-rc.0",
+    "@twreporter/react-components": "^8.25.0-rc.0",
+    "@twreporter/redux": "^7.10.1-rc.2",
+    "@twreporter/universal-header": "^2.11.0-rc.0",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -40,5 +40,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "65b5c4b0cc082b28a18f383461aac1cdfa19a847"
+  "gitHead": "42b025c9e74ea6697305ccabfa5dada913efc099"
 }