@twreporter/react-article-components 1.4.12-rc.6 → 1.5.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 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.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.12...@twreporter/react-article-components@1.5.0-rc.0) (2022-06-08)
+
+
+### Bug Fixes
+
+* adjustment style & animation ([1694069](https://github.com/twreporter/twreporter-npm-packages/commit/1694069e769e685b6ec892e0d736111023c1319a))
+* fix defect ([a1cdd55](https://github.com/twreporter/twreporter-npm-packages/commit/a1cdd5504676563ad8816a4b8aebc79dbe774821))
+
+
+### Features
+
+* add article tool bar & snackbar component ([942328d](https://github.com/twreporter/twreporter-npm-packages/commit/942328d7f9175a39bf74f3650f148e29e5d12274))
+
+
+
+
+
+## [1.4.12](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.12-rc.7...@twreporter/react-article-components@1.4.12) (2022-06-07)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
+## [1.4.12-rc.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.12-rc.6...@twreporter/react-article-components@1.4.12-rc.7) (2022-06-06)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
 ## [1.4.12-rc.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.12-rc.5...@twreporter/react-article-components@1.4.12-rc.6) (2022-05-30)
 
 

package/lib/components/article-page.js

@@ -27,7 +27,7 @@ var _link = _interopRequireDefault(require("./link"));
 
 var _metadata = _interopRequireDefault(require("./aside/metadata"));
 
-var _mobileAside = _interopRequireDefault(require("./aside/mobile-aside"));
+var _mobileToolBar = _interopRequireDefault(require("./aside/mobile-tool-bar"));
 
 var _related = _interopRequireDefault(require("./related"));
 
@@ -35,7 +35,7 @@ var _separationCurve = _interopRequireDefault(require("./separation-curve"));
 
 var _uiManager = _interopRequireDefault(require("../managers/ui-manager"));
 
-var _tools = _interopRequireDefault(require("./aside/tools"));
+var _desktopTools = _interopRequireDefault(require("./aside/desktop-tools"));
 
 var _theme = _interopRequireDefault(require("../constants/theme"));
 
@@ -43,15 +43,17 @@ var _color = _interopRequireDefault(require("../constants/color"));
 
 var _typography = _interopRequireDefault(require("../constants/typography"));
 
+var _anchor = require("../constants/anchor");
+
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _get = _interopRequireDefault(require("lodash/get"));
+var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
 
-var _map = _interopRequireDefault(require("lodash/map"));
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
 
-var _merge = _interopRequireDefault(require("lodash/merge"));
+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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 
 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); }
 
@@ -84,9 +86,7 @@ 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 _ = {
-  get: _get["default"],
-  map: _map["default"],
-  merge: _merge["default"]
+  get: _get["default"]
 };
 var fontFamilyCss = /*#__PURE__*/(0, _styledComponents.css)(["font-family:", ";"], _typography["default"].font.family["default"]);
 var shiftLeftCss = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;width:calc(100% + 20px);left:-10px;"]);
@@ -133,24 +133,29 @@ var ToolsBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   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  "]))));
 
+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  "]))));
+
 var ContentBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-page__ContentBlock",
-  componentId: "sc-1wuywdb-8"
-})(["margin:0 auto;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    ", "\n  "])), shiftLeftCss), _mediaQuery["default"].desktopOnly(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    width: 550px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    width: 730px;\n  "]))));
+  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  "]))));
 
 var StyledSeparationCurve = /*#__PURE__*/(0, _styledComponents["default"])(_separationCurve["default"]).withConfig({
   displayName: "article-page__StyledSeparationCurve",
-  componentId: "sc-1wuywdb-9"
-})(["", ""], _mediaQuery["default"].desktopAndAbove(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+  componentId: "sc-1wuywdb-10"
+})(["", ""], _mediaQuery["default"].desktopAndAbove(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var RelatedBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-page__RelatedBlock",
-  componentId: "sc-1wuywdb-10"
-})(["margin-left:auto;margin-right:auto;margin-bottom:0;width:100%;", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    max-width: 1024px;\n    margin-top: 60px;\n  "]))), _mediaQuery["default"].hdOnly(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    max-width: 1440px;\n    margin-top: 90px;\n  "]))));
+  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  "]))));
 
 var BackgroundBlock = /*#__PURE__*/(0, _styledComponents["default"])(BorderBox).withConfig({
   displayName: "article-page__BackgroundBlock",
-  componentId: "sc-1wuywdb-11"
+  componentId: "sc-1wuywdb-12"
 })(["", " ", " @media print{-webkit-print-color-adjust:exact;color-adjust:exact;.hidden-print{display:none;}.avoid-break{break-inside:avoid;}}padding-left:10px;padding-right:10px;"], fontFamilyCss, function (props) {
   return getBackgroundBlockStyles(props.theme.name);
 });
@@ -235,12 +240,16 @@ var Article = /*#__PURE__*/function (_PureComponent) {
 
   var _super = _createSuper(Article);
 
-  function Article(props) {
+  function Article() {
     var _this;
 
     _classCallCheck(this, Article);
 
-    _this = _super.call(this, props);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "changeFontLevel", function () {
       var _this$props = _this.props,
@@ -274,33 +283,10 @@ var Article = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
-    _this.mobileAsideRef = /*#__PURE__*/_react["default"].createRef();
-    _this.lastKnownScrollPosition = 0;
-    _this.ticking = false;
-    _this.scrollPosition = {
-      y: 0
-    };
-    _this.onScroll = _this._onScroll.bind(_assertThisInitialized(_this));
-    _this.toggleMobileAside = _this._toggleMobileAside.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Article, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener('scroll', this.onScroll);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('scroll', this.onScroll);
-      this.lastKnownScrollPosition = null;
-      this.ticking = null;
-      this.scrollPosition = {
-        y: 0
-      };
-    }
-  }, {
     key: "getFontSizeOffset",
     value: function getFontSizeOffset(fontLevel) {
       switch (fontLevel) {
@@ -321,52 +307,6 @@ var Article = /*#__PURE__*/function (_PureComponent) {
           }
       }
     }
-    /**
-     * Wrap toggleMobileAside() with requestAnimationFrame() to avoid triggering browser reflow due to reading window.scrollY.
-     * ref: https://developer.mozilla.org/en-US/docs/web/api/document/scroll_event#Example
-     */
-
-  }, {
-    key: "_onScroll",
-    value: function _onScroll() {
-      var _this2 = this;
-
-      this.lastKnownScrollPosition = window.scrollY;
-
-      if (!this.ticking) {
-        window.requestAnimationFrame(function () {
-          _this2.toggleMobileAside(_this2.lastKnownScrollPosition);
-
-          _this2.ticking = false;
-        });
-        this.ticking = true;
-      }
-    }
-    /**
-     * If users scroll up, and the scrolling distance is more than a certain distance as well, show mobile aside.
-     * Otherwise, if users scroll down, hide the mobile aside.
-     */
-
-  }, {
-    key: "_toggleMobileAside",
-    value: function _toggleMobileAside(currentTopY) {
-      if (this.mobileAsideRef) {
-        var mAside = this.mobileAsideRef; // Calculate scrolling distance to determine whether to display aside
-
-        var lastY = this.scrollPosition.y;
-        var distance = currentTopY - lastY;
-
-        if (distance > 30) {
-          this.scrollPosition.y = currentTopY;
-          mAside.current.toShow = false;
-        } else {
-          if (Math.abs(distance) > 150) {
-            this.scrollPosition.y = currentTopY;
-            mAside.current.toShow = true;
-          }
-        }
-      }
-    }
   }, {
     key: "render",
     value: function render() {
@@ -377,7 +317,8 @@ var Article = /*#__PURE__*/function (_PureComponent) {
           relatedPosts = _this$props2.relatedPosts,
           relatedTopic = _this$props2.relatedTopic,
           hasMoreRelateds = _this$props2.hasMoreRelateds,
-          loadMoreRelateds = _this$props2.loadMoreRelateds;
+          loadMoreRelateds = _this$props2.loadMoreRelateds,
+          releaseBranch = _this$props2.releaseBranch;
       var articleMetaForBookmark = {
         slug: _.get(post, 'slug', ''),
         title: _.get(post, 'title', ''),
@@ -402,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(_tools["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(ToolsBlock, null, /*#__PURE__*/_react["default"].createElement(_desktopTools["default"], {
         articleMetaForBookmark: articleMetaForBookmark,
         backToTopic: backToTopic,
         onFontLevelChange: this.changeFontLevel
@@ -412,7 +353,8 @@ var Article = /*#__PURE__*/function (_PureComponent) {
         theme: {
           name: _.get(post, 'style', _theme["default"].article.v2["default"]),
           colors: uiManager.getThemeColors(),
-          fontSizeOffset: this.getFontSizeOffset(fontLevel)
+          fontSizeOffset: this.getFontSizeOffset(fontLevel),
+          releaseBranch: releaseBranch
         }
       }, /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Provider, {
         value: {
@@ -420,10 +362,10 @@ var Article = /*#__PURE__*/function (_PureComponent) {
         }
       }, /*#__PURE__*/_react["default"].createElement(BackgroundBlock, null, /*#__PURE__*/_react["default"].createElement(LeadingBlock, null, /*#__PURE__*/_react["default"].createElement(LeadingComponent, leadingProps), /*#__PURE__*/_react["default"].createElement(SeprationLine, {
         visible: uiManager.toRenderSeparationLineBetweenLeadingAndBody()
-      })), /*#__PURE__*/_react["default"].createElement(BodyBackground, null, /*#__PURE__*/_react["default"].createElement(BodyBlock, null, /*#__PURE__*/_react["default"].createElement(_mobileAside["default"], {
+      })), /*#__PURE__*/_react["default"].createElement(BodyBackground, null, /*#__PURE__*/_react["default"].createElement(BodyBlock, null, /*#__PURE__*/_react["default"].createElement(MobileToolBar, {
         backToTopic: backToTopic,
         articleMetaForBookmark: articleMetaForBookmark,
-        ref: this.mobileAsideRef
+        onFontLevelChange: this.changeFontLevel
       }), /*#__PURE__*/_react["default"].createElement(DesktopAsideBlock, null, /*#__PURE__*/_react["default"].createElement(_desktopAside["default"], {
         backToTopic: backToTopic,
         categories: post.categories,
@@ -442,7 +384,9 @@ var Article = /*#__PURE__*/function (_PureComponent) {
         content: _.get(post, 'content.api_data')
       })), metadataAndToolsJSX), /*#__PURE__*/_react["default"].createElement(_donationBox["default"], null), /*#__PURE__*/_react["default"].createElement(_license["default"], {
         license: post.copyright,
-        publishedDate: post.published_date
+        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"], {
         id: post.id,
         data: relatedPosts,
@@ -465,7 +409,8 @@ _defineProperty(Article, "propTypes", {
   LinkComponent: _propTypes["default"].elementType,
   onFontLevelChange: _propTypes["default"].func,
   hasMoreRelateds: _propTypes["default"].bool,
-  loadMoreRelateds: _propTypes["default"].func
+  loadMoreRelateds: _propTypes["default"].func,
+  releaseBranch: _propTypes2["default"].releaseBranch
 });
 
 _defineProperty(Article, "defaultProps", {
@@ -474,5 +419,6 @@ _defineProperty(Article, "defaultProps", {
   relatedPosts: [],
   relatedTopic: {},
   hasMoreRelateds: false,
-  loadMoreRelateds: noop
+  loadMoreRelateds: noop,
+  releaseBranch: _releaseBranch["default"].master
 });

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

@@ -11,7 +11,7 @@ var _metadata = _interopRequireDefault(require("./metadata"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _tools = _interopRequireDefault(require("./tools"));
+var _desktopTools = _interopRequireDefault(require("./desktop-tools"));
 
 var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
 
@@ -148,7 +148,7 @@ var Aside = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var toolsHeight = 304; // px
+      var toolsHeight = 258; // px
 
       var _this$props = this.props,
           articleMetaForBookmark = _this$props.articleMetaForBookmark,
@@ -183,7 +183,7 @@ var Aside = /*#__PURE__*/function (_React$PureComponent) {
         height: toolsHeight / 2
       })), /*#__PURE__*/_react["default"].createElement(ToolsPositioningBlock, {
         toolPosition: this.state.toolPosition
-      }, /*#__PURE__*/_react["default"].createElement(_tools["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_desktopTools["default"], {
         backToTopic: backToTopic,
         height: "".concat(toolsHeight, "px"),
         title: title,

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

@@ -0,0 +1,198 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _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 = _interopRequireDefault(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__TextIconBlock",
+  componentId: "eihdd4-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__BackToTopicBlock",
+  componentId: "eihdd4-1"
+})(["", " &::after{content:'\u56DE\u5230\u5C08\u984C';}"], iconBlockCSS);
+
+var PrintIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "desktop-tools__PrintIconBlock",
+  componentId: "eihdd4-2"
+})(["", " &::after{content:'\u5217\u5370';}"], iconBlockCSS);
+
+var BookmarkIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "desktop-tools__BookmarkIconBlock",
+  componentId: "eihdd4-3"
+})(["", " &::after{content:'", "';}"], iconBlockCSS, function (props) {
+  return props.isBookmarked ? '取消書籤' : '加入書籤';
+});
+
+var ShareIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "desktop-tools__ShareIconBlock",
+  componentId: "eihdd4-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__ToolsBlock",
+  componentId: "eihdd4-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.main, _color.colorSupportive.main);
+
+    default:
+      return '';
+  }
+});
+
+function FBShareBT(props) {
+  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
+  }));
+}
+
+FBShareBT.propTypes = {
+  appID: _propTypes["default"].string.isRequired
+};
+
+function TwitterShareBT(props) {
+  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
+  }));
+}
+
+function LineShareBT(props) {
+  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
+  }));
+}
+
+function BookmarkIcon(isBookmarked, addAction, removeAction) {
+  var iconType = isBookmarked ? 'saved' : 'add';
+  return /*#__PURE__*/_react["default"].createElement(BookmarkIconBlock, {
+    onClick: isBookmarked ? removeAction : addAction,
+    isBookmarked: isBookmarked
+  }, /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+    type: iconType
+  }));
+}
+
+var defaultFbAppID = '962589903815787';
+
+var Tools = function Tools(_ref) {
+  var backToTopic = _ref.backToTopic,
+      fbAppID = _ref.fbAppID,
+      height = _ref.height,
+      onFontLevelChange = _ref.onFontLevelChange,
+      articleMetaForBookmark = _ref.articleMetaForBookmark;
+  var backToTopicJSX = backToTopic ? /*#__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, null)));
+  }) : null;
+
+  var onPrinterClick = function onPrinterClick() {
+    return window.print();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(ToolsBlock, {
+    height: height
+  }, backToTopicJSX, /*#__PURE__*/_react["default"].createElement(_bookmarkWidget["default"], {
+    toAutoCheck: false,
+    articleMeta: articleMetaForBookmark,
+    renderIcon: BookmarkIcon
+  }), /*#__PURE__*/_react["default"].createElement(TextIconBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Text, {
+    onClick: onFontLevelChange
+  })), /*#__PURE__*/_react["default"].createElement(PrintIconBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Printer, {
+    onClick: onPrinterClick
+  })), /*#__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;