react-modal-image - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

es/Lightbox.js

+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import React, { Component } from "react";
+
+import { modalStyles, modalContentStyles, spinnerStyles, imageStyles, spacerStyles, iconStyles, iconWithMarginRightStyles, iconMenuStyles, captionStyles, headerStyles } from "./styles";
+
+import { ZoomInIcon, ZoomOutIcon, DownloadIcon, CloseIcon, SpinnerIcon } from "./icons";
+
+var _default = function (_Component) {
+  _inherits(_default, _Component);
+
+  function _default() {
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, _default);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
+      loading: true,
+      move: { x: 0, y: 0 },
+      moveStart: undefined,
+      zoom: 1
+    }, _this.hidePlaceholder = function () {
+      _this.setState({ loading: false });
+    }, _this.handleKeyDown = function (event) {
+      // ESC or ENTER closes the modal
+      if (event.keyCode === 27 || event.keyCode === 13) {
+        _this.props.onClose();
+      }
+    }, _this.getCoordinatesIfOverImg = function (event) {
+      var point = event.changedTouches ? event.changedTouches[0] : event;
+
+      if (point.target.id !== "react-modal-fullscreen-img") {
+        // the img was not a target of the coordinates
+        return;
+      }
+
+      var dim = _this.contentEl.getBoundingClientRect();
+      var x = point.clientX - dim.left;
+      var y = point.clientY - dim.top;
+
+      return { x: x, y: y };
+    }, _this.handleMouseDownOrTouchStart = function (event) {
+      event.preventDefault();
+
+      if (event.touches && event.touches.length > 1) {
+        // more than one finger, ignored
+        return;
+      }
+
+      var coords = _this.getCoordinatesIfOverImg(event);
+
+      if (!coords) {
+        // click outside the img => close modal
+        _this.props.onClose();
+      }
+
+      _this.setState(function (prevState) {
+        return {
+          moveStart: {
+            x: coords.x - prevState.move.x,
+            y: coords.y - prevState.move.y
+          }
+        };
+      });
+    }, _this.handleMouseMoveOrTouchMove = function (event) {
+      event.preventDefault();
+
+      if (event.touches && event.touches.length > 1) {
+        // more than one finger, ignored
+        return;
+      }
+
+      var coords = _this.getCoordinatesIfOverImg(event);
+
+      if (!coords) {
+        return;
+      }
+
+      _this.setState(function (prevState) {
+        if (!prevState.moveStart) {
+          return;
+        }
+
+        return {
+          move: {
+            x: coords.x - prevState.moveStart.x,
+            y: coords.y - prevState.moveStart.y
+          }
+        };
+      });
+    }, _this.handleMouseUpOrTouchEnd = function (event) {
+      _this.setState({
+        moveStart: undefined
+      });
+    }, _this.handleZoomIn = function (event) {
+      event.preventDefault();
+      _this.setState(function (prevState) {
+        return { zoom: prevState.zoom * 1.5 };
+      });
+    }, _this.handleZoomOut = function (event) {
+      event.preventDefault();
+      _this.setState(function (prevState) {
+        return {
+          zoom: prevState.zoom / 1.5 < 1 ? 1 : prevState.zoom / 1.5
+        };
+      });
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _default.prototype.componentDidMount = function componentDidMount() {
+    document.addEventListener("keydown", this.handleKeyDown, false);
+  };
+
+  _default.prototype.componentWillUnmount = function componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleKeyDown, false);
+  };
+
+  _default.prototype.render = function render() {
+    var _this2 = this;
+
+    var _props = this.props,
+        fullscreen = _props.fullscreen,
+        download = _props.download,
+        alt = _props.alt,
+        onClose = _props.onClose;
+    var _state = this.state,
+        loading = _state.loading,
+        zoom = _state.zoom,
+        move = _state.move;
+
+
+    var imgTransform = {
+      transform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0) " + (zoom > 1 ? "scale3d(" + zoom + ", " + zoom + ", 1)" : "")
+    };
+
+    return React.createElement(
+      "div",
+      { style: modalStyles },
+      React.createElement(
+        "div",
+        {
+          onMouseDown: this.handleMouseDownOrTouchStart,
+          onMouseUp: this.handleMouseUpOrTouchEnd,
+          onMouseMove: this.handleMouseMoveOrTouchMove,
+          onTouchStart: this.handleMouseDownOrTouchStart,
+          onTouchEnd: this.handleMouseUpOrTouchEnd,
+          onTouchMove: this.handleMouseMoveOrTouchMove,
+          ref: function ref(el) {
+            _this2.contentEl = el;
+          },
+          style: modalContentStyles
+        },
+        loading && React.createElement(
+          "div",
+          { style: spinnerStyles },
+          React.createElement(SpinnerIcon, null)
+        ),
+        React.createElement("img", {
+          onContextMenu: function onContextMenu(event) {
+            event.preventDefault();
+          },
+          id: "react-modal-fullscreen-img",
+          style: Object.assign({}, imageStyles, imgTransform),
+          src: fullscreen,
+          onLoad: this.hidePlaceholder
+        })
+      ),
+      React.createElement(
+        "div",
+        { style: headerStyles },
+        React.createElement(
+          "span",
+          { style: iconMenuStyles },
+          download && React.createElement(
+            "a",
+            { href: download, style: iconWithMarginRightStyles, download: true },
+            React.createElement(DownloadIcon, null)
+          ),
+          React.createElement(
+            "a",
+            { href: "", style: iconStyles, onClick: this.handleZoomIn },
+            React.createElement(ZoomInIcon, null)
+          ),
+          React.createElement(
+            "a",
+            {
+              href: "",
+              style: iconWithMarginRightStyles,
+              onClick: this.handleZoomOut
+            },
+            React.createElement(ZoomOutIcon, null)
+          ),
+          React.createElement(
+            "a",
+            { style: iconStyles, onClick: onClose },
+            React.createElement(CloseIcon, null)
+          )
+        ),
+        React.createElement(
+          "span",
+          { style: captionStyles },
+          alt
+        )
+      )
+    );
+  };
+
+  return _default;
+}(Component);
+
+export { _default as default };

lib/Lightbox.js

+"use strict";
+
+exports.__esModule = true;
+exports.default = undefined;
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styles = require("./styles");
+
+var _icons = require("./icons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var _default = function (_Component) {
+  _inherits(_default, _Component);
+
+  function _default() {
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, _default);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
+      loading: true,
+      move: { x: 0, y: 0 },
+      moveStart: undefined,
+      zoom: 1
+    }, _this.hidePlaceholder = function () {
+      _this.setState({ loading: false });
+    }, _this.handleKeyDown = function (event) {
+      // ESC or ENTER closes the modal
+      if (event.keyCode === 27 || event.keyCode === 13) {
+        _this.props.onClose();
+      }
+    }, _this.getCoordinatesIfOverImg = function (event) {
+      var point = event.changedTouches ? event.changedTouches[0] : event;
+
+      if (point.target.id !== "react-modal-fullscreen-img") {
+        // the img was not a target of the coordinates
+        return;
+      }
+
+      var dim = _this.contentEl.getBoundingClientRect();
+      var x = point.clientX - dim.left;
+      var y = point.clientY - dim.top;
+
+      return { x: x, y: y };
+    }, _this.handleMouseDownOrTouchStart = function (event) {
+      event.preventDefault();
+
+      if (event.touches && event.touches.length > 1) {
+        // more than one finger, ignored
+        return;
+      }
+
+      var coords = _this.getCoordinatesIfOverImg(event);
+
+      if (!coords) {
+        // click outside the img => close modal
+        _this.props.onClose();
+      }
+
+      _this.setState(function (prevState) {
+        return {
+          moveStart: {
+            x: coords.x - prevState.move.x,
+            y: coords.y - prevState.move.y
+          }
+        };
+      });
+    }, _this.handleMouseMoveOrTouchMove = function (event) {
+      event.preventDefault();
+
+      if (event.touches && event.touches.length > 1) {
+        // more than one finger, ignored
+        return;
+      }
+
+      var coords = _this.getCoordinatesIfOverImg(event);
+
+      if (!coords) {
+        return;
+      }
+
+      _this.setState(function (prevState) {
+        if (!prevState.moveStart) {
+          return;
+        }
+
+        return {
+          move: {
+            x: coords.x - prevState.moveStart.x,
+            y: coords.y - prevState.moveStart.y
+          }
+        };
+      });
+    }, _this.handleMouseUpOrTouchEnd = function (event) {
+      _this.setState({
+        moveStart: undefined
+      });
+    }, _this.handleZoomIn = function (event) {
+      event.preventDefault();
+      _this.setState(function (prevState) {
+        return { zoom: prevState.zoom * 1.5 };
+      });
+    }, _this.handleZoomOut = function (event) {
+      event.preventDefault();
+      _this.setState(function (prevState) {
+        return {
+          zoom: prevState.zoom / 1.5 < 1 ? 1 : prevState.zoom / 1.5
+        };
+      });
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _default.prototype.componentDidMount = function componentDidMount() {
+    document.addEventListener("keydown", this.handleKeyDown, false);
+  };
+
+  _default.prototype.componentWillUnmount = function componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleKeyDown, false);
+  };
+
+  _default.prototype.render = function render() {
+    var _this2 = this;
+
+    var _props = this.props,
+        fullscreen = _props.fullscreen,
+        download = _props.download,
+        alt = _props.alt,
+        onClose = _props.onClose;
+    var _state = this.state,
+        loading = _state.loading,
+        zoom = _state.zoom,
+        move = _state.move;
+
+
+    var imgTransform = {
+      transform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0) " + (zoom > 1 ? "scale3d(" + zoom + ", " + zoom + ", 1)" : "")
+    };
+
+    return _react2.default.createElement(
+      "div",
+      { style: _styles.modalStyles },
+      _react2.default.createElement(
+        "div",
+        {
+          onMouseDown: this.handleMouseDownOrTouchStart,
+          onMouseUp: this.handleMouseUpOrTouchEnd,
+          onMouseMove: this.handleMouseMoveOrTouchMove,
+          onTouchStart: this.handleMouseDownOrTouchStart,
+          onTouchEnd: this.handleMouseUpOrTouchEnd,
+          onTouchMove: this.handleMouseMoveOrTouchMove,
+          ref: function ref(el) {
+            _this2.contentEl = el;
+          },
+          style: _styles.modalContentStyles
+        },
+        loading && _react2.default.createElement(
+          "div",
+          { style: _styles.spinnerStyles },
+          _react2.default.createElement(_icons.SpinnerIcon, null)
+        ),
+        _react2.default.createElement("img", {
+          onContextMenu: function onContextMenu(event) {
+            event.preventDefault();
+          },
+          id: "react-modal-fullscreen-img",
+          style: Object.assign({}, _styles.imageStyles, imgTransform),
+          src: fullscreen,
+          onLoad: this.hidePlaceholder
+        })
+      ),
+      _react2.default.createElement(
+        "div",
+        { style: _styles.headerStyles },
+        _react2.default.createElement(
+          "span",
+          { style: _styles.iconMenuStyles },
+          download && _react2.default.createElement(
+            "a",
+            { href: download, style: _styles.iconWithMarginRightStyles, download: true },
+            _react2.default.createElement(_icons.DownloadIcon, null)
+          ),
+          _react2.default.createElement(
+            "a",
+            { href: "", style: _styles.iconStyles, onClick: this.handleZoomIn },
+            _react2.default.createElement(_icons.ZoomInIcon, null)
+          ),
+          _react2.default.createElement(
+            "a",
+            {
+              href: "",
+              style: _styles.iconWithMarginRightStyles,
+              onClick: this.handleZoomOut
+            },
+            _react2.default.createElement(_icons.ZoomOutIcon, null)
+          ),
+          _react2.default.createElement(
+            "a",
+            { style: _styles.iconStyles, onClick: onClose },
+            _react2.default.createElement(_icons.CloseIcon, null)
+          )
+        ),
+        _react2.default.createElement(
+          "span",
+          { style: _styles.captionStyles },
+          alt
+        )
+      )
+    );
+  };
+
+  return _default;
+}(_react.Component);
+
+exports.default = _default;
+module.exports = exports["default"];

es/index.js

@@ -9,8 +9,5 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-import ModalImage from "./ModalImage";
+import { previewStyles } from "./styles";
+import Lightbox from "./Lightbox";
 
-var previewStyles = {
-  cursor: "pointer"
-};
-
 var _default = function (_Component) {
@@ -40,2 +37,3 @@ _inherits(_default, _Component);
         preview = _props.preview,
+        previewSrcSet = _props.previewSrcSet,
         fullscreen = _props.fullscreen,
@@ -54,5 +52,6 @@ download = _props.download,
         src: preview,
+        srcSet: previewSrcSet,
         alt: alt
       }),
-      modalOpen && React.createElement(ModalImage, {
+      modalOpen && React.createElement(Lightbox, {
         fullscreen: fullscreen,
@@ -59,0 +58,0 @@ download: download,

es/styles.js

@@ -0,1 +1,7 @@
+export var previewStyles = {
+  cursor: "pointer",
+  maxWidth: "100%",
+  maxHeight: "100%"
+};
+
 export var modalStyles = {
@@ -2,0 +8,0 @@ position: "fixed",

lib/index.js

@@ -10,6 +10,8 @@ "use strict";
 
-var _ModalImage = require("./ModalImage");
+var _styles = require("./styles");
 
-var _ModalImage2 = _interopRequireDefault(_ModalImage);
+var _Lightbox = require("./Lightbox");
 
+var _Lightbox2 = _interopRequireDefault(_Lightbox);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,6 +25,2 @@
 
-var previewStyles = {
-  cursor: "pointer"
-};
-
 var _default = function (_Component) {
@@ -52,2 +50,3 @@ _inherits(_default, _Component);
         preview = _props.preview,
+        previewSrcSet = _props.previewSrcSet,
         fullscreen = _props.fullscreen,
@@ -63,8 +62,9 @@ download = _props.download,
       _react2.default.createElement("img", {
-        style: previewStyles,
+        style: _styles.previewStyles,
         onClick: this.toggleModal,
         src: preview,
+        srcSet: previewSrcSet,
         alt: alt
       }),
-      modalOpen && _react2.default.createElement(_ModalImage2.default, {
+      modalOpen && _react2.default.createElement(_Lightbox2.default, {
         fullscreen: fullscreen,
@@ -71,0 +71,0 @@ download: download,

lib/styles.js

 "use strict";
 
 exports.__esModule = true;
+var previewStyles = exports.previewStyles = {
+  cursor: "pointer",
+  maxWidth: "100%",
+  maxHeight: "100%"
+};
+
 var modalStyles = exports.modalStyles = {
@@ -5,0 +11,0 @@ position: "fixed",

package.json

 {
   "name": "react-modal-image",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Lightweight Lightbox React Component",
@@ -27,4 +27,3 @@ "main": "lib/index.js",
     "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-live": "^1.9.2"
+    "react-dom": "^16.2.0"
   },
@@ -31,0 +30,0 @@ "repository": {

README.md

@@ -7,3 +7,3 @@ # react-modal-image
 
-This is a tiny React component providing modal image Lightbox.
+A tiny an a simple React component providing modal image Lightbox.
 
@@ -22,3 +22,3 @@ [DEMO](https://aautio.github.io/react-modal-image/)
 
-You need to provide a polyfill for `Object.assign()` in your app to support old Internet Explorers.
+You need to bring your own `Object.assign()` polyfill if you use old Internet Explorers.
 
@@ -32,2 +32,3 @@ ## API
   preview={urlToTinyImageFile}
+  previewSrcSet={srcSetDefToTinyImageFile}
   fullscreen={urlToLargeImageFile}
@@ -39,8 +40,9 @@ download={urlToHugeImageFile}
 
-| Prop         | Type     | Description                                                      |
-| ------------ | -------- | ---------------------------------------------------------------- |
-| `alt`        | `String` | alt text for the preview img and the header in Lightbox.         |
-| `preview`    | `URL`    | The small preview img. Click to open Lightbox.                   |
-| `fullscreen` | `URL`    | Image shown in Lightbox.                                         |
-| `download`   | `URL`    | Download the image by clicking the icon in the top right corner. |
+| Prop            | Type     |          | Description                                                      |
+| --------------- | -------- | -------- | ---------------------------------------------------------------- |
+| `alt`           | `String` | Optional | alt text for the preview img and the header in Lightbox.         |
+| `preview`       | `URL`    | Required | `src` for the small preview img.                                 |
+| `previewSrcSet` | `String` | Optional | `srcSet` for the small preview imgs.                             |
+| `fullscreen`    | `URL`    | Required | Image shown in Lightbox.                                         |
+| `download`      | `URL`    | Optional | Download the image by clicking the icon in the top right corner. |
 
@@ -47,0 +49,0 @@ [build-badge]: https://img.shields.io/travis/aautio/react-modal-image/master.png?style=flat-square

es/ModalImage.js

-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-import React, { Component } from "react";
-
-import { modalStyles, modalContentStyles, spinnerStyles, imageStyles, spacerStyles, iconStyles, iconWithMarginRightStyles, iconMenuStyles, captionStyles, headerStyles } from "./styles";
-
-import { ZoomInIcon, ZoomOutIcon, DownloadIcon, CloseIcon, SpinnerIcon } from "./icons";
-
-var _default = function (_Component) {
-  _inherits(_default, _Component);
-
-  function _default() {
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, _default);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
-      loading: true,
-      move: { x: 0, y: 0 },
-      moveStart: undefined,
-      zoom: 1
-    }, _this.hidePlaceholder = function () {
-      _this.setState({ loading: false });
-    }, _this.handleKeyDown = function (event) {
-      // ESC or ENTER closes the modal
-      if (event.keyCode === 27 || event.keyCode === 13) {
-        _this.props.onClose();
-      }
-    }, _this.getCoordinatesIfOverImg = function (event) {
-      var point = event.changedTouches ? event.changedTouches[0] : event;
-
-      if (point.target.id !== "react-modal-fullscreen-img") {
-        // the img was not a target of the coordinates
-        return;
-      }
-
-      var dim = _this.contentEl.getBoundingClientRect();
-      var x = point.clientX - dim.left;
-      var y = point.clientY - dim.top;
-
-      return { x: x, y: y };
-    }, _this.handleMouseDownOrTouchStart = function (event) {
-      event.preventDefault();
-
-      if (event.touches && event.touches.length > 1) {
-        // more than one finger, ignored
-        return;
-      }
-
-      var coords = _this.getCoordinatesIfOverImg(event);
-
-      if (!coords) {
-        // click outside the img => close modal
-        _this.props.onClose();
-      }
-
-      _this.setState(function (prevState) {
-        return {
-          moveStart: {
-            x: coords.x - prevState.move.x,
-            y: coords.y - prevState.move.y
-          }
-        };
-      });
-    }, _this.handleMouseMoveOrTouchMove = function (event) {
-      event.preventDefault();
-
-      if (event.touches && event.touches.length > 1) {
-        // more than one finger, ignored
-        return;
-      }
-
-      var coords = _this.getCoordinatesIfOverImg(event);
-
-      if (!coords) {
-        return;
-      }
-
-      _this.setState(function (prevState) {
-        if (!prevState.moveStart) {
-          return;
-        }
-
-        return {
-          move: {
-            x: coords.x - prevState.moveStart.x,
-            y: coords.y - prevState.moveStart.y
-          }
-        };
-      });
-    }, _this.handleMouseUpOrTouchEnd = function (event) {
-      _this.setState({
-        moveStart: undefined
-      });
-    }, _this.handleZoomIn = function (event) {
-      event.preventDefault();
-      _this.setState(function (prevState) {
-        return { zoom: prevState.zoom * 1.5 };
-      });
-    }, _this.handleZoomOut = function (event) {
-      event.preventDefault();
-      _this.setState(function (prevState) {
-        return {
-          zoom: prevState.zoom / 1.5 < 1 ? 1 : prevState.zoom / 1.5
-        };
-      });
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _default.prototype.componentDidMount = function componentDidMount() {
-    document.addEventListener("keydown", this.handleKeyDown, false);
-  };
-
-  _default.prototype.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyDown, false);
-  };
-
-  _default.prototype.render = function render() {
-    var _this2 = this;
-
-    var _props = this.props,
-        fullscreen = _props.fullscreen,
-        download = _props.download,
-        alt = _props.alt,
-        onClose = _props.onClose;
-    var _state = this.state,
-        loading = _state.loading,
-        zoom = _state.zoom,
-        move = _state.move;
-
-
-    var imgTransform = {
-      transform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0) " + (zoom > 1 ? "scale3d(" + zoom + ", " + zoom + ", 1)" : "")
-    };
-
-    return React.createElement(
-      "div",
-      { style: modalStyles },
-      React.createElement(
-        "div",
-        {
-          onMouseDown: this.handleMouseDownOrTouchStart,
-          onMouseUp: this.handleMouseUpOrTouchEnd,
-          onMouseMove: this.handleMouseMoveOrTouchMove,
-          onTouchStart: this.handleMouseDownOrTouchStart,
-          onTouchEnd: this.handleMouseUpOrTouchEnd,
-          onTouchMove: this.handleMouseMoveOrTouchMove,
-          ref: function ref(el) {
-            _this2.contentEl = el;
-          },
-          style: modalContentStyles
-        },
-        loading && React.createElement(
-          "div",
-          { style: spinnerStyles },
-          React.createElement(SpinnerIcon, null)
-        ),
-        React.createElement("img", {
-          onContextMenu: function onContextMenu(event) {
-            event.preventDefault();
-          },
-          id: "react-modal-fullscreen-img",
-          style: Object.assign({}, imageStyles, imgTransform),
-          src: fullscreen,
-          onLoad: this.hidePlaceholder
-        })
-      ),
-      React.createElement(
-        "div",
-        { style: headerStyles },
-        React.createElement(
-          "span",
-          { style: iconMenuStyles },
-          React.createElement(
-            "a",
-            { href: download, style: iconWithMarginRightStyles, download: true },
-            React.createElement(DownloadIcon, null)
-          ),
-          React.createElement(
-            "a",
-            { href: "", style: iconStyles, onClick: this.handleZoomIn },
-            React.createElement(ZoomInIcon, null)
-          ),
-          React.createElement(
-            "a",
-            {
-              href: "",
-              style: iconWithMarginRightStyles,
-              onClick: this.handleZoomOut
-            },
-            React.createElement(ZoomOutIcon, null)
-          ),
-          React.createElement(
-            "a",
-            { style: iconStyles, onClick: onClose },
-            React.createElement(CloseIcon, null)
-          )
-        ),
-        React.createElement(
-          "span",
-          { style: captionStyles },
-          alt
-        )
-      )
-    );
-  };
-
-  return _default;
-}(Component);
-
-export { _default as default };

lib/ModalImage.js

-"use strict";
-
-exports.__esModule = true;
-exports.default = undefined;
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styles = require("./styles");
-
-var _icons = require("./icons");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var _default = function (_Component) {
-  _inherits(_default, _Component);
-
-  function _default() {
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, _default);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
-      loading: true,
-      move: { x: 0, y: 0 },
-      moveStart: undefined,
-      zoom: 1
-    }, _this.hidePlaceholder = function () {
-      _this.setState({ loading: false });
-    }, _this.handleKeyDown = function (event) {
-      // ESC or ENTER closes the modal
-      if (event.keyCode === 27 || event.keyCode === 13) {
-        _this.props.onClose();
-      }
-    }, _this.getCoordinatesIfOverImg = function (event) {
-      var point = event.changedTouches ? event.changedTouches[0] : event;
-
-      if (point.target.id !== "react-modal-fullscreen-img") {
-        // the img was not a target of the coordinates
-        return;
-      }
-
-      var dim = _this.contentEl.getBoundingClientRect();
-      var x = point.clientX - dim.left;
-      var y = point.clientY - dim.top;
-
-      return { x: x, y: y };
-    }, _this.handleMouseDownOrTouchStart = function (event) {
-      event.preventDefault();
-
-      if (event.touches && event.touches.length > 1) {
-        // more than one finger, ignored
-        return;
-      }
-
-      var coords = _this.getCoordinatesIfOverImg(event);
-
-      if (!coords) {
-        // click outside the img => close modal
-        _this.props.onClose();
-      }
-
-      _this.setState(function (prevState) {
-        return {
-          moveStart: {
-            x: coords.x - prevState.move.x,
-            y: coords.y - prevState.move.y
-          }
-        };
-      });
-    }, _this.handleMouseMoveOrTouchMove = function (event) {
-      event.preventDefault();
-
-      if (event.touches && event.touches.length > 1) {
-        // more than one finger, ignored
-        return;
-      }
-
-      var coords = _this.getCoordinatesIfOverImg(event);
-
-      if (!coords) {
-        return;
-      }
-
-      _this.setState(function (prevState) {
-        if (!prevState.moveStart) {
-          return;
-        }
-
-        return {
-          move: {
-            x: coords.x - prevState.moveStart.x,
-            y: coords.y - prevState.moveStart.y
-          }
-        };
-      });
-    }, _this.handleMouseUpOrTouchEnd = function (event) {
-      _this.setState({
-        moveStart: undefined
-      });
-    }, _this.handleZoomIn = function (event) {
-      event.preventDefault();
-      _this.setState(function (prevState) {
-        return { zoom: prevState.zoom * 1.5 };
-      });
-    }, _this.handleZoomOut = function (event) {
-      event.preventDefault();
-      _this.setState(function (prevState) {
-        return {
-          zoom: prevState.zoom / 1.5 < 1 ? 1 : prevState.zoom / 1.5
-        };
-      });
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _default.prototype.componentDidMount = function componentDidMount() {
-    document.addEventListener("keydown", this.handleKeyDown, false);
-  };
-
-  _default.prototype.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyDown, false);
-  };
-
-  _default.prototype.render = function render() {
-    var _this2 = this;
-
-    var _props = this.props,
-        fullscreen = _props.fullscreen,
-        download = _props.download,
-        alt = _props.alt,
-        onClose = _props.onClose;
-    var _state = this.state,
-        loading = _state.loading,
-        zoom = _state.zoom,
-        move = _state.move;
-
-
-    var imgTransform = {
-      transform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0) " + (zoom > 1 ? "scale3d(" + zoom + ", " + zoom + ", 1)" : "")
-    };
-
-    return _react2.default.createElement(
-      "div",
-      { style: _styles.modalStyles },
-      _react2.default.createElement(
-        "div",
-        {
-          onMouseDown: this.handleMouseDownOrTouchStart,
-          onMouseUp: this.handleMouseUpOrTouchEnd,
-          onMouseMove: this.handleMouseMoveOrTouchMove,
-          onTouchStart: this.handleMouseDownOrTouchStart,
-          onTouchEnd: this.handleMouseUpOrTouchEnd,
-          onTouchMove: this.handleMouseMoveOrTouchMove,
-          ref: function ref(el) {
-            _this2.contentEl = el;
-          },
-          style: _styles.modalContentStyles
-        },
-        loading && _react2.default.createElement(
-          "div",
-          { style: _styles.spinnerStyles },
-          _react2.default.createElement(_icons.SpinnerIcon, null)
-        ),
-        _react2.default.createElement("img", {
-          onContextMenu: function onContextMenu(event) {
-            event.preventDefault();
-          },
-          id: "react-modal-fullscreen-img",
-          style: Object.assign({}, _styles.imageStyles, imgTransform),
-          src: fullscreen,
-          onLoad: this.hidePlaceholder
-        })
-      ),
-      _react2.default.createElement(
-        "div",
-        { style: _styles.headerStyles },
-        _react2.default.createElement(
-          "span",
-          { style: _styles.iconMenuStyles },
-          _react2.default.createElement(
-            "a",
-            { href: download, style: _styles.iconWithMarginRightStyles, download: true },
-            _react2.default.createElement(_icons.DownloadIcon, null)
-          ),
-          _react2.default.createElement(
-            "a",
-            { href: "", style: _styles.iconStyles, onClick: this.handleZoomIn },
-            _react2.default.createElement(_icons.ZoomInIcon, null)
-          ),
-          _react2.default.createElement(
-            "a",
-            {
-              href: "",
-              style: _styles.iconWithMarginRightStyles,
-              onClick: this.handleZoomOut
-            },
-            _react2.default.createElement(_icons.ZoomOutIcon, null)
-          ),
-          _react2.default.createElement(
-            "a",
-            { style: _styles.iconStyles, onClick: onClose },
-            _react2.default.createElement(_icons.CloseIcon, null)
-          )
-        ),
-        _react2.default.createElement(
-          "span",
-          { style: _styles.captionStyles },
-          alt
-        )
-      )
-    );
-  };
-
-  return _default;
-}(_react.Component);
-
-exports.default = _default;
-module.exports = exports["default"];

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32201

1.78%

Dev dependency count

4

-20%

Lines of code

777

1.3%

Number of lines in readme file

51

4.08%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes