fix: safeguard against invalid index prop (fix #216)

igordanchenko · Dec 2, 2023 · 92df07a · 92df07a
1 parent 32a7a50
commit 92df07a
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -179,7 +179,7 @@
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/react": "^18.2.39",
+    "@types/react": "^18.2.40",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
@@ -189,10 +189,10 @@
     "autoprefixer": "^10.4.16",
     "chokidar": "^3.5.3",
     "cssnano": "^6.0.1",
-    "eslint": "^8.54.0",
+    "eslint": "^8.55.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.0.1",
@@ -204,7 +204,7 @@
     "jsdom": "^23.0.1",
     "lint-staged": "^15.1.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "postcss-cli": "^10.1.0",
     "prettier": "^3.1.0",
     "react": "^18.2.0",

diff --git a/src/Lightbox.tsx b/src/Lightbox.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import { AnimationSettings, ComponentProps, LightboxExternalProps, Node } from "./types.js";
+import { parseInt } from "./utils.js";
 import { LightboxDefaultProps } from "./props.js";
 import { createNode, withPlugins } from "./config.js";
 import { EventsProvider, LightboxPropsProvider, LightboxStateProvider, TimeoutsProvider } from "./contexts/index.js";
@@ -91,7 +92,11 @@ export function Lightbox({
 
   return (
     <LightboxPropsProvider {...props}>
-      <LightboxStateProvider slides={slides || defaultSlides} index={index || defaultIndex}>
+      <LightboxStateProvider
+        slides={slides || defaultSlides}
+        // safeguard against invalid `index` prop
+        index={parseInt(index || defaultIndex)}
+      >
         <TimeoutsProvider>
           <EventsProvider>{renderNode(createNode(RootModule, config), props)}</EventsProvider>
         </TimeoutsProvider>

diff --git a/src/hooks/useAnimation.ts b/src/hooks/useAnimation.ts
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import { parseInt } from "../utils.js";
 import { useLayoutEffect } from "./useLayoutEffect.js";
 import { useMotionPreference } from "./useMotionPreference.js";
 
@@ -11,7 +12,7 @@ function currentTransformation(node: HTMLElement) {
   const matrix = window.getComputedStyle(node).transform;
   const matcher = matrix.match(/matrix.*\((.+)\)/);
   if (matcher) {
-    const values = matcher[1].split(",").map((str) => Number.parseInt(str, 10));
+    const values = matcher[1].split(",").map(parseInt);
     if (values.length === 6) {
       x = values[4];
       y = values[5];

diff --git a/src/modules/NoScroll.tsx b/src/modules/NoScroll.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { ComponentProps } from "../types.js";
 import { createModule } from "../config.js";
-import { cssClass } from "../utils.js";
+import { cssClass, parseInt } from "../utils.js";
 import { useLayoutEffect, useRTL } from "../hooks/index.js";
 import { CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, MODULE_NO_SCROLL } from "../consts.js";
 
@@ -19,7 +19,7 @@ function padScrollbar(element: HTMLElement, padding: number, rtl: boolean) {
   const computedValue = rtl ? styles.paddingLeft : styles.paddingRight;
   const originalValue = element.style.getPropertyValue(property);
 
-  element.style.setProperty(property, `${(parseInt(computedValue, 10) || 0) + padding}px`);
+  element.style.setProperty(property, `${(parseInt(computedValue) || 0) + padding}px`);
 
   return () => {
     if (originalValue) {

diff --git a/src/utils.ts b/src/utils.ts
@@ -56,14 +56,18 @@ export const isImageSlide = (slide: Slide): slide is SlideImage => slide.type ==
 export const isImageFitCover = (image: SlideImage, imageFit?: LightboxProps["carousel"]["imageFit"]) =>
   image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
 
+export function parseInt(value: string | number) {
+  return typeof value === "string" ? Number.parseInt(value, 10) : value;
+}
+
 export function parseLengthPercentage(input: LengthOrPercentage) {
   if (typeof input === "number") {
     return { pixel: input };
   }
 
   // noinspection SuspiciousTypeOfGuard
   if (typeof input === "string") {
-    const value = parseInt(input, 10);
+    const value = parseInt(input);
     return input.endsWith("%") ? { percent: value } : { pixel: value };
   }