diff --git a/__tests__/__fixtures__/nodes.tsx b/__tests__/__fixtures__/nodes.tsx
index 95f8503..4b1ed25 100644
--- a/__tests__/__fixtures__/nodes.tsx
+++ b/__tests__/__fixtures__/nodes.tsx
@@ -5,3 +5,12 @@ export const carouselItemNodes = (len: number) => {
return
{i + 1}
;
});
};
+
+export const reactNodes = (prop: string, len: number) => {
+ return new Array(len).fill(0).map((_, i) => {
+ return {
+ key: i,
+ props: `${prop}-i`,
+ };
+ });
+};
diff --git a/__tests__/helpers.spec.tsx b/__tests__/helpers.spec.tsx
index a111fdf..484dfa6 100644
--- a/__tests__/helpers.spec.tsx
+++ b/__tests__/helpers.spec.tsx
@@ -1,7 +1,7 @@
import React, { MouseEvent, TouchEvent } from 'react';
import * as helpers from '../src/helpers';
-import { carouselItemNodes } from './__fixtures__/nodes';
-import { SlideDirection } from '../src/types/carousel';
+import { carouselItemNodes, reactNodes } from './__fixtures__/nodes';
+import { SlideDirection, Item } from '../src/types/carousel';
import { getOuterWidth } from '../src/helpers';
describe('helpers', () => {
@@ -77,4 +77,14 @@ describe('helpers', () => {
expect(result).toEqual(width);
});
+
+ it('should update nodes', async () => {
+ const oldNodes = reactNodes('old', 5) as Item[];
+ const newNodes = reactNodes('new', 6) as Item[];
+ const expected = reactNodes('new', 5) as Item[];
+
+ const result = helpers.updateNodes(oldNodes, newNodes);
+
+ expect(result).toEqual(expected);
+ });
});
diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx
index acbeffa..950ffff 100644
--- a/src/components/carousel/index.tsx
+++ b/src/components/carousel/index.tsx
@@ -8,6 +8,7 @@ import {
initItems,
getShowArrow,
cleanItems,
+ updateNodes,
} from '../../helpers';
import { SlideDirection, Item, ArrowKeys } from '../../types/carousel';
import { defaultProps } from './defaultProps';
@@ -30,7 +31,8 @@ export const Carousel: FunctionComponent = (userProps: CarouselPr
);
React.useEffect(() => {
- setItems(initItems(props.children, props.slide, props.infinite));
+ const newItems = updateNodes(items, userProps.children);
+ setItems(newItems);
}, userProps.children);
const slide = (direction: SlideDirection, slide: number): void => {
@@ -72,11 +74,11 @@ export const Carousel: FunctionComponent = (userProps: CarouselPr
}, props.transition * 1_0_0_0);
};
- const widthCallBack = (calculatedWidth: number, slide: number) => {
+ const widthCallBack = (calculatedWidth: number) => {
setWidth(calculatedWidth);
setAnimation({
transform: props.infinite
- ? getTransformAmount(calculatedWidth, slide, SlideDirection.Right)
+ ? getTransformAmount(calculatedWidth, props.slide, SlideDirection.Right)
: 0,
transition: 0,
isSliding: false,
diff --git a/src/components/item/index.tsx b/src/components/item/index.tsx
index d09e7a8..09a4159 100644
--- a/src/components/item/index.tsx
+++ b/src/components/item/index.tsx
@@ -19,7 +19,7 @@ export const ItemProvider: FunctionComponent = (
if (node !== null) {
const calculated = node.getBoundingClientRect().width / props.show;
setWidth(calculated);
- props.widthCallBack(calculated, props.slide);
+ props.widthCallBack(calculated);
}
},
[width],
@@ -120,7 +120,7 @@ export interface ItemProviderProps {
items: Item[];
show: number;
slide: number;
- widthCallBack: (width: number, slide: number) => void;
+ widthCallBack: (width: number) => void;
dragCallback: (transform: number) => void;
slideCallback: (direction: SlideDirection) => void;
transition: number;
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index 9e109e7..35fb81d 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -143,3 +143,9 @@ export function getOuterWidth(el: HTMLElement) {
(parseInt(style.marginRight, 10) || 0)
);
}
+
+export function updateNodes(oldItems: Item[], newItems: Item[]): Item[] {
+ return oldItems.map((oldItem) => {
+ return newItems.find((newItem) => oldItem.key === newItem.key) as Item;
+ });
+}