Merge pull request #1873 from akiran/0.27.9

0.27.9

Author: akiran

docs/single-demo.js

@@ -3,7 +3,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Slider from "../src/slider";
-
 function SimpleSlider() {
   const settings = {
     dots: true,

examples/Fade.js

@@ -10,7 +10,8 @@ export default class Fade extends Component {
       infinite: true,
       speed: 500,
       slidesToShow: 1,
-      slidesToScroll: 1
+      slidesToScroll: 1,
+      waitForAnimate: false
     };
     return (
       <div>

examples/__tests__/Fade.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { mount } from "enzyme";
+import Fade from "../Fade";
+import { clickNext, clickPrev } from "../../__tests__/testUtils";
+
+describe("Fade", () => {
+  it("should change slides when clicked on next & prev buttons", () => {
+    const slider = mount(<Fade />);
+    let activeSlide = slider.find("div.slick-active");
+    expect(activeSlide.props()["data-index"]).toEqual(0);
+    clickNext(slider);
+    activeSlide = slider.find("div.slick-active");
+    expect(activeSlide.props()["data-index"]).toEqual(1);
+    clickPrev(slider);
+    activeSlide = slider.find("div.slick-active");
+    expect(activeSlide.props()["data-index"]).toEqual(0);
+  });
+});

examples/__tests__/__snapshots__/MultipleItems.test.js.snap

@@ -989,7 +989,7 @@ exports[`Multiple Items should show slides first 3 slides when middle dot is cli
     <h2> Multiple items </h2>
     <div class=\\"slick-slider slick-initialized\\" dir=\\"ltr\\"><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-prev\\" style=\\"display: block;\\"> Previous</button>
         <div class=\\"slick-list\\">
-            <div class=\\"slick-track\\" style=\\"opacity: 1; transform: translate3d(0px, 0px, 0px);\\">
+            <div class=\\"slick-track\\" style=\\"opacity: 1; transform: translate3d(0px, 0px, 0px); transition: transform 500ms ease;\\">
                 <div data-index=\\"-3\\" tabindex=\\"-1\\" class=\\"slick-slide slick-cloned\\" aria-hidden=\\"true\\" style=\\"width: 0px;\\">
                     <div>
                         <div tabindex=\\"-1\\" style=\\"width: 100%; display: inline-block;\\">

examples/__tests__/__snapshots__/UnevenSets.test.js.snap

@@ -51,8 +51,8 @@ exports[`UnevenSets Finite Activity test 1`] = `
             </div>
         </div><button type=\\"button\\" data-role=\\"none\\" class=\\"slick-arrow slick-next slick-disabled\\" style=\\"display: block;\\"> Next</button>
         <ul style=\\"display: block;\\" class=\\"slick-dots\\">
-            <li class=\\"slick-active\\"><button>1</button></li>
-            <li class=\\"\\"><button>2</button></li>
+            <li class=\\"\\"><button>1</button></li>
+            <li class=\\"slick-active\\"><button>2</button></li>
         </ul>
     </div>
 </div>"

src/dots.js

@@ -2,6 +2,7 @@
 
 import React from "react";
 import classnames from "classnames";
+import { clamp } from "./utils/innerSliderUtils";
 
 const getDotCount = spec => {
   let dots;
@@ -25,47 +26,55 @@ export class Dots extends React.PureComponent {
     this.props.clickHandler(options);
   }
   render() {
+    const {
+      onMouseEnter,
+      onMouseOver,
+      onMouseLeave,
+      infinite,
+      slidesToScroll,
+      slidesToShow,
+      slideCount,
+      currentSlide
+    } = this.props;
     let dotCount = getDotCount({
-      slideCount: this.props.slideCount,
-      slidesToScroll: this.props.slidesToScroll,
-      slidesToShow: this.props.slidesToShow,
-      infinite: this.props.infinite
+      slideCount,
+      slidesToScroll,
+      slidesToShow,
+      infinite
     });
 
-    // Apply join & split to Array to pre-fill it for IE8
-    //
-    // Credit: http://stackoverflow.com/a/13735425/1849458
-    const { onMouseEnter, onMouseOver, onMouseLeave } = this.props;
     const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave };
-    let dots = Array.apply(
-      null,
-      Array(dotCount + 1)
-        .join("0")
-        .split("")
-    ).map((x, i) => {
-      let leftBound = i * this.props.slidesToScroll;
-      let rightBound =
-        i * this.props.slidesToScroll + (this.props.slidesToScroll - 1);
+    let dots = [];
+    for (let i = 0; i < dotCount; i++) {
+      let _rightBound = (i + 1) * slidesToScroll - 1;
+      let rightBound = infinite
+        ? _rightBound
+        : clamp(_rightBound, 0, slideCount - 1);
+      let _leftBound = rightBound - (slidesToScroll - 1);
+      let leftBound = infinite
+        ? _leftBound
+        : clamp(_leftBound, 0, slideCount - 1);
+
       let className = classnames({
-        "slick-active":
-          this.props.currentSlide >= leftBound &&
-          this.props.currentSlide <= rightBound
+        "slick-active": infinite
+          ? currentSlide >= leftBound && currentSlide <= rightBound
+          : currentSlide === leftBound
       });
 
       let dotOptions = {
         message: "dots",
         index: i,
-        slidesToScroll: this.props.slidesToScroll,
-        currentSlide: this.props.currentSlide
+        slidesToScroll,
+        currentSlide
       };
 
       let onClick = this.clickHandler.bind(this, dotOptions);
-      return (
+      dots = dots.concat(
         <li key={i} className={className}>
           {React.cloneElement(this.props.customPaging(i), { onClick })}
         </li>
       );
-    });
+    }
 
     return React.cloneElement(this.props.appendDots(dots), {
       className: this.props.dotsClass,

src/inner-slider.js

@@ -122,47 +122,33 @@ export class InnerSlider extends React.Component {
     }
     this.ro.disconnect();
   };
-  UNSAFE_componentWillReceiveProps = nextProps => {
-    let spec = {
-      listRef: this.list,
-      trackRef: this.track,
-      ...nextProps,
-      ...this.state
-    };
+
+  didPropsChange(prevProps) {
     let setTrackStyle = false;
     for (let key of Object.keys(this.props)) {
-      if (!nextProps.hasOwnProperty(key)) {
+      if (!prevProps.hasOwnProperty(key)) {
         setTrackStyle = true;
         break;
       }
       if (
-        typeof nextProps[key] === "object" ||
-        typeof nextProps[key] === "function"
+        typeof prevProps[key] === "object" ||
+        typeof prevProps[key] === "function"
       ) {
         continue;
       }
-      if (nextProps[key] !== this.props[key]) {
+      if (prevProps[key] !== this.props[key]) {
         setTrackStyle = true;
         break;
       }
     }
-    this.updateState(spec, setTrackStyle, () => {
-      if (this.state.currentSlide >= React.Children.count(nextProps.children)) {
-        this.changeSlide({
-          message: "index",
-          index:
-            React.Children.count(nextProps.children) - nextProps.slidesToShow,
-          currentSlide: this.state.currentSlide
-        });
-      }
-      if (nextProps.autoplay) {
-        this.autoPlay("update");
-      } else {
-        this.pause("paused");
-      }
-    });
-  };
-  componentDidUpdate = () => {
+    return (
+      setTrackStyle ||
+      React.Children.count(this.props.children) !==
+        React.Children.count(prevProps.children)
+    );
+  }
+
+  componentDidUpdate = prevProps => {
     this.checkImagesLoad();
     this.props.onReInit && this.props.onReInit();
     if (this.props.lazyLoad) {
@@ -183,6 +169,32 @@ export class InnerSlider extends React.Component {
     //   this.props.onLazyLoad([leftMostSlide])
     // }
     this.adaptHeight();
+    let spec = {
+      listRef: this.list,
+      trackRef: this.track,
+      ...this.props,
+      ...this.state
+    };
+    const setTrackStyle = this.didPropsChange(prevProps);
+    setTrackStyle &&
+      this.updateState(spec, setTrackStyle, () => {
+        if (
+          this.state.currentSlide >= React.Children.count(this.props.children)
+        ) {
+          this.changeSlide({
+            message: "index",
+            index:
+              React.Children.count(this.props.children) -
+              this.props.slidesToShow,
+            currentSlide: this.state.currentSlide
+          });
+        }
+        if (this.props.autoplay) {
+          this.autoPlay("update");
+        } else {
+          this.pause("paused");
+        }
+      });
   };
   onWindowResized = setTrackStyle => {
     if (this.debouncedResize) this.debouncedResize.cancel();
@@ -385,6 +397,8 @@ export class InnerSlider extends React.Component {
     onLazyLoad && slidesToLoad.length > 0 && onLazyLoad(slidesToLoad);
     if (!this.props.waitForAnimate && this.animationEndCallback) {
       clearTimeout(this.animationEndCallback);
+      afterChange && afterChange(currentSlide);
+      delete this.animationEndCallback;
     }
     this.setState(state, () => {
       // asNavForIndex check is to avoid recursive calls of slideHandler in waitForAnimate=false mode
@@ -408,7 +422,6 @@ export class InnerSlider extends React.Component {
   changeSlide = (options, dontAnimate = false) => {
     const spec = { ...this.props, ...this.state };
     let targetSlide = changeSlide(spec, options);
-    if (targetSlide === this.state.targetSlide) return;
     if (targetSlide !== 0 && !targetSlide) return;
     if (dontAnimate === true) {
       this.slideHandler(targetSlide, dontAnimate);

src/track.js

@@ -67,7 +67,7 @@ const getSlideStyle = spec => {
       style.left = -spec.index * parseInt(spec.slideWidth);
     }
     style.opacity = spec.currentSlide === spec.index ? 1 : 0;
-    if (!spec.useCSS) {
+    if (spec.useCSS) {
       style.transition =
         "opacity " +
         spec.speed +

src/utils/innerSliderUtils.js

@@ -259,6 +259,7 @@ export const changeSlide = (spec, options) => {
     slidesToShow,
     slideCount,
     currentSlide,
+    targetSlide: previousTargetSlide,
     lazyLoad,
     infinite
   } = spec;
@@ -273,13 +274,19 @@ export const changeSlide = (spec, options) => {
       previousInt = currentSlide - slideOffset;
       targetSlide = previousInt === -1 ? slideCount - 1 : previousInt;
     }
+    if (!infinite) {
+      targetSlide = previousTargetSlide - slidesToScroll;
+    }
   } else if (options.message === "next") {
     slideOffset = indexOffset === 0 ? slidesToScroll : indexOffset;
     targetSlide = currentSlide + slideOffset;
     if (lazyLoad && !infinite) {
       targetSlide =
         ((currentSlide + slidesToScroll) % slideCount) + indexOffset;
     }
+    if (!infinite) {
+      targetSlide = previousTargetSlide + slidesToScroll;
+    }
   } else if (options.message === "dots") {
     // Click on dots
     targetSlide = options.index * options.slidesToScroll;