Add pagination feature

master
Hasan Genc 4 years ago
parent 1d02c951d7
commit 4160d761a0
  1. 1
      src/components/carousel/defaultProps.ts
  2. 82
      src/components/carousel/index.tsx
  3. 2
      src/helpers/index.ts
  4. 2
      src/hooks/index.ts
  5. 215
      website/src/pages/index.js

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

@ -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(
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<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
direction="left"
onClick={() => slide(SlideDirection.Left, props.slide)}
/>
<Arrow direction="left" onClick={() => slide(SlideDirection.Left)} />
)}
<ItemProvider
{...props}
@ -143,10 +171,7 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
widthCallBack={widthCallBack}
/>
{showArrow.right && (
<Arrow
direction="right"
onClick={() => slide(SlideDirection.Right, props.slide)}
/>
<Arrow direction="right" onClick={() => slide(SlideDirection.Right)} />
)}
</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 {

@ -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();
}

@ -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);

@ -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' }}>
<ScrollingCarousel>
{slideData.map((d) => (
<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
className="row"
style={{ width: '660px', margin: 'auto' }}
></div>
</div>
</section>
<section className={styles.features}>
<div className="container">
<div className="row">
<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 className="row"></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>

Loading…
Cancel
Save