Add dynamic prop

master
Hasan Genc 4 years ago
parent 7fbcd6e09f
commit 89d4384bb3
  1. 27
      __tests__/__fixtures__/nodes.tsx
  2. 64
      __tests__/carousel.spec.tsx
  3. 1
      src/components/carousel/defaultProps.ts
  4. 11
      src/components/carousel/index.tsx
  5. 27
      website/docs/carousel.md

@ -1,4 +1,4 @@
import React from 'react';
import React, { FunctionComponent, useState } from 'react';
export const carouselItemNodes = (len: number) => {
return new Array(len).fill(0).map((_, i) => {
@ -6,6 +6,31 @@ export const carouselItemNodes = (len: number) => {
});
};
export const dynamicCarouselItemNodes = () => {
const Component: FunctionComponent<DynamicCarouselItemNodesProps> = ({
id,
}: DynamicCarouselItemNodesProps) => {
const [state, setstate] = useState(0);
return (
<button key={id} onClick={() => setstate(state + 1)}>
{state}
</button>
);
};
return [
<Component id={1} />,
<Component id={2} />,
<Component id={3} />,
<Component id={4} />,
];
};
interface DynamicCarouselItemNodesProps {
id: number;
children?: React.ReactNode;
}
export const reactNodes = (prop: string, len: number) => {
return new Array(len).fill(0).map((_, i) => {
return {

@ -2,7 +2,7 @@ import React, { MouseEvent } from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import { Carousel } from '../src/components/carousel';
import { defaultProps } from '../src/components/carousel/defaultProps';
import { carouselItemNodes } from './__fixtures__/nodes';
import { carouselItemNodes, dynamicCarouselItemNodes } from './__fixtures__/nodes';
import * as helpers from '../src/helpers';
describe('<Carousel />', () => {
@ -40,7 +40,11 @@ describe('<Carousel />', () => {
it('should render right layout', async () => {
const { getByTestId } = render(
<Carousel {...defaultProps} infinite={false} children={carouselItemNodes(6)} />,
<Carousel
{...defaultProps}
infinite={false}
children={carouselItemNodes(6)}
/>,
);
const carousel = getByTestId('carousel');
@ -52,7 +56,11 @@ describe('<Carousel />', () => {
it('should transform when pressing arrow keys', async () => {
const { getByTestId } = render(
<Carousel {...defaultProps} children={carouselItemNodes(6)} useArrowKeys={true} />,
<Carousel
{...defaultProps}
children={carouselItemNodes(6)}
useArrowKeys={true}
/>,
);
const carousel = getByTestId('carousel');
@ -69,7 +77,11 @@ describe('<Carousel />', () => {
it("shouldn't listen keyboard event if useArrowKeys option false", async () => {
const { getByTestId } = render(
<Carousel {...defaultProps} children={carouselItemNodes(6)} useArrowKeys={false} />,
<Carousel
{...defaultProps}
children={carouselItemNodes(6)}
useArrowKeys={false}
/>,
);
const carousel = getByTestId('carousel');
@ -115,7 +127,11 @@ describe('<Carousel />', () => {
it('should slide to left when click left button', async () => {
const { getByTestId } = render(
<Carousel {...defaultProps} infinite={true} children={carouselItemNodes(4)} />,
<Carousel
{...defaultProps}
infinite={true}
children={carouselItemNodes(4)}
/>,
);
const carousel = getByTestId('carousel');
const button = carousel.querySelector('button');
@ -134,7 +150,11 @@ describe('<Carousel />', () => {
it('should slide to right when click right button', async () => {
const { getByTestId } = render(
<Carousel {...defaultProps} infinite={true} children={carouselItemNodes(4)} />,
<Carousel
{...defaultProps}
infinite={true}
children={carouselItemNodes(4)}
/>,
);
const carousel = getByTestId('carousel');
const button = carousel.querySelectorAll('button')[1];
@ -218,7 +238,11 @@ describe('<Carousel />', () => {
it("shouldn't rotate items if carousel is not infinite", async () => {
const { getByTestId } = render(
<Carousel {...defaultProps} infinite={false} children={carouselItemNodes(10)} />,
<Carousel
{...defaultProps}
infinite={false}
children={carouselItemNodes(10)}
/>,
);
const carousel = getByTestId('carousel');
const button = carousel.querySelector('button');
@ -237,7 +261,11 @@ describe('<Carousel />', () => {
it('should rotate items if carousel is infinite', async () => {
const { getByTestId } = render(
<Carousel {...defaultProps} infinite={true} children={carouselItemNodes(10)} />,
<Carousel
{...defaultProps}
infinite={true}
children={carouselItemNodes(10)}
/>,
);
const carousel = getByTestId('carousel');
const button = carousel.querySelector('button');
@ -253,4 +281,24 @@ describe('<Carousel />', () => {
defaultProps.transition * 1000,
);
});
it('should render stateful items when dynamic prop is true', async () => {
const { getByTestId } = render(
<Carousel
{...defaultProps}
dynamic={true}
infinite={true}
children={dynamicCarouselItemNodes()}
/>,
);
const carousel = getByTestId('trackList');
const button = carousel.querySelector('button');
expect(button).not.toBeNull();
fireEvent.click(button!);
expect(button!.innerHTML).toEqual('1');
});
});

@ -12,4 +12,5 @@ export const defaultProps: Required<CarouselProps> = {
className: '',
useArrowKeys: false,
a11y: {},
dynamic: false,
};

@ -30,10 +30,12 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
getShowArrow(props.children.length, props.show, props.infinite, current),
);
React.useEffect(() => {
const newItems = updateNodes(items, userProps.children);
setItems(newItems);
}, userProps.children);
if (props.dynamic) {
React.useEffect(() => {
const newItems = updateNodes(items, userProps.children);
setItems(newItems);
}, userProps.children);
}
const slide = (direction: SlideDirection, slide: number): void => {
if (
@ -154,6 +156,7 @@ export interface CarouselProps {
className?: string;
useArrowKeys?: boolean;
a11y?: { [key: string]: string };
dynamic: boolean;
}
export interface CarouselState {

@ -11,16 +11,17 @@ Creates carousel component.
### Props
| Name | type | required | default | descripiton |
| ------------ | :-----: | -------: | ------: | --------------------------------------------------------------------------------: |
| children | Node[] | true | [] | Child items that will be wrapped by carousel |
| show | number | false | 1 | number of items to show at per slide |
| slide | number | false | 1 | number of how many items to slide |
| infinite | boolean | false | true | scrolling infinity |
| transition | number | false | 0.5 | same as css transition property's second value |
| swiping | boolean | false | false | enable swiping/dragging with mouse/touch events |
| swipeOn | number | false | 1 | percantage of item width that slides when user drag count exceeds |
| responsive | boolean | false | false | enables the feature that adjusts items width according to screen size dynamically |
| className | string | false | "" | same as react's className property |
| useArrowKeys | boolean | false | false | enables sliding when press arrow keys |
| a11y | Array | false | {} | accessibility attributes |
| Name | type | required | default | descripiton |
| ------------ | :-----: | -------: | ------: | ----------------------------------------------------------------------------------------------: |
| children | Node[] | true | [] | Child items that will be wrapped by carousel |
| show | number | false | 1 | number of items to show at per slide |
| slide | number | false | 1 | number of how many items to slide |
| infinite | boolean | false | true | scrolling infinity |
| transition | number | false | 0.5 | same as css transition property's second value |
| swiping | boolean | false | false | enable swiping/dragging with mouse/touch events |
| swipeOn | number | false | 1 | percantage of item width that slides when user drag count exceeds |
| responsive | boolean | false | false | enables the feature that adjusts items width according to screen size dynamically |
| className | string | false | "" | same as react's className property |
| useArrowKeys | boolean | false | false | enables sliding when press arrow keys |
| a11y | Array | false | {} | accessibility attributes |
| dynamic | Boolean | false | false | if items are stateful, specify this option as true. Also give unique key to each item (like id) |

Loading…
Cancel
Save