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

Comparing version 1.0.4 to 1.0.5

./dist/cjs/index.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/components/index.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

dist/cjs/components/index.js

@@ -76,3 +76,3 @@ "use strict";
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: imageViewerProviderRef, children: children }), isOpen &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ ref: imageViewerProviderRef }, { children: children })), isOpen &&
                 modalRoot &&
@@ -79,0 +79,0 @@ (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(Viewer_1.default, __assign({}, props, { controller: controller, images: images, currentIndex: currentIndex || 0, onCloseImgViewer: onCloseImgViewer })), modalRoot)] }));

dist/cjs/components/Viewer.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

dist/cjs/components/Viewer.js

@@ -173,3 +173,3 @@ "use strict";
     }, []);
-    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, { 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.jsxs)("div", { className: "react-image-viewer__footer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "react-image-viewer__arrows", children: [!controller && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { 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", { 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, {
+    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.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 () {
@@ -192,5 +192,5 @@ var _a, _b;
                                                 className: "".concat((_c = controller.next.props.className) !== null && _c !== void 0 ? _c : '', " ").concat(activeIndex + 1 === images.length ? 'disabled' : ''),
-                                            })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "react-image-viewer__pagination", ref: thumbnailContainer, children: images.length > 0 &&
-                                    images.map(function (image, index) { return ((0, jsx_runtime_1.jsx)("button", { 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)); }) })] })] }) }) })));
+                                            })] }))] })), (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/cjs/hooks/useScrollLock.d.ts

@@ -0,0 +0,0 @@ export default function useScrollLock(): {

dist/cjs/hooks/useScrollLock.js

@@ -0,0 +0,0 @@ "use strict";

dist/cjs/index.d.ts

 export { default as ImageViewerProvider } from './components/index';

dist/cjs/index.js

@@ -0,0 +0,0 @@ "use strict";

dist/esm/components/index.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

dist/esm/components/index.js

@@ -70,5 +70,5 @@ 'use client';
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: imageViewerProviderRef, children: children }), isOpen &&
+    return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ ref: imageViewerProviderRef }, { children: children })), isOpen &&
                 modalRoot &&
                 createPortal(_jsx(ImgViewer, __assign({}, props, { controller: controller, images: images, currentIndex: currentIndex || 0, onCloseImgViewer: onCloseImgViewer })), modalRoot)] }));
 }

dist/esm/components/Viewer.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

dist/esm/components/Viewer.js

@@ -168,3 +168,3 @@ var __assign = (this && this.__assign) || function () {
     }, []);
-    return (_jsx("div", __assign({ className: "react-image-viewer__container", onWheel: onMouseWheel, ref: imgViewer }, props, { children: _jsx(OutsideClickHandler, { onOutsideClick: onCloseImgViewer, children: _jsxs(_Fragment, { children: [_jsx("img", __assign({ ref: currentImage, src: images[activeIndex].src, className: "react-image-viewer__current-image" }, dragHandlers, { alt: "" })), _jsxs("div", { className: "react-image-viewer__footer", children: [_jsxs("div", { className: "react-image-viewer__arrows", children: [!controller && (_jsxs(_Fragment, { children: [_jsx("button", { 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", { 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, {
+    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: "" })), _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 () {
@@ -187,4 +187,4 @@ var _a, _b;
                                                 className: "".concat((_c = controller.next.props.className) !== null && _c !== void 0 ? _c : '', " ").concat(activeIndex + 1 === images.length ? 'disabled' : ''),
-                                            })] }))] }), _jsx("div", { className: "react-image-viewer__pagination", ref: thumbnailContainer, children: images.length > 0 &&
-                                    images.map(function (image, index) { return (_jsx("button", { 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)); }) })] })] }) }) })));
+                                            })] }))] })), _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)); }) }))] }))] }) })) })));
 }

dist/esm/hooks/useScrollLock.d.ts

@@ -0,0 +0,0 @@ export default function useScrollLock(): {

dist/esm/hooks/useScrollLock.js

@@ -0,0 +0,0 @@ import { useCallback, useRef } from 'react';

dist/esm/index.d.ts

 export { default as ImageViewerProvider } from './components/index';

dist/esm/index.js

 export { default as ImageViewerProvider } from './components/index';

package.json

 {
   "name": "@lani.ground/react-image-viewer",
   "description": "A React component for viewing images in a modal",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "MIT",
@@ -71,3 +71,3 @@ "keywords": [
   "devDependencies": {
-    "@lani.ground/react-outside-click-handler": "^1.0.2",
+    "@lani.ground/react-outside-click-handler": "^1.1.0",
     "@types/node": "^16.18.53",
@@ -81,3 +81,3 @@ "@types/react": "^18.2.22",
   },
-  "gitHead": "5db3c98d56349e2bd25d4a87158db0ef8494a459"
+  "gitHead": "de1f3a347094385bf723bf24717a4bea9e6398fd"
 }

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

Improved metrics

Total package byte prevSize

45118

increased by2.1%

Lines of code

827

increased by0.12%

No dependency changes