From f4a9623307b170961870d5a5743cf1f7fb2f005a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles=20Assun=C3=A7=C3=A3o?= Date: Wed, 2 Dec 2020 15:07:15 -0300 Subject: [PATCH] chore(Carousel): pass active index onActiveIndexChange (#16118) * chore(Carousel): pass active index onActiveIndexChange * chore(Carousel): add changelog * chore(Carousel): add test --- packages/fluentui/CHANGELOG.md | 1 + .../src/components/Carousel/Carousel.tsx | 2 +- .../specs/components/Carousel/Carousel-test.tsx | 13 +++++++++++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 1c5359cc2a3df9..8fdefc37fa6f51 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -59,6 +59,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix `Dropdown` to not break new lines for button trigger after listbox was introduced wrapping selected items @assuncaocharles ([#15898](https://github.com/microsoft/fluentui/pull/15898)) - Fix `Input` content overlaping with `Icon` @assuncaocharles ([#16083](https://github.com/microsoft/fluentui/pull/16083)) - Fix `variables` not being propagated in `Carousel` @assuncaocharles ([#16084](https://github.com/microsoft/fluentui/pull/16084)) +- Fix `Carousel` `onActiveIndexChange` to contain `activeIndex` @assuncaocharles ([#16118](https://github.com/microsoft/fluentui/pull/16118)) ### Features - `Tree`: added `useTree` hook @yuanboxue-amber ([#15831](https://github.com/microsoft/fluentui/pull/15831)) diff --git a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx index e9fa0580d0e7a3..574945785c67ca 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx @@ -262,7 +262,7 @@ export const Carousel: ComponentWithAs<'div', CarouselProps> & actions.setIndexes(nextActiveIndex, lastActiveIndex); - _.invoke(props, 'onActiveIndexChange', e, props); + _.invoke(props, 'onActiveIndexChange', e, { ...props, activeIndex: index }); if (focusItem) { focusItemAtIndex(nextActiveIndex); diff --git a/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx index 4f84f1015b2338..448193f8a82813 100644 --- a/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx +++ b/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx @@ -79,6 +79,19 @@ describe('Carousel', () => { expect(pagination.getDOMNode().textContent).toBe(`2 of ${items.length}`); }); + it('should pass activeIndex onActiveIndexChange', () => { + const onActiveIndexChange = jest.fn(); + const wrapper = renderCarousel({ onActiveIndexChange }); + const paddleNext = getPaddleNextWrapper(wrapper); + + paddleNext.simulate('click'); + + expect(onActiveIndexChange).toHaveBeenCalledWith( + expect.objectContaining({ type: 'click' }), + expect.objectContaining({ activeIndex: 1 }), + ); + }); + it('should decrese at paddle previous press', () => { const wrapper = renderCarousel({ defaultActiveIndex: 3 }); const paddlePrevious = getPaddlePreviousWrapper(wrapper);