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. 3
      src/components/carousel/index.tsx
  5. 3
      website/docs/carousel.md

@ -1,4 +1,4 @@
import React from 'react'; import React, { FunctionComponent, useState } from 'react';
export const carouselItemNodes = (len: number) => { export const carouselItemNodes = (len: number) => {
return new Array(len).fill(0).map((_, i) => { 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) => { export const reactNodes = (prop: string, len: number) => {
return new Array(len).fill(0).map((_, i) => { return new Array(len).fill(0).map((_, i) => {
return { return {

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

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

@ -12,7 +12,7 @@ Creates carousel component.
### Props ### Props
| Name | type | required | default | descripiton | | Name | type | required | default | descripiton |
| ------------ | :-----: | -------: | ------: | --------------------------------------------------------------------------------: | | ------------ | :-----: | -------: | ------: | ----------------------------------------------------------------------------------------------: |
| children | Node[] | true | [] | Child items that will be wrapped by carousel | | children | Node[] | true | [] | Child items that will be wrapped by carousel |
| show | number | false | 1 | number of items to show at per slide | | show | number | false | 1 | number of items to show at per slide |
| slide | number | false | 1 | number of how many items to slide | | slide | number | false | 1 | number of how many items to slide |
@ -24,3 +24,4 @@ Creates carousel component.
| className | string | false | "" | same as react's className property | | className | string | false | "" | same as react's className property |
| useArrowKeys | boolean | false | false | enables sliding when press arrow keys | | useArrowKeys | boolean | false | false | enables sliding when press arrow keys |
| a11y | Array | false | {} | accessibility attributes | | 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