From b65a8bf031644790c053b43746fd3ca3ad2f974f Mon Sep 17 00:00:00 2001
From: Hasan Genc <hasan.genc@trendyol.com>
Date: Sat, 20 Jun 2020 21:22:12 +0300
Subject: [PATCH] Update childrens on update

---
 __tests__/__fixtures__/nodes.tsx  |  9 +++++++++
 __tests__/helpers.spec.tsx        | 14 ++++++++++++--
 src/components/carousel/index.tsx |  8 +++++---
 src/components/item/index.tsx     |  4 ++--
 src/helpers/index.ts              |  6 ++++++
 5 files changed, 34 insertions(+), 7 deletions(-)

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