@twreporter/react-article-components
Advanced tools
Comparing version 2.3.0-rc.2 to 2.3.0-rc.3
@@ -328,3 +328,4 @@ "use strict"; | ||
backToTopic: backToTopic, | ||
onFontLevelChange: this.changeFontLevel | ||
onFontLevelChange: this.changeFontLevel, | ||
bookmarkId: Number(post.bookmarkId) | ||
}))); | ||
@@ -351,3 +352,4 @@ return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, { | ||
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"], { | ||
@@ -364,3 +366,4 @@ backToTopic: backToTopic, | ||
onFontLevelChange: this.changeFontLevel, | ||
articleMetaForBookmark: articleMetaForBookmark | ||
articleMetaForBookmark: articleMetaForBookmark, | ||
bookmarkId: Number(post.bookmarkId) | ||
})), metadataAndToolsJSX, /*#__PURE__*/_react["default"].createElement(ContentBlock, null, /*#__PURE__*/_react["default"].createElement(_body["default"], { | ||
@@ -367,0 +370,0 @@ key: _.get(post, 'slug', 'article-page-body-key'), |
@@ -13,2 +13,3 @@ "use strict"; | ||
var _reactWaypoint = require("react-waypoint"); | ||
var _propTypes = _interopRequireDefault(require("prop-types")); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
@@ -135,3 +136,4 @@ 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; } | ||
title = _this$props.title, | ||
writers = _this$props.writers; | ||
writers = _this$props.writers, | ||
bookmarkId = _this$props.bookmarkId; | ||
var metadataJSX = /*#__PURE__*/_react["default"].createElement(_metadata["default"], { | ||
@@ -161,3 +163,4 @@ categories: categories, | ||
onFontLevelChange: onFontLevelChange, | ||
articleMetaForBookmark: articleMetaForBookmark | ||
articleMetaForBookmark: articleMetaForBookmark, | ||
bookmarkId: bookmarkId | ||
})), /*#__PURE__*/_react["default"].createElement(_reactWaypoint.Waypoint, { | ||
@@ -174,2 +177,4 @@ onEnter: this.setToolsBottom, | ||
}(_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 | ||
})); |
@@ -12,8 +12,10 @@ "use strict"; | ||
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 | ||
@@ -25,2 +27,13 @@ // icons | ||
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) } })); } | ||
@@ -131,25 +144,58 @@ function changeFontSizeOffsetToPct(fontSizeOffset) { | ||
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 | ||
})); | ||
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); | ||
}; | ||
return /*#__PURE__*/_react["default"].createElement(_bookmarkWidget["default"], { | ||
toAutoCheck: true, | ||
articleMeta: articleMeta, | ||
renderIcon: renderIcon | ||
}); | ||
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 | ||
}; | ||
@@ -178,3 +224,4 @@ var BackToTopic = function BackToTopic(_ref2) { | ||
onFontLevelChange = _ref3.onFontLevelChange, | ||
articleMetaForBookmark = _ref3.articleMetaForBookmark; | ||
articleMetaForBookmark = _ref3.articleMetaForBookmark, | ||
bookmarkId = _ref3.bookmarkId; | ||
var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext); | ||
@@ -191,3 +238,4 @@ var releaseBranch = themeContext.releaseBranch; | ||
}, backToTopicJSX, /*#__PURE__*/_react["default"].createElement(BookmarkBlock, { | ||
articleMeta: articleMetaForBookmark | ||
articleMeta: articleMetaForBookmark, | ||
bookmarkId: bookmarkId | ||
}), /*#__PURE__*/_react["default"].createElement(TextIconBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Text, { | ||
@@ -203,3 +251,5 @@ onClick: onFontLevelChange, | ||
}; | ||
Tools.propTypes = _aside["default"].tools; | ||
Tools.propTypes = _objectSpread(_objectSpread({}, _aside["default"].tools), {}, { | ||
bookmarkId: _propTypes["default"].number | ||
}); | ||
var _default = exports["default"] = Tools; |
@@ -11,2 +11,3 @@ "use strict"; | ||
var _styledComponents = _interopRequireWildcard(require("styled-components")); | ||
var _reactRedux = require("react-redux"); | ||
var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context")); | ||
@@ -18,3 +19,2 @@ var _aside = _interopRequireDefault(require("../../constants/prop-types/aside")); | ||
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"); | ||
@@ -24,2 +24,3 @@ var _button = require("@twreporter/react-components/lib/button"); | ||
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 }; } | ||
@@ -278,3 +279,4 @@ 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); } | ||
var BookmarkBlock = function BookmarkBlock(_ref6) { | ||
var articleMeta = _ref6.articleMeta; | ||
var articleMeta = _ref6.articleMeta, | ||
bookmarkId = _ref6.bookmarkId; | ||
var _useContext3 = (0, _react.useContext)(ToolBarContext), | ||
@@ -286,48 +288,76 @@ hideText = _useContext3.hideText, | ||
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) { | ||
@@ -340,10 +370,18 @@ var text = isBookmarked ? '已取消收藏' : '已收藏'; | ||
}; | ||
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 | ||
}; | ||
@@ -399,3 +437,4 @@ var BackToTopic = function BackToTopic(_ref8) { | ||
className = _ref9.className, | ||
scrollStage = _ref9.scrollStage; | ||
scrollStage = _ref9.scrollStage, | ||
bookmarkId = _ref9.bookmarkId; | ||
var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext); | ||
@@ -436,3 +475,4 @@ var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal'; | ||
}), /*#__PURE__*/_react["default"].createElement(BookmarkBlock, { | ||
articleMeta: articleMetaForBookmark | ||
articleMeta: articleMetaForBookmark, | ||
bookmarkId: bookmarkId | ||
}), /*#__PURE__*/_react["default"].createElement(RelatedPost, null), backToTopicJSX), /*#__PURE__*/_react["default"].createElement(SnackBarContainer, { | ||
@@ -446,4 +486,5 @@ $showSnackBar: showSnackBar | ||
ToolBar.propTypes = _objectSpread(_objectSpread({}, _aside["default"].tools), {}, { | ||
scrollStage: _propTypes["default"].number | ||
scrollStage: _propTypes["default"].number, | ||
bookmarkId: _propTypes["default"].number | ||
}); | ||
var _default = exports["default"] = ToolBar; |
{ | ||
"name": "@twreporter/react-article-components", | ||
"version": "2.3.0-rc.2", | ||
"version": "2.3.0-rc.3", | ||
"description": "The Reporter react article components, which are used in article page", | ||
@@ -27,5 +27,5 @@ "main": "lib/components/article-page.js", | ||
"@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", | ||
@@ -45,3 +45,3 @@ "lodash": "^4.17.11", | ||
], | ||
"gitHead": "818d27707d41db85fb9f095ae14fdfd391555550" | ||
"gitHead": "d3003a89e37a0f2ef1fe5e5424b6d6e13a9028db" | ||
} |
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
653058
8054