add slideChangeHooks for before and after changes

master
mucahit.inel 4 years ago
parent c97e3e5c1a
commit c3ad78218b
  1. 49
      __tests__/carousel.spec.tsx
  2. 2
      package-lock.json
  3. 2
      package.json
  4. 2
      src/components/carousel/defaultProps.ts
  5. 5
      src/components/carousel/index.tsx

@ -4,6 +4,7 @@ import { Carousel } from '../src/components/carousel';
import { defaultProps } from '../src/components/carousel/defaultProps';
import { carouselItemNodes, dynamicCarouselItemNodes } from './__fixtures__/nodes';
import * as helpers from '../src/helpers';
import { SlideDirection } from '../src/types/carousel';
describe('<Carousel />', () => {
let mockGetPageX: jest.SpyInstance<
@ -301,4 +302,52 @@ describe('<Carousel />', () => {
expect(button!.innerHTML).toEqual('1');
});
it('should invoke beforeChange when beforeChange prop is defined on slide', async () => {
const onBeforeChange = (direction: SlideDirection) => {
console.log(direction);
};
const stub = jest.fn(onBeforeChange);
const { getByTestId } = render(
<Carousel
{...defaultProps}
infinite={true}
children={carouselItemNodes(4)}
beforeChange={stub}
/>,
);
const carousel = getByTestId('carousel');
const button = carousel.querySelector('button');
expect(button).not.toBeNull();
fireEvent.click(button!);
jest.runAllTimers();
expect(stub).toHaveBeenCalledTimes(1);
});
it('should invoke afterChange when afterChange prop is defined on slide', async () => {
const onAfterChange = (direction: SlideDirection) => {
console.log(direction);
};
const stub = jest.fn(onAfterChange);
const { getByTestId } = render(
<Carousel
{...defaultProps}
infinite={true}
children={carouselItemNodes(4)}
afterChange={stub}
/>,
);
const carousel = getByTestId('carousel');
const button = carousel.querySelector('button');
expect(button).not.toBeNull();
fireEvent.click(button!);
jest.runAllTimers();
expect(stub).toHaveBeenCalledTimes(1);
});
});

2
package-lock.json generated

@ -1,6 +1,6 @@
{
"name": "@trendyol-js/react-carousel",
"version": "1.0.0",
"version": "1.0.7-beta.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

@ -1,6 +1,6 @@
{
"name": "@trendyol-js/react-carousel",
"version": "1.0.7-beta.1",
"version": "1.0.7-beta.2",
"description": "Lightweight carousel component for react",
"main": "dist/cjs/index.js",
"module": "dist/es/index.js",

@ -13,4 +13,6 @@ export const defaultProps: Required<CarouselProps> = {
useArrowKeys: false,
a11y: {},
dynamic: false,
beforeChange: null,
afterChange: null,
};

@ -51,6 +51,8 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
return;
}
if (props.beforeChange) props.beforeChange(direction);
const next = getCurrent(current, slide, props.children.length, direction);
const rotated = props.infinite
? rotateItems(props.children, items, next, props.show, slide, direction)
@ -78,6 +80,7 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
transition: 0,
isSliding: false,
});
if (props.afterChange) props.afterChange(direction);
}, props.transition * 1_0_0_0);
};
@ -162,6 +165,8 @@ export interface CarouselProps {
useArrowKeys?: boolean;
a11y?: { [key: string]: string };
dynamic?: boolean;
beforeChange?: ((direction: SlideDirection) => void) | null;
afterChange?: ((direction: SlideDirection) => void) | null;
}
export interface CarouselState {

Loading…
Cancel
Save