Update childrens on update

__tests__/__fixtures__/nodes.tsx

@@ -5,3 +5,12 @@ export const carouselItemNodes = (len: number) => {
 		return <div style={{ height: 600 }}>{i + 1}</div>;
 	});
 };
+
+export const reactNodes = (prop: string, len: number) => {
+	return new Array(len).fill(0).map((_, i) => {
+		return {
+			key: i,
+			props: `${prop}-i`,
+		};
+	});
+};

__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 { carouselItemNodes, reactNodes } from './__fixtures__/nodes';
-import { SlideDirection } from '../src/types/carousel';
+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);
+	});
 });

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<CarouselProps> = (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<CarouselProps> = (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,

src/components/item/index.tsx

@@ -19,7 +19,7 @@ export const ItemProvider: FunctionComponent<ItemProviderProps> = (
 			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;

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;
+	});
+}