@twreporter/react-article-components 1.12.2-rc.3 → 1.13.0-rc.0

package/lib/components/article-page.js

@@ -57,6 +57,8 @@ var _mobileToolBarOld = _interopRequireDefault(require("./aside/mobile-tool-bar-
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
 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); }
@@ -89,11 +91,12 @@ 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"]
+  get: _get["default"],
+  throttle: _throttle["default"]
 };
+var Tools = _featureFlag.MY_READING ? _desktopTools["default"] : _desktopToolsOld["default"];
+var ToolBar = _featureFlag.MY_READING ? _mobileToolBar["default"] : _mobileToolBarOld["default"];
 var shiftLeftCss = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;width:calc(100% + 20px);left:-10px;"]);
 
 var BorderBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -245,16 +248,12 @@ var Article = /*#__PURE__*/function (_PureComponent) {
 
   var _super = _createSuper(Article);
 
-  function Article() {
+  function Article(props) {
     var _this;
 
     _classCallCheck(this, Article);
 
-    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));
+    _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "changeFontLevel", function () {
       var _this$props = _this.props,
@@ -288,6 +287,12 @@ var Article = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
+    _this.state = {
+      scrollStage: 1
+    };
+    _this.lastY = 0;
+    _this.currentY = 0;
+    _this.handleScroll = _.throttle(_this._handleScroll.bind(_assertThisInitialized(_this)), 50);
     return _this;
   }
 
@@ -312,6 +317,46 @@ var Article = /*#__PURE__*/function (_PureComponent) {
           }
       }
     }
+  }, {
+    key: "_handleScroll",
+    value: function _handleScroll() {
+      var scrollThreshold = 16;
+      this.lastY = window.pageYOffset;
+      var scrollDistance = Math.abs(this.currentY - this.lastY);
+
+      if (scrollDistance < scrollThreshold) {
+        return;
+      }
+
+      var scrollDirection = this.lastY > this.currentY ? 'down' : 'up';
+      this.currentY = this.lastY;
+
+      if (scrollDirection === 'up') {
+        this.setState(function (prevState) {
+          return {
+            scrollStage: prevState.scrollStage - 1 < 1 ? 1 : prevState.scrollStage - 1
+          };
+        });
+      } else {
+        this.setState(function (prevState) {
+          return {
+            scrollStage: prevState.scrollStage + 1 > 3 ? 3 : prevState.scrollStage + 1
+          };
+        });
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener('scroll', this.handleScroll, {
+        passive: true
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('scroll', this.handleScroll);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -372,7 +417,8 @@ var Article = /*#__PURE__*/function (_PureComponent) {
         className: 'hidden-print',
         backToTopic: backToTopic,
         articleMetaForBookmark: articleMetaForBookmark,
-        onFontLevelChange: this.changeFontLevel
+        onFontLevelChange: this.changeFontLevel,
+        scrollStage: this.state.scrollStage
       }), /*#__PURE__*/_react["default"].createElement(DesktopAsideBlock, null, /*#__PURE__*/_react["default"].createElement(_desktopAside["default"], {
         backToTopic: backToTopic,
         categorySet: post.category_set,
@@ -389,7 +435,8 @@ 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'),
-        onToggleTabExpanded: onToggleTabExpanded
+        onToggleTabExpanded: onToggleTabExpanded,
+        scrollStage: this.state.scrollStage
       })), metadataAndToolsJSX), /*#__PURE__*/_react["default"].createElement(_donationBox["default"], null), /*#__PURE__*/_react["default"].createElement(_license["default"], {
         license: post.copyright,
         publishedDate: post.published_date,

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

@@ -35,14 +35,16 @@ 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 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; }
@@ -63,10 +65,7 @@ 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); }); }; }
 
-var _ = {
-  isNil: _isNil["default"]
-}; // global var
-
+// global var
 var ToolBarContext = /*#__PURE__*/(0, _react.createContext)();
 var defaultFbAppID = '962589903815787';
 
@@ -96,23 +95,30 @@ var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig
   return props.showSnackBar ? 1 : 0;
 });
 
-var ToolBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "mobile-tool-bar-old__ToolBarContainer",
+var ToolBarWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-tool-bar-old__ToolBarWrapper",
   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) {
+})(["display:flex;width:100%;justify-content:center;padding:8px;position:fixed;left:0px;bottom:env(safe-area-inset-bottom,0);height:", ";transform:", ";transition:height 200ms,transform 200ms ease-in-out;background-color:", ";border-top:1px solid ", ";z-index:", ";", "{background-color:", ";box-shadow:", ";}", "{bottom:", ";}"], function (props) {
+  return props.hideText ? '40px' : '55px';
+}, function (props) {
+  return props.isHidden ? 'translateY(100%)' : 'tanslateY(0%)';
+}, 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.borderColor;
+}, _zIndex["default"].mobileToolBar, ShareContainer, function (props) {
   return props.bgColor;
 }, function (props) {
   return props.shadow;
 }, SnackBarContainer, function (props) {
-  return props.hideText ? '46px' : '64px';
+  return props.hideText ? '48px' : '62px';
 });
 
+var ToolBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-tool-bar-old__ToolBarContainer",
+  componentId: "sc-12vlkqc-5"
+})(["display:flex;width:100%;max-width:560px;justify-content:space-evenly;align-items:center;"]);
+
 var FbShare = function FbShare(_ref) {
   var appID = _ref.appID;
   var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
@@ -468,57 +474,14 @@ var ToolBar = function ToolBar(_ref9) {
       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]);
+      className = _ref9.className,
+      scrollStage = _ref9.scrollStage;
   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;
+      borderColor = _getToolBarTheme.borderColor;
 
   var _useSnackBar = (0, _snackBar.useSnackBar)(),
       showSnackBar = _useSnackBar.showSnackBar,
@@ -528,26 +491,28 @@ var ToolBar = function ToolBar(_ref9) {
   var backToTopicJSX = backToTopic ? /*#__PURE__*/_react["default"].createElement(BackToTopic, {
     backToTopic: backToTopic
   }) : null;
-  var hideText = scrollDirection === 'down';
+  var hideText = scrollStage >= 2;
+  var hideToolBar = scrollStage >= 3;
   var contextValue = {
     hideText: hideText,
     toastr: toastr
   };
   return /*#__PURE__*/_react["default"].createElement(ToolBarContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react["default"].createElement(ToolBarContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(ToolBarWrapper, {
     bgColor: bgColor,
-    shadow: shadow,
+    borderColor: borderColor,
     hideText: hideText,
     className: className,
+    isHidden: hideToolBar,
     id: "mobile-tool-bar"
-  }, /*#__PURE__*/_react["default"].createElement(FontLevel, {
+  }, /*#__PURE__*/_react["default"].createElement(ToolBarContainer, null, /*#__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, {
+  }), /*#__PURE__*/_react["default"].createElement(RelatedPost, null), backToTopicJSX), /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
     showSnackBar: showSnackBar
   }, /*#__PURE__*/_react["default"].createElement(_snackBar.SnackBar, {
     text: snackBarText,
@@ -555,6 +520,8 @@ var ToolBar = function ToolBar(_ref9) {
   }))));
 };
 
-ToolBar.propTypes = _aside["default"].tools;
+ToolBar.propTypes = _objectSpread(_objectSpread({}, _aside["default"].tools), {}, {
+  scrollStage: _propTypes["default"].number
+});
 var _default = ToolBar;
 exports["default"] = _default;

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

@@ -35,14 +35,16 @@ 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 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; }
@@ -63,10 +65,7 @@ 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); }); }; }
 
-var _ = {
-  isNil: _isNil["default"]
-}; // global var
-
+// global var
 var ToolBarContext = /*#__PURE__*/(0, _react.createContext)();
 var defaultFbAppID = '962589903815787';
 
@@ -96,23 +95,30 @@ var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig
   return props.showSnackBar ? 1 : 0;
 });
 
-var ToolBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "mobile-tool-bar__ToolBarContainer",
+var ToolBarWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-tool-bar__ToolBarWrapper",
   componentId: "do65sv-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) {
+})(["display:flex;width:100%;justify-content:center;padding:8px;position:fixed;left:0px;bottom:env(safe-area-inset-bottom,0);height:", ";transform:", ";transition:height 200ms,transform 200ms ease-in-out;background-color:", ";border-top:1px solid ", ";z-index:", ";", "{background-color:", ";box-shadow:", ";}", "{bottom:", ";}"], function (props) {
+  return props.hideText ? '40px' : '55px';
+}, function (props) {
+  return props.isHidden ? 'translateY(100%)' : 'tanslateY(0%)';
+}, 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.borderColor;
+}, _zIndex["default"].mobileToolBar, ShareContainer, function (props) {
   return props.bgColor;
 }, function (props) {
   return props.shadow;
 }, SnackBarContainer, function (props) {
-  return props.hideText ? '46px' : '64px';
+  return props.hideText ? '48px' : '62px';
 });
 
+var ToolBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-tool-bar__ToolBarContainer",
+  componentId: "do65sv-5"
+})(["display:flex;width:100%;max-width:560px;justify-content:space-evenly;align-items:center;"]);
+
 var FbShare = function FbShare(_ref) {
   var appID = _ref.appID;
   var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
@@ -468,57 +474,14 @@ var ToolBar = function ToolBar(_ref9) {
       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]);
+      className = _ref9.className,
+      scrollStage = _ref9.scrollStage;
   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;
+      borderColor = _getToolBarTheme.borderColor;
 
   var _useSnackBar = (0, _snackBar.useSnackBar)(),
       showSnackBar = _useSnackBar.showSnackBar,
@@ -528,26 +491,28 @@ var ToolBar = function ToolBar(_ref9) {
   var backToTopicJSX = backToTopic ? /*#__PURE__*/_react["default"].createElement(BackToTopic, {
     backToTopic: backToTopic
   }) : null;
-  var hideText = scrollDirection === 'down';
+  var hideText = scrollStage >= 2;
+  var hideToolBar = scrollStage >= 3;
   var contextValue = {
     hideText: hideText,
     toastr: toastr
   };
   return /*#__PURE__*/_react["default"].createElement(ToolBarContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react["default"].createElement(ToolBarContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(ToolBarWrapper, {
     bgColor: bgColor,
-    shadow: shadow,
+    borderColor: borderColor,
     hideText: hideText,
     className: className,
+    isHidden: hideToolBar,
     id: "mobile-tool-bar"
-  }, /*#__PURE__*/_react["default"].createElement(FontLevel, {
+  }, /*#__PURE__*/_react["default"].createElement(ToolBarContainer, null, /*#__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, {
+  }), /*#__PURE__*/_react["default"].createElement(RelatedPost, null), backToTopicJSX), /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
     showSnackBar: showSnackBar
   }, /*#__PURE__*/_react["default"].createElement(_snackBar.SnackBar, {
     text: snackBarText,
@@ -555,6 +520,8 @@ var ToolBar = function ToolBar(_ref9) {
   }))));
 };
 
-ToolBar.propTypes = _aside["default"].tools;
+ToolBar.propTypes = _objectSpread(_objectSpread({}, _aside["default"].tools), {}, {
+  scrollStage: _propTypes["default"].number
+});
 var _default = ToolBar;
 exports["default"] = _default;

package/lib/components/aside/utils/theme.js

@@ -18,14 +18,14 @@ var getToolBarTheme = function getToolBarTheme(theme) {
     case _theme["default"].article.v2.photo:
       return {
         bgColor: _color.colorPhoto.dark,
-        shadow: '0px 0px 8px rgba(0, 0, 0, 0.5)'
+        borderColor: _color.colorPhoto.heavy
       };
 
     case _theme["default"].article.v2["default"]:
     default:
       return {
-        bgColor: _color.colorGrayscale.white,
-        shadow: '0px 0px 8px rgba(0, 0, 0, 0.1)'
+        bgColor: _color.colorGrayscale.gray100,
+        borderColor: _color.colorGrayscale.gray300
       };
   }
 };

package/lib/components/body/index.js

@@ -469,7 +469,8 @@ var Body = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           brief = _this$props.brief,
           content = _this$props.content,
-          onToggleTabExpanded = _this$props.onToggleTabExpanded;
+          onToggleTabExpanded = _this$props.onToggleTabExpanded,
+          scrollStage = _this$props.scrollStage;
       var enableTOC = false;
       var contentJsx = Array.isArray(content) ? _.map(content, function (data, index) {
         var elementJSX = _this2._buildContentElement(data, index);
@@ -492,7 +493,8 @@ var Body = /*#__PURE__*/function (_Component) {
       }), contentJsx, /*#__PURE__*/_react["default"].createElement(ClearFloat, null), enableTOC ? /*#__PURE__*/_react["default"].createElement(_tableOfContents["default"].React.TableOfContents, {
         manager: this.tocManager,
         onStartScrollingToAnchor: this._onStartScrollingToAnchor,
-        onToggleTabExpanded: onToggleTabExpanded
+        onToggleTabExpanded: onToggleTabExpanded,
+        scrollStage: scrollStage
       }) : null);
     }
   }]);
@@ -505,11 +507,13 @@ exports["default"] = Body;
 _defineProperty(Body, "propTypes", {
   brief: _propTypes["default"].arrayOf(_body["default"].elementData),
   content: _propTypes["default"].arrayOf(_body["default"].elementData),
-  onToggleTabExpanded: _propTypes["default"].func
+  onToggleTabExpanded: _propTypes["default"].func,
+  scrollStage: _propTypes["default"].number
 });
 
 _defineProperty(Body, "defaultProps", {
   brief: [],
   content: [],
-  onToggleTabExpanded: function onToggleTabExpanded() {}
+  onToggleTabExpanded: function onToggleTabExpanded() {},
+  scollStage: 1
 });