react-modal-image - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

es/Header.js

 import React from "react";
 
-import { header, iconMenu, icon, caption } from "./styles";
-
 import { ZoomInIcon, ZoomOutIcon, DownloadIcon, CloseIcon } from "./icons";
@@ -17,14 +15,9 @@
     "div",
-    { style: header },
+    { className: "__react_modal_image__header" },
     React.createElement(
       "span",
-      { style: iconMenu },
+      { className: "__react_modal_image__icon_menu" },
       enableDownload && React.createElement(
         "a",
-        {
-          className: "react-modal-image-download",
-          href: image,
-          style: icon,
-          download: true
-        },
+        { href: image, download: true },
         React.createElement(DownloadIcon, null)
@@ -34,8 +27,3 @@ ),
         "a",
-        {
-          className: "react-modal-image-zoom",
-          href: "",
-          style: icon,
-          onClick: toggleZoom
-        },
+        { onClick: toggleZoom },
         zoomed ? React.createElement(ZoomOutIcon, null) : React.createElement(ZoomInIcon, null)
@@ -45,3 +33,3 @@ ),
         "a",
-        { className: "react-modal-image-close", style: icon, onClick: onClose },
+        { onClick: onClose },
         React.createElement(CloseIcon, null)
@@ -52,3 +40,3 @@ )
       "span",
-      { style: caption },
+      { className: "__react_modal_image__caption" },
       alt
@@ -55,0 +43,0 @@ )

es/Image.js

@@ -11,4 +11,2 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-import { spinner } from "./styles";
-
 var Image = function (_Component) {
@@ -38,22 +36,18 @@ _inherits(Image, _Component);
         id = _props.id,
+        className = _props.className,
         src = _props.src,
-        handleDoubleClick = _props.handleDoubleClick,
-        styles = _props.styles;
+        handleDoubleClick = _props.handleDoubleClick;
 
 
     return React.createElement(
-      "div",
+      React.Fragment,
       null,
-      this.state.loading && React.createElement(
-        "div",
-        { style: spinner },
-        React.createElement(SpinnerIcon, null)
-      ),
+      this.state.loading && React.createElement(SpinnerIcon, null),
       React.createElement("img", {
         id: id,
+        className: className,
         src: src,
         onLoad: this.handleOnLoad,
         onDoubleClick: handleDoubleClick,
-        onContextMenu: this.handleOnContextMenu,
-        style: styles
+        onContextMenu: this.handleOnContextMenu
       })
@@ -60,0 +54,0 @@ );

es/index.js

@@ -9,3 +9,2 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-import { smallImage } from "./styles";
 import Lightbox from "./Lightbox";
@@ -28,5 +27,5 @@
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { modalOpen: false }, _this.toggleModal = function () {
-      _this.setState(function (prevState) {
+      _this.setState(function (prev) {
         return {
-          modalOpen: !prevState.modalOpen
+          modalOpen: !prev.modalOpen
         };
@@ -51,7 +50,11 @@ });
     return React.createElement(
-      "div",
+      React.Fragment,
       null,
       React.createElement("img", {
         className: className,
-        style: smallImage,
+        style: {
+          cursor: "pointer",
+          maxWidth: "100%",
+          maxHeight: "100%"
+        },
         onClick: this.toggleModal,
@@ -58,0 +61,0 @@ src: small,

es/Lightbox.js

@@ -9,3 +9,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-import * as style from "./styles";
+import StyleInjector, { lightboxStyles } from "./styles";
 
@@ -15,4 +15,2 @@ import Header from "./Header";
 
-import { SpinnerIcon } from "./icons";
-
 var Lightbox = function (_Component) {
@@ -72,7 +70,7 @@ _inherits(Lightbox, _Component);
 
-      _this.setState(function (prevState) {
+      _this.setState(function (prev) {
         return {
           moveStart: {
-            x: coords.x - prevState.move.x,
-            y: coords.y - prevState.move.y
+            x: coords.x - prev.move.x,
+            y: coords.y - prev.move.y
           }
@@ -101,7 +99,7 @@ };
 
-      _this.setState(function (prevState) {
+      _this.setState(function (prev) {
         return {
           move: {
-            x: coords.x - prevState.moveStart.x,
-            y: coords.y - prevState.moveStart.y
+            x: coords.x - prev.moveStart.x,
+            y: coords.y - prev.moveStart.y
           }
@@ -116,7 +114,7 @@ };
       event.preventDefault();
-      _this.setState(function (prevState) {
+      _this.setState(function (prev) {
         return {
-          zoomed: !prevState.zoomed,
+          zoomed: !prev.zoomed,
           // reset position if zoomed out
-          move: prevState.zoomed ? { x: 0, y: 0 } : prevState.move
+          move: prev.zoomed ? { x: 0, y: 0 } : prev.move
         };
@@ -151,41 +149,54 @@ });
     return React.createElement(
-      "div",
-      { style: style.modal },
+      React.Fragment,
+      null,
+      React.createElement(StyleInjector, {
+        name: "__react_modal_image__lightbox",
+        css: lightboxStyles
+      }),
       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;
+        { className: "__react_modal_image__modal_container" },
+        React.createElement(
+          "div",
+          {
+            className: "__react_modal_image__modal_content",
+            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: style.modalContent
-        },
-        zoomed && React.createElement(Image, {
-          id: "react-modal-image-img",
-          src: large || medium,
-          styles: style.largeImage(move.x, move.y),
-          handleDoubleClick: this.toggleZoom
-        }),
-        !zoomed && React.createElement(Image, {
-          id: "react-modal-image-img",
-          src: medium || large,
-          styles: style.mediumImage,
-          handleDoubleClick: this.toggleZoom,
-          contextMenu: !medium
+          zoomed && React.createElement(Image, {
+            id: "react-modal-image-img",
+            className: "__react_modal_image__large_img",
+            src: large || medium,
+            style: {
+              transform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0)",
+              WebkitTransform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0)",
+              MsTransform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0)"
+            },
+            handleDoubleClick: this.toggleZoom
+          }),
+          !zoomed && React.createElement(Image, {
+            id: "react-modal-image-img",
+            className: "__react_modal_image__medium_img",
+            src: medium || large,
+            handleDoubleClick: this.toggleZoom,
+            contextMenu: !medium
+          })
+        ),
+        React.createElement(Header, {
+          image: large || medium,
+          alt: alt,
+          zoomed: zoomed,
+          toggleZoom: this.toggleZoom,
+          onClose: onClose,
+          enableDownload: !hideDownload,
+          enableZoom: !hideZoom
         })
-      ),
-      React.createElement(Header, {
-        image: large || medium,
-        alt: alt,
-        zoomed: zoomed,
-        toggleZoom: this.toggleZoom,
-        onClose: onClose,
-        enableDownload: !hideDownload,
-        enableZoom: !hideZoom
-      })
+      )
     );
@@ -192,0 +203,0 @@ };

es/styles.js

@@ -1,84 +0,48 @@
-export var smallImage = {
-  cursor: "pointer",
-  maxWidth: "100%",
-  maxHeight: "100%"
-};
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-export var modal = {
-  position: "fixed",
-  zIndex: 1000,
-  left: 0,
-  top: 0,
-  width: "100%",
-  height: "100%",
-  overflow: "auto",
-  backgroundColor: "rgba(0, 0, 0, 0.8)",
-  touchAction: "none"
-};
+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; }
 
-export var modalContent = {
-  textAlign: "center",
-  position: "relative",
-  height: "100%",
-  width: "100%",
-  overflow: "hidden"
-};
+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; }
 
-export var spinner = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)"
-};
+import { Component } from "react";
 
-export var mediumImage = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate3d(-50%, -50%, 0)",
-  maxWidth: "98%",
-  maxHeight: "98%"
-};
+function appendStyle(id, css) {
+  if (!document.head.querySelector("#" + id)) {
+    var node = document.createElement("style");
+    node.textContent = css;
+    node.type = "text/css";
+    node.id = id;
 
-export var largeImage = function largeImage(x, y) {
-  return {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate3d(-50%, -50%, 0) translate3d(" + x + "px, " + y + "px, 0)",
-    cursor: "move"
+    document.head.appendChild(node);
+  }
+}
+
+var StyleInjector = function (_Component) {
+  _inherits(StyleInjector, _Component);
+
+  function StyleInjector() {
+    _classCallCheck(this, StyleInjector);
+
+    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+  }
+
+  StyleInjector.prototype.componentDidMount = function componentDidMount() {
+    appendStyle(this.props.name, this.props.css);
   };
-};
 
-export var icon = {
-  display: "inline-block",
-  fontSize: "40px",
-  cursor: "pointer",
-  lineHeight: "40px",
-  boxSizing: "border-box",
-  border: "none",
-  padding: "0px 5px 0px 5px",
-  marginLeft: "10px",
-  color: "white",
-  backgroundColor: "rgba(0, 0, 0, 0)"
-};
+  StyleInjector.prototype.componentWillUnmount = function componentWillUnmount() {
+    var node = document.getElementById(this.props.name);
+    node.parentNode.removeChild(node);
+  };
 
-export var iconMenu = {
-  display: "inline-block",
-  float: "right"
-};
+  StyleInjector.prototype.render = function render() {
+    return null;
+  };
 
-export var caption = {
-  display: "inline-block",
-  color: "white",
-  fontSize: "120%",
-  padding: "10px",
-  margin: "0"
-};
+  return StyleInjector;
+}(Component);
 
-export var header = {
-  position: "absolute",
-  top: 0,
-  width: "100%",
-  backgroundColor: "rgba(0, 0, 0, 0.7)"
-};
+export { StyleInjector as default };
+
+
+export var lightboxStyles = "\n  body {\n    overflow: hidden;\n  }\n\n  .__react_modal_image__modal_container {\n    position: fixed;\n    z-index: 1000;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.8);\n    touch-action: none;\n    overflow: hidden;\n  }\n\n  .__react_modal_image__modal_content {\n    position: relative;\n    height: 100%;\n    width: 100%;\n  }\n\n  .__react_modal_image__modal_content img, \n  .__react_modal_image__modal_content svg {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate3d(-50%, -50%, 0);\n    -webkit-transform: translate3d(-50%, -50%, 0);\n    -ms-transform: translate3d(-50%, -50%, 0);\n    overflow: hidden;\n  }\n\n  .__react_modal_image__medium_img {\n    max-width: 98%;\n    max-height: 98%;    \n  }\n\n  .__react_modal_image__large_img {\n    cursor: move;\n  }\n\n  .__react_modal_image__icon_menu a {\n    display: inline-block;\n    font-size: 40px;\n    cursor: pointer;\n    line-height: 40px;\n    box-sizing: border-box;\n    border: none;\n    padding: 0px 5px 0px 5px;\n    margin-left: 10px;\n    color: white;\n    background-color: rgba(0, 0, 0, 0);\n  }\n\n  .__react_modal_image__icon_menu {\n    display: inline-block;\n    float: right;\n  }\n\n  .__react_modal_image__caption {\n    display: inline-block;\n    color: white;\n    font-size: 120%;\n    padding: 10px;\n    margin: 0;\n  }\n\n  .__react_modal_image__header {\n    position: absolute;\n    top: 0;\n    width: 100%;\n    background-color: rgba(0, 0, 0, 0.7);\n    overflow: hidden;\n  }\n";

lib/Header.js

@@ -9,4 +9,2 @@ "use strict";
 
-var _styles = require("./styles");
-
 var _icons = require("./icons");
@@ -26,14 +24,9 @@
     "div",
-    { style: _styles.header },
+    { className: "__react_modal_image__header" },
     _react2.default.createElement(
       "span",
-      { style: _styles.iconMenu },
+      { className: "__react_modal_image__icon_menu" },
       enableDownload && _react2.default.createElement(
         "a",
-        {
-          className: "react-modal-image-download",
-          href: image,
-          style: _styles.icon,
-          download: true
-        },
+        { href: image, download: true },
         _react2.default.createElement(_icons.DownloadIcon, null)
@@ -43,8 +36,3 @@ ),
         "a",
-        {
-          className: "react-modal-image-zoom",
-          href: "",
-          style: _styles.icon,
-          onClick: toggleZoom
-        },
+        { onClick: toggleZoom },
         zoomed ? _react2.default.createElement(_icons.ZoomOutIcon, null) : _react2.default.createElement(_icons.ZoomInIcon, null)
@@ -54,3 +42,3 @@ ),
         "a",
-        { className: "react-modal-image-close", style: _styles.icon, onClick: onClose },
+        { onClick: onClose },
         _react2.default.createElement(_icons.CloseIcon, null)
@@ -61,3 +49,3 @@ )
       "span",
-      { style: _styles.caption },
+      { className: "__react_modal_image__caption" },
       alt
@@ -64,0 +52,0 @@ )

lib/Image.js

@@ -12,4 +12,2 @@ "use strict";
 
-var _styles = require("./styles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,22 +45,18 @@
         id = _props.id,
+        className = _props.className,
         src = _props.src,
-        handleDoubleClick = _props.handleDoubleClick,
-        styles = _props.styles;
+        handleDoubleClick = _props.handleDoubleClick;
 
 
     return _react2.default.createElement(
-      "div",
+      _react2.default.Fragment,
       null,
-      this.state.loading && _react2.default.createElement(
-        "div",
-        { style: _styles.spinner },
-        _react2.default.createElement(_icons.SpinnerIcon, null)
-      ),
+      this.state.loading && _react2.default.createElement(_icons.SpinnerIcon, null),
       _react2.default.createElement("img", {
         id: id,
+        className: className,
         src: src,
         onLoad: this.handleOnLoad,
         onDoubleClick: handleDoubleClick,
-        onContextMenu: this.handleOnContextMenu,
-        style: styles
+        onContextMenu: this.handleOnContextMenu
       })
@@ -69,0 +63,0 @@ );

lib/index.js

@@ -19,4 +19,2 @@ "use strict";
 
-var _styles = require("./styles");
-
 var _Lightbox2 = _interopRequireDefault(_Lightbox);
@@ -45,5 +43,5 @@
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { modalOpen: false }, _this.toggleModal = function () {
-      _this.setState(function (prevState) {
+      _this.setState(function (prev) {
         return {
-          modalOpen: !prevState.modalOpen
+          modalOpen: !prev.modalOpen
         };
@@ -68,7 +66,11 @@ });
     return _react2.default.createElement(
-      "div",
+      _react2.default.Fragment,
       null,
       _react2.default.createElement("img", {
         className: className,
-        style: _styles.smallImage,
+        style: {
+          cursor: "pointer",
+          maxWidth: "100%",
+          maxHeight: "100%"
+        },
         onClick: this.toggleModal,
@@ -75,0 +77,0 @@ src: small,

lib/Lightbox.js

@@ -12,3 +12,3 @@ "use strict";
 
-var style = _interopRequireWildcard(_styles);
+var _styles2 = _interopRequireDefault(_styles);
 
@@ -23,6 +23,2 @@ var _Header = require("./Header");
 
-var _icons = require("./icons");
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -90,7 +86,7 @@
 
-      _this.setState(function (prevState) {
+      _this.setState(function (prev) {
         return {
           moveStart: {
-            x: coords.x - prevState.move.x,
-            y: coords.y - prevState.move.y
+            x: coords.x - prev.move.x,
+            y: coords.y - prev.move.y
           }
@@ -119,7 +115,7 @@ };
 
-      _this.setState(function (prevState) {
+      _this.setState(function (prev) {
         return {
           move: {
-            x: coords.x - prevState.moveStart.x,
-            y: coords.y - prevState.moveStart.y
+            x: coords.x - prev.moveStart.x,
+            y: coords.y - prev.moveStart.y
           }
@@ -134,7 +130,7 @@ };
       event.preventDefault();
-      _this.setState(function (prevState) {
+      _this.setState(function (prev) {
         return {
-          zoomed: !prevState.zoomed,
+          zoomed: !prev.zoomed,
           // reset position if zoomed out
-          move: prevState.zoomed ? { x: 0, y: 0 } : prevState.move
+          move: prev.zoomed ? { x: 0, y: 0 } : prev.move
         };
@@ -169,41 +165,54 @@ });
     return _react2.default.createElement(
-      "div",
-      { style: style.modal },
+      _react2.default.Fragment,
+      null,
+      _react2.default.createElement(_styles2.default, {
+        name: "__react_modal_image__lightbox",
+        css: _styles.lightboxStyles
+      }),
       _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;
+        { className: "__react_modal_image__modal_container" },
+        _react2.default.createElement(
+          "div",
+          {
+            className: "__react_modal_image__modal_content",
+            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: style.modalContent
-        },
-        zoomed && _react2.default.createElement(_Image2.default, {
-          id: "react-modal-image-img",
-          src: large || medium,
-          styles: style.largeImage(move.x, move.y),
-          handleDoubleClick: this.toggleZoom
-        }),
-        !zoomed && _react2.default.createElement(_Image2.default, {
-          id: "react-modal-image-img",
-          src: medium || large,
-          styles: style.mediumImage,
-          handleDoubleClick: this.toggleZoom,
-          contextMenu: !medium
+          zoomed && _react2.default.createElement(_Image2.default, {
+            id: "react-modal-image-img",
+            className: "__react_modal_image__large_img",
+            src: large || medium,
+            style: {
+              transform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0)",
+              WebkitTransform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0)",
+              MsTransform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0)"
+            },
+            handleDoubleClick: this.toggleZoom
+          }),
+          !zoomed && _react2.default.createElement(_Image2.default, {
+            id: "react-modal-image-img",
+            className: "__react_modal_image__medium_img",
+            src: medium || large,
+            handleDoubleClick: this.toggleZoom,
+            contextMenu: !medium
+          })
+        ),
+        _react2.default.createElement(_Header2.default, {
+          image: large || medium,
+          alt: alt,
+          zoomed: zoomed,
+          toggleZoom: this.toggleZoom,
+          onClose: onClose,
+          enableDownload: !hideDownload,
+          enableZoom: !hideZoom
         })
-      ),
-      _react2.default.createElement(_Header2.default, {
-        image: large || medium,
-        alt: alt,
-        zoomed: zoomed,
-        toggleZoom: this.toggleZoom,
-        onClose: onClose,
-        enableDownload: !hideDownload,
-        enableZoom: !hideZoom
-      })
+      )
     );
@@ -210,0 +219,0 @@ };

lib/styles.js

 "use strict";
 
 exports.__esModule = true;
-var smallImage = exports.smallImage = {
-  cursor: "pointer",
-  maxWidth: "100%",
-  maxHeight: "100%"
-};
+exports.lightboxStyles = exports.default = undefined;
 
-var modal = exports.modal = {
-  position: "fixed",
-  zIndex: 1000,
-  left: 0,
-  top: 0,
-  width: "100%",
-  height: "100%",
-  overflow: "auto",
-  backgroundColor: "rgba(0, 0, 0, 0.8)",
-  touchAction: "none"
-};
+var _react = require("react");
 
-var modalContent = exports.modalContent = {
-  textAlign: "center",
-  position: "relative",
-  height: "100%",
-  width: "100%",
-  overflow: "hidden"
-};
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var spinner = exports.spinner = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)"
-};
+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; }
 
-var mediumImage = exports.mediumImage = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate3d(-50%, -50%, 0)",
-  maxWidth: "98%",
-  maxHeight: "98%"
-};
+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 largeImage = exports.largeImage = function largeImage(x, y) {
-  return {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate3d(-50%, -50%, 0) translate3d(" + x + "px, " + y + "px, 0)",
-    cursor: "move"
+function appendStyle(id, css) {
+  if (!document.head.querySelector("#" + id)) {
+    var node = document.createElement("style");
+    node.textContent = css;
+    node.type = "text/css";
+    node.id = id;
+
+    document.head.appendChild(node);
+  }
+}
+
+var StyleInjector = function (_Component) {
+  _inherits(StyleInjector, _Component);
+
+  function StyleInjector() {
+    _classCallCheck(this, StyleInjector);
+
+    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+  }
+
+  StyleInjector.prototype.componentDidMount = function componentDidMount() {
+    appendStyle(this.props.name, this.props.css);
   };
-};
 
-var icon = exports.icon = {
-  display: "inline-block",
-  fontSize: "40px",
-  cursor: "pointer",
-  lineHeight: "40px",
-  boxSizing: "border-box",
-  border: "none",
-  padding: "0px 5px 0px 5px",
-  marginLeft: "10px",
-  color: "white",
-  backgroundColor: "rgba(0, 0, 0, 0)"
-};
+  StyleInjector.prototype.componentWillUnmount = function componentWillUnmount() {
+    var node = document.getElementById(this.props.name);
+    node.parentNode.removeChild(node);
+  };
 
-var iconMenu = exports.iconMenu = {
-  display: "inline-block",
-  float: "right"
-};
+  StyleInjector.prototype.render = function render() {
+    return null;
+  };
 
-var caption = exports.caption = {
-  display: "inline-block",
-  color: "white",
-  fontSize: "120%",
-  padding: "10px",
-  margin: "0"
-};
+  return StyleInjector;
+}(_react.Component);
 
-var header = exports.header = {
-  position: "absolute",
-  top: 0,
-  width: "100%",
-  backgroundColor: "rgba(0, 0, 0, 0.7)"
-};
+exports.default = StyleInjector;
+var lightboxStyles = exports.lightboxStyles = "\n  body {\n    overflow: hidden;\n  }\n\n  .__react_modal_image__modal_container {\n    position: fixed;\n    z-index: 1000;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.8);\n    touch-action: none;\n    overflow: hidden;\n  }\n\n  .__react_modal_image__modal_content {\n    position: relative;\n    height: 100%;\n    width: 100%;\n  }\n\n  .__react_modal_image__modal_content img, \n  .__react_modal_image__modal_content svg {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate3d(-50%, -50%, 0);\n    -webkit-transform: translate3d(-50%, -50%, 0);\n    -ms-transform: translate3d(-50%, -50%, 0);\n    overflow: hidden;\n  }\n\n  .__react_modal_image__medium_img {\n    max-width: 98%;\n    max-height: 98%;    \n  }\n\n  .__react_modal_image__large_img {\n    cursor: move;\n  }\n\n  .__react_modal_image__icon_menu a {\n    display: inline-block;\n    font-size: 40px;\n    cursor: pointer;\n    line-height: 40px;\n    box-sizing: border-box;\n    border: none;\n    padding: 0px 5px 0px 5px;\n    margin-left: 10px;\n    color: white;\n    background-color: rgba(0, 0, 0, 0);\n  }\n\n  .__react_modal_image__icon_menu {\n    display: inline-block;\n    float: right;\n  }\n\n  .__react_modal_image__caption {\n    display: inline-block;\n    color: white;\n    font-size: 120%;\n    padding: 10px;\n    margin: 0;\n  }\n\n  .__react_modal_image__header {\n    position: absolute;\n    top: 0;\n    width: 100%;\n    background-color: rgba(0, 0, 0, 0.7);\n    overflow: hidden;\n  }\n";

package.json

 {
   "name": "react-modal-image",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Lightweight Lightbox React Component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44190

increased by10.9%

Worsened metrics

Lines of code

880

decreased by-8.71%

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes