fix: height style issue (#107)

* fix: style issue when the number of slides is less than or equal to slidesToShow

* fix: only modify height & fix wrong cloned element

* feat: add tests

Author: ohhoney1

docs/demos.js

@@ -26,6 +26,7 @@ import CustomArrows from "../examples/CustomArrows";
 import PreviousNextMethods from "../examples/PreviousNextMethods";
 import DynamicSlides from "../examples/DynamicSlides";
 import VerticalMode from "../examples/VerticalMode";
+import VerticalModeWhenUnslick from "../examples/VerticalModeWhenUnslick";
 import SwipeToSlide from "../examples/SwipeToSlide";
 import VerticalSwipeToSlide from "../examples/VerticalSwipeToSlide";
 import CustomPaging from "../examples/CustomPaging";
@@ -62,6 +63,7 @@ export default class App extends React.Component {
         <PreviousNextMethods />
         <DynamicSlides />
         <VerticalMode />
+        <VerticalModeWhenUnslick />
         <SwipeToSlide />
         <VerticalSwipeToSlide />
         <AsNavFor />

examples/VerticalModeWhenUnslick.js

@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import Slider from "../src/slider";
+
+export default class VerticalModeWhenUnslick extends Component {
+  render() {
+    const settings = {
+      dots: true,
+      infinite: true,
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      vertical: true,
+      verticalSwiping: true,
+      beforeChange: function (currentSlide, nextSlide) {
+        console.log("before change", currentSlide, nextSlide);
+      },
+      afterChange: function (currentSlide) {
+        console.log("after change", currentSlide);
+      },
+    };
+    return (
+      <div>
+        <h2>Vertical Mode When Unslick</h2>
+        <Slider {...settings}>
+          <div>
+            <h3>1</h3>
+          </div>
+          <div>
+            <h3>2</h3>
+          </div>
+        </Slider>
+      </div>
+    );
+  }
+}

examples/__tests__/VerticalMode.test.js

@@ -0,0 +1,104 @@
+import React from "react";
+import { mount } from "enzyme";
+
+import VerticalMode from "../VerticalMode";
+import VerticalModeWhenUnslick from "../VerticalModeWhenUnslick";
+import Slider from "../../src/slider";
+
+describe("Vertical Mode", function () {
+  it("should have 15 slides (3(preclone) + 6(actual) + 6(postclone))", function () {
+    const wrapper = mount(<VerticalMode />);
+    expect(wrapper.find(".slick-slide").length).toEqual(15);
+  });
+  it("should have 9 clone slides", function () {
+    const wrapper = mount(<VerticalMode />);
+    expect(wrapper.find(".slick-cloned").length).toEqual(9);
+  });
+  it("should have 3 active slide", function () {
+    const wrapper = mount(<VerticalMode />);
+    expect(wrapper.find(".slick-slide.slick-active").length).toEqual(3);
+  });
+  it("should have 6 dots", function () {
+    const wrapper = mount(<VerticalMode />);
+    expect(wrapper.find(".slick-dots").children().length).toEqual(6);
+  });
+  it("should have 1 active dot", function () {
+    const wrapper = mount(<VerticalMode />);
+    expect(wrapper.find(".slick-dots .slick-active").length).toEqual(1);
+  });
+  it("should have a prev arrow", function () {
+    const wrapper = mount(<VerticalMode />);
+    expect(wrapper.find(".slick-prev").length).toEqual(1);
+  });
+  it("should have a next arrow", function () {
+    const wrapper = mount(<VerticalMode />);
+    expect(wrapper.find(".slick-next").length).toEqual(1);
+  });
+});
+
+describe("Vertical Mode when Unslick", function () {
+  // ref: https://github.com/enzymejs/enzyme/issues/1940
+  // fix the 'offsetHeight' to 100px
+  const originalOffsetHeight = Object.getOwnPropertyDescriptor(
+    HTMLElement.prototype,
+    "offsetHeight"
+  );
+  beforeAll(() => {
+    Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+      configurable: true,
+      value: 100,
+    });
+  });
+  afterAll(() => {
+    Object.defineProperty(
+      HTMLElement.prototype,
+      "offsetHeight",
+      originalOffsetHeight
+    );
+  });
+
+  it("should render correct height when only child", function () {
+    const wrapper = mount(
+      <Slider vertical>
+        <div>
+          <h3>1</h3>
+        </div>
+      </Slider>
+    );
+
+    const slides = wrapper.find(".slick-slide");
+    const firstSlideHeight = slides.first().getDOMNode().offsetHeight;
+    const totalHeight = parseInt(firstSlideHeight) * slides.length;
+    const sliderTrackHeight = getComputedStyle(
+      wrapper.find(".slick-track").getDOMNode()
+    ).height;
+
+    expect(totalHeight).toEqual(parseInt(sliderTrackHeight));
+  });
+
+  it("should render correct height when unslick", function () {
+    const wrapper = mount(<VerticalModeWhenUnslick />);
+
+    const slides = wrapper.find(".slick-slide");
+    const firstSlideHeight = slides.first().getDOMNode().offsetHeight;
+    const totalHeight = parseInt(firstSlideHeight) * slides.length;
+    const sliderTrackHeight = getComputedStyle(
+      wrapper.find(".slick-track").getDOMNode()
+    ).height;
+
+    expect(totalHeight).toEqual(parseInt(sliderTrackHeight));
+  });
+
+  it("should have 2 slides (0(preclone) + 2(actual) + 0(postclone))", function () {
+    const wrapper = mount(<VerticalModeWhenUnslick />);
+    expect(wrapper.find(".slick-slide").length).toEqual(2);
+  });
+  it("should have 0 clone slides", function () {
+    const wrapper = mount(<VerticalModeWhenUnslick />);
+    expect(wrapper.find(".slick-cloned").length).toEqual(0);
+  });
+  it("should have 2 active slide", function () {
+    const wrapper = mount(<VerticalModeWhenUnslick />);
+    expect(wrapper.find(".slick-slide.slick-active").length).toEqual(2);
+  });
+});

src/track.js

@@ -135,7 +135,7 @@ const renderSlides = (spec) => {
     );
 
     // if slide needs to be precloned or postcloned
-    if (spec.infinite && spec.fade === false) {
+    if (spec.infinite && spec.fade === false && !spec.unslick) {
       let preCloneNo = childrenCount - index;
       if (
         preCloneNo <= getPreClones(spec) &&

src/utils/innerSliderUtils.js

@@ -6,7 +6,7 @@ export function clamp(number, lowerBound, upperBound) {
 
 export const safePreventDefault = event => {
   const passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"];
-  if(!passiveEvents.includes(event._reactName)) {
+  if (!passiveEvents.includes(event._reactName)) {
     event.preventDefault();
   }
 }
@@ -591,10 +591,12 @@ export const getTrackCSS = spec => {
     "slideWidth"
   ]);
   let trackWidth, trackHeight;
-  const trackChildren = spec.slideCount + 2 * spec.slidesToShow;
   if (!spec.vertical) {
     trackWidth = getTotalSlides(spec) * spec.slideWidth;
   } else {
+    const trackChildren = spec.unslick
+      ? spec.slideCount
+      : spec.slideCount + 2 * spec.slidesToShow;
     trackHeight = trackChildren * spec.slideHeight;
   }
   let style = {