Merge pull request #16615 from GiedriusGrabauskas/react-slick

Updated types for react-slick 0.14

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 <https://github.com/andrewBalekha>
+// Definitions by: Andrey Balokha <https://github.com/andrewBalekha>, Giedrius Grabauskas <https://github.com/GiedriusGrabauskas>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.1
 
-/// <reference types="react"/>
+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<TProps> = React.ComponentClass<TProps> | React.StatelessComponent<TProps>;
+
+export interface CustomArrowProps {
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: React.MouseEventHandler<any>;
 }
 
-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<Slider>;
-  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<Settings, never> {
+  slickNext(): void;
+  slickPrev(): void;
+  slickGoTo(slideNumber: number): void;
+}
+
+export default Slider;

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<React.Props<{}>, {}> {
+import * as React from "react";
+import { default as Slider, Settings, CustomArrowProps } from "react-slick";
 
+class LeftNavArrow extends React.Component<CustomArrowProps, {}> {
   render() {
-    let settings = {
-      speed: 500,
-      slidesToShow: 8,
-      slidesToScroll: 1,
-      draggable: false,
-      infinite: false,
-      prevArrow: <a href="#">link</a>
-    };
-
-    return (
-      <div>
-        <Slider {...settings} >
-          <div><h1>Slide1</h1></div>
-          <div><h1>Slide2</h1></div>
-        </Slider>
-      </div>
-    )
+    return <button onClick={this.props.onClick}>Next</button>;
   }
 }
 
-ReactDOM.render(<SliderTest />, document.body);
+function RightNavArrow(props: CustomArrowProps): JSX.Element {
+  const { className, style, onClick } = props;
+  return <div
+    className={className}
+    style={Object.assign(style, { display: 'block', background: 'green' })}
+    onClick={onClick}
+  ></div>;
+}
+
+const defaultSettings: Settings = {
+  className: "",
+  accessibility: true,
+  adaptiveHeight: false,
+  arrows: true,
+  autoplay: false,
+  autoplaySpeed: 3000,
+  centerMode: false,
+  centerPadding: "50px",
+  cssEase: "ease",
+  customPaging: (i: number) => {
+    return <button>{i + 1}</button>;
+  },
+  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: <LeftNavArrow />,
+  prevArrow: <RightNavArrow />
+};
+
+class SliderTest extends React.Component<{}, {}> {
+  private slider: Slider;
+  render() {
+    return <div>
+      <Slider
+        {...defaultSettings}
+        ref={(component: Slider) => { this.slider = component; }}
+      >
+        <div><h3>1</h3></div>
+        <div><h3>2</h3></div>
+        <div><h3>3</h3></div>
+        <div><h3>4</h3></div>
+        <div><h3>5</h3></div>
+        <div><h3>6</h3></div>
+      </Slider>
+      <div style={{ textAlign: "center" }}>
+        <button className="button" onClick={(event) => { this.slider.slickPrev(); }}>Previous</button>
+        <button className="button" onClick={(event) => { this.slider.slickNext(); }}>Next</button>
+        <button className="button" onClick={(event) => { this.slider.slickGoTo(1); }}>First</button>
+      </div>
+    </div>;
+  }
+}

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"
     ]
-}
+}

types/react-slick/tslint.json

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