[@brainhubeu/react-carousel] Added new package (#37617)

This commit is contained in:
Jack Allen 2019-08-16 01:39:43 +01:00 committed by Pranav Senthilnathan
parent 59cb9669eb
commit 00a6bcfbfc
4 changed files with 139 additions and 0 deletions

View File

@ -0,0 +1,61 @@
import * as React from "react";
import Carousel, { Dots } from "@brainhubeu/react-carousel";
interface MyCarouselProps {
value: number;
}
interface MyCarouselState {
value: number;
slides: Array<React.ReactComponentElement<'img'>>;
}
class MyCarousel extends React.Component<MyCarouselProps, MyCarouselState> {
state = {
value: 0,
slides: [
<img key={1} alt="img-2"/>,
<img key={2} alt="img-2"/>,
<img key={3} alt="img-3"/>,
],
};
handleChange = (value: number) => {
this.setState({value});
}
render() {
const {value, slides} = this.state;
return (
<>
<Carousel
addArrowClickHandler
animationSpeed={2000}
arrows
arrowLeft={<div>left</div>}
arrowRight={<div>left</div>}
autoPlay={1000}
clickToChange
centered
dots={false}
draggable
itemWidth={100}
infinite
keepDirectionWhenDragging
onChange={this.handleChange}
offset={50}
slides={slides}
slidesPerPage={1}
slidesPerScroll={3}
stopAutoPlayOnHover
value={value}>
<img alt="image-1"/>
<img alt="image-2"/>
<img alt="image-3"/>
</Carousel>
<Dots number={slides.length} value={value} onChange={this.handleChange}/>
</>
);
}
}

View File

@ -0,0 +1,45 @@
// Type definitions for @brainhubeu/react-carousel 1.10
// Project: https://github.com/brainhubeu/react-carousel
// Definitions by: Jack Allen <https://github.com/jackall3n>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
import * as React from "react";
export type ImgProps = React.ReactComponentElement<'img'>;
export interface DotsProps {
number?: number;
thumbnails?: ImgProps[];
value?: number;
onChange?(value: number): void;
}
export class Dots extends React.Component<DotsProps> {
}
export interface CarouselProps {
value?: number;
onChange?(value: number): void;
slides?: ImgProps[];
slidesPerPage?: number;
slidesPerScroll?: number;
itemWidth?: number;
offset?: number;
arrows?: boolean;
arrowLeft?: JSX.Element;
arrowRight?: JSX.Element;
addArrowClickHandler?: boolean;
autoPlay?: number;
stopAutoPlayOnHover?: boolean;
clickToChange?: boolean;
centered?: boolean;
infinite?: boolean;
draggable?: boolean;
keepDirectionWhenDragging?: boolean;
animationSpeed?: number;
dots?: boolean;
}
export default class extends React.Component<CarouselProps> {
}

View File

@ -0,0 +1,30 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"dom"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"jsx": "react",
"typeRoots": [
"../"
],
"paths": {
"@brainhubeu/react-carousel": [
"brainhubeu__react-carousel"
]
},
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
},
"files": [
"index.d.ts",
"brainhubeu__react-carousel-tests.tsx"
]
}

View File

@ -0,0 +1,3 @@
{
"extends": "dtslint/dt.json"
}