From 9211be1b8d449634f44b96818e6f0204d2d057ba Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Tue, 16 May 2017 12:48:33 +0300 Subject: [PATCH 1/2] Created tslint.json. --- types/react-slick/tslint.json | 1 + 1 file changed, 1 insertion(+) create mode 100644 types/react-slick/tslint.json diff --git a/types/react-slick/tslint.json b/types/react-slick/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-slick/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From 6ab6d781770a1e87a86c75865c37ec50d05b04b3 Mon Sep 17 00:00:00 2001 From: Giedrius Grabauskas Date: Thu, 18 May 2017 18:31:22 +0300 Subject: [PATCH 2/2] Created types for react-slick 0.14. --- types/react-slick/index.d.ts | 112 ++++++++++++++---------- types/react-slick/react-slick-tests.tsx | 106 +++++++++++++++++----- types/react-slick/tsconfig.json | 4 +- 3 files changed, 151 insertions(+), 71 deletions(-) diff --git a/types/react-slick/index.d.ts b/types/react-slick/index.d.ts index 1278605b27..87f9bbad50 100644 --- a/types/react-slick/index.d.ts +++ b/types/react-slick/index.d.ts @@ -1,55 +1,75 @@ -// Type definitions for react-slick +// Type definitions for react-slick 0.14 // Project: https://github.com/akiran/react-slick -// Definitions by: Andrey Balokha +// Definitions by: Andrey Balokha , Giedrius Grabauskas // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.1 -/// +import * as React from "react"; -interface __config { - accessibility?: boolean - nextArrow?: HTMLElement | any - prevArrow?: HTMLElement | any - pauseOnHover?: boolean - className?: string - adaptiveHeight?: boolean - arrows?: boolean - autoplay?: boolean - autoplaySpeed?: number // integer - centerMode?: boolean - centerPadding?: string | any - cssEase?: string | any - dots?: boolean - dotsClass?: string - draggable?: boolean - easing?: string - fade?: boolean - focusOnSelect?: boolean - infinite?: boolean // should the gallery wrap around it's contents - initialSlide?: number // int - lazyLoad?: boolean - rtl?: boolean - slide?: string - slidesToShow?: number // int - slidesToScroll?: number // int - speed?: number //int - swipe?: boolean - swipeToSlide?: boolean - touchMove?: boolean - touchThreshold?: number // int - variableWidth?: boolean - useCSS?: boolean - vertical?: boolean - afterChange?: ((currentSlide: number) => void) - beforeChange?: ((currentSlide: number, nextSlide: number) => void) - slickGoTo?: number // int +type ComponentConstructor = React.ComponentClass | React.StatelessComponent; + +export interface CustomArrowProps { + className?: string; + style?: React.CSSProperties; + onClick?: React.MouseEventHandler; } -interface Slider extends __config { - responsive?: { breakpoint: number; settings: __config}[] +export interface ResponsiveObject { + breakpoint: number; + settings: "unslick" | Settings; } -declare module "react-slick" { - var Slider: React.ClassicComponentClass; - export = Slider; +export type SwipeDirection = "left" | "down" | "right" | "up" | string; + +export interface Settings { + accessibility?: boolean; + className?: string; + adaptiveHeight?: boolean; + arrows?: boolean; + nextArrow?: JSX.Element; + prevArrow?: JSX.Element; + autoplay?: boolean; + autoplaySpeed?: number; + centerMode?: boolean; + centerPadding?: string; + cssEase?: string; + customPaging?(index: number): JSX.Element; + dots?: boolean; + dotsClass?: string; + draggable?: boolean; + easing?: string; + fade?: boolean; + focusOnSelect?: boolean; + infinite?: boolean; + initialSlide?: number; + lazyLoad?: boolean; + pauseOnHover?: boolean; + responsive?: ResponsiveObject[]; + rtl?: boolean; + slide?: string; + slidesToShow?: number; + slidesToScroll?: number; + speed?: number; + swipe?: boolean; + swipeToSlide?: boolean; + touchMove?: boolean; + touchThreshold?: number; + variableWidth?: boolean; + useCSS?: boolean; + vertical?: boolean; + afterChange?(currentSlide: number): void; + beforeChange?(currentSlide: number, nextSlide: number): void; + slickGoTo?: number; + edgeFriction?: number; + waitForAnimate?: boolean; + edgeEvent?(swipeDirection: SwipeDirection): void; + swipeEvent?(swipeDirection: SwipeDirection): void; + init?(): void; } + +declare class Slider extends React.Component { + slickNext(): void; + slickPrev(): void; + slickGoTo(slideNumber: number): void; +} + +export default Slider; diff --git a/types/react-slick/react-slick-tests.tsx b/types/react-slick/react-slick-tests.tsx index 2d26b0dcf1..dde5f43fb4 100644 --- a/types/react-slick/react-slick-tests.tsx +++ b/types/react-slick/react-slick-tests.tsx @@ -1,28 +1,88 @@ -import * as React from "react" -import * as ReactDOM from "react-dom" -import * as Slider from "react-slick" - -class SliderTest extends React.Component, {}> { +import * as React from "react"; +import { default as Slider, Settings, CustomArrowProps } from "react-slick"; +class LeftNavArrow extends React.Component { render() { - let settings = { - speed: 500, - slidesToShow: 8, - slidesToScroll: 1, - draggable: false, - infinite: false, - prevArrow: link - }; - - return ( -
- -

Slide1

-

Slide2

- -
- ) + return ; } } -ReactDOM.render(, document.body); +function RightNavArrow(props: CustomArrowProps): JSX.Element { + const { className, style, onClick } = props; + return
; +} + +const defaultSettings: Settings = { + className: "", + accessibility: true, + adaptiveHeight: false, + arrows: true, + autoplay: false, + autoplaySpeed: 3000, + centerMode: false, + centerPadding: "50px", + cssEase: "ease", + customPaging: (i: number) => { + return ; + }, + dots: false, + dotsClass: "slick-dots", + draggable: true, + easing: "linear", + edgeFriction: 0.35, + fade: false, + focusOnSelect: false, + infinite: true, + initialSlide: 0, + lazyLoad: false, + pauseOnHover: true, + responsive: [{ breakpoint: 1000, settings: "unslick" }, { breakpoint: 2000, settings: { arrows: false } }], + rtl: false, + slide: "div", + slidesToShow: 1, + slidesToScroll: 1, + speed: 500, + swipe: true, + swipeToSlide: false, + touchMove: true, + touchThreshold: 5, + useCSS: true, + variableWidth: false, + vertical: false, + waitForAnimate: true, + afterChange: (currentSlide: number) => { }, + beforeChange: (currentSlide: number, nextSlide: number) => { }, + edgeEvent: (swipeDirection: string) => { }, + init: () => { }, + swipeEvent: (swipeDirection: string) => { }, + nextArrow: , + prevArrow: +}; + +class SliderTest extends React.Component<{}, {}> { + private slider: Slider; + render() { + return
+ { this.slider = component; }} + > +

1

+

2

+

3

+

4

+

5

+

6

+ +
+ + + +
+
; + } +} diff --git a/types/react-slick/tsconfig.json b/types/react-slick/tsconfig.json index 295e4cd738..72d192fbf8 100644 --- a/types/react-slick/tsconfig.json +++ b/types/react-slick/tsconfig.json @@ -7,7 +7,7 @@ ], "noImplicitAny": true, "noImplicitThis": true, - "strictNullChecks": false, + "strictNullChecks": true, "baseUrl": "../", "jsx": "react", "typeRoots": [ @@ -21,4 +21,4 @@ "index.d.ts", "react-slick-tests.tsx" ] -} \ No newline at end of file +}