@twreporter/react-article-components 2.1.1-beta.0 → 2.1.1-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 TwReporter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/components/body/embedded-code.js

@@ -316,7 +316,8 @@ var WayPointWrapper = function WayPointWrapper(props) {
       onEnter: onEnter,
       onLeave: onLeave,
       fireOnRapidScroll: false,
-      topOffset: "-150%"
+      topOffset: 5,
+      bottomOffset: "-100%"
     }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(EmbeddedCode, _extends({}, props, {
       ref: embedRef
     }))))

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

@@ -25,6 +25,8 @@ var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/consta
 
 var _zIndex = _interopRequireDefault(require("@twreporter/core/lib/constants/z-index"));
 
+var _mediaQuery = require("@twreporter/core/lib/utils/media-query");
+
 var _image = require("../../utils/image");
 
 var _imgWithPlaceholder = _interopRequireDefault(require("../../constants/prop-types/img-with-placeholder"));
@@ -33,6 +35,8 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
 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; }
@@ -79,7 +83,8 @@ PlaceholderIcon.defaultProps = {
 };
 var _ = {
   get: _get["default"],
-  map: _map["default"]
+  map: _map["default"],
+  debounce: _debounce["default"]
 };
 var objectFitConsts = {
   contain: 'contain',
@@ -174,13 +179,24 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
     _classCallCheck(this, Img);
 
     _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "_handleWindowResize", function () {
+      var windowWidth = window.innerWidth;
+
+      _this.setState({
+        isMobile: windowWidth < _mediaQuery.DEFAULT_SCREEN.tablet.minWidth
+      });
+    });
+
     _this.state = {
       isLoaded: false,
       toShowPlaceholder: true,
-      showFullScreenImg: false
+      showFullScreenImg: false,
+      isMobile: false
     };
     _this._img = /*#__PURE__*/_react["default"].createRef();
     _this.handleImageLoaded = _this.handleImageLoaded.bind(_assertThisInitialized(_this));
+    _this.handleWindowResize = _.debounce(_this._handleWindowResize, 500).bind(_assertThisInitialized(_this));
     _this._isMounted = false;
     _this._supportObjectFit = true;
     return _this;
@@ -198,11 +214,15 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
       if (_.get(this._img.current, 'complete')) {
         this.handleImageLoaded();
       }
+
+      window.addEventListener('resize', this.handleWindowResize);
+      this.handleWindowResize();
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._isMounted = false;
+      window.removeEventListener('resize', this.handleWindowResize);
     }
   }, {
     key: "handleImageLoaded",
@@ -264,7 +284,8 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
 
       var _this$state = this.state,
           isLoaded = _this$state.isLoaded,
-          showFullScreenImg = _this$state.showFullScreenImg;
+          showFullScreenImg = _this$state.showFullScreenImg,
+          isMobile = _this$state.isMobile;
       var _this$props2 = this.props,
           alt = _this$props2.alt,
           className = _this$props2.className,
@@ -278,7 +299,7 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
       var releaseBranch = (this === null || this === void 0 ? void 0 : (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.releaseBranch) || _releaseBranch["default"].release;
 
       var openFullScreen = function openFullScreen() {
-        if (!clickable) return;
+        if (isMobile) return;
 
         _this3.setState({
           showFullScreenImg: true
@@ -321,7 +342,7 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ImgContainer, {
         className: appendedClassName,
         $heightString: isObjectFit ? "height: 100%;" : "padding-top: ".concat(heightWidthRatio * 100, "%;"),
-        onClick: openFullScreen
+        onClick: clickable ? openFullScreen : undefined
       }, this._renderImagePlaceholder(), /*#__PURE__*/_react["default"].createElement(ImgBox, {
         $toShow: isLoaded
       }, isObjectFit ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ImgWithObjectFit, _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.1.1-beta.0",
+  "version": "2.1.1-rc.1",
   "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,10 +24,10 @@
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "@twreporter/core": "^1.22.0",
-    "@twreporter/react-components": "^9.0.1",
-    "@twreporter/redux": "^8.0.1",
-    "@twreporter/universal-header": "^3.0.1",
+    "@twreporter/core": "^1.22.1-rc.0",
+    "@twreporter/react-components": "^9.0.2-rc.0",
+    "@twreporter/redux": "^8.0.2-rc.0",
+    "@twreporter/universal-header": "^3.0.2-rc.0",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -40,5 +40,6 @@
   },
   "files": [
     "lib"
-  ]
+  ],
+  "gitHead": "0733bb956c03dabdd4009b1b000afa09ea2df562"
 }