@lani.ground/react-image-viewer - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/cjs/components/Viewer.js

@@ -116,3 +116,4 @@ "use strict";
     (0, react_1.useEffect)(function () {
-        if (!imgViewer.current)
+        var $imageViewer = imgViewer.current;
+        if (!$imageViewer)
             return function () { };
@@ -142,12 +143,11 @@ var getDistance = function (e) {
         };
-        imgViewer.current.addEventListener('touchstart', handleTouchStart, {
+        $imageViewer.addEventListener('touchstart', handleTouchStart, {
             passive: false,
         });
-        imgViewer.current.addEventListener('touchmove', handleTouchMove, {
+        $imageViewer.addEventListener('touchmove', handleTouchMove, {
             passive: false,
         });
         return function () {
-            var _a, _b;
-            (_a = imgViewer === null || imgViewer === void 0 ? void 0 : imgViewer.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', handleTouchStart);
-            (_b = imgViewer === null || imgViewer === void 0 ? void 0 : imgViewer.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchmove', handleTouchMove);
+            $imageViewer.removeEventListener('touchstart', handleTouchStart);
+            $imageViewer.removeEventListener('touchmove', handleTouchMove);
         };
@@ -173,23 +173,23 @@ }, [initialDistance]);
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "react-image-viewer__container", onWheel: onMouseWheel, ref: imgViewer }, props, { children: (0, jsx_runtime_1.jsx)(react_outside_click_handler_1.OutsideClickHandler, __assign({ onOutsideClick: onCloseImgViewer }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", __assign({ ref: currentImage, src: images[activeIndex].src, className: "react-image-viewer__current-image" }, dragHandlers, { alt: "" })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "react-image-viewer__footer" }, { children: !disableGallery && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "react-image-viewer__arrows" }, { children: [!controller && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "react-image-viewer__arrow", disabled: activeIndex === 0, onClick: function () { return setActiveIndex(activeIndex - 1); } }, { children: (0, jsx_runtime_1.jsx)("img", { src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTI4cHQiIGhlaWdodD0iMTI4cHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNzMuODYzIDM4LjU3IDUuNjkxNCA1LjcxODgtMTkuNzIzIDE5LjcyMyAxOS43MjMgMTkuNjk5LTUuNjkxNCA1LjcxODgtMjUuNDE4LTI1LjQxOCAyLjg0NzctMi44NzExeiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4K", alt: "prev" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "react-image-viewer__arrow", disabled: activeIndex + 1 === images.length, onClick: function () { return setActiveIndex(activeIndex + 1); } }, { children: (0, jsx_runtime_1.jsx)("img", { src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTI4cHQiIGhlaWdodD0iMTI4cHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNTQuMTM3IDM4LjU3LTUuNjkxNCA1LjcxODggMTkuNzIzIDE5LjcyMy0xOS43MjMgMTkuNjk5IDUuNjkxNCA1LjcxODggMjUuNDE4LTI1LjQxOC0yLjg0NzctMi44NzExeiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4K", alt: "next" }) }))] })), controller && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.cloneElement)(controller.prev, {
-                                                    onClick: function () {
-                                                        var _a, _b;
-                                                        if (activeIndex === 0)
-                                                            return;
-                                                        (_b = (_a = controller.prev.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                                                        setActiveIndex(activeIndex - 1);
-                                                    },
-                                                    className: "".concat((_b = controller.prev.props.className) !== null && _b !== void 0 ? _b : '', " ").concat(activeIndex === 0 ? 'disabled' : ''),
-                                                }), (0, react_1.cloneElement)(controller.next, {
-                                                    onClick: function () {
-                                                        var _a, _b;
-                                                        if (activeIndex + 1 === images.length)
-                                                            return;
-                                                        (_b = (_a = controller.next.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                                                        setActiveIndex(activeIndex + 1);
-                                                    },
-                                                    className: "".concat((_c = controller.next.props.className) !== null && _c !== void 0 ? _c : '', " ").concat(activeIndex + 1 === images.length ? 'disabled' : ''),
-                                                })] }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "react-image-viewer__pagination", ref: thumbnailContainer }, { children: images.length > 0 &&
-                                        images.map(function (image, index) { return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "react-image-viewer__pagination_thumbnail", onClick: function () { return onClickThumbnail(index); } }, { children: (0, jsx_runtime_1.jsx)("img", { src: image.src, alt: "", className: "".concat(activeIndex === index ? 'current' : '') }) }), image.src)); }) }))] })) }))] }) })) })));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "react-image-viewer__container", onWheel: onMouseWheel, ref: imgViewer }, props, { children: (0, jsx_runtime_1.jsx)(react_outside_click_handler_1.OutsideClickHandler, __assign({ onOutsideClick: onCloseImgViewer }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", __assign({ ref: currentImage, src: images[activeIndex].src, className: "react-image-viewer__current-image" }, dragHandlers, { alt: "" })), !disableGallery && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "react-image-viewer__footer" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "react-image-viewer__arrows" }, { children: [!controller && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "react-image-viewer__arrow", disabled: activeIndex === 0, onClick: function () { return setActiveIndex(activeIndex - 1); } }, { children: (0, jsx_runtime_1.jsx)("img", { src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTI4cHQiIGhlaWdodD0iMTI4cHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNzMuODYzIDM4LjU3IDUuNjkxNCA1LjcxODgtMTkuNzIzIDE5LjcyMyAxOS43MjMgMTkuNjk5LTUuNjkxNCA1LjcxODgtMjUuNDE4LTI1LjQxOCAyLjg0NzctMi44NzExeiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4K", alt: "prev" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "react-image-viewer__arrow", disabled: activeIndex + 1 === images.length, onClick: function () { return setActiveIndex(activeIndex + 1); } }, { children: (0, jsx_runtime_1.jsx)("img", { src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTI4cHQiIGhlaWdodD0iMTI4cHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNTQuMTM3IDM4LjU3LTUuNjkxNCA1LjcxODggMTkuNzIzIDE5LjcyMy0xOS43MjMgMTkuNjk5IDUuNjkxNCA1LjcxODggMjUuNDE4LTI1LjQxOC0yLjg0NzctMi44NzExeiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4K", alt: "next" }) }))] })), controller && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.cloneElement)(controller.prev, {
+                                                onClick: function () {
+                                                    var _a, _b;
+                                                    if (activeIndex === 0)
+                                                        return;
+                                                    (_b = (_a = controller.prev.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                                    setActiveIndex(activeIndex - 1);
+                                                },
+                                                className: "".concat((_b = controller.prev.props.className) !== null && _b !== void 0 ? _b : '', " ").concat(activeIndex === 0 ? 'disabled' : ''),
+                                            }), (0, react_1.cloneElement)(controller.next, {
+                                                onClick: function () {
+                                                    var _a, _b;
+                                                    if (activeIndex + 1 === images.length)
+                                                        return;
+                                                    (_b = (_a = controller.next.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                                    setActiveIndex(activeIndex + 1);
+                                                },
+                                                className: "".concat((_c = controller.next.props.className) !== null && _c !== void 0 ? _c : '', " ").concat(activeIndex + 1 === images.length ? 'disabled' : ''),
+                                            })] }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "react-image-viewer__pagination", ref: thumbnailContainer }, { children: images.length > 0 &&
+                                    images.map(function (image, index) { return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "react-image-viewer__pagination_thumbnail", onClick: function () { return onClickThumbnail(index); } }, { children: (0, jsx_runtime_1.jsx)("img", { src: image.src, alt: "", className: "".concat(activeIndex === index ? 'current' : '') }) }), image.src)); }) }))] })))] }) })) })));
 }
 exports.default = ImgViewer;

dist/esm/components/Viewer.js

@@ -111,3 +111,4 @@ var __assign = (this && this.__assign) || function () {
     useEffect(function () {
-        if (!imgViewer.current)
+        var $imageViewer = imgViewer.current;
+        if (!$imageViewer)
             return function () { };
@@ -137,12 +138,11 @@ var getDistance = function (e) {
         };
-        imgViewer.current.addEventListener('touchstart', handleTouchStart, {
+        $imageViewer.addEventListener('touchstart', handleTouchStart, {
             passive: false,
         });
-        imgViewer.current.addEventListener('touchmove', handleTouchMove, {
+        $imageViewer.addEventListener('touchmove', handleTouchMove, {
             passive: false,
         });
         return function () {
-            var _a, _b;
-            (_a = imgViewer === null || imgViewer === void 0 ? void 0 : imgViewer.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', handleTouchStart);
-            (_b = imgViewer === null || imgViewer === void 0 ? void 0 : imgViewer.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchmove', handleTouchMove);
+            $imageViewer.removeEventListener('touchstart', handleTouchStart);
+            $imageViewer.removeEventListener('touchmove', handleTouchMove);
         };
@@ -168,22 +168,22 @@ }, [initialDistance]);
     }, []);
-    return (_jsx("div", __assign({ className: "react-image-viewer__container", onWheel: onMouseWheel, ref: imgViewer }, props, { children: _jsx(OutsideClickHandler, __assign({ onOutsideClick: onCloseImgViewer }, { children: _jsxs(_Fragment, { children: [_jsx("img", __assign({ ref: currentImage, src: images[activeIndex].src, className: "react-image-viewer__current-image" }, dragHandlers, { alt: "" })), _jsx("div", __assign({ className: "react-image-viewer__footer" }, { children: !disableGallery && (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "react-image-viewer__arrows" }, { children: [!controller && (_jsxs(_Fragment, { children: [_jsx("button", __assign({ type: "button", className: "react-image-viewer__arrow", disabled: activeIndex === 0, onClick: function () { return setActiveIndex(activeIndex - 1); } }, { children: _jsx("img", { src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTI4cHQiIGhlaWdodD0iMTI4cHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNzMuODYzIDM4LjU3IDUuNjkxNCA1LjcxODgtMTkuNzIzIDE5LjcyMyAxOS43MjMgMTkuNjk5LTUuNjkxNCA1LjcxODgtMjUuNDE4LTI1LjQxOCAyLjg0NzctMi44NzExeiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4K", alt: "prev" }) })), _jsx("button", __assign({ type: "button", className: "react-image-viewer__arrow", disabled: activeIndex + 1 === images.length, onClick: function () { return setActiveIndex(activeIndex + 1); } }, { children: _jsx("img", { src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTI4cHQiIGhlaWdodD0iMTI4cHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNTQuMTM3IDM4LjU3LTUuNjkxNCA1LjcxODggMTkuNzIzIDE5LjcyMy0xOS43MjMgMTkuNjk5IDUuNjkxNCA1LjcxODggMjUuNDE4LTI1LjQxOC0yLjg0NzctMi44NzExeiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4K", alt: "next" }) }))] })), controller && (_jsxs(_Fragment, { children: [cloneElement(controller.prev, {
-                                                    onClick: function () {
-                                                        var _a, _b;
-                                                        if (activeIndex === 0)
-                                                            return;
-                                                        (_b = (_a = controller.prev.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                                                        setActiveIndex(activeIndex - 1);
-                                                    },
-                                                    className: "".concat((_b = controller.prev.props.className) !== null && _b !== void 0 ? _b : '', " ").concat(activeIndex === 0 ? 'disabled' : ''),
-                                                }), cloneElement(controller.next, {
-                                                    onClick: function () {
-                                                        var _a, _b;
-                                                        if (activeIndex + 1 === images.length)
-                                                            return;
-                                                        (_b = (_a = controller.next.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                                                        setActiveIndex(activeIndex + 1);
-                                                    },
-                                                    className: "".concat((_c = controller.next.props.className) !== null && _c !== void 0 ? _c : '', " ").concat(activeIndex + 1 === images.length ? 'disabled' : ''),
-                                                })] }))] })), _jsx("div", __assign({ className: "react-image-viewer__pagination", ref: thumbnailContainer }, { children: images.length > 0 &&
-                                        images.map(function (image, index) { return (_jsx("button", __assign({ type: "button", className: "react-image-viewer__pagination_thumbnail", onClick: function () { return onClickThumbnail(index); } }, { children: _jsx("img", { src: image.src, alt: "", className: "".concat(activeIndex === index ? 'current' : '') }) }), image.src)); }) }))] })) }))] }) })) })));
+    return (_jsx("div", __assign({ className: "react-image-viewer__container", onWheel: onMouseWheel, ref: imgViewer }, props, { children: _jsx(OutsideClickHandler, __assign({ onOutsideClick: onCloseImgViewer }, { children: _jsxs(_Fragment, { children: [_jsx("img", __assign({ ref: currentImage, src: images[activeIndex].src, className: "react-image-viewer__current-image" }, dragHandlers, { alt: "" })), !disableGallery && (_jsxs("div", __assign({ className: "react-image-viewer__footer" }, { children: [_jsxs("div", __assign({ className: "react-image-viewer__arrows" }, { children: [!controller && (_jsxs(_Fragment, { children: [_jsx("button", __assign({ type: "button", className: "react-image-viewer__arrow", disabled: activeIndex === 0, onClick: function () { return setActiveIndex(activeIndex - 1); } }, { children: _jsx("img", { src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTI4cHQiIGhlaWdodD0iMTI4cHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNzMuODYzIDM4LjU3IDUuNjkxNCA1LjcxODgtMTkuNzIzIDE5LjcyMyAxOS43MjMgMTkuNjk5LTUuNjkxNCA1LjcxODgtMjUuNDE4LTI1LjQxOCAyLjg0NzctMi44NzExeiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4K", alt: "prev" }) })), _jsx("button", __assign({ type: "button", className: "react-image-viewer__arrow", disabled: activeIndex + 1 === images.length, onClick: function () { return setActiveIndex(activeIndex + 1); } }, { children: _jsx("img", { src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTI4cHQiIGhlaWdodD0iMTI4cHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNTQuMTM3IDM4LjU3LTUuNjkxNCA1LjcxODggMTkuNzIzIDE5LjcyMy0xOS43MjMgMTkuNjk5IDUuNjkxNCA1LjcxODggMjUuNDE4LTI1LjQxOC0yLjg0NzctMi44NzExeiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4K", alt: "next" }) }))] })), controller && (_jsxs(_Fragment, { children: [cloneElement(controller.prev, {
+                                                onClick: function () {
+                                                    var _a, _b;
+                                                    if (activeIndex === 0)
+                                                        return;
+                                                    (_b = (_a = controller.prev.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                                    setActiveIndex(activeIndex - 1);
+                                                },
+                                                className: "".concat((_b = controller.prev.props.className) !== null && _b !== void 0 ? _b : '', " ").concat(activeIndex === 0 ? 'disabled' : ''),
+                                            }), cloneElement(controller.next, {
+                                                onClick: function () {
+                                                    var _a, _b;
+                                                    if (activeIndex + 1 === images.length)
+                                                        return;
+                                                    (_b = (_a = controller.next.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                                    setActiveIndex(activeIndex + 1);
+                                                },
+                                                className: "".concat((_c = controller.next.props.className) !== null && _c !== void 0 ? _c : '', " ").concat(activeIndex + 1 === images.length ? 'disabled' : ''),
+                                            })] }))] })), _jsx("div", __assign({ className: "react-image-viewer__pagination", ref: thumbnailContainer }, { children: images.length > 0 &&
+                                    images.map(function (image, index) { return (_jsx("button", __assign({ type: "button", className: "react-image-viewer__pagination_thumbnail", onClick: function () { return onClickThumbnail(index); } }, { children: _jsx("img", { src: image.src, alt: "", className: "".concat(activeIndex === index ? 'current' : '') }) }), image.src)); }) }))] })))] }) })) })));
 }

package.json

 {
   "name": "@lani.ground/react-image-viewer",
   "description": "A React component for viewing images in a modal",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "license": "MIT",
@@ -82,3 +82,3 @@ "keywords": [
   },
-  "gitHead": "e6e273ee41fd22868fc995cfbccc37d1ae734d49"
+  "gitHead": "5395c9afc1ba8152f81d52c83c324c3c79fbacdd"
 }

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

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

Worsened metrics

Total package byte prevSize

45567

decreased by-1.42%

No dependency changes