Add pagination feature

src/components/carousel/defaultProps.ts

@@ -15,4 +15,5 @@ export const defaultProps: Required<CarouselProps> = {
 	dynamic: false,
 	beforeChange: null,
 	afterChange: null,
+	extraItems: [],
 };

src/components/carousel/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, FunctionComponent, KeyboardEvent } from 'react';
+import React, { useState, FunctionComponent, KeyboardEvent, useEffect } from 'react';
 import { Arrow } from '../arrow';
 import { ItemProvider } from '../item';
 import {
@@ -29,20 +29,40 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 	const [showArrow, setShowArrow] = useState(
 		getShowArrow(props.children.length, props.show, props.infinite, current),
 	);
+	const [dynamicElements, setDynamicElements] = useState<Item[]>(userProps.children);
+
+	/*useEffect(() => {
+		if (Array.isArray(props.extraItems) && props.extraItems.length > 0) {
+			const elements = dynamicElements.length > 0 ? dynamicElements : props.children;
+			setDynamicElements(elements.concat(props.extraItems));
+		}
+	}, [props.extraItems]);*/
+
+	useEffect(() => {
+		if (dynamicElements.length > props.children.length) {
+			slide(SlideDirection.Right, true);
+		}
+	}, [dynamicElements]);
 
 	if (props.dynamic) {
-		React.useEffect(() => {
+		useEffect(() => {
+			console.log({
+				children: userProps.children,
+				dynamicElements,
+			});
+
 			const newItems = updateNodes(
 				items,
-				userProps.children,
+				dynamicElements,
 				props.slide,
 				props.infinite,
 			);
+			console.log({ newItems });
 			setItems(newItems);
-		}, userProps.children);
+		}, [userProps.children, dynamicElements]);
 	}
 
-	const slide = (direction: SlideDirection, slide: number): void => {
+	const slide = async (direction: SlideDirection, cb?: boolean) => {
 		if (
 			animation.isSliding ||
 			(direction === SlideDirection.Right && !showArrow.right) ||
@@ -51,36 +71,47 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 			return;
 		}
 
-		if (props.beforeChange) props.beforeChange(direction);
+		const dynamicElementsExists = dynamicElements.length > 0;
 
-		const next = getCurrent(current, slide, props.children.length, direction);
+		if (!cb && props.beforeChange) {
+			const extraItems = await props.beforeChange(direction);
+			if (Array.isArray(extraItems) && extraItems.length > 0) {
+				const elements =
+					dynamicElements.length > 0 ? dynamicElements : props.children;
+				setDynamicElements(elements.concat(extraItems));
+				return;
+			}
+		}
+
+		const elements = dynamicElementsExists ? dynamicElements : props.children;
+
+		const next = getCurrent(current, props.slide, elements.length, direction);
 		const rotated = props.infinite
-			? rotateItems(props.children, items, next, props.show, slide, direction)
+			? rotateItems(elements, items, next, props.show, props.slide, direction)
 			: items;
 		if (props.infinite && direction === SlideDirection.Right) {
 			setItems(rotated);
 		}
 		setAnimation({
-			transform: animation.transform + getTransformAmount(width, slide, direction),
+			transform:
+				animation.transform + getTransformAmount(width, props.slide, direction),
 			transition: props.transition,
 			isSliding: true,
 		});
 		setCurrent(next);
-		setShowArrow(
+		setShowArrow(getShowArrow(elements.length, props.show, props.infinite, next));
-			getShowArrow(props.children.length, props.show, props.infinite, next),
-		);
 		setTimeout(() => {
 			if (props.infinite) {
-				setItems(cleanItems(rotated, slide, direction));
+				setItems(cleanItems(rotated, props.slide, direction));
 			}
 			setAnimation({
 				transform: props.infinite
-					? getTransformAmount(width, slide, SlideDirection.Right)
+					? getTransformAmount(width, props.slide, SlideDirection.Right)
-					: animation.transform + getTransformAmount(width, slide, direction),
+					: animation.transform +
+					  getTransformAmount(width, props.slide, direction),
 				transition: 0,
 				isSliding: false,
 			});
-			if (props.afterChange) props.afterChange(direction);
 		}, props.transition * 1_0_0_0);
 	};
 
@@ -108,14 +139,14 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 	};
 
 	const slideCallback = (direction: SlideDirection) => {
-		slide(direction, props.slide);
+		slide(direction);
 	};
 
 	const handleOnKeyDown = (e: KeyboardEvent) => {
 		if (e.keyCode === ArrowKeys.Left) {
-			slide(SlideDirection.Left, props.slide);
+			slide(SlideDirection.Left);
 		} else if (e.keyCode === ArrowKeys.Right) {
-			slide(SlideDirection.Right, props.slide);
+			slide(SlideDirection.Right);
 		}
 	};
 
@@ -128,10 +159,7 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 			className={`${styles.carouselBase} ${props.className}`}
 		>
 			{showArrow.left && (
-				<Arrow
+				<Arrow direction="left" onClick={() => slide(SlideDirection.Left)} />
-					direction="left"
-					onClick={() => slide(SlideDirection.Left, props.slide)}
-				/>
 			)}
 			<ItemProvider
 				{...props}
@@ -143,10 +171,7 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 				widthCallBack={widthCallBack}
 			/>
 			{showArrow.right && (
-				<Arrow
+				<Arrow direction="right" onClick={() => slide(SlideDirection.Right)} />
-					direction="right"
-					onClick={() => slide(SlideDirection.Right, props.slide)}
-				/>
 			)}
 		</div>
 	);
@@ -165,8 +190,9 @@ export interface CarouselProps {
 	useArrowKeys?: boolean;
 	a11y?: { [key: string]: string };
 	dynamic?: boolean;
-	beforeChange?: ((direction: SlideDirection) => void) | null;
+	beforeChange?: ((direction: SlideDirection) => Promise<any[] | null>) | null;
 	afterChange?: ((direction: SlideDirection) => void) | null;
+	extraItems?: any[];
 }
 
 export interface CarouselState {

src/helpers/index.ts

@@ -14,7 +14,7 @@ export class Circular<T> {
 	prev(): T {
 		const i = this.currentIndex;
 		const arr = this.arr;
-		this.currentIndex = i > 0 ? i - 1 : arr.length - 1;
+		this.currentIndex = i > 0 && i < arr.length ? i - 1 : arr.length - 1;
 		return this.current();
 	}
 

src/hooks/index.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 export const useWindowWidthChange = (callBack: (changed: number) => any) => {
 	const [windowWidth, setWindowWidth] = useState(window.innerWidth);

website/src/pages/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import classnames from 'classnames';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
@@ -8,7 +8,7 @@ import { Carousel, ScrollingCarousel } from '@trendyol-js/react-carousel';
 import styles from './styles.module.css';
 import { Redirect } from '@docusaurus/router';
 
-const slideData = [
+let slideData = [
 	{
 		text: 'skyline',
 		img:
@@ -110,38 +110,7 @@ const slideData = [
 			'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlGGm-Hh5so6PtScyr7lXrB9V13dFr7mtMJC5YlO9aaDPHfPQNRvzsFPK_&s',
 	},
 ];
-const features = [
+
-	{
-		title: <>Easy to Use</>,
-		imageUrl: 'img/undraw_docusaurus_mountain.svg',
-		description: (
-			<>
-				Docusaurus was designed from the ground up to be easily installed and used
-				to get your website up and running quickly.
-			</>
-		),
-	},
-	{
-		title: <>Focus on What Matters</>,
-		imageUrl: 'img/undraw_docusaurus_tree.svg',
-		description: (
-			<>
-				Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-				ahead and move your docs into the <code>docs</code> directory.
-			</>
-		),
-	},
-	{
-		title: <>Powered by React</>,
-		imageUrl: 'img/undraw_docusaurus_react.svg',
-		description: (
-			<>
-				Extend or customize your website layout by reusing React. Docusaurus can
-				be extended while reusing the same header and footer.
-			</>
-		),
-	},
-];
 const features2 = (num) => {
 	let i = 0;
 	return new Array(num).fill(0).map(() => {
@@ -154,6 +123,7 @@ const features2 = (num) => {
 
 function Feature({ imageUrl, title, description }) {
 	const imgUrl = useBaseUrl(imageUrl);
+
 	return (
 		<div className={classnames('col col--4', styles.feature)}>
 			{imgUrl && (
@@ -168,8 +138,124 @@ function Feature({ imageUrl, title, description }) {
 }
 
 function Home() {
-	return <Redirect to="/react-carousel/docs/installation" />;
+	//return <Redirect to="/react-carousel/docs/installation" />;
+	const [features, setFeatures] = useState([
+		{
+			id: 1,
+			title: <>1</>,
+			imageUrl: 'img/undraw_docusaurus_mountain.svg',
+			description: (
+				<>
+					Docusaurus was designed from the ground up to be easily installed and
+					used to get your website up and running quickly.
+				</>
+			),
+		},
+		{
+			id: 2,
+			title: <>2</>,
+			imageUrl: 'img/undraw_docusaurus_tree.svg',
+			description: (
+				<>
+					Docusaurus lets you focus on your docs, and we&apos;ll do the chores.
+					Go ahead and move your docs into the <code>docs</code> directory.
+				</>
+			),
+		},
+		{
+			id: 3,
+			title: <>3</>,
+			imageUrl: 'img/undraw_docusaurus_react.svg',
+			description: (
+				<>
+					Extend or customize your website layout by reusing React. Docusaurus
+					can be extended while reusing the same header and footer.
+				</>
+			),
+		},
+		{
+			id: 4,
+			title: <>4</>,
+			imageUrl: 'img/undraw_docusaurus_react.svg',
+			description: (
+				<>
+					Extend or customize your website layout by reusing React. Docusaurus
+					can be extended while reusing the same header and footer.
+				</>
+			),
+		},
+		{
+			id: 5,
+			title: <>5</>,
+			imageUrl: 'img/undraw_docusaurus_react.svg',
+			description: (
+				<>
+					Extend or customize your website layout by reusing React. Docusaurus
+					can be extended while reusing the same header and footer.
+				</>
+			),
+		},
+		{
+			id: 6,
+			title: <>6</>,
+			imageUrl: 'img/undraw_docusaurus_react.svg',
+			description: (
+				<>
+					Extend or customize your website layout by reusing React. Docusaurus
+					can be extended while reusing the same header and footer.
+				</>
+			),
+		},
+		{
+			id: 7,
+			title: <>7</>,
+			imageUrl: 'img/undraw_docusaurus_react.svg',
+			description: (
+				<>
+					Extend or customize your website layout by reusing React. Docusaurus
+					can be extended while reusing the same header and footer.
+				</>
+			),
+		},
+	]);
+
+	const [added, setAdded] = useState(false);
+	const [addedCount, setAddedCount] = useState(1);
+	const [extraItems, setExtraItems] = useState([]);
+	const addItems = () => {
+		if (addedCount > 2) {
+			return [];
+		}
+
+		const newItems = [...Array(20)].map((_, id) => {
+			const attr = {
+				id,
+				title: <>{id}</>,
+				imageUrl: 'img/undraw_docusaurus_react.svg',
+				description: (
+					<>
+						Extend or customize your website layout by reusing React.
+						Docusaurus can be extended while reusing the same header and
+						footer.
+					</>
+				),
+			};
+			return <Feature key={attr.id} {...attr} />;
+		});
+
+		if (addedCount == 1) {
+			setExtraItems(newItems.slice(8, 11));
+		} else if (addedCount == 2) {
+			setExtraItems(newItems.slice(11, 15));
+		}
+
+		setAdded(true);
+		setAddedCount(addedCount + 1);
+		return newItems;
+	};
+
 	const context = useDocusaurusContext();
+	const [dataa, setData] = useState(slideData);
 	const { siteConfig = {} } = context;
 	return (
 		<Layout
@@ -196,60 +282,33 @@ function Home() {
 			<main>
 				<section className={styles.features}>
 					<div className="container">
-						<div className="row" style={{ width: '660px', margin: 'auto' }}>
+						<div
-							<ScrollingCarousel>
+							className="row"
-								{slideData.map((d) => (
+							style={{ width: '660px', margin: 'auto' }}
-									<div
+						></div>
-										style={{
-											cursor: 'pointer',
-											display: 'flex',
-											border: '1px solid #DFE1E5',
-											borderRadius: '20px',
-											height: '40px',
-											lineHeight: '38px',
-											paddingRight: '12px',
-											margin: '14px 8px 14px 0',
-										}}
-									>
-										<img
-											style={{
-												borderRadius: '16px',
-												height: '32px',
-												marginBottom: '3px',
-												marginLeft: '3px',
-												marginRight: '8px',
-												marginTop: '3px',
-												width: '32px',
-											}}
-											src={d.img}
-										/>
-										<span style={{ fontSize: '12px' }}>{d.text}</span>
-									</div>
-								))}
-							</ScrollingCarousel>
-						</div>
 					</div>
 				</section>
 				<section className={styles.features}>
 					<div className="container">
-						<div className="row">
+						<div className="row"></div>
-							<Carousel show={5} slide={5} transition={0.5}>
-								{features2(15).map((props, idx) => (
-									<div key={idx} style={{ marginRight: '20px' }}>
-										{props.description}
-									</div>
-								))}
-							</Carousel>
-						</div>
 					</div>
 				</section>
 				{features && features.length && (
 					<section className={styles.features}>
 						<div className="container">
 							<div className="row">
-								<Carousel show={2} slide={1} transition={0.5}>
+								<button onClick={addItems}>zzz</button>
+								<Carousel
+									extraItems={extraItems}
+									beforeChange={addItems}
+									swiping={true}
+									dynamic={true}
+									show={5.15}
+									slide={5}
+									transition={0.5}
+								>
 									{features.map((props, idx) => (
-										<Feature key={idx} {...props} />
+										<Feature key={props.id} {...props} />
 									))}
 								</Carousel>
 							</div>