From fdeef6bd8355de80ea8cdb1cb334a4228819d4d2 Mon Sep 17 00:00:00 2001 From: Caspian Date: Mon, 4 Dec 2023 20:10:30 +0000 Subject: [PATCH] fix: re-calculate when window size changed in browser fix #490 --- .changeset/hungry-actors-grab.md | 5 + example/app/package.json | 3 +- example/app/src/Home.tsx | 24 ---- example/app/src/pages/normal/index.tsx | 7 +- .../src/pages/snap-carousel-complex/index.tsx | 81 ------------ .../src/pages/snap-carousel-loop/index.tsx | 53 -------- example/expo/package.json | 4 +- example/expo/yarn.lock | 123 +----------------- package.json | 1 - src/hooks/useCommonVariables.test.tsx | 41 ++++++ src/hooks/useCommonVariables.ts | 34 ++++- .../compute-offset-if-data-changed.test.ts | 30 +++++ ...s.ts => compute-offset-if-data-changed.ts} | 2 +- .../compute-offset-if-size-changed.test.ts | 78 +++++++++++ src/utils/compute-offset-if-size-changed.ts | 11 ++ src/utils/index.test.ts | 12 +- yarn.lock | 13 +- 17 files changed, 215 insertions(+), 307 deletions(-) create mode 100644 .changeset/hungry-actors-grab.md delete mode 100644 example/app/src/pages/snap-carousel-complex/index.tsx delete mode 100644 example/app/src/pages/snap-carousel-loop/index.tsx create mode 100644 src/hooks/useCommonVariables.test.tsx create mode 100644 src/utils/compute-offset-if-data-changed.test.ts rename src/utils/{computeNewIndexWhenDataChanges.ts => compute-offset-if-data-changed.ts} (95%) create mode 100644 src/utils/compute-offset-if-size-changed.test.ts create mode 100644 src/utils/compute-offset-if-size-changed.ts diff --git a/.changeset/hungry-actors-grab.md b/.changeset/hungry-actors-grab.md new file mode 100644 index 00000000..0f81b905 --- /dev/null +++ b/.changeset/hungry-actors-grab.md @@ -0,0 +1,5 @@ +--- +'react-native-reanimated-carousel': patch +--- + +re-calculate when window size changed in browser. diff --git a/example/app/package.json b/example/app/package.json index a9279ce8..9d39e02c 100644 --- a/example/app/package.json +++ b/example/app/package.json @@ -22,7 +22,6 @@ "react-native-gesture-handler": "~2.12.0", "react-native-reanimated": "~3.3.0", "react-native-safe-area-context": "4.6.3", - "react-native-screens": "~3.22.0", - "react-native-snap-carousel": "^3.9.1" + "react-native-screens": "~3.22.0" } } diff --git a/example/app/src/Home.tsx b/example/app/src/Home.tsx index b09b30b6..5813a0d1 100644 --- a/example/app/src/Home.tsx +++ b/example/app/src/Home.tsx @@ -35,7 +35,6 @@ import ScaleFadeInOutComponent from "./pages/scale-fade-in-out"; import StackComponent from "./pages/stack"; import StackCards from "./pages/stack-cards"; import Tear from "./pages/tear"; -import { isAndroid, isIos } from "./utils"; import { useWebContext } from "./store/WebProvider"; import { convertName } from "./utils/helpers"; import { useColor } from "./hooks/useColor"; @@ -146,29 +145,6 @@ export const ExperimentPage = [ }, ]; -if (isIos || isAndroid) { - // Not support to WEB (react-native-snap-carousel) - const SnapCarouselComplexComponent = React.lazy( - () => import("./pages/snap-carousel-complex"), - ); - const SnapCarouselLoopComponent = React.lazy( - () => import("./pages/snap-carousel-loop"), - ); - - ExperimentPage.push( - { - name: "snap-carousel-complex", - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - page: SnapCarouselComplexComponent, - }, - { - name: "snap-carousel-loop", - page: SnapCarouselLoopComponent, - }, - ); -} - const ListItem = ({ name, onPress, color }: { name: string; onPress: () => void; color: string }) => ( diff --git a/example/app/src/pages/normal/index.tsx b/example/app/src/pages/normal/index.tsx index f93f1c67..7c78a82f 100644 --- a/example/app/src/pages/normal/index.tsx +++ b/example/app/src/pages/normal/index.tsx @@ -7,10 +7,13 @@ import { SafeAreaView } from "react-native-safe-area-context"; import { SBItem } from "../../components/SBItem"; import SButton from "../../components/SButton"; import { ElementsText, window } from "../../constants"; +import { useWindowDimensions } from "react-native"; const PAGE_WIDTH = window.width; function Index() { + const windowWidth = useWindowDimensions().width; + const [data, setData] = React.useState([...new Array(4).keys()]); const [isVertical, setIsVertical] = React.useState(false); const [isFast, setIsFast] = React.useState(false); @@ -21,12 +24,12 @@ function Index() { const baseOptions = isVertical ? ({ vertical: true, - width: PAGE_WIDTH, + width: windowWidth, height: PAGE_WIDTH / 2, } as const) : ({ vertical: false, - width: PAGE_WIDTH, + width: windowWidth, height: PAGE_WIDTH / 2, } as const); diff --git a/example/app/src/pages/snap-carousel-complex/index.tsx b/example/app/src/pages/snap-carousel-complex/index.tsx deleted file mode 100644 index 99140cc4..00000000 --- a/example/app/src/pages/snap-carousel-complex/index.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import * as React from "react"; -import { ScrollView, Text, View } from "react-native"; -import Carousel from "react-native-snap-carousel"; - -import SButton from "../../components/SButton"; -import { window } from "../../constants"; - -const PAGE_WIDTH = window.width; - -function Index() { - const r = React.useRef>(null); - - return ( - - - ( - - - {`index:${index}`} - - - {new Array(100).fill(0).map((_, i) => { - return ( - - {i} - - ); - })} - - - )} - /> - - - r.current?.snapToPrev()}> - {"Prev"} - - r.current?.snapToNext()}> - {"Next"} - - - - ); -} - -export default Index; diff --git a/example/app/src/pages/snap-carousel-loop/index.tsx b/example/app/src/pages/snap-carousel-loop/index.tsx deleted file mode 100644 index f9371b30..00000000 --- a/example/app/src/pages/snap-carousel-loop/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from "react"; -import { View } from "react-native"; -import Carousel from "react-native-snap-carousel"; - -import { SBItem } from "../../components/SBItem"; -import SButton from "../../components/SButton"; -import { window } from "../../constants"; - -const PAGE_WIDTH = window.width; - -function Index() { - const r = React.useRef>(null); - - return ( - - - - ref={r} - loop - itemWidth={PAGE_WIDTH} - sliderWidth={PAGE_WIDTH} - data={[...new Array(6).keys()]} - windowSize={3} - renderItem={({ index }: { index: number }) => ( - - )} - /> - - - r.current?.snapToPrev()}> - {"Prev"} - - r.current?.snapToNext()}> - {"Next"} - - - - ); -} - -export default Index; diff --git a/example/expo/package.json b/example/expo/package.json index 05bd9d86..b81f7e59 100644 --- a/example/expo/package.json +++ b/example/expo/package.json @@ -39,8 +39,7 @@ "react-native-gesture-handler": "~2.12.0", "react-native-reanimated": "~3.3.0", "react-native-safe-area-context": "4.6.3", - "react-native-screens": "~3.22.0", - "react-native-snap-carousel": "^3.9.1" + "react-native-screens": "~3.22.0" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -50,7 +49,6 @@ "@testing-library/jest-native": "^5.4.1", "@testing-library/react-native": "^11.5.0", "@types/react": "~18.2.14", - "@types/react-native-snap-carousel": "^3.8.5", "babel-plugin-import-glob": "^2.0.0", "babel-plugin-module-resolver": "^4.1.0", "gh-pages": "^3.2.3", diff --git a/example/expo/yarn.lock b/example/expo/yarn.lock index d4144d22..8343fa64 100644 --- a/example/expo/yarn.lock +++ b/example/expo/yarn.lock @@ -3462,25 +3462,6 @@ __metadata: languageName: node linkType: hard -"@types/react-native-snap-carousel@npm:^3.8.5": - version: 3.8.5 - resolution: "@types/react-native-snap-carousel@npm:3.8.5" - dependencies: - "@types/react": "*" - "@types/react-native": "*" - checksum: 8f512436017d0efe95c4cedc2ca5a2ebb27ee4056b04555e0e3889ab170abcddb232ef4ce18ef01ddc2c2710a27db2aaf4a6a7375607bfd61bfd00d7d42fbeef - languageName: node - linkType: hard - -"@types/react-native@npm:0.67.7": - version: 0.67.7 - resolution: "@types/react-native@npm:0.67.7" - dependencies: - "@types/react": "*" - checksum: 28f5bdfb4463e5cbcbaa842674ae0b4640bf1f829a6dc650d879e4e7d326b9dd9146e18ce82264289a6a22b4f844746ccba95c3c2e9daf49d5a0548f1741695b - languageName: node - linkType: hard - "@types/react@npm:~18.2.14": version: 18.2.41 resolution: "@types/react@npm:18.2.41" @@ -4310,20 +4291,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-inline-dotenv@npm:^1.6.0": - version: 1.7.0 - resolution: "babel-plugin-inline-dotenv@npm:1.7.0" - dependencies: - dotenv: ^16.0.0 - peerDependencies: - dotenv-expand: ">= 5.0.0" - peerDependenciesMeta: - dotenv-expand: - optional: true - checksum: 1203b100b84d247a0db5d1f2565f452e1afa3f747e5ad872ddbf3533b49ec2173ba2c99d22c05fa902914da8de331fbc714132c2eda7b0a2a26fa909dbb10a67 - languageName: node - linkType: hard - "babel-plugin-istanbul@npm:^6.1.1": version: 6.1.1 resolution: "babel-plugin-istanbul@npm:6.1.1" @@ -5451,13 +5418,6 @@ __metadata: languageName: node linkType: hard -"core-js@npm:^1.0.0": - version: 1.2.7 - resolution: "core-js@npm:1.2.7" - checksum: 0b76371bfa98708351cde580f9287e2360d2209920e738ae950ae74ad08639a2e063541020bf666c28778956fc356ed9fe56d962129c88a87a6a4a0612526c75 - languageName: node - linkType: hard - "core-js@npm:^2.4.0": version: 2.6.12 resolution: "core-js@npm:2.6.12" @@ -6075,13 +6035,6 @@ __metadata: languageName: node linkType: hard -"dotenv@npm:^16.0.0": - version: 16.3.1 - resolution: "dotenv@npm:16.3.1" - checksum: 15d75e7279018f4bafd0ee9706593dd14455ddb71b3bcba9c52574460b7ccaf67d5cf8b2c08a5af1a9da6db36c956a04a1192b101ee102a3e0cf8817bbcf3dfd - languageName: node - linkType: hard - "dotenv@npm:~16.0.3": version: 16.0.3 resolution: "dotenv@npm:16.0.3" @@ -6152,7 +6105,7 @@ __metadata: languageName: node linkType: hard -"encoding@npm:^0.1.11, encoding@npm:^0.1.13": +"encoding@npm:^0.1.13": version: 0.1.13 resolution: "encoding@npm:0.1.13" dependencies: @@ -6819,21 +6772,6 @@ __metadata: languageName: node linkType: hard -"fbjs@npm:^0.8.4": - version: 0.8.18 - resolution: "fbjs@npm:0.8.18" - dependencies: - core-js: ^1.0.0 - isomorphic-fetch: ^2.1.1 - loose-envify: ^1.0.0 - object-assign: ^4.1.0 - promise: ^7.1.1 - setimmediate: ^1.0.5 - ua-parser-js: ^0.7.30 - checksum: 668731b946a765908c9cbe51d5160f973abb78004b3d122587c3e930e3e1ddcc0ce2b17f2a8637dc9d733e149aa580f8d3035a35cc2d3bc78b78f1b19aab90e2 - languageName: node - linkType: hard - "fbjs@npm:^3.0.0, fbjs@npm:^3.0.4": version: 3.0.5 resolution: "fbjs@npm:3.0.5" @@ -8130,7 +8068,7 @@ __metadata: languageName: node linkType: hard -"is-stream@npm:^1.0.1, is-stream@npm:^1.1.0": +"is-stream@npm:^1.1.0": version: 1.1.0 resolution: "is-stream@npm:1.1.0" checksum: 063c6bec9d5647aa6d42108d4c59723d2bd4ae42135a2d4db6eadbd49b7ea05b750fd69d279e5c7c45cf9da753ad2c00d8978be354d65aa9f6bb434969c6a2ae @@ -8204,16 +8142,6 @@ __metadata: languageName: node linkType: hard -"isomorphic-fetch@npm:^2.1.1": - version: 2.2.1 - resolution: "isomorphic-fetch@npm:2.2.1" - dependencies: - node-fetch: ^1.0.1 - whatwg-fetch: ">=0.10.0" - checksum: bb5daa7c3785d6742f4379a81e55b549a469503f7c9bf9411b48592e86632cf5e8fe8ea878dba185c0f33eb7c510c23abdeb55aebfdf5d3c70f031ced68c5424 - languageName: node - linkType: hard - "istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0": version: 3.2.0 resolution: "istanbul-lib-coverage@npm:3.2.0" @@ -10321,16 +10249,6 @@ __metadata: languageName: node linkType: hard -"node-fetch@npm:^1.0.1": - version: 1.7.3 - resolution: "node-fetch@npm:1.7.3" - dependencies: - encoding: ^0.1.11 - is-stream: ^1.0.1 - checksum: 3bb0528c05d541316ebe52770d71ee25a6dce334df4231fd55df41a644143e07f068637488c18a5b0c43f05041dbd3346752f9e19b50df50569a802484544d5b - languageName: node - linkType: hard - "node-fetch@npm:^2.2.0, node-fetch@npm:^2.6.0, node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.12, node-fetch@npm:^2.6.7": version: 2.6.12 resolution: "node-fetch@npm:2.6.12" @@ -11468,7 +11386,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:*, prop-types@npm:^15.6.1, prop-types@npm:^15.7.2": +"prop-types@npm:*, prop-types@npm:^15.7.2": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -11634,16 +11552,6 @@ __metadata: languageName: node linkType: hard -"react-addons-shallow-compare@npm:15.6.2": - version: 15.6.2 - resolution: "react-addons-shallow-compare@npm:15.6.2" - dependencies: - fbjs: ^0.8.4 - object-assign: ^4.1.0 - checksum: cfe94358c6103f8434b91969a2a1876d3e76df227f0be9bf58c11a1bdec01500475eb09ca7ddd9d98519a14c18f91fbd11127adfdd092c4f3c5b234b638c4802 - languageName: node - linkType: hard - "react-devtools-core@npm:^4.27.2": version: 4.28.0 resolution: "react-devtools-core@npm:4.28.0" @@ -11734,9 +11642,7 @@ __metadata: "@testing-library/jest-native": ^5.4.1 "@testing-library/react-native": ^11.5.0 "@types/react": ~18.2.14 - "@types/react-native-snap-carousel": ^3.8.5 babel-plugin-import-glob: ^2.0.0 - babel-plugin-inline-dotenv: ^1.6.0 babel-plugin-module-resolver: ^4.1.0 expo: ^49.0.21 expo-blur: ~12.4.1 @@ -11754,7 +11660,6 @@ __metadata: react-native-reanimated: ~3.3.0 react-native-safe-area-context: 4.6.3 react-native-screens: ~3.22.0 - react-native-snap-carousel: ^3.9.1 react-native-web: ~0.19.6 typescript: ^5.1.3 languageName: unknown @@ -11804,19 +11709,6 @@ __metadata: languageName: node linkType: hard -"react-native-snap-carousel@npm:^3.9.1": - version: 3.9.1 - resolution: "react-native-snap-carousel@npm:3.9.1" - dependencies: - prop-types: ^15.6.1 - react-addons-shallow-compare: 15.6.2 - peerDependencies: - react: ">=15.0.0" - react-native: "*" - checksum: e71f6887ba8e86b4aea6d6a88c304135a7acbb5ef9173b78018fc0e6d9965da9ec1d7c794db31282dc85892c6ca89f398d07145ab3e7d1e28cf12a09c247bb9d - languageName: node - linkType: hard - "react-native-web@npm:~0.19.6": version: 0.19.6 resolution: "react-native-web@npm:0.19.6" @@ -13620,13 +13512,6 @@ __metadata: languageName: node linkType: hard -"ua-parser-js@npm:^0.7.30": - version: 0.7.35 - resolution: "ua-parser-js@npm:0.7.35" - checksum: 0a332e8d72d277e62f29ecb3a33843b274de93eb9378350b746ea0f89ef05ee09c94f2c1fdab8001373ad5e95a48beb0a94f39dc1670c908db9fc9b8f0876204 - languageName: node - linkType: hard - "ua-parser-js@npm:^1.0.35": version: 1.0.35 resolution: "ua-parser-js@npm:1.0.35" @@ -14145,7 +14030,7 @@ __metadata: languageName: node linkType: hard -"whatwg-fetch@npm:>=0.10.0, whatwg-fetch@npm:^3.0.0": +"whatwg-fetch@npm:^3.0.0": version: 3.6.2 resolution: "whatwg-fetch@npm:3.6.2" checksum: ee976b7249e7791edb0d0a62cd806b29006ad7ec3a3d89145921ad8c00a3a67e4be8f3fb3ec6bc7b58498724fd568d11aeeeea1f7827e7e1e5eae6c8a275afed diff --git a/package.json b/package.json index 55d97782..6c38a25e 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,6 @@ "@types/jest": "^29.2.5", "@types/react": "^18.2.15", "@types/react-native": "^0.66.16", - "@types/react-native-snap-carousel": "^3.8.5", "@types/react-test-renderer": "^18.0.7", "babel-plugin-module-resolver": "^4.1.0", "commitlint": "^11.0.0", diff --git a/src/hooks/useCommonVariables.test.tsx b/src/hooks/useCommonVariables.test.tsx new file mode 100644 index 00000000..83b824ba --- /dev/null +++ b/src/hooks/useCommonVariables.test.tsx @@ -0,0 +1,41 @@ +import { renderHook } from "@testing-library/react-hooks"; + +import { useCommonVariables } from "./useCommonVariables"; + +type UseCommonVariablesInput = Parameters[0]; + +const input = { + vertical: false, + width: 700, + height: 350, + loop: true, + enabled: true, + testID: "xxx", + style: { + width: "100%", + }, + autoPlay: false, + autoPlayInterval: 2000, + data: [0, 1, 2, 3], + pagingEnabled: true, + defaultIndex: 0, + autoFillData: true, + dataLength: 4, + rawData: [0, 1, 2, 3], + rawDataLength: 4, + scrollAnimationDuration: 500, + snapEnabled: true, + overscrollEnabled: true, +} as unknown as UseCommonVariablesInput; + +describe("useCommonVariables", () => { + it("should return the correct values", async () => { + const hook = renderHook(() => useCommonVariables(input)); + + expect(hook.result.current.size).toMatchInlineSnapshot("700"); + expect(hook.result.current.validLength).toMatchInlineSnapshot("3"); + expect(hook.result.current.handlerOffset.value).toMatchInlineSnapshot( + "-0", + ); + }); +}); diff --git a/src/hooks/useCommonVariables.ts b/src/hooks/useCommonVariables.ts index 7211ee6d..518a6532 100644 --- a/src/hooks/useCommonVariables.ts +++ b/src/hooks/useCommonVariables.ts @@ -3,7 +3,8 @@ import { useSharedValue, useAnimatedReaction } from "react-native-reanimated"; import type { TInitializeCarouselProps } from "./useInitProps"; -import { computeNewIndexWhenDataChanges } from "../utils/computeNewIndexWhenDataChanges"; +import { computeOffsetIfDataChanged } from "../utils/compute-offset-if-data-changed"; +import { computeOffsetIfSizeChanged } from "../utils/compute-offset-if-size-changed"; import { handlerOffsetDirection } from "../utils/handleroffset-direction"; interface ICommonVariables { @@ -29,6 +30,7 @@ export function useCommonVariables( const _handlerOffset = useSharedValue(defaultHandlerOffsetValue); const handlerOffset = defaultScrollOffsetValue ?? _handlerOffset; const prevDataLength = useSharedValue(dataLength); + const prevSize = useSharedValue(size); /** * When data changes, we need to compute new index for handlerOffset @@ -37,7 +39,7 @@ export function useCommonVariables( const previousLength = prevDataLength.value; const currentLength = dataLength; const isLengthChanged = previousLength !== currentLength; - const shouldComputed = isLengthChanged && loop; + const shouldComputed = (isLengthChanged && loop); if (shouldComputed) prevDataLength.value = dataLength; @@ -52,7 +54,7 @@ export function useCommonVariables( // direction -> 1 | -1 const direction = handlerOffsetDirection(handlerOffset); - handlerOffset.value = computeNewIndexWhenDataChanges({ + handlerOffset.value = computeOffsetIfDataChanged({ direction, previousLength, currentLength, @@ -62,6 +64,32 @@ export function useCommonVariables( } }, [dataLength, loop]); + /** + * When size changes, we need to compute new index for handlerOffset + */ + useAnimatedReaction(() => { + const previousSize = prevSize.value; + const isSizeChanged = previousSize !== size; + const shouldComputed = isSizeChanged; + + if (shouldComputed) + prevSize.value = size; + + return { + shouldComputed, + previousSize, + size, + }; + }, ({ shouldComputed, previousSize, size }) => { + if (shouldComputed) { + handlerOffset.value = computeOffsetIfSizeChanged({ + handlerOffset: handlerOffset.value, + prevSize: previousSize, + size, + }); + } + }, [size]); + return { size, validLength: dataLength - 1, diff --git a/src/utils/compute-offset-if-data-changed.test.ts b/src/utils/compute-offset-if-data-changed.test.ts new file mode 100644 index 00000000..db98a0a2 --- /dev/null +++ b/src/utils/compute-offset-if-data-changed.test.ts @@ -0,0 +1,30 @@ +import { computeOffsetIfDataChanged } from "./compute-offset-if-data-changed"; + +describe("computeOffsetIfDataChanged", () => { + const size = 634; + it("should return the correct values, if index is 0", () => { + const index = 0; + const result = computeOffsetIfDataChanged({ + direction: -1, + previousLength: 4, + currentLength: 6, + size, + handlerOffset: index * size, + }); + + expect(result).toMatchInlineSnapshot("0"); + }); + + it("should return the correct values, if index is 1", () => { + const index = 1; + const result = computeOffsetIfDataChanged({ + direction: -1, + previousLength: 4, + currentLength: 6, + size, + handlerOffset: index * size, + }); + + expect(result).toMatchInlineSnapshot("634"); + }); +}); diff --git a/src/utils/computeNewIndexWhenDataChanges.ts b/src/utils/compute-offset-if-data-changed.ts similarity index 95% rename from src/utils/computeNewIndexWhenDataChanges.ts rename to src/utils/compute-offset-if-data-changed.ts index 62f05a32..04db2060 100644 --- a/src/utils/computeNewIndexWhenDataChanges.ts +++ b/src/utils/compute-offset-if-data-changed.ts @@ -6,7 +6,7 @@ export function omitZero(a: number, b: number) { return b; } -export function computeNewIndexWhenDataChanges(params: { +export function computeOffsetIfDataChanged(params: { direction: number handlerOffset: number size: number diff --git a/src/utils/compute-offset-if-size-changed.test.ts b/src/utils/compute-offset-if-size-changed.test.ts new file mode 100644 index 00000000..42540263 --- /dev/null +++ b/src/utils/compute-offset-if-size-changed.test.ts @@ -0,0 +1,78 @@ +import { computeOffsetIfSizeChanged } from "./compute-offset-if-size-changed"; + +describe("computeOffsetIfSizeChanged", () => { + it("[CASE 1] should return the correct values when size does not change", () => { + const prevIndex = 1; + const prevSize = 500; + const size = 500; + const handlerOffset = prevIndex * size; + const result = computeOffsetIfSizeChanged({ + prevSize, + size, + handlerOffset, + }); + + const finallyIndex = result / size; + expect(finallyIndex).toEqual(prevIndex); + }); + + it("[CASE 2] should return the correct values when size changes from 500 to 400", () => { + const prevIndex = 1; + const prevSize = 500; + const size = 400; + const handlerOffset = prevIndex * prevSize; + const result = computeOffsetIfSizeChanged({ + prevSize, + size, + handlerOffset, + }); + + const finallyIndex = result / size; + expect(finallyIndex).toEqual(prevIndex); + }); + + it("[CASE 3] should return the correct values when size changes from 500 to 499", () => { + const prevIndex = 1; + const prevSize = 500; + const size = 499; + const handlerOffset = prevIndex * prevSize; + const result = computeOffsetIfSizeChanged({ + prevSize, + size, + handlerOffset, + }); + + const finallyIndex = result / size; + expect(finallyIndex).toEqual(prevIndex); + }); + + it("[CASE 4] should return the correct values when size changes from 500 to 501", () => { + const prevIndex = 1; + const prevSize = 500; + const size = 501; + const handlerOffset = prevIndex * prevSize; + const result = computeOffsetIfSizeChanged({ + prevSize, + size, + handlerOffset, + }); + + const finallyIndex = result / size; + expect(finallyIndex).toEqual(prevIndex); + }); + + it("[CASE 5] should return the correct values when size changes from 224 to 524", () => { + const prevIndex = 1; + const prevSize = 224; + const size = 524; + const handlerOffset = prevIndex * prevSize; + const result = computeOffsetIfSizeChanged({ + prevSize, + size, + handlerOffset, + }); + + const finallyIndex = result / size; + expect(finallyIndex).toEqual(prevIndex); + }); +}); diff --git a/src/utils/compute-offset-if-size-changed.ts b/src/utils/compute-offset-if-size-changed.ts new file mode 100644 index 00000000..12f7fd20 --- /dev/null +++ b/src/utils/compute-offset-if-size-changed.ts @@ -0,0 +1,11 @@ +export function computeOffsetIfSizeChanged(params: { + handlerOffset: number + prevSize: number + size: number +}) { + "worklet"; + const { handlerOffset, prevSize, size } = params; + + return handlerOffset / prevSize * size; +} + diff --git a/src/utils/index.test.ts b/src/utils/index.test.ts index f024d702..0bea26ca 100644 --- a/src/utils/index.test.ts +++ b/src/utils/index.test.ts @@ -1,4 +1,4 @@ -import { computeNewIndexWhenDataChanges } from "./computeNewIndexWhenDataChanges"; +import { computeOffsetIfDataChanged } from "./compute-offset-if-data-changed"; describe("should work as expected", () => { const size = 375; @@ -24,7 +24,7 @@ describe("should work as expected", () => { it("The direction is negative, And changing length of data set from 4 to 3, the new index will to be 2.", async () => { const currentIndex = 1; - const handlerOffset = computeNewIndexWhenDataChanges(params({ + const handlerOffset = computeOffsetIfDataChanged(params({ currentIndex, direction: "negative", previousLength: 4, @@ -35,7 +35,7 @@ describe("should work as expected", () => { }); it("The direction is negative, Changing length of data set from 4 to 3, the index remains original.", async () => { - const handlerOffset = computeNewIndexWhenDataChanges(params({ + const handlerOffset = computeOffsetIfDataChanged(params({ currentIndex: 2, direction: "negative", previousLength: 4, @@ -46,7 +46,7 @@ describe("should work as expected", () => { }); it("The direction is positive, Changing length of data set from 4 to 5, the index remains original.", async () => { - const handlerOffset = computeNewIndexWhenDataChanges(params({ + const handlerOffset = computeOffsetIfDataChanged(params({ currentIndex: 3, direction: "positive", previousLength: 4, @@ -57,7 +57,7 @@ describe("should work as expected", () => { }); it("The direction is negative, Changing length of data set from 4 to 5, the index remains original.", async () => { - const handlerOffset = computeNewIndexWhenDataChanges(params({ + const handlerOffset = computeOffsetIfDataChanged(params({ currentIndex: 3, direction: "negative", previousLength: 4, @@ -68,7 +68,7 @@ describe("should work as expected", () => { }); it("Changing length of data set from 0 to 3, the index remains original.", async () => { - const handlerOffset = computeNewIndexWhenDataChanges(params({ + const handlerOffset = computeOffsetIfDataChanged(params({ currentIndex: 0, direction: "positive", previousLength: 0, diff --git a/yarn.lock b/yarn.lock index e60139fe..1d4b29f5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4014,17 +4014,7 @@ __metadata: languageName: node linkType: hard -"@types/react-native-snap-carousel@npm:^3.8.5": - version: 3.8.5 - resolution: "@types/react-native-snap-carousel@npm:3.8.5" - dependencies: - "@types/react": "npm:*" - "@types/react-native": "npm:*" - checksum: d716c815860babf4399ac98c09ac861ffa6d71293a023cd3bbde5864b8803a60bd09156b14eca60941275186a89cdcad6cf20c3006f6fa31db5b5dcb1aed5c87 - languageName: node - linkType: hard - -"@types/react-native@npm:*, @types/react-native@npm:^0.66.16": +"@types/react-native@npm:^0.66.16": version: 0.66.16 resolution: "@types/react-native@npm:0.66.16" dependencies: @@ -12578,7 +12568,6 @@ __metadata: "@types/jest": "npm:^29.2.5" "@types/react": "npm:^18.2.15" "@types/react-native": "npm:^0.66.16" - "@types/react-native-snap-carousel": "npm:^3.8.5" "@types/react-test-renderer": "npm:^18.0.7" babel-plugin-module-resolver: "npm:^4.1.0" commitlint: "npm:^11.0.0"