yet-another-react-lightbox - npm Package Compare versions

Comparing version 3.24.0 to 3.25.0

dist/plugins/zoom/index.d.ts

@@ -13,2 +13,4 @@ import * as React from 'react';
             ref?: React.ForwardedRef<ZoomRef>;
+            /** override minimum zoom level (default: 1.0) */
+            minZoom?: number;
             /** ratio of image pixels to physical pixels at maximum zoom level */
@@ -74,2 +76,4 @@ maxZoomPixelRatio?: number;
         zoom: number;
+        /** minimum zoom level */
+        minZoom: number;
         /** maximum zoom level */
@@ -76,0 +80,0 @@ maxZoom: number;

dist/plugins/zoom/index.js

@@ -6,2 +6,3 @@ import * as React from 'react';
 const defaultZoomProps = {
+    minZoom: 1,
     maxZoomPixelRatio: 1,
@@ -17,6 +18,9 @@ zoomInMultiplier: 2,
 };
-const resolveZoomProps = (zoom) => ({
-    ...defaultZoomProps,
-    ...zoom,
-});
+function validateMinZoom(minZoom) {
+    return Math.min(Math.max(minZoom, Number.EPSILON), 1);
+}
+function resolveZoomProps(zoom) {
+    const { minZoom, ...rest } = { ...defaultZoomProps, ...zoom };
+    return { minZoom: validateMinZoom(minZoom), ...rest };
+}
 
@@ -123,3 +127,3 @@ function useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef) {
 }
-function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapperRef) {
+function useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, changeZoom, changeOffsets, zoomWrapperRef) {
     const activePointers = React.useRef([]);
@@ -166,14 +170,13 @@ const lastPointerDown = React.useRef(0);
         }
-        const handleChangeZoom = (zoomValue) => {
+        if (key === "+" || (meta && key === "=")) {
             preventDefault();
-            changeZoom(zoomValue);
-        };
-        if (key === "+" || (meta && key === "=")) {
-            handleChangeZoom(zoom * zoomInMultiplier);
+            zoomIn();
         }
         else if (key === "-" || (meta && key === "_")) {
-            handleChangeZoom(zoom / zoomInMultiplier);
+            preventDefault();
+            zoomOut();
         }
         else if (meta && key === "0") {
-            handleChangeZoom(1);
+            preventDefault();
+            changeZoom(1);
         }
@@ -219,3 +222,10 @@ });
             lastPointerDown.current = 0;
-            changeZoom(zoom !== maxZoom ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier) : 1, false, ...translateCoordinates(event));
+            const targetZoom = zoom >= 1
+                ? zoom !== maxZoom
+                    ? zoom * Math.max(maxZoom ** (1 / doubleClickMaxStops), zoomInMultiplier)
+                    : 1
+                : zoom !== minZoom
+                    ? zoom / Math.max(minZoom ** (-1 / doubleClickMaxStops), zoomInMultiplier)
+                    : 1;
+            changeZoom(targetZoom, false, ...translateCoordinates(event));
         }
@@ -286,3 +296,3 @@ else {
     const { containerRect, slideRect } = useController();
-    const { zoomInMultiplier } = useZoomProps();
+    const { minZoom, zoomInMultiplier } = useZoomProps();
     const currentSource = currentSlide && isImageSlide(currentSlide) ? currentSlide.src : undefined;
@@ -305,3 +315,3 @@ const disabled = !currentSource || !(zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current);
     const changeZoom = React.useCallback((targetZoom, rapid, dx, dy) => {
-        const newZoom = round(Math.min(Math.max(targetZoom + 0.001 < maxZoom ? targetZoom : maxZoom, 1), maxZoom), 5);
+        const newZoom = round(Math.min(Math.max(targetZoom + 0.001 < maxZoom ? targetZoom : maxZoom, minZoom), maxZoom), 5);
         if (newZoom === zoom)
@@ -314,3 +324,3 @@ return;
         setZoom(newZoom);
-    }, [zoom, maxZoom, changeOffsets, animate]);
+    }, [zoom, minZoom, maxZoom, changeOffsets, animate]);
     const handleControllerRectChange = useEventCallback(() => {
@@ -325,4 +335,10 @@ if (zoom > 1) {
     useLayoutEffect(handleControllerRectChange, [containerRect.width, containerRect.height, handleControllerRectChange]);
-    const zoomIn = React.useCallback(() => changeZoom(zoom * zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
-    const zoomOut = React.useCallback(() => changeZoom(zoom / zoomInMultiplier), [zoom, zoomInMultiplier, changeZoom]);
+    const zoomIn = React.useCallback(() => {
+        const targetZoom = zoom * zoomInMultiplier;
+        changeZoom(zoom < 1 && targetZoom > 1 ? 1 : targetZoom);
+    }, [zoom, zoomInMultiplier, changeZoom]);
+    const zoomOut = React.useCallback(() => {
+        const targetZoom = zoom / zoomInMultiplier;
+        changeZoom(zoom > 1 && targetZoom < 1 ? 1 : targetZoom);
+    }, [zoom, zoomInMultiplier, changeZoom]);
     return { zoom, offsetX, offsetY, disabled, changeOffsets, changeZoom, zoomIn, zoomOut };
@@ -336,8 +352,9 @@ }
     const { slideRect } = useController();
+    const { ref, minZoom } = useZoomProps();
     const { imageRect, maxZoom } = useZoomImageRect(slideRect, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.imageDimensions);
     const { zoom, offsetX, offsetY, disabled, changeZoom, changeOffsets, zoomIn, zoomOut } = useZoomState(imageRect, maxZoom, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
     useZoomCallback(zoom, disabled);
-    useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
-    const zoomRef = React.useMemo(() => ({ zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom }), [zoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom]);
-    React.useImperativeHandle(useZoomProps().ref, () => zoomRef, [zoomRef]);
+    useZoomSensors(zoom, minZoom, maxZoom, disabled, zoomIn, zoomOut, changeZoom, changeOffsets, zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.zoomWrapperRef);
+    const zoomRef = React.useMemo(() => ({ zoom, minZoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom }), [zoom, minZoom, maxZoom, offsetX, offsetY, disabled, zoomIn, zoomOut, changeZoom]);
+    React.useImperativeHandle(ref, () => zoomRef, [zoomRef]);
     const context = React.useMemo(() => ({ ...zoomRef, setZoomWrapper }), [zoomRef, setZoomWrapper]);
@@ -354,5 +371,5 @@ return React.createElement(ZoomControllerContext.Provider, { value: context }, children);
     const wasFocused = React.useRef(false);
-    const { zoom, maxZoom, zoomIn: zoomInCallback, zoomOut: zoomOutCallback, disabled: zoomDisabled } = useZoom();
+    const { zoom, minZoom, maxZoom, zoomIn: zoomInCallback, zoomOut: zoomOutCallback, disabled: zoomDisabled, } = useZoom();
     const { render } = useLightboxProps();
-    const disabled = zoomDisabled || (zoomIn ? zoom >= maxZoom : zoom <= 1);
+    const disabled = zoomDisabled || (zoomIn ? zoom >= maxZoom : zoom <= minZoom);
     React.useEffect(() => {
@@ -359,0 +376,0 @@ if (disabled && wasEnabled.current && wasFocused.current) {

package.json

 {
   "name": "yet-another-react-lightbox",
-  "version": "3.24.0",
+  "version": "3.25.0",
   "description": "Modern React lightbox component",
@@ -5,0 +5,0 @@ "author": "Igor Danchenko",

No alert changes

Improved metrics

Total package byte prevSize

235351

0.35%

Lines of code

4434

0.48%

No dependency changes