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

Comparing version 1.7.0 to 1.7.1

dist/core/modules/Carousel.js

@@ -41,8 +41,9 @@ import * as React from "react";
     }
+    const sanitize = (value) => value === 0 || value.trim() === "" || value.trim() === "0" ? "0px" : value;
     return (React.createElement("div", { className: cssClass("carousel"), style: {
             ...(padding !== LightboxDefaultProps.carousel.padding
-                ? { [cssVar("carousel_padding")]: padding }
+                ? { [cssVar("carousel_padding")]: sanitize(padding) }
                 : null),
             ...(spacing !== LightboxDefaultProps.carousel.spacing
-                ? { [cssVar("carousel_spacing")]: spacing !== 0 ? spacing : "0px" }
+                ? { [cssVar("carousel_spacing")]: sanitize(spacing) }
                 : null),
@@ -49,0 +50,0 @@ } }, items));

dist/core/modules/Controller.js

@@ -284,9 +284,16 @@ import * as React from "react";
     }), [latestProps, containerRef, state.currentIndex, state.globalIndex, state.isRTL, subscribeSensors]);
-    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("container"), refs.current.swipeState === "swipe" && cssClass("container_swipe")), style: refs.current.swipeAnimationDuration !== LightboxDefaultProps.animation.swipe
-            ? {
-                [cssVar("swipe_animation_duration")]: `${Math.round(refs.current.swipeAnimationDuration)}ms`,
-            }
-            : undefined, role: "presentation", "aria-live": "polite", tabIndex: -1, ...registerSensors },
+    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("container"), refs.current.swipeState === "swipe" && cssClass("container_swipe")), style: {
+            ...(refs.current.swipeAnimationDuration !== LightboxDefaultProps.animation.swipe
+                ? {
+                    [cssVar("swipe_animation_duration")]: `${Math.round(refs.current.swipeAnimationDuration)}ms`,
+                }
+                : null),
+            ...(props.controller.touchAction !== "none"
+                ? {
+                    [cssVar("controller_touch_action")]: props.controller.touchAction,
+                }
+                : null),
+        }, role: "presentation", "aria-live": "polite", tabIndex: -1, ...registerSensors },
         React.createElement(ControllerContext.Provider, { value: context }, children)));
 };
 export const ControllerModule = createModule("controller", Controller);

dist/Lightbox.js

@@ -8,4 +8,5 @@ import * as React from "react";
 };
-const LightboxComponent = (props) => {
-    const { plugins } = props;
+export const Lightbox = (props) => {
+    const { carousel, animation, render, toolbar, controller, on, plugins, ...restProps } = props;
+    const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;
     const { config, augmentation } = withPlugins([
@@ -22,3 +23,12 @@ createNode(PortalModule, [
     ], plugins);
-    const augmentedProps = augmentation(props);
+    const augmentedProps = augmentation({
+        carousel: { ...defaultCarousel, ...carousel },
+        animation: { ...defaultAnimation, ...animation },
+        render: { ...defaultRender, ...render },
+        toolbar: { ...defaultToolbar, ...toolbar },
+        controller: { ...defaultController, ...controller },
+        on: { ...defaultOn, ...on },
+        ...restDefaultProps,
+        ...restProps,
+    });
     if (!augmentedProps.open)
@@ -28,6 +38,1 @@ return null;
 };
-export const Lightbox = (props) => {
-    const { carousel, animation, render, toolbar, controller, on, ...restProps } = props;
-    const { carousel: defaultCarousel, animation: defaultAnimation, render: defaultRender, toolbar: defaultToolbar, controller: defaultController, on: defaultOn, ...restDefaultProps } = LightboxDefaultProps;
-    return (React.createElement(LightboxComponent, { carousel: { ...defaultCarousel, ...carousel }, animation: { ...defaultAnimation, ...animation }, render: { ...defaultRender, ...render }, toolbar: { ...defaultToolbar, ...toolbar }, controller: { ...defaultController, ...controller }, on: { ...defaultOn, ...on }, ...restDefaultProps, ...restProps }));
-};

dist/plugins/Inline.js

@@ -6,3 +6,3 @@ import * as React from "react";
 export const Inline = ({ augment, replace, remove }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, ...restController }, ...restProps }) => ({
+    augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, touchAction, ...restController }, ...restProps }) => ({
         open: true,
@@ -15,3 +15,3 @@ close: () => { },
         inline: { style: { width: "100%", height: "100%" } },
-        controller: { focus: false, ...restController },
+        controller: { focus: false, touchAction: "pan-y", ...restController },
         ...restProps,
@@ -18,0 +18,0 @@ }));

dist/types.d.ts

@@ -36,6 +36,6 @@ import * as React from "react";
     preload: number;
-    /** padding around each slide */
-    padding: string | number;
+    /** padding around each slide (e.g., "16px", "10px 20px" or 0) */
+    padding: string | 0;
     /** spacing between slides (e.g., "100px", "50%" or 0) */
-    spacing: string | number;
+    spacing: string | 0;
     /** `object-fit` setting for image slides */
@@ -55,2 +55,4 @@ imageFit: ImageFit;
     focus: boolean;
+    /** controller `touch-action` */
+    touchAction: "none" | "pan-y";
 }
@@ -57,0 +59,0 @@ /** Custom render functions. */

dist/types.js

@@ -23,4 +23,5 @@ export const LightboxDefaultProps = {
         focus: true,
+        touchAction: "none",
     },
     on: {},
 };

package.json

 {
     "name": "yet-another-react-lightbox",
-    "version": "1.7.0",
+    "version": "1.7.1",
     "description": "Modern React lightbox component",
@@ -90,3 +90,3 @@ "author": "Igor Danchenko",
         "@types/jest": "^28.1.1",
-        "@types/react": "^18.0.12",
+        "@types/react": "^18.0.13",
         "@types/react-dom": "^18.0.5",
@@ -108,7 +108,7 @@ "@typescript-eslint/eslint-plugin": "^5.28.0",
         "jest-environment-jsdom": "^28.1.1",
-        "lint-staged": "^13.0.1",
+        "lint-staged": "^13.0.2",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.14",
         "postcss-cli": "^9.1.0",
-        "prettier": "^2.7.0",
+        "prettier": "^2.7.1",
         "react": "^18.2.0",
@@ -115,0 +115,0 @@ "react-dom": "^18.2.0",

No alert changes

Improved metrics

Total package byte prevSize

101506

increased by0.46%

Lines of code

2168

increased by0.7%

No dependency changes