Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@twreporter/react-article-components

Package Overview
Dependencies
Maintainers
0
Versions
494
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@twreporter/react-article-components - npm Package Compare versions

Comparing version 2.3.0-rc.2 to 2.3.0-rc.3

9

lib/components/article-page.js

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc