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