Reza_ashrafi
/
react-carousel
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add pagination feature

Browse Source
master
Hasan Genc 4 years ago
parent 1d02c951d7
commit 4160d761a0
5 changed files with 194 additions and 108 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 213
      website/src/pages/index.js

1
src/components/carousel/defaultProps.ts
Unescape View File

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

82
src/components/carousel/index.tsx
Unescape View File

@ -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;
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, slide, props.children.length, direction);
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 {

2
src/helpers/index.ts
Unescape View File

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

2
src/hooks/index.ts
Unescape View File

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

213
website/src/pages/index.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save