fix: add safeguards against invalid responsive parameters

igordanchenko · May 3, 2022 · b7eab8c · b7eab8c
1 parent c81483e
commit b7eab8c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
         "@testing-library/react": "^13.1.1",
         "@types/jest": "^27.4.1",
         "@types/react": "^18.0.8",
-        "@types/react-dom": "^18.0.0",
+        "@types/react-dom": "^18.0.3",
         "@types/react-test-renderer": "^18.0.0",
         "@typescript-eslint/eslint-plugin": "^5.21.0",
         "@typescript-eslint/parser": "^5.21.0",
@@ -67,7 +67,7 @@
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-typescript2": "^0.31.2",
         "ts-jest": "^27.1.4",
-        "typescript": "^4.6.3"
+        "typescript": "^4.6.4"
     },
     "keywords": [
         "react photo album",

diff --git a/src/PhotoAlbum.tsx b/src/PhotoAlbum.tsx
@@ -35,7 +35,7 @@ const resolveLayoutOptions = <T extends Photo>({
     onClick,
     viewportWidth,
     containerWidth,
-    columns: resolveResponsiveParameter(columns, containerWidth, [5, 4, 3, 2]),
+    columns: resolveResponsiveParameter(columns, containerWidth, [5, 4, 3, 2], 1),
     spacing: resolveResponsiveParameter(spacing, containerWidth, [20, 15, 10, 5]),
     padding: resolveResponsiveParameter(padding, containerWidth, [0, 0, 0, 0, 0]),
     targetRowHeight: resolveResponsiveParameter(targetRowHeight, containerWidth, [
@@ -48,9 +48,8 @@ const resolveLayoutOptions = <T extends Photo>({
     rowConstraints,
 });
 
-const resolveComponentsProps = (componentsProps: ComponentsPropsParameter | undefined, containerWidth: number) => {
-    return typeof componentsProps === "function" ? componentsProps(containerWidth) : componentsProps;
-};
+const resolveComponentsProps = (componentsProps: ComponentsPropsParameter | undefined, containerWidth: number) =>
+    typeof componentsProps === "function" ? componentsProps(containerWidth) : componentsProps;
 
 const PhotoAlbum = <T extends Photo>(props: PhotoAlbumProps<T>): JSX.Element => {
     const {

diff --git a/src/utils/responsive.ts b/src/utils/responsive.ts
@@ -16,10 +16,11 @@ const selectResponsiveValue = (values: ResponsiveParameter[], containerWidth: nu
 const resolveResponsiveParameter = (
     parameter: ResponsiveParameter | undefined,
     containerWidth: number,
-    values: ResponsiveParameter[]
+    values: ResponsiveParameter[],
+    minValue = 0
 ): number => {
     const value = unwrapParameter(parameter, containerWidth);
-    return value === undefined ? selectResponsiveValue(values, containerWidth) : value;
+    return Math.round(Math.max(value === undefined ? selectResponsiveValue(values, containerWidth) : value, minValue));
 };
 
 export default resolveResponsiveParameter;