From d67b95b66703e2695e86e6d42aaee3b279350616 Mon Sep 17 00:00:00 2001 From: MinhOmega Date: Thu, 14 Sep 2023 12:58:25 +0800 Subject: [PATCH] fix: height style issue * 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 --- docs/demos.js | 2 + examples/VerticalModeWhenUnslick.js | 34 ++++++++ examples/__tests__/VerticalMode.test.js | 104 ++++++++++++++++++++++++ src/track.js | 2 +- src/utils/innerSliderUtils.js | 6 +- 5 files changed, 145 insertions(+), 3 deletions(-) create mode 100644 examples/VerticalModeWhenUnslick.js create mode 100644 examples/__tests__/VerticalMode.test.js diff --git a/docs/demos.js b/docs/demos.js index a03cf825b..74c290f63 100644 --- a/docs/demos.js +++ b/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 { + diff --git a/examples/VerticalModeWhenUnslick.js b/examples/VerticalModeWhenUnslick.js new file mode 100644 index 000000000..f7fc5e426 --- /dev/null +++ b/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 ( +
+

Vertical Mode When Unslick

+ +
+

1

+
+
+

2

+
+ +
+ ); + } +} diff --git a/examples/__tests__/VerticalMode.test.js b/examples/__tests__/VerticalMode.test.js new file mode 100644 index 000000000..216666fe8 --- /dev/null +++ b/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(); + expect(wrapper.find(".slick-slide").length).toEqual(15); + }); + it("should have 9 clone slides", function () { + const wrapper = mount(); + expect(wrapper.find(".slick-cloned").length).toEqual(9); + }); + it("should have 3 active slide", function () { + const wrapper = mount(); + expect(wrapper.find(".slick-slide.slick-active").length).toEqual(3); + }); + it("should have 6 dots", function () { + const wrapper = mount(); + expect(wrapper.find(".slick-dots").children().length).toEqual(6); + }); + it("should have 1 active dot", function () { + const wrapper = mount(); + expect(wrapper.find(".slick-dots .slick-active").length).toEqual(1); + }); + it("should have a prev arrow", function () { + const wrapper = mount(); + expect(wrapper.find(".slick-prev").length).toEqual(1); + }); + it("should have a next arrow", function () { + const wrapper = mount(); + 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( + +
+

1

+
+ + ); + + 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(); + + 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(); + expect(wrapper.find(".slick-slide").length).toEqual(2); + }); + it("should have 0 clone slides", function () { + const wrapper = mount(); + expect(wrapper.find(".slick-cloned").length).toEqual(0); + }); + it("should have 2 active slide", function () { + const wrapper = mount(); + expect(wrapper.find(".slick-slide.slick-active").length).toEqual(2); + }); +}); diff --git a/src/track.js b/src/track.js index f8924c826..62306cd1b 100644 --- a/src/track.js +++ b/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) && diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index c06029d0a..b50fd9c59 100644 --- a/src/utils/innerSliderUtils.js +++ b/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(); } } @@ -590,10 +590,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 = {