mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-06-02 06:29:40 +08:00
Merge pull request #26290 from RomiC/master
Added typings for nuka-carousel react component
This commit is contained in:
Armando Aguirre
270
types/nuka-carousel/index.d.ts
vendored
Normal file
270
types/nuka-carousel/index.d.ts
vendored
Normal file
@@ -0,0 +1,270 @@
|
||||
// Type definitions for nuka-carousel 4.2
|
||||
// Project: https://github.com/FormidableLabs/nuka-carousel
|
||||
// Definitions by: Roman Charugin <https://github.com/Romic>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.6
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
export default class Carousel extends React.Component<CarouselProps, CarouselState> {}
|
||||
|
||||
export type CellAlignProp = 'left' | 'center' | 'right';
|
||||
|
||||
export type HeightModeProp = 'first' | 'current' | 'max';
|
||||
|
||||
export type SlidesToScrollProp = number | 'auto';
|
||||
|
||||
export type SlideWidthProp = string | number;
|
||||
|
||||
export interface SlideRenderControlProps {
|
||||
/**
|
||||
* Current slide index
|
||||
*/
|
||||
currentSlide: number;
|
||||
/**
|
||||
* Total amount of slides
|
||||
*/
|
||||
slideCount: number;
|
||||
/**
|
||||
* Current frame width (px)
|
||||
*/
|
||||
frameWidth: number;
|
||||
/**
|
||||
* Current slide width (px)
|
||||
*/
|
||||
slideWidth: number;
|
||||
/**
|
||||
* Slides to scroll at once
|
||||
*/
|
||||
slidesToScroll: number;
|
||||
/**
|
||||
* Space between slides, as an integer, but reflected as px
|
||||
*/
|
||||
cellSpacing: number;
|
||||
/**
|
||||
* Slides to show at once
|
||||
*/
|
||||
slidesToShow: number;
|
||||
/**
|
||||
* Infinite mode enabled
|
||||
*/
|
||||
wrapAround: boolean;
|
||||
/**
|
||||
* Go to the next slide method
|
||||
*/
|
||||
nextSlide: () => void;
|
||||
/**
|
||||
* Go to the previous slide method
|
||||
*/
|
||||
previousSlide: () => void;
|
||||
/**
|
||||
* Go to X slide method
|
||||
* @param index Slide's index to go
|
||||
*/
|
||||
goToSlide: (index: number) => void;
|
||||
}
|
||||
|
||||
export type RenderControl = (props: SlideRenderControlProps) => JSX.Element;
|
||||
|
||||
export interface CarouselProps {
|
||||
/**
|
||||
* Hook to be called after a slide is changed
|
||||
* @param prevSlide Index of the previous slide
|
||||
*/
|
||||
afterSlide?: (prevSlide: number) => void;
|
||||
/**
|
||||
* Autoplay mode active
|
||||
* @default false
|
||||
*/
|
||||
autoplay?: boolean;
|
||||
/**
|
||||
* Interval for autoplay iteration (ms)
|
||||
* @default 3000
|
||||
*/
|
||||
autoplayInterval?: number;
|
||||
/**
|
||||
* Hook to be called before a slide is changed
|
||||
* @param currentSlide Index of the current slide
|
||||
* @param endSlide Index of the last slide
|
||||
*/
|
||||
beforeSlide?: (currentSlide: number, endSlide: number) => void;
|
||||
/**
|
||||
* When displaying more than one slide,
|
||||
* sets which position to anchor the current slide to
|
||||
*/
|
||||
cellAlign?: CellAlignProp;
|
||||
/**
|
||||
* Space between slides, as an integer, but reflected as px
|
||||
*/
|
||||
cellSpacing?: number;
|
||||
/**
|
||||
* Additional className
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* Enable mouse swipe/dragging
|
||||
*/
|
||||
dragging?: boolean;
|
||||
/**
|
||||
* Animation easing function
|
||||
* @see https://github.com/d3/d3-ease
|
||||
*/
|
||||
easing?: string;
|
||||
/**
|
||||
* Animation easing function when swipe exceeds edge
|
||||
* @see https://github.com/d3/d3-ease
|
||||
*/
|
||||
edgeEasing?: string;
|
||||
/**
|
||||
* Used to set overflow style property on slider frame
|
||||
* @default 'hidden'
|
||||
*/
|
||||
frameOverflow?: string;
|
||||
/**
|
||||
* Used to set the margin of the slider frame.
|
||||
* Accepts any string dimension value such as "0px 20px" or "500px"
|
||||
* @example '0px 20px'
|
||||
* @example '500px'
|
||||
*/
|
||||
framePadding?: string;
|
||||
/**
|
||||
* Change the height of the slides based either on the first slide,
|
||||
* the current slide, or the maximum height of all slides.
|
||||
*/
|
||||
heightMode?: HeightModeProp;
|
||||
/**
|
||||
* Initial height of the slides (px)
|
||||
*/
|
||||
initialSlideHeight?: number;
|
||||
/**
|
||||
* Initial width of the slides (px)
|
||||
*/
|
||||
initialSlideWidth?: number;
|
||||
/**
|
||||
* Window onResize callback
|
||||
*/
|
||||
onResize?: () => void;
|
||||
/**
|
||||
* Function for rendering top left control
|
||||
*/
|
||||
renderTopLeftControls?: RenderControl;
|
||||
/**
|
||||
* Function for rendering top center control
|
||||
*/
|
||||
renderTopCenterControls?: RenderControl;
|
||||
/**
|
||||
* Function for rendering top right control
|
||||
*/
|
||||
renderTopRightControls?: RenderControl;
|
||||
/**
|
||||
* Function for rendering center left control
|
||||
*/
|
||||
renderCenterLeftControls?: RenderControl;
|
||||
/**
|
||||
* Function for rendering center center control
|
||||
*/
|
||||
renderCenterCenterControls?: RenderControl;
|
||||
/**
|
||||
* Function for rendering center right control
|
||||
*/
|
||||
renderCenterRightControls?: RenderControl;
|
||||
/**
|
||||
* Function for rendering bottom left control
|
||||
*/
|
||||
renderBottomLeftControls?: RenderControl;
|
||||
/**
|
||||
* Function for rendering bottom center control
|
||||
*/
|
||||
renderBottomCenterControls?: RenderControl;
|
||||
/**
|
||||
* Function for rendering bottom right control
|
||||
*/
|
||||
renderBottomRightControls?: RenderControl;
|
||||
/**
|
||||
* Manually set the index of the slide to be shown
|
||||
*/
|
||||
slideIndex?: number;
|
||||
/**
|
||||
* Slides to scroll at once. Set to "auto"
|
||||
* to always scroll the current number of visible slides
|
||||
*/
|
||||
slidesToScroll?: SlidesToScrollProp;
|
||||
/**
|
||||
* Slides to show at once
|
||||
*/
|
||||
slidesToShow?: number;
|
||||
/**
|
||||
* Manually set slideWidth
|
||||
* @example '20px'
|
||||
* @example 0.8
|
||||
*/
|
||||
slideWidth?: SlideWidthProp;
|
||||
/**
|
||||
* Animation duration
|
||||
*/
|
||||
speed?: number;
|
||||
/**
|
||||
* Enable touch swipe/dragging
|
||||
*/
|
||||
swiping?: boolean;
|
||||
/**
|
||||
* Enable the slides to transition vertically
|
||||
*/
|
||||
vertical?: boolean;
|
||||
/**
|
||||
* Used to hardcode the slider width
|
||||
* @example '80%'
|
||||
* @example '500px'
|
||||
*/
|
||||
width?: string;
|
||||
/**
|
||||
* Sets infinite wrapAround mode
|
||||
* @default false
|
||||
*/
|
||||
wrapAround?: boolean;
|
||||
}
|
||||
|
||||
export interface CarouselState {
|
||||
/**
|
||||
* Current slide index
|
||||
*/
|
||||
currentSlide: number;
|
||||
/**
|
||||
* Is dragging enabled
|
||||
*/
|
||||
dragging: boolean;
|
||||
/**
|
||||
* Current frame width
|
||||
*/
|
||||
frameWidth: number;
|
||||
/**
|
||||
* Current left value
|
||||
*/
|
||||
left: number;
|
||||
/**
|
||||
* Total amount of slides
|
||||
*/
|
||||
slideCount: number;
|
||||
/**
|
||||
* Slides to scroll at once
|
||||
*/
|
||||
slidesToScroll: number;
|
||||
/**
|
||||
* Current slide width
|
||||
*/
|
||||
slideWidth: SlideWidthProp;
|
||||
/**
|
||||
* Current top value
|
||||
*/
|
||||
top: number;
|
||||
/**
|
||||
* Easing function name
|
||||
*/
|
||||
easing: string;
|
||||
/**
|
||||
* Is infinite mode enabled
|
||||
*/
|
||||
isWrappingAround: boolean;
|
||||
wrapToIndex: boolean;
|
||||
resetWrapAroundPosition: boolean;
|
||||
}
|
||||
54
types/nuka-carousel/nuka-carousel-tests.tsx
Normal file
54
types/nuka-carousel/nuka-carousel-tests.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import * as React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
|
||||
import Carousel, { CarouselProps } from 'nuka-carousel';
|
||||
|
||||
const props: CarouselProps = {
|
||||
afterSlide: () => {},
|
||||
autoplay: true,
|
||||
autoplayInterval: 5000,
|
||||
beforeSlide: () => {},
|
||||
cellAlign: 'center',
|
||||
cellSpacing: 500,
|
||||
dragging: true,
|
||||
easing: 'easePoly',
|
||||
edgeEasing: 'easePolyInOut',
|
||||
framePadding: '100px',
|
||||
heightMode: 'max',
|
||||
initialSlideHeight: 200,
|
||||
initialSlideWidth: 500,
|
||||
onResize: () => {},
|
||||
renderTopLeftControls: () => <button />,
|
||||
renderTopCenterControls: () => <button />,
|
||||
renderTopRightControls: () => <button />,
|
||||
renderCenterLeftControls: () => <button />,
|
||||
renderCenterCenterControls: () => <button />,
|
||||
renderCenterRightControls: () => <button />,
|
||||
renderBottomLeftControls: () => <button />,
|
||||
renderBottomCenterControls: () => <button />,
|
||||
renderBottomRightControls: () => <button />,
|
||||
slideIndex: 2,
|
||||
slidesToScroll: 'auto',
|
||||
slidesToShow: 1,
|
||||
slideWidth: 0.8,
|
||||
speed: 2000,
|
||||
swiping: true,
|
||||
vertical: false,
|
||||
width: '500px',
|
||||
wrapAround: false
|
||||
};
|
||||
|
||||
class CarouselComponent extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Carousel {...props}>
|
||||
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide1" />
|
||||
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide2" />
|
||||
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide3" />
|
||||
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide4" />
|
||||
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide5" />
|
||||
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide6" />
|
||||
</Carousel>
|
||||
);
|
||||
}
|
||||
}
|
||||
25
types/nuka-carousel/tsconfig.json
Normal file
25
types/nuka-carousel/tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react"
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"nuka-carousel-tests.tsx"
|
||||
]
|
||||
}
|
||||
3
types/nuka-carousel/tslint.json
Normal file
3
types/nuka-carousel/tslint.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json"
|
||||
}
|
||||
Reference in New Issue
Block a user