Merge upstream react slick

.github/FUNDING.yml

@@ -0,0 +1 @@
+open_collective: react-slick

.gitignore

@@ -18,3 +18,4 @@ jquery.html
 docs/fonts/
 docs/ajax-loader.gif
 package-lock.json
+.DS_Store

CONTRIBUTING.md

@@ -5,15 +5,16 @@
 First, thank you for considering contributing to react-slick! It's people like you that make the open source community such a great community! 😊
 
 We welcome any type of contribution, not only code. You can help with
+
 - **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open)
 - **Marketing**: writing blog posts, howto's, printing stickers, ...
 - **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ...
-- **Code**: take a look at the [open issues](issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them. To get started you can also [sign up to triage react-slick issues on CodeTriage](https://www.codetriage.com/akiran/react-slick).
+- **Code**: take a look at the [open issues](https://github.com/akiran/react-slick/issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them. To get started you can also [sign up to triage react-slick issues on CodeTriage](https://www.codetriage.com/akiran/react-slick).
 - **Money**: we welcome financial contributions in full transparency on our [open collective](https://opencollective.com/react-slick).
 
 ## Your First Contribution
 
-Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
+Working on your first Pull Request? You can learn how from this _free_ series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
 
 ## Submitting code
 
@@ -31,7 +32,7 @@ Anyone can file an expense. If the expense makes sense for the development of th
 
 ## Questions
 
-If you have any questions, create an [issue](issue) (protip: do a quick search first to see if someone else didn't ask the same question before!).
+If you have any questions, create an [issue](https://github.com/akiran/react-slick/issues) (protip: do a quick search first to see if someone else didn't ask the same question before!).
 You can also reach us at [email protected].
 
 ## Credits
@@ -41,14 +42,12 @@ You can also reach us at [email protected].
 Thank you to all the people who have already contributed to react-slick!
 <a href="https://github.com/akiran/react-slick/graphs/contributors"><img src="https://opencollective.com/react-slick/contributors.svg?width=890" /></a>
 
-
 ### Backers
 
 Thank you to all our backers! [[Become a backer](https://opencollective.com/react-slick#backer)]
 
 <a href="https://opencollective.com/react-slick#backers" target="_blank"><img src="https://opencollective.com/react-slick/backers.svg?width=890"></a>
 
-
 ### Sponsors
 
 Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/react-slick#sponsor))

README.md

@@ -20,12 +20,14 @@ npm install react-slick --save
 yarn add react-slick
 ```
 
-⚠️ Also install slick-carousel for css and font
+**Also install slick-carousel for css and font**
 
 ```bash
 npm install slick-carousel
-@import "~slick-carousel/slick/slick.css";
-@import "~slick-carousel/slick/slick-theme.css";
+
+// Import css files
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 ```
 
 or add cdn link in your html
@@ -60,38 +62,36 @@ git push origin --follow-tags master
 import React from "react";
 import Slider from "react-slick";
 
-class SimpleSlider extends React.Component {
-  render() {
-    var settings = {
-      dots: true,
-      infinite: true,
-      speed: 500,
-      slidesToShow: 1,
-      slidesToScroll: 1
-    };
-    return (
-      <Slider {...settings}>
-        <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>
-    );
-  }
+export default function SimpleSlider() {
+  var settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  };
+  return (
+    <Slider {...settings}>
+      <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>
+  );
 }
 ```
 
@@ -115,32 +115,6 @@ npm start
 open http://localhost:8080
 ```
 
-<a href="https://opencollective.com/react-slick/donate" target="_blank">
-  <img src="https://opencollective.com/react-slick/donate/[email protected]?color=blue" width=300 />
-</a>
-
-## Contributors
-
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-<a href="https://github.com/akiran/react-slick/graphs/contributors"><img src="https://opencollective.com/react-slick/contributors.svg?width=890" /></a>
-
-## Backers
-
-Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/react-slick#backer)]
-
-<a href="https://opencollective.com/react-slick#backers" target="_blank"><img src="https://opencollective.com/react-slick/backers.svg?width=890"></a>
-
-## Sponsors
-
-Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/react-slick#sponsor)]
+## Contributing
 
-<a href="https://opencollective.com/react-slick/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/0/avatar.svg"></a>
-<a href="https://opencollective.com/react-slick/sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/1/avatar.svg"></a>
-<a href="https://opencollective.com/react-slick/sponsor/2/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/2/avatar.svg"></a>
-<a href="https://opencollective.com/react-slick/sponsor/3/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/3/avatar.svg"></a>
-<a href="https://opencollective.com/react-slick/sponsor/4/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/4/avatar.svg"></a>
-<a href="https://opencollective.com/react-slick/sponsor/5/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/5/avatar.svg"></a>
-<a href="https://opencollective.com/react-slick/sponsor/6/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/6/avatar.svg"></a>
-<a href="https://opencollective.com/react-slick/sponsor/7/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/7/avatar.svg"></a>
-<a href="https://opencollective.com/react-slick/sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/8/avatar.svg"></a>
-<a href="https://opencollective.com/react-slick/sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/9/avatar.svg"></a>
+Please see the [contributing guidelines](./CONTRIBUTING.md)

__tests__/afterChange.test.js

@@ -10,6 +10,7 @@ class SliderWithBeforeChange extends React.Component {
     };
     this.afterChange = this.afterChange.bind(this);
   }
+
   afterChange(currentSlide) {
     console.log(currentSlide, "afterChange");
     this.setState({
@@ -33,16 +34,34 @@ describe("After change Slider", function() {
     const wrapper = mount(<SliderWithBeforeChange />);
     expect(wrapper.state()).toEqual({ currentSlide: null });
     wrapper.find(".slick-next").simulate("click");
-
-    //TBD . fix this test
-
-    // expect(wrapper.find('.slick-slide.slick-active').first().text()).toEqual('slide2');
-    // expect(wrapper.state()).toEqual({currentSlide: 1})
-    // wrapper.find('.slick-next').simulate('click')
-    // expect(wrapper.find('.slick-slide.slick-active').first().text()).toEqual('slide3');
-    // expect(wrapper.state()).toEqual({currentSlide: 2})
-    // wrapper.find('.slick-prev').simulate('click')
-    // expect(wrapper.find('.slick-slide.slick-active').first().text()).toEqual('slide2');
-    // expect(wrapper.state()).toEqual({currentSlide: 1})
+    setTimeout(() => {
+      expect(
+        wrapper
+          .find(".slick-slide.slick-active")
+          .first()
+          .text()
+      ).toEqual("slide2");
+      expect(wrapper.state()).toEqual({ currentSlide: 1 });
+    }, 1);
+    wrapper.find(".slick-next").simulate("click");
+    setTimeout(() => {
+      expect(
+        wrapper
+          .find(".slick-slide.slick-active")
+          .first()
+          .text()
+      ).toEqual("slide3");
+      expect(wrapper.state()).toEqual({ currentSlide: 2 });
+    }, 1);
+    wrapper.find(".slick-prev").simulate("click");
+    setTimeout(() => {
+      expect(
+        wrapper
+          .find(".slick-slide.slick-active")
+          .first()
+          .text()
+      ).toEqual("slide2");
+      expect(wrapper.state()).toEqual({ currentSlide: 1 });
+    }, 1);
   });
 });

docs/demos.js

@@ -0,0 +1,72 @@
+"use strict";
+
+import React from "react";
+import Slider from "../src/slider";
+
+import SimpleSlider from "../examples/SimpleSlider";
+import SlideChangeHooks from "../examples/SlideChangeHooks";
+import MultipleItems from "../examples/MultipleItems";
+import MultipleRows from "../examples/MultipleRows";
+import Responsive from "../examples/Responsive";
+import Resizable from "../examples/Resizable";
+import UnevenSetsInfinite from "../examples/UnevenSetsInfinite";
+import UnevenSetsFinite from "../examples/UnevenSetsFinite";
+import CenterMode from "../examples/CenterMode";
+import FocusOnSelect from "../examples/FocusOnSelect";
+import AutoPlay from "../examples/AutoPlay";
+import AutoPlayMethods from "../examples/AutoPlayMethods";
+import PauseOnHover from "../examples/PauseOnHover";
+import Rtl from "../examples/Rtl";
+import VariableWidth from "../examples/VariableWidth";
+import AdaptiveHeight from "../examples/AdaptiveHeight";
+import LazyLoad from "../examples/LazyLoad";
+import Fade from "../examples/Fade";
+import SlickGoTo from "../examples/SlickGoTo";
+import CustomArrows from "../examples/CustomArrows";
+import PreviousNextMethods from "../examples/PreviousNextMethods";
+import DynamicSlides from "../examples/DynamicSlides";
+import VerticalMode from "../examples/VerticalMode";
+import SwipeToSlide from "../examples/SwipeToSlide";
+import VerticalSwipeToSlide from "../examples/VerticalSwipeToSlide";
+import CustomPaging from "../examples/CustomPaging";
+import CustomSlides from "../examples/CustomSlides";
+import AsNavFor from "../examples/AsNavFor";
+import AppendDots from "../examples/AppendDots";
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <div className="content">
+        <SimpleSlider />
+        <MultipleItems />
+        <MultipleRows />
+        <Responsive />
+        <Resizable />
+        <UnevenSetsInfinite />
+        <UnevenSetsFinite />
+        <CenterMode />
+        <FocusOnSelect />
+        <AutoPlay />
+        <AutoPlayMethods />
+        <PauseOnHover />
+        <Rtl />
+        <VariableWidth />
+        <AdaptiveHeight />
+        <LazyLoad />
+        <Fade />
+        <SlideChangeHooks />
+        <SlickGoTo />
+        <CustomPaging />
+        <CustomArrows />
+        <CustomSlides />
+        <PreviousNextMethods />
+        <DynamicSlides />
+        <VerticalMode />
+        <SwipeToSlide />
+        <VerticalSwipeToSlide />
+        <AsNavFor />
+        <AppendDots />
+      </div>
+    );
+  }
+}

docs/demos.jsx

@@ -1,8 +1,6 @@
 'use strict';
 
 import React from 'react';
-import Slider from '../src/slider';
-
 import SimpleSlider from '../examples/SimpleSlider'
 import SlideChangeHooks from '../examples/SlideChangeHooks'
 import MultipleItems from '../examples/MultipleItems'

docs/docs.js

@@ -0,0 +1,21 @@
+"use strict";
+
+import React from "react";
+import Demos from "./demos";
+
+export default class Docs extends React.Component {
+  render() {
+    return (
+      <div className="">
+        <div className="title-bar primary">
+          <span className="title">React Slick</span>
+        </div>
+        <div className="">
+          <div className="">
+            <Demos />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

docs/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+import React from "react";
+import ReactDOM from "react-dom";
+import Docs from "./docs";
+
+React.initializeTouchEvents && React.initializeTouchEvents(true);
+ReactDOM.render(
+  <React.StrictMode>
+    <Docs />
+  </React.StrictMode>,
+  document.getElementById("rapp")
+);