From 4160d761a03698ee3af9a129baf35c00511470cc Mon Sep 17 00:00:00 2001 From: Hasan Genc Date: Tue, 29 Dec 2020 11:20:41 +0300 Subject: [PATCH] Add pagination feature --- src/components/carousel/defaultProps.ts | 1 + src/components/carousel/index.tsx | 82 ++++++--- src/helpers/index.ts | 2 +- src/hooks/index.ts | 2 +- website/src/pages/index.js | 215 +++++++++++++++--------- 5 files changed, 194 insertions(+), 108 deletions(-) diff --git a/src/components/carousel/defaultProps.ts b/src/components/carousel/defaultProps.ts index 8fcdcb9..0c24c57 100644 --- a/src/components/carousel/defaultProps.ts +++ b/src/components/carousel/defaultProps.ts @@ -15,4 +15,5 @@ export const defaultProps: Required = { dynamic: false, beforeChange: null, afterChange: null, + extraItems: [], }; diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx index 53c1273..6de9660 100644 --- a/src/components/carousel/index.tsx +++ b/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 = (userProps: CarouselPr const [showArrow, setShowArrow] = useState( getShowArrow(props.children.length, props.show, props.infinite, current), ); + const [dynamicElements, setDynamicElements] = useState(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 = (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( - getShowArrow(props.children.length, props.show, props.infinite, next), - ); + setShowArrow(getShowArrow(elements.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) - : animation.transform + getTransformAmount(width, slide, direction), + ? getTransformAmount(width, props.slide, SlideDirection.Right) + : 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 = (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 = (userProps: CarouselPr className={`${styles.carouselBase} ${props.className}`} > {showArrow.left && ( - slide(SlideDirection.Left, props.slide)} - /> + slide(SlideDirection.Left)} /> )} = (userProps: CarouselPr widthCallBack={widthCallBack} /> {showArrow.right && ( - slide(SlideDirection.Right, props.slide)} - /> + slide(SlideDirection.Right)} /> )} ); @@ -165,8 +190,9 @@ export interface CarouselProps { useArrowKeys?: boolean; a11y?: { [key: string]: string }; dynamic?: boolean; - beforeChange?: ((direction: SlideDirection) => void) | null; + beforeChange?: ((direction: SlideDirection) => Promise) | null; afterChange?: ((direction: SlideDirection) => void) | null; + extraItems?: any[]; } export interface CarouselState { diff --git a/src/helpers/index.ts b/src/helpers/index.ts index 5b5595a..581302a 100644 --- a/src/helpers/index.ts +++ b/src/helpers/index.ts @@ -14,7 +14,7 @@ export class Circular { 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(); } diff --git a/src/hooks/index.ts b/src/hooks/index.ts index d8d0c3d..505a9d0 100644 --- a/src/hooks/index.ts +++ b/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); diff --git a/website/src/pages/index.js b/website/src/pages/index.js index f8b20b2..232c67a 100644 --- a/website/src/pages/index.js +++ b/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'll do the chores. Go - ahead and move your docs into the docs 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 (
{imgUrl && ( @@ -168,8 +138,124 @@ function Feature({ imageUrl, title, description }) { } function Home() { - return ; + //return ; + 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'll do the chores. + Go ahead and move your docs into the docs 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 ; + }); + + 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 (
-
- - {slideData.map((d) => ( -
- - {d.text} -
- ))} -
-
+
-
- - {features2(15).map((props, idx) => ( -
- {props.description} -
- ))} -
-
+
{features && features.length && (
- + + {features.map((props, idx) => ( - + ))}