Skip to content

Commit

Permalink
Merge pull request #113 from dohooo/fix/rawDataRawCalculationError
Browse files Browse the repository at this point in the history
fix: onProgressChange & onSnapToItem bug when only 2 image
  • Loading branch information
dohooo authored Jan 23, 2022
2 parents 9b44591 + bdb2d74 commit 42c389b
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 19 deletions.
9 changes: 5 additions & 4 deletions src/Carousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ function Carousel<T>(

const {
data,
rawData,
loop,
mode,
style,
Expand Down Expand Up @@ -58,7 +59,7 @@ function Carousel<T>(
}, [loop, size, data]);

usePropsErrorBoundary(props);
useOnProgressChange({ size, offsetX, data, onProgressChange });
useOnProgressChange({ size, offsetX, rawData, onProgressChange });

const carouselController = useCarouselController({
loop,
Expand Down Expand Up @@ -135,11 +136,11 @@ function Carousel<T>(
const renderLayout = React.useCallback(
(item: T, i: number) => {
let realIndex = i;
if (data.length === DATA_LENGTH.SINGLE_ITEM) {
if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
realIndex = i % 1;
}

if (data.length === DATA_LENGTH.DOUBLE_ITEM) {
if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
realIndex = i % 2;
}

Expand All @@ -162,7 +163,7 @@ function Carousel<T>(
);
},
[
data,
rawData,
offsetX,
visibleRanges,
renderItem,
Expand Down
22 changes: 13 additions & 9 deletions src/hooks/useInitProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,17 @@ export type TInitializeCarouselProps<T> = TCarouselProps<T> &
| 'height'
| 'scrollAnimationDuration'
| 'autoPlayInterval'
>;
> & {
// Raw data that has not been processed
rawData: T[];
};

export function useInitProps<T>(
props: TCarouselProps<T>
): TInitializeCarouselProps<T> {
const {
defaultIndex = 0,
data: _data = [],
data: rawData = [],
loop = true,
autoPlayInterval: _autoPlayInterval = 1000,
scrollAnimationDuration = 500,
Expand All @@ -39,18 +42,18 @@ export function useInitProps<T>(
const autoPlayInterval = Math.max(_autoPlayInterval, 0);

const data = React.useMemo<T[]>(() => {
if (!loop) return _data;
if (!loop) return rawData;

if (_data.length === DATA_LENGTH.SINGLE_ITEM) {
return [_data[0], _data[0], _data[0]];
if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
return [rawData[0], rawData[0], rawData[0]];
}

if (_data.length === DATA_LENGTH.DOUBLE_ITEM) {
return [_data[0], _data[1], _data[0], _data[1]];
if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
return [rawData[0], rawData[1], rawData[0], rawData[1]];
}

return _data;
}, [_data, loop]);
return rawData;
}, [rawData, loop]);

if (props.mode === 'vertical-stack' || props.mode === 'horizontal-stack') {
if (!props.modeConfig) {
Expand All @@ -63,6 +66,7 @@ export function useInitProps<T>(
...props,
defaultIndex,
data,
rawData,
loop,
autoPlayInterval,
scrollAnimationDuration,
Expand Down
13 changes: 7 additions & 6 deletions src/hooks/useOnProgressChange.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,32 @@ export function useOnProgressChange(
opts: {
size: number;
offsetX: Animated.SharedValue<number>;
} & Pick<TCarouselProps, 'data' | 'onProgressChange'>
rawData: TCarouselProps['data'];
} & Pick<TCarouselProps, 'onProgressChange'>
) {
const { offsetX, data, size, onProgressChange } = opts;
const { offsetX, rawData, size, onProgressChange } = opts;
useAnimatedReaction(
() => offsetX.value,
(_value) => {
let value = _value;

if (data.length === DATA_LENGTH.SINGLE_ITEM) {
if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
value = value % size;
}

if (data.length === DATA_LENGTH.DOUBLE_ITEM) {
if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
value = value % (size * 2);
}

let absoluteProgress = Math.abs(value / size);

if (value > 0) {
absoluteProgress = data.length - absoluteProgress;
absoluteProgress = rawData.length - absoluteProgress;
}

!!onProgressChange &&
runOnJS(onProgressChange)(value, absoluteProgress);
},
[onProgressChange, data]
[onProgressChange, rawData]
);
}

0 comments on commit 42c389b

Please sign in to comment.