From b7eab8caf287cb4979dd7f63d9c1abc708ce9ccb Mon Sep 17 00:00:00 2001 From: Igor Danchenko <64441155+igordanchenko@users.noreply.github.com> Date: Fri, 29 Apr 2022 09:46:12 -0400 Subject: [PATCH] fix: add safeguards against invalid responsive parameters --- package-lock.json | 52 ++++++++++++++++++++--------------------- package.json | 4 ++-- src/PhotoAlbum.tsx | 7 +++--- src/utils/responsive.ts | 5 ++-- 4 files changed, 34 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7bf998a6..73fad2e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,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", @@ -38,7 +38,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" }, "engines": { "node": ">=12" @@ -1603,9 +1603,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.29.tgz", - "integrity": "sha512-tx5jMmMFwx7wBwq/V7OohKDVb/JwJU5qCVkeLMh1//xycAJ/ESuw9aJ9SEtlCZDYi2pBfe4JkisSoAtbOsBNAA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.30.tgz", + "integrity": "sha512-oNBIZjIqyHYP8VCNAV9uEytXVeXG2oR0w9lgAXro20eugRQfY002qr3CUl6BAe+Yf/z3CRjPdz27Pu6WWtuSRw==", "dev": true }, "node_modules/@types/normalize-package-data": { @@ -1644,9 +1644,9 @@ } }, "node_modules/@types/react-dom": { - "version": "18.0.0", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz", - "integrity": "sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==", + "version": "18.0.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.3.tgz", + "integrity": "sha512-1RRW9kst+67gveJRYPxGmVy8eVJ05O43hg77G2j5m76/RFJtMbcfAs2viQ2UNsvvDg8F7OfQZx8qQcl6ymygaQ==", "dev": true, "dependencies": { "@types/react": "*" @@ -3018,9 +3018,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.124", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.124.tgz", - "integrity": "sha512-VhaE9VUYU6d2eIb+4xf83CATD+T+3bTzvxvlADkQE+c2hisiw3sZmvEDtsW704+Zky9WZGhBuQXijDVqSriQLA==", + "version": "1.4.127", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.127.tgz", + "integrity": "sha512-nhD6S8nKI0O2MueC6blNOEZio+/PWppE/pevnf3LOlQA/fKPCrDp2Ao4wx4LFwmIkJpVdFdn2763YWLy9ENIZg==", "dev": true }, "node_modules/emittery": { @@ -7833,9 +7833,9 @@ } }, "node_modules/typescript": { - "version": "4.6.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz", - "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==", + "version": "4.6.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz", + "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -9492,9 +9492,9 @@ "dev": true }, "@types/node": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.29.tgz", - "integrity": "sha512-tx5jMmMFwx7wBwq/V7OohKDVb/JwJU5qCVkeLMh1//xycAJ/ESuw9aJ9SEtlCZDYi2pBfe4JkisSoAtbOsBNAA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.30.tgz", + "integrity": "sha512-oNBIZjIqyHYP8VCNAV9uEytXVeXG2oR0w9lgAXro20eugRQfY002qr3CUl6BAe+Yf/z3CRjPdz27Pu6WWtuSRw==", "dev": true }, "@types/normalize-package-data": { @@ -9533,9 +9533,9 @@ } }, "@types/react-dom": { - "version": "18.0.0", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz", - "integrity": "sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==", + "version": "18.0.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.3.tgz", + "integrity": "sha512-1RRW9kst+67gveJRYPxGmVy8eVJ05O43hg77G2j5m76/RFJtMbcfAs2viQ2UNsvvDg8F7OfQZx8qQcl6ymygaQ==", "dev": true, "requires": { "@types/react": "*" @@ -10543,9 +10543,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.4.124", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.124.tgz", - "integrity": "sha512-VhaE9VUYU6d2eIb+4xf83CATD+T+3bTzvxvlADkQE+c2hisiw3sZmvEDtsW704+Zky9WZGhBuQXijDVqSriQLA==", + "version": "1.4.127", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.127.tgz", + "integrity": "sha512-nhD6S8nKI0O2MueC6blNOEZio+/PWppE/pevnf3LOlQA/fKPCrDp2Ao4wx4LFwmIkJpVdFdn2763YWLy9ENIZg==", "dev": true }, "emittery": { @@ -14100,9 +14100,9 @@ } }, "typescript": { - "version": "4.6.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz", - "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==", + "version": "4.6.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz", + "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==", "dev": true }, "unbox-primitive": { diff --git a/package.json b/package.json index f0980557..1968fbf5 100644 --- 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 index 4a621933..e9a135b6 100644 --- a/src/PhotoAlbum.tsx +++ b/src/PhotoAlbum.tsx @@ -35,7 +35,7 @@ const resolveLayoutOptions = ({ 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 = ({ 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 = (props: PhotoAlbumProps): JSX.Element => { const { diff --git a/src/utils/responsive.ts b/src/utils/responsive.ts index da5e9b05..59dfa75d 100644 --- 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;