@twreporter/react-article-components 2.3.0-rc.2 → 2.3.0-rc.4

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.3.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.3.0-rc.3...@twreporter/react-article-components@2.3.0-rc.4) (2024-07-10)
+
+
+### Bug Fixes
+
+* add dependency ([ca886a7](https://github.com/twreporter/twreporter-npm-packages/commit/ca886a7b44f0872eb05dafdc47682fea1b089141))
+
+
+
+
+
+# [2.3.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.3.0-rc.2...@twreporter/react-article-components@2.3.0-rc.3) (2024-07-09)
+
+
+### Features
+
+* replace bookmarkWidget by useBookmark ([1c2c3d5](https://github.com/twreporter/twreporter-npm-packages/commit/1c2c3d559b2f4f536b02e52c5c51a11c58817f23))
+
+
+
+
+
 # [2.3.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.3.0-rc.1...@twreporter/react-article-components@2.3.0-rc.2) (2024-07-09)
 
 

package/lib/components/article-page.js

@@ -325,7 +325,8 @@ var Article = exports["default"] = /*#__PURE__*/function (_PureComponent) {
       }), /*#__PURE__*/_react["default"].createElement(DesktopToolsBlock, null, /*#__PURE__*/_react["default"].createElement(_desktopTools["default"], {
         articleMetaForBookmark: articleMetaForBookmark,
         backToTopic: backToTopic,
-        onFontLevelChange: this.changeFontLevel
+        onFontLevelChange: this.changeFontLevel,
+        bookmarkId: Number(post.bookmarkId)
       })));
       return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
         store: store
@@ -347,7 +348,8 @@ var Article = exports["default"] = /*#__PURE__*/function (_PureComponent) {
         backToTopic: backToTopic,
         articleMetaForBookmark: articleMetaForBookmark,
         onFontLevelChange: this.changeFontLevel,
-        scrollStage: this.state.scrollStage
+        scrollStage: this.state.scrollStage,
+        bookmarkId: Number(post.bookmarkId)
       }), /*#__PURE__*/_react["default"].createElement(DesktopAsideBlock, null, /*#__PURE__*/_react["default"].createElement(_desktopAside["default"], {
         backToTopic: backToTopic,
         categorySet: post.category_set,
@@ -359,7 +361,8 @@ var Article = exports["default"] = /*#__PURE__*/function (_PureComponent) {
         engineers: post.engineers,
         rawAutherText: post.extend_byline,
         onFontLevelChange: this.changeFontLevel,
-        articleMetaForBookmark: articleMetaForBookmark
+        articleMetaForBookmark: articleMetaForBookmark,
+        bookmarkId: Number(post.bookmarkId)
       })), metadataAndToolsJSX, /*#__PURE__*/_react["default"].createElement(ContentBlock, null, /*#__PURE__*/_react["default"].createElement(_body["default"], {
         key: _.get(post, 'slug', 'article-page-body-key'),
         brief: _.get(post, 'brief.api_data'),

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

@@ -10,6 +10,7 @@ var _desktopTools = _interopRequireDefault(require("./desktop-tools"));
 var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _reactWaypoint = require("react-waypoint");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -131,7 +132,8 @@ var Aside = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
         rawAutherText = _this$props.rawAutherText,
         tags = _this$props.tags,
         title = _this$props.title,
-        writers = _this$props.writers;
+        writers = _this$props.writers,
+        bookmarkId = _this$props.bookmarkId;
       var metadataJSX = /*#__PURE__*/_react["default"].createElement(_metadata["default"], {
         categories: categories,
         categorySet: categorySet,
@@ -156,7 +158,8 @@ var Aside = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
         height: "".concat(toolsHeight, "px"),
         title: title,
         onFontLevelChange: onFontLevelChange,
-        articleMetaForBookmark: articleMetaForBookmark
+        articleMetaForBookmark: articleMetaForBookmark,
+        bookmarkId: bookmarkId
       })), /*#__PURE__*/_react["default"].createElement(_reactWaypoint.Waypoint, {
         onEnter: this.setToolsBottom,
         onLeave: this.setToolsFixed,
@@ -168,4 +171,6 @@ var Aside = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return Aside;
 }(_react["default"].PureComponent);
-_defineProperty(Aside, "propTypes", _objectSpread(_objectSpread({}, _aside["default"].metadata), _aside["default"].tools));
+_defineProperty(Aside, "propTypes", _objectSpread(_objectSpread(_objectSpread({}, _aside["default"].metadata), _aside["default"].tools), {}, {
+  bookmarkId: _propTypes["default"].number
+}));

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

@@ -9,18 +9,31 @@ var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/d
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactRedux = require("react-redux");
 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 _hook = require("@twreporter/react-components/lib/hook");
+var _enum = require("@twreporter/react-components/lib/icon/enum");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5; // constants
 // icons
 // @twreporter
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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) {
@@ -126,29 +139,62 @@ function LineShareBT(props) {
   }));
 }
 var BookmarkBlock = function BookmarkBlock(_ref) {
-  var articleMeta = _ref.articleMeta;
+  var articleMeta = _ref.articleMeta,
+    bookmarkId = _ref.bookmarkId;
   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
+  var _useBookmark = (0, _hook.useBookmark)(),
+    addAction = _useBookmark.addAction,
+    removeAction = _useBookmark.removeAction;
+  var bookmarkIdFromState = (0, _reactRedux.useSelector)(function (state) {
+    var _state$bookmarkWidget;
+    return (_state$bookmarkWidget = state.bookmarkWidget) === null || _state$bookmarkWidget === void 0 || (_state$bookmarkWidget = _state$bookmarkWidget.bookmark) === null || _state$bookmarkWidget === void 0 ? void 0 : _state$bookmarkWidget.id;
   });
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isBookmarked = _useState2[0],
+    setIsBookmarked = _useState2[1];
+  var _useState3 = (0, _react.useState)(_enum.BookmarkType.ADD),
+    _useState4 = _slicedToArray(_useState3, 2),
+    iconType = _useState4[0],
+    setIconType = _useState4[1];
+  var _useState5 = (0, _react.useState)('add-bookmark'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    elementId = _useState6[0],
+    setElementId = _useState6[1];
+  var handleAddBookmark = function handleAddBookmark() {
+    addAction(articleMeta);
+  };
+  var handleRemoveBookmark = function handleRemoveBookmark() {
+    var targetBookmarkId = bookmarkId || bookmarkIdFromState;
+    removeAction(targetBookmarkId);
+    setIsBookmarked(function () {
+      return false;
+    });
+  };
+  (0, _react.useEffect)(function () {
+    if (bookmarkId || bookmarkIdFromState) {
+      setIsBookmarked(true);
+    } else {
+      setIsBookmarked(false);
+    }
+  }, [bookmarkId, bookmarkIdFromState]);
+  (0, _react.useEffect)(function () {
+    setIconType(isBookmarked ? _enum.BookmarkType.SAVED : _enum.BookmarkType.ADD);
+    setElementId(isBookmarked ? 'remove-bookmark' : 'add-bookmark');
+  }, [isBookmarked]);
+  return /*#__PURE__*/_react["default"].createElement(BookmarkIconBlock, {
+    onClick: isBookmarked ? handleRemoveBookmark : handleAddBookmark,
+    $isBookmarked: isBookmarked,
+    id: elementId
+  }, /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+    type: iconType,
+    releaseBranch: releaseBranch
+  }));
 };
 BookmarkBlock.propTypes = {
-  articleMeta: _aside["default"].tools.articleMetaForBookmark
+  articleMeta: _aside["default"].tools.articleMetaForBookmark,
+  bookmarkId: _propTypes["default"].number
 };
 var BackToTopic = function BackToTopic(_ref2) {
   var backToTopic = _ref2.backToTopic;
@@ -172,7 +218,8 @@ var Tools = function Tools(_ref3) {
     fbAppID = _ref3.fbAppID,
     height = _ref3.height,
     onFontLevelChange = _ref3.onFontLevelChange,
-    articleMetaForBookmark = _ref3.articleMetaForBookmark;
+    articleMetaForBookmark = _ref3.articleMetaForBookmark,
+    bookmarkId = _ref3.bookmarkId;
   var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
   var releaseBranch = themeContext.releaseBranch;
   var backToTopicJSX = backToTopic ? /*#__PURE__*/_react["default"].createElement(BackToTopic, {
@@ -184,7 +231,8 @@ var Tools = function Tools(_ref3) {
   return /*#__PURE__*/_react["default"].createElement(ToolsBlock, {
     $height: height
   }, backToTopicJSX, /*#__PURE__*/_react["default"].createElement(BookmarkBlock, {
-    articleMeta: articleMetaForBookmark
+    articleMeta: articleMetaForBookmark,
+    bookmarkId: bookmarkId
   }), /*#__PURE__*/_react["default"].createElement(TextIconBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Text, {
     onClick: onFontLevelChange,
     releaseBranch: releaseBranch
@@ -195,5 +243,7 @@ var Tools = function Tools(_ref3) {
     appID: fbAppID || defaultFbAppID
   }), /*#__PURE__*/_react["default"].createElement(TwitterShareBT, null), /*#__PURE__*/_react["default"].createElement(LineShareBT, null));
 };
-Tools.propTypes = _aside["default"].tools;
+Tools.propTypes = _objectSpread(_objectSpread({}, _aside["default"].tools), {}, {
+  bookmarkId: _propTypes["default"].number
+});
 var _default = exports["default"] = Tools;

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

@@ -8,17 +8,18 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactRedux = require("react-redux");
 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 _enum = require("@twreporter/react-components/lib/icon/enum");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -272,59 +273,88 @@ FontLevel.propTypes = {
   changeFontLevel: _aside["default"].tools.onFontLevelChange
 };
 var BookmarkBlock = function BookmarkBlock(_ref6) {
-  var articleMeta = _ref6.articleMeta;
+  var articleMeta = _ref6.articleMeta,
+    bookmarkId = _ref6.bookmarkId;
   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 _useBookmark = (0, _hook.useBookmark)(),
+    addAction = _useBookmark.addAction,
+    removeAction = _useBookmark.removeAction;
+  var bookmarkIdFromState = (0, _reactRedux.useSelector)(function (state) {
+    var _state$bookmarkWidget;
+    return (_state$bookmarkWidget = state.bookmarkWidget) === null || _state$bookmarkWidget === void 0 || (_state$bookmarkWidget = _state$bookmarkWidget.bookmark) === null || _state$bookmarkWidget === void 0 ? void 0 : _state$bookmarkWidget.id;
+  });
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isBookmarked = _useState4[0],
+    setIsBookmarked = _useState4[1];
+  var _useState5 = (0, _react.useState)(_enum.BookmarkType.ADD),
+    _useState6 = _slicedToArray(_useState5, 2),
+    iconType = _useState6[0],
+    setIconType = _useState6[1];
+  var _useState7 = (0, _react.useState)('add-bookmark'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    elementId = _useState8[0],
+    setElementId = _useState8[1];
+  var _useState9 = (0, _react.useState)('收藏'),
+    _useState10 = _slicedToArray(_useState9, 2),
+    buttonText = _useState10[0],
+    setButtonText = _useState10[1];
+  var handleAddBookmark = function handleAddBookmark() {
+    addAction(articleMeta);
   };
+  var handleRemoveBookmark = function handleRemoveBookmark() {
+    var targetBookmarkId = bookmarkId || bookmarkIdFromState;
+    removeAction(targetBookmarkId);
+    setIsBookmarked(function () {
+      return false;
+    });
+  };
+  (0, _react.useEffect)(function () {
+    if (bookmarkId || bookmarkIdFromState) {
+      setIsBookmarked(true);
+    } else {
+      setIsBookmarked(false);
+    }
+  }, [bookmarkId, bookmarkIdFromState]);
+  (0, _react.useEffect)(function () {
+    setIconType(isBookmarked ? _enum.BookmarkType.SAVED : _enum.BookmarkType.ADD);
+    setElementId(isBookmarked ? 'remove-bookmark' : 'add-bookmark');
+    setButtonText(isBookmarked ? '已收藏' : '收藏');
+  }, [isBookmarked]);
+  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 ? handleRemoveBookmark : handleAddBookmark;
+            _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);
+    };
+  }();
   var onClickButton = function onClickButton(isBookmarked) {
     var text = isBookmarked ? '已取消收藏' : '已收藏';
     toastr({
@@ -332,14 +362,22 @@ var BookmarkBlock = function BookmarkBlock(_ref6) {
       timeout: 3000
     });
   };
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_bookmarkWidget["default"], {
-    toAutoCheck: true,
-    articleMeta: articleMeta,
-    renderIcon: renderIcon
-  }));
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    onClick: handleClick,
+    id: elementId
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+    text: buttonText,
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+      type: iconType,
+      releaseBranch: releaseBranch
+    }),
+    theme: theme,
+    hideText: hideText
+  })));
 };
 BookmarkBlock.propTypes = {
-  articleMeta: _aside["default"].tools.articleMetaForBookmark
+  articleMeta: _aside["default"].tools.articleMetaForBookmark,
+  bookmarkId: _propTypes["default"].number
 };
 var BackToTopic = function BackToTopic(_ref8) {
   var backToTopic = _ref8.backToTopic;
@@ -390,7 +428,8 @@ var ToolBar = function ToolBar(_ref9) {
     articleMetaForBookmark = _ref9.articleMetaForBookmark,
     onFontLevelChange = _ref9.onFontLevelChange,
     className = _ref9.className,
-    scrollStage = _ref9.scrollStage;
+    scrollStage = _ref9.scrollStage,
+    bookmarkId = _ref9.bookmarkId;
   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),
@@ -426,7 +465,8 @@ var ToolBar = function ToolBar(_ref9) {
   }), /*#__PURE__*/_react["default"].createElement(ShareBy, {
     fbAppID: fbAppID
   }), /*#__PURE__*/_react["default"].createElement(BookmarkBlock, {
-    articleMeta: articleMetaForBookmark
+    articleMeta: articleMetaForBookmark,
+    bookmarkId: bookmarkId
   }), /*#__PURE__*/_react["default"].createElement(RelatedPost, null), backToTopicJSX), /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
     $showSnackBar: showSnackBar
   }, /*#__PURE__*/_react["default"].createElement(_snackBar.SnackBar, {
@@ -435,6 +475,7 @@ var ToolBar = function ToolBar(_ref9) {
   }))));
 };
 ToolBar.propTypes = _objectSpread(_objectSpread({}, _aside["default"].tools), {}, {
-  scrollStage: _propTypes["default"].number
+  scrollStage: _propTypes["default"].number,
+  bookmarkId: _propTypes["default"].number
 });
 var _default = exports["default"] = ToolBar;

package/lib/components/img-with-placeholder/index.js

@@ -270,7 +270,7 @@ var Img = function Img(_ref) {
       window.removeEventListener('resize', handleWindowResize);
       window.removeEventListener('keydown', handleESCClick);
     };
-  }, []);
+  }, [handleWindowResize, handleESCClick]);
   (0, _react.useEffect)(function () {
     checkFullScreenImageSize();
   }, [showFullScreenImg]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.3.0-rc.2",
+  "version": "2.3.0-rc.4",
   "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,9 +24,9 @@
   },
   "dependencies": {
     "@twreporter/core": "^1.22.1",
-    "@twreporter/react-components": "^9.2.0-rc.1",
-    "@twreporter/redux": "^8.1.0-rc.0",
-    "@twreporter/universal-header": "^3.0.5-rc.1",
+    "@twreporter/react-components": "^9.2.0-rc.2",
+    "@twreporter/redux": "^8.1.0-rc.1",
+    "@twreporter/universal-header": "^3.0.5-rc.2",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -41,5 +41,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "818d27707d41db85fb9f095ae14fdfd391555550"
+  "gitHead": "9813d6e3e00290afd56272efc233ff4c7a119499"
 }