@twreporter/react-article-components 2.4.1-rc.0 → 2.5.0-rc.0

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

@@ -4,173 +4,70 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _metadata = _interopRequireDefault(require("./metadata"));
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _desktopTools = _interopRequireDefault(require("./desktop-tools"));
+var _metadata = _interopRequireDefault(require("./metadata"));
 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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 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); }
-var _toolPosition = {
-  top: 'top',
-  fixed: 'fixed',
-  bottom: 'bottom'
-};
+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); } // components
+// constants
 var AsideFlexBox = /*#__PURE__*/_styledComponents["default"].aside.withConfig({
   displayName: "desktop-aside__AsideFlexBox",
   componentId: "physaw-0"
 })(["height:100%;display:flex;flex-direction:column;justify-content:space-between;"]);
-var ToolsFixedArea = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "desktop-aside__ToolsFixedArea",
+var ToolsArea = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "desktop-aside__ToolsArea",
   componentId: "physaw-1"
 })(["position:relative;flex-grow:1;margin-top:90px;margin-bottom:90px;"]);
-var ToolsPositioningBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "desktop-aside__ToolsPositioningBlock",
+var ToolsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "desktop-aside__ToolsContainer",
   componentId: "physaw-2"
-})(["display:inline-block;position:", ";top:", ";bottom:", ";transform:", ";"], function (props) {
-  return props.$toolPosition === _toolPosition.fixed ? 'fixed' : 'absolute';
-}, function (props) {
-  switch (props.toolPosition) {
-    case _toolPosition.fixed:
-      return '50%';
-    case _toolPosition.top:
-      return '0';
-    case _toolPosition.bottom:
-    default:
-      return 'auto';
-  }
-}, function (props) {
-  switch (props.$toolPosition) {
-    case _toolPosition.bottom:
-      return '0';
-    case _toolPosition.fixed:
-    case _toolPosition.top:
-    default:
-      return 'auto';
-  }
-}, function (props) {
-  return props.$toolPosition === _toolPosition.fixed ? 'translateY(-50%)' : 'none';
-});
-var TriggerFixBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "desktop-aside__TriggerFixBlock",
-  componentId: "physaw-3"
-})(["position:absolute;height:", "px;"], function (props) {
-  return props.$height;
-});
-var TriggerFixTopBlock = /*#__PURE__*/(0, _styledComponents["default"])(TriggerFixBlock).withConfig({
-  displayName: "desktop-aside__TriggerFixTopBlock",
-  componentId: "physaw-4"
-})(["top:0;"]);
-var TriggerFixBottomBlock = /*#__PURE__*/(0, _styledComponents["default"])(TriggerFixBlock).withConfig({
-  displayName: "desktop-aside__TriggerFixBottomBlock",
-  componentId: "physaw-5"
-})(["bottom:0;"]);
-var Aside = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(Aside, _React$PureComponent);
-  var _super = _createSuper(Aside);
-  function Aside(props) {
-    var _this;
-    _classCallCheck(this, Aside);
-    _this = _super.call(this, props);
-    _this.state = {
-      toolPosition: _toolPosition.top
-    };
-    _this.setToolsTop = _this.setToolsPosition.bind(_assertThisInitialized(_this), _toolPosition.top);
-    _this.setToolsFixed = _this.setToolsPosition.bind(_assertThisInitialized(_this), _toolPosition.fixed);
-    _this.setToolsBottom = _this.setToolsPosition.bind(_assertThisInitialized(_this), _toolPosition.bottom);
-    return _this;
-  }
-  _createClass(Aside, [{
-    key: "setToolsPosition",
-    value: function setToolsPosition(nextPosition, waypointObj) {
-      var toolPosition = this.state.toolPosition;
-      if (
-      // viewport is below `ToolsFixedArea`
-      // make toolPosition stay at `bottom`
-      toolPosition === _toolPosition.bottom && waypointObj.currentPosition === 'above' ||
-      // viewport is above `ToolsFixedArea`
-      // make toolPosition stay at top
-      toolPosition === _toolPosition.top && waypointObj.currentPosition === 'below') {
-        return;
-      }
-      this.setState({
-        toolPosition: nextPosition
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var toolsHeight = 258; // px
+})(["position:sticky;top:40%;"]);
+var Aside = function Aside(_ref) {
+  var articleMetaForBookmark = _ref.articleMetaForBookmark,
+    backToTopic = _ref.backToTopic,
+    categories = _ref.categories,
+    categorySet = _ref.categorySet,
+    date = _ref.date,
+    designers = _ref.designers,
+    engineers = _ref.engineers,
+    onFontLevelChange = _ref.onFontLevelChange,
+    photographers = _ref.photographers,
+    rawAutherText = _ref.rawAutherText,
+    tags = _ref.tags,
+    title = _ref.title,
+    writers = _ref.writers,
+    bookmarkId = _ref.bookmarkId;
+  var toolsHeight = 258; // px
 
-      var _this$props = this.props,
-        articleMetaForBookmark = _this$props.articleMetaForBookmark,
-        backToTopic = _this$props.backToTopic,
-        categories = _this$props.categories,
-        categorySet = _this$props.categorySet,
-        date = _this$props.date,
-        designers = _this$props.designers,
-        engineers = _this$props.engineers,
-        onFontLevelChange = _this$props.onFontLevelChange,
-        photographers = _this$props.photographers,
-        rawAutherText = _this$props.rawAutherText,
-        tags = _this$props.tags,
-        title = _this$props.title,
-        writers = _this$props.writers,
-        bookmarkId = _this$props.bookmarkId;
-      var metadataJSX = /*#__PURE__*/_react["default"].createElement(_metadata["default"], {
-        categories: categories,
-        categorySet: categorySet,
-        date: date,
-        designers: designers,
-        photographers: photographers,
-        tags: tags,
-        writers: writers,
-        engineers: engineers,
-        rawAutherText: rawAutherText
-      });
-      return /*#__PURE__*/_react["default"].createElement(AsideFlexBox, null, metadataJSX, /*#__PURE__*/_react["default"].createElement(ToolsFixedArea, null, /*#__PURE__*/_react["default"].createElement(_reactWaypoint.Waypoint, {
-        onEnter: this.setToolsTop,
-        onLeave: this.setToolsFixed,
-        topOffset: "50%"
-      }, /*#__PURE__*/_react["default"].createElement(TriggerFixTopBlock, {
-        $height: toolsHeight / 2
-      })), /*#__PURE__*/_react["default"].createElement(ToolsPositioningBlock, {
-        $toolPosition: this.state.toolPosition
-      }, /*#__PURE__*/_react["default"].createElement(_desktopTools["default"], {
-        backToTopic: backToTopic,
-        height: "".concat(toolsHeight, "px"),
-        title: title,
-        onFontLevelChange: onFontLevelChange,
-        articleMetaForBookmark: articleMetaForBookmark,
-        bookmarkId: bookmarkId
-      })), /*#__PURE__*/_react["default"].createElement(_reactWaypoint.Waypoint, {
-        onEnter: this.setToolsBottom,
-        onLeave: this.setToolsFixed,
-        bottomOffset: "50%"
-      }, /*#__PURE__*/_react["default"].createElement(TriggerFixBottomBlock, {
-        height: toolsHeight / 2
-      }))), metadataJSX);
-    }
-  }]);
-  return Aside;
-}(_react["default"].PureComponent);
-_defineProperty(Aside, "propTypes", _objectSpread(_objectSpread(_objectSpread({}, _aside["default"].metadata), _aside["default"].tools), {}, {
+  var metadataJSX = /*#__PURE__*/_react["default"].createElement(_metadata["default"], {
+    categories: categories,
+    categorySet: categorySet,
+    date: date,
+    designers: designers,
+    photographers: photographers,
+    tags: tags,
+    writers: writers,
+    engineers: engineers,
+    rawAutherText: rawAutherText
+  });
+  return /*#__PURE__*/_react["default"].createElement(AsideFlexBox, null, metadataJSX, /*#__PURE__*/_react["default"].createElement(ToolsArea, null, /*#__PURE__*/_react["default"].createElement(ToolsContainer, null, /*#__PURE__*/_react["default"].createElement(_desktopTools["default"], {
+    backToTopic: backToTopic,
+    height: "".concat(toolsHeight, "px"),
+    title: title,
+    onFontLevelChange: onFontLevelChange,
+    articleMetaForBookmark: articleMetaForBookmark,
+    bookmarkId: bookmarkId
+  }))), metadataJSX);
+};
+Aside.propTypes = _objectSpread(_objectSpread(_objectSpread({}, _aside["default"].metadata), _aside["default"].tools), {}, {
   bookmarkId: _propTypes["default"].number
-}));
+});
+var _default = exports["default"] = Aside;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.4.1-rc.0",
+  "version": "2.5.0-rc.0",
   "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",
@@ -41,5 +41,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "bc6f9a963d5c12bd30c960701c57e2fbd2972204"
+  "gitHead": "a5344e691587fa05f750db7aa41c0a807dc9af91"
 }