From 0e348f665c22a13b5d285f283fb3b2369e8fc128 Mon Sep 17 00:00:00 2001 From: Celia Amador Date: Mon, 12 Nov 2018 15:09:47 +0100 Subject: [PATCH 001/106] Fixing issue with asNavFor not detecting all slide changes --- src/inner-slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index 30a076c..d3d115f 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -391,7 +391,7 @@ export class InnerSlider extends React.Component { onLazyLoad && slidesToLoad.length > 0 && onLazyLoad(slidesToLoad); this.setState(state, () => { asNavFor && - asNavFor.innerSlider.state.currentSlide !== currentSlide && + asNavFor.innerSlider.state.currentSlide !== this.state.currentSlide && asNavFor.innerSlider.slideHandler(index); if (!nextState) return; this.animationEndCallback = setTimeout(() => { From 727e3403c8302f3eecb42da53961e1697a7c215d Mon Sep 17 00:00:00 2001 From: Andrey Trofimov Date: Sun, 2 Dec 2018 15:17:24 +0300 Subject: [PATCH 002/106] Got rid of ReactDOM.findDOMNode (#1406) --- src/inner-slider.js | 5 +++-- src/track.js | 5 +++++ src/utils/innerSliderUtils.js | 15 ++++++++------- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index 30a076c..7b8d03a 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -1,7 +1,6 @@ "use strict"; import React from "react"; -import ReactDOM from "react-dom"; import initialState from "./initial-state"; import debounce from "lodash.debounce"; import classnames from "classnames"; @@ -195,7 +194,9 @@ export class InnerSlider extends React.Component { this.debouncedResize(); }; resizeWindow = (setTrackStyle = true) => { - if (!ReactDOM.findDOMNode(this.track)) return; + const isTrackMounted = Boolean(this.track && this.track.node); + // prevent warning: setting state on unmounted component (server side rendering) + if (!isTrackMounted) return; let spec = { listRef: this.list, trackRef: this.track, diff --git a/src/track.js b/src/track.js index 4b4bd31..186ef15 100644 --- a/src/track.js +++ b/src/track.js @@ -197,12 +197,17 @@ var renderSlides = function(spec) { }; export class Track extends React.PureComponent { + node = null; + + handleRef = ref => { this.node = ref }; + render() { const slides = renderSlides(this.props); const { onMouseEnter, onMouseOver, onMouseLeave } = this.props; const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave }; return (
{ let onDemandSlides = []; @@ -99,8 +98,10 @@ export const extractObject = (spec, keys) => { export const initializedState = spec => { // spec also contains listRef, trackRef let slideCount = React.Children.count(spec.children); - let listWidth = Math.ceil(getWidth(ReactDOM.findDOMNode(spec.listRef))); - let trackWidth = Math.ceil(getWidth(ReactDOM.findDOMNode(spec.trackRef))); + const listNode = spec.listRef; + let listWidth = Math.ceil(getWidth(listNode)); + const trackNode = spec.trackRef && spec.trackRef.node; + let trackWidth = Math.ceil(getWidth(trackNode)); let slideWidth; if (!spec.vertical) { let centerPaddingAdj = spec.centerMode && parseInt(spec.centerPadding) * 2; @@ -115,9 +116,9 @@ export const initializedState = spec => { slideWidth = listWidth; } let slideHeight = - ReactDOM.findDOMNode(spec.listRef) && + listNode && getHeight( - ReactDOM.findDOMNode(spec.listRef).querySelector('[data-index="0"]') + listNode.querySelector('[data-index="0"]') ); let listHeight = slideHeight * spec.slidesToShow; let currentSlide = @@ -515,7 +516,7 @@ export const getSlideCount = spec => { : 0; if (spec.swipeToSlide) { let swipedSlide; - const slickList = ReactDOM.findDOMNode(spec.listRef); + const slickList = spec.listRef; const slides = slickList.querySelectorAll(".slick-slide"); Array.from(slides).every(slide => { if (!spec.vertical) { @@ -721,7 +722,7 @@ export const getTrackLeft = spec => { if (variableWidth === true) { var targetSlideIndex; - let trackElem = ReactDOM.findDOMNode(trackRef); + const trackElem = trackRef && trackRef.node; targetSlideIndex = slideIndex + getPreClones(spec); targetSlide = trackElem && trackElem.childNodes[targetSlideIndex]; targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0; From d94973987042d1999d3cc877b2a5a7249abf9224 Mon Sep 17 00:00:00 2001 From: kiran Date: Wed, 17 Apr 2019 16:13:07 +0530 Subject: [PATCH 003/106] version update --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ff2ee78..7691522 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.23.2", + "version": "0.24.0", "description": " React port of slick carousel", "main": "./lib", "files": [ @@ -67,7 +67,7 @@ "node-sass": "^4.5.2", "opn": "^5.4.0", "postcss-loader": "^1.3.3", - "prettier": "^1.14.3", + "prettier": "^1.14.3", "raf": "^3.4.0", "react": "^16.0.0", "react-addons-test-utils": "^15.6.2", From ae049ff6316a62921f7120b4a7072c798f19b345 Mon Sep 17 00:00:00 2001 From: kiran Date: Wed, 17 Apr 2019 16:52:36 +0530 Subject: [PATCH 004/106] updated snapshots --- examples/__tests__/__snapshots__/CenterMode.test.js.snap | 9 +++------ .../__tests__/__snapshots__/FocusOnSelect.test.js.snap | 6 ++---- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/examples/__tests__/__snapshots__/CenterMode.test.js.snap b/examples/__tests__/__snapshots__/CenterMode.test.js.snap index 0ee911d..4c922a5 100644 --- a/examples/__tests__/__snapshots__/CenterMode.test.js.snap +++ b/examples/__tests__/__snapshots__/CenterMode.test.js.snap @@ -119,8 +119,7 @@ exports[`CenterMode Tests Activity test 1`] = `
- - + " `; @@ -243,8 +242,7 @@ exports[`CenterMode Tests Counting test 1`] = ` - - + " `; @@ -367,7 +365,6 @@ exports[`CenterMode Tests Positioning test 1`] = ` - - + " `; diff --git a/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap b/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap index e29379d..cdcc755 100644 --- a/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap +++ b/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap @@ -113,8 +113,7 @@ exports[`FocusOnSelect Tests Activity Test 1`] = ` - - + " `; @@ -231,7 +230,6 @@ exports[`FocusOnSelect Tests Activity Test 2`] = ` - - + " `; From 065ec2f84e269fba8677784da1e5f81022202f1b Mon Sep 17 00:00:00 2001 From: Ramiro Di Modica Date: Wed, 17 Apr 2019 17:16:18 -0300 Subject: [PATCH 005/106] update variablewidth option --- src/utils/innerSliderUtils.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 003298e..f0c9be5 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -725,6 +725,25 @@ export const getTrackLeft = spec => { targetSlideIndex = slideIndex + getPreClones(spec); targetSlide = trackElem && trackElem.childNodes[targetSlideIndex]; targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0; + if (!infinite) { + let widthUntilListRightEnd = 0; + for ( + let slide = targetSlideIndex; + slide < trackElem.childNodes.length; + slide++ + ) { + widthUntilListRightEnd += + trackElem && + trackElem.children[slide] && + trackElem.children[slide].offsetWidth; + } + if (widthUntilListRightEnd < listWidth) { + targetLeft += listWidth - widthUntilListRightEnd; + if (targetLeft >= 0) { + targetLeft = 0; + } + } + } if (centerMode === true) { targetSlideIndex = infinite ? slideIndex + getPreClones(spec) From 59d11f3f1a5bb825be5a4ece55e9bdc7e979c270 Mon Sep 17 00:00:00 2001 From: Ramiro Di Modica Date: Wed, 17 Apr 2019 17:44:11 -0300 Subject: [PATCH 006/106] variablewidth + infinite false --- src/utils/innerSliderUtils.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index f0c9be5..a2d52bc 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -567,7 +567,9 @@ export const getTrackCSS = spec => { let trackWidth, trackHeight; const trackChildren = spec.slideCount + 2 * spec.slidesToShow; if (!spec.vertical) { - trackWidth = getTotalSlides(spec) * spec.slideWidth; + spec.children.forEach(function (child) { + trackWidth += child.props.style.width; + }); } else { trackHeight = trackChildren * spec.slideHeight; } From 6156165452b9aa76e89a0d7588488ee0a6676ed3 Mon Sep 17 00:00:00 2001 From: Ramiro Di Modica Date: Wed, 17 Apr 2019 18:06:47 -0300 Subject: [PATCH 007/106] variablewidth + infinite false --- src/inner-slider.js | 41 ++++++++++++++++++++++++++++++----- src/utils/innerSliderUtils.js | 12 +++++----- 2 files changed, 42 insertions(+), 11 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index d3d115f..70639cf 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -10,6 +10,7 @@ import { extractObject, initializedState, getHeight, + getWidth, canGoNext, slideHandler, changeSlide, @@ -36,7 +37,8 @@ export class InnerSlider extends React.Component { this.state = { ...initialState, currentSlide: this.props.initialSlide, - slideCount: React.Children.count(this.props.children) + slideCount: React.Children.count(this.props.children), + slidesToShow: this.props.slidesToShow }; this.callbackTimers = []; this.clickable = true; @@ -194,8 +196,35 @@ export class InnerSlider extends React.Component { this.debouncedResize = debounce(() => this.resizeWindow(setTrackStyle), 50); this.debouncedResize(); }; + calcRealSlideShowed = () => { + var realSlideShowed = 0; + if (!this.props.infinite && this.props.variableWidth) { + let widthUntilListRightEnd = 0; + var trackElem = ReactDOM.findDOMNode(this.track); + var listWidth = Math.ceil(getWidth(ReactDOM.findDOMNode(this.list))); + for ( + let slide = this.state.currentSlide; + slide < trackElem.childNodes.length; + slide++ + ) { + widthUntilListRightEnd += + trackElem && + trackElem.children[slide] && + trackElem.children[slide].offsetWidth; + + if (widthUntilListRightEnd >= listWidth) { + realSlideShowed = slide - 2; + break; + } + } + } + this.setState({ + slidesToShow: realSlideShowed || this.props.slidesToShow + }); + }; resizeWindow = (setTrackStyle = true) => { if (!ReactDOM.findDOMNode(this.track)) return; + this.calcRealSlideShowed(); let spec = { listRef: this.list, trackRef: this.track, @@ -276,15 +305,15 @@ export class InnerSlider extends React.Component { let childrenCount = React.Children.count(this.props.children); const spec = { ...this.props, ...this.state, slideCount: childrenCount }; let slideCount = getPreClones(spec) + getPostClones(spec) + childrenCount; - let trackWidth = 100 / this.props.slidesToShow * slideCount; + let trackWidth = (100 / this.props.slidesToShow) * slideCount; let slideWidth = 100 / slideCount; let trackLeft = - -slideWidth * - (getPreClones(spec) + this.state.currentSlide) * - trackWidth / + (-slideWidth * + (getPreClones(spec) + this.state.currentSlide) * + trackWidth) / 100; if (this.props.centerMode) { - trackLeft += (100 - slideWidth * trackWidth / 100) / 2; + trackLeft += (100 - (slideWidth * trackWidth) / 100) / 2; } let trackStyle = { width: trackWidth + "%", diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index a2d52bc..62e17cc 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -48,7 +48,7 @@ export const getSwipeDirection = (touchObject, verticalSwiping = false) => { xDist = touchObject.startX - touchObject.curX; yDist = touchObject.startY - touchObject.curY; r = Math.atan2(yDist, xDist); - swipeAngle = Math.round(r * 180 / Math.PI); + swipeAngle = Math.round((r * 180) / Math.PI); if (swipeAngle < 0) { swipeAngle = 360 - Math.abs(swipeAngle); } @@ -195,7 +195,7 @@ export const slideHandler = spec => { finalSlide = animationSlide + slideCount; if (!infinite) finalSlide = 0; else if (slideCount % slidesToScroll !== 0) - finalSlide = slideCount - slideCount % slidesToScroll; + finalSlide = slideCount - (slideCount % slidesToScroll); } else if (!canGoNext(spec) && animationSlide > currentSlide) { animationSlide = finalSlide = currentSlide; } else if (centerMode && animationSlide >= slideCount) { @@ -265,7 +265,8 @@ export const changeSlide = (spec, options) => { slideOffset = indexOffset === 0 ? slidesToScroll : indexOffset; targetSlide = currentSlide + slideOffset; if (lazyLoad && !infinite) { - targetSlide = (currentSlide + slidesToScroll) % slideCount + indexOffset; + targetSlide = + ((currentSlide + slidesToScroll) % slideCount) + indexOffset; } } else if (options.message === "dots") { // Click on dots @@ -567,7 +568,8 @@ export const getTrackCSS = spec => { let trackWidth, trackHeight; const trackChildren = spec.slideCount + 2 * spec.slidesToShow; if (!spec.vertical) { - spec.children.forEach(function (child) { + trackWidth = 0; + spec.children.forEach(function(child) { trackWidth += child.props.style.width; }); } else { @@ -706,7 +708,7 @@ export const getTrackLeft = spec => { slideCount % slidesToScroll !== 0 && slideIndex + slidesToScroll > slideCount ) { - slidesToOffset = slidesToShow - slideCount % slidesToScroll; + slidesToOffset = slidesToShow - (slideCount % slidesToScroll); } if (centerMode) { slidesToOffset = parseInt(slidesToShow / 2); From a7b7da9144043366176e28434cb10a0ae0224ddb Mon Sep 17 00:00:00 2001 From: Ramiro Di Modica Date: Mon, 22 Apr 2019 11:17:04 -0300 Subject: [PATCH 008/106] add conditional --- src/utils/innerSliderUtils.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 62e17cc..ac3f3e3 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -568,10 +568,14 @@ export const getTrackCSS = spec => { let trackWidth, trackHeight; const trackChildren = spec.slideCount + 2 * spec.slidesToShow; if (!spec.vertical) { - trackWidth = 0; - spec.children.forEach(function(child) { - trackWidth += child.props.style.width; - }); + if (spec.variableWidth) { + trackWidth = 0; + spec.children.forEach(function(child) { + trackWidth += child.props.style.width; + }); + } else { + trackWidth = getTotalSlides(spec) * spec.slideWidth; + } } else { trackHeight = trackChildren * spec.slideHeight; } From 06806e70150ef8837d7c92083782556a2a6ea600 Mon Sep 17 00:00:00 2001 From: Hillsie Date: Thu, 23 May 2019 23:37:09 +1000 Subject: [PATCH 009/106] updated var(s) to let and const to follow popular view that var should be deprecated for the following reasons: https://wesbos.com/let-vs-const/ and https://mathiasbynens.be/notes/es6-const --- .gitignore | 1 + package.json | 6 +++--- src/default-props.js | 2 +- src/dots.js | 18 +++++++++--------- src/track.js | 28 ++++++++++++++-------------- 5 files changed, 28 insertions(+), 27 deletions(-) diff --git a/.gitignore b/.gitignore index d2b51d6..735cbb4 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,4 @@ jquery.html docs/fonts/ docs/ajax-loader.gif package-lock.json +.DS_Store diff --git a/package.json b/package.json index 7691522..974eba3 100644 --- a/package.json +++ b/package.json @@ -41,10 +41,10 @@ "autoprefixer": "^7.1.2", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^9.0.0", - "babel-jest": "^23.4.2", + "babel-jest": "^24.8.0", "babel-loader": "^8.0.4", "babel-preset-airbnb": "^2.1.1", - "css-loader": "^0.28.0", + "css-loader": "^2.1.1", "deepmerge": "^1.1.0", "del": "^2.2.2", "enzyme": "^3.2.0", @@ -59,7 +59,7 @@ "gulp-sass": "^4.0.0", "husky": "^0.14.3", "jasmine-core": "^2.5.2", - "jest": "^23.6.0", + "jest": "^24.8.0", "jquery": "^3.2.1", "js-beautify": "^1.7.5", "json-loader": "^0.5.4", diff --git a/src/default-props.js b/src/default-props.js index 8d828ad..c98806a 100644 --- a/src/default-props.js +++ b/src/default-props.js @@ -1,6 +1,6 @@ import React from "react"; -var defaultProps = { +let defaultProps = { accessibility: true, adaptiveHeight: false, afterChange: null, diff --git a/src/dots.js b/src/dots.js index 908a391..ae1e51d 100644 --- a/src/dots.js +++ b/src/dots.js @@ -3,8 +3,8 @@ import React from "react"; import classnames from "classnames"; -var getDotCount = function(spec) { - var dots; +const getDotCount = spec => { + let dots; if (spec.infinite) { dots = Math.ceil(spec.slideCount / spec.slidesToScroll); @@ -25,7 +25,7 @@ export class Dots extends React.PureComponent { this.props.clickHandler(options); } render() { - var dotCount = getDotCount({ + let dotCount = getDotCount({ slideCount: this.props.slideCount, slidesToScroll: this.props.slidesToScroll, slidesToShow: this.props.slidesToShow, @@ -37,29 +37,29 @@ export class Dots extends React.PureComponent { // Credit: http://stackoverflow.com/a/13735425/1849458 const { onMouseEnter, onMouseOver, onMouseLeave } = this.props; const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave }; - var dots = Array.apply( + let dots = Array.apply( null, Array(dotCount + 1) .join("0") .split("") ).map((x, i) => { - var leftBound = i * this.props.slidesToScroll; - var rightBound = + let leftBound = i * this.props.slidesToScroll; + let rightBound = i * this.props.slidesToScroll + (this.props.slidesToScroll - 1); - var className = classnames({ + let className = classnames({ "slick-active": this.props.currentSlide >= leftBound && this.props.currentSlide <= rightBound }); - var dotOptions = { + let dotOptions = { message: "dots", index: i, slidesToScroll: this.props.slidesToScroll, currentSlide: this.props.currentSlide }; - var onClick = this.clickHandler.bind(this, dotOptions); + let onClick = this.clickHandler.bind(this, dotOptions); return (
  • {React.cloneElement(this.props.customPaging(i), { onClick })} diff --git a/src/track.js b/src/track.js index 4b4bd31..727cb66 100644 --- a/src/track.js +++ b/src/track.js @@ -9,9 +9,9 @@ import { } from "./utils/innerSliderUtils"; // given specifications/props for a slide, fetch all the classes that need to be applied to the slide -var getSlideClasses = spec => { - var slickActive, slickCenter, slickCloned; - var centerOffset, index; +const getSlideClasses = spec => { + let slickActive, slickCenter, slickCloned; + let centerOffset, index; if (spec.rtl) { index = spec.slideCount - 1 - spec.index; @@ -43,8 +43,8 @@ var getSlideClasses = spec => { }; }; -var getSlideStyle = function(spec) { - var style = {}; +const getSlideStyle = spec => { + let style = {}; if (spec.variableWidth === undefined || spec.variableWidth === false) { style.width = spec.slideWidth; @@ -85,18 +85,18 @@ var getSlideStyle = function(spec) { const getKey = (child, fallbackKey) => child.key || fallbackKey; -var renderSlides = function(spec) { - var key; - var slides = []; - var preCloneSlides = []; - var postCloneSlides = []; - var childrenCount = React.Children.count(spec.children); +const renderSlides = spec => { + let key; + let slides = []; + let preCloneSlides = []; + let postCloneSlides = []; + let childrenCount = React.Children.count(spec.children); let startIndex = lazyStartIndex(spec); let endIndex = lazyEndIndex(spec); React.Children.forEach(spec.children, (elem, index) => { let child; - var childOnClickOptions = { + let childOnClickOptions = { message: "children", index: index, slidesToScroll: spec.slidesToScroll, @@ -112,8 +112,8 @@ var renderSlides = function(spec) { } else { child =
    ; } - var childStyle = getSlideStyle({ ...spec, index }); - const slideClass = child.props.className || ""; + let childStyle = getSlideStyle({ ...spec, index }); + let slideClass = child.props.className || ""; let slideClasses = getSlideClasses({ ...spec, index }); // push a cloned element of the desired slide slides.push( From c811190a03fe12749eac9ee3bfad02c72d3126a9 Mon Sep 17 00:00:00 2001 From: Nikhil Asrani Date: Sat, 13 Jul 2019 14:46:06 +0530 Subject: [PATCH 010/106] Fixes the asNavFor issue when infinite is false. fixed #1562 --- src/inner-slider.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index d3d115f..bda3445 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -391,7 +391,6 @@ export class InnerSlider extends React.Component { onLazyLoad && slidesToLoad.length > 0 && onLazyLoad(slidesToLoad); this.setState(state, () => { asNavFor && - asNavFor.innerSlider.state.currentSlide !== this.state.currentSlide && asNavFor.innerSlider.slideHandler(index); if (!nextState) return; this.animationEndCallback = setTimeout(() => { From bc612bd28b241a5edfce0b752f4605856c32dc88 Mon Sep 17 00:00:00 2001 From: Nikhil Asrani Date: Sat, 13 Jul 2019 15:15:35 +0530 Subject: [PATCH 011/106] Added style props to the component allowing users to pass inline styles. Fixed #1586 --- src/inner-slider.js | 3 ++- src/slider.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index bda3445..53bdb9c 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -711,7 +711,8 @@ export class InnerSlider extends React.Component { let innerSliderProps = { className: className, - dir: "ltr" + dir: "ltr", + style:this.props.style }; if (this.props.unslick) { diff --git a/src/slider.js b/src/slider.js index d4833da..13e3ccf 100644 --- a/src/slider.js +++ b/src/slider.js @@ -208,7 +208,7 @@ export default class Slider extends React.Component { settings.unslick = true; } return ( - + {newChildren} ); From 640ce007ab0a1764203aae3f5b21c95d7e65250b Mon Sep 17 00:00:00 2001 From: Kiran Date: Sat, 13 Jul 2019 15:56:38 +0530 Subject: [PATCH 012/106] Update README.md --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c821b54..3d25fa0 100644 --- a/README.md +++ b/README.md @@ -24,8 +24,10 @@ yarn add react-slick ```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 From 97988e897750e1d8f7b10a86b655f50d75d38298 Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 11 Aug 2019 00:42:51 +0530 Subject: [PATCH 013/106] Added UNSAFE_ prefix to deprecated lifecycle methods to avoid warnings in React 16.9 --- package.json | 2 +- src/inner-slider.js | 23 ++++++++++------------- src/slider.js | 16 +++++----------- 3 files changed, 16 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 974eba3..3275e41 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.24.0", + "version": "0.25.0", "description": " React port of slick carousel", "main": "./lib", "files": [ diff --git a/src/inner-slider.js b/src/inner-slider.js index bda3445..a84bd7b 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -52,7 +52,7 @@ export class InnerSlider extends React.Component { this.list.style.height = getHeight(elem) + "px"; } }; - componentWillMount = () => { + UNSAFE_componentWillMount = () => { this.ssrInit(); this.props.onInit && this.props.onInit(); if (this.props.lazyLoad) { @@ -107,7 +107,7 @@ export class InnerSlider extends React.Component { window.attachEvent("onresize", this.onWindowResized); } }; - componentWillUnmount = () => { + UNSAFE_componentWillUnmount = () => { if (this.animationEndCallback) { clearTimeout(this.animationEndCallback); } @@ -127,7 +127,7 @@ export class InnerSlider extends React.Component { clearInterval(this.autoplayTimer); } }; - componentWillReceiveProps = nextProps => { + UNSAFE_componentWillReceiveProps = nextProps => { let spec = { listRef: this.list, trackRef: this.track, @@ -264,9 +264,7 @@ export class InnerSlider extends React.Component { }; if (this.props.centerMode) { let currentWidth = `${childrenWidths[this.state.currentSlide]}px`; - trackStyle.left = `calc(${ - trackStyle.left - } + (100% - ${currentWidth}) / 2 ) `; + trackStyle.left = `calc(${trackStyle.left} + (100% - ${currentWidth}) / 2 ) `; } this.setState({ trackStyle @@ -276,15 +274,15 @@ export class InnerSlider extends React.Component { let childrenCount = React.Children.count(this.props.children); const spec = { ...this.props, ...this.state, slideCount: childrenCount }; let slideCount = getPreClones(spec) + getPostClones(spec) + childrenCount; - let trackWidth = 100 / this.props.slidesToShow * slideCount; + let trackWidth = (100 / this.props.slidesToShow) * slideCount; let slideWidth = 100 / slideCount; let trackLeft = - -slideWidth * - (getPreClones(spec) + this.state.currentSlide) * - trackWidth / + (-slideWidth * + (getPreClones(spec) + this.state.currentSlide) * + trackWidth) / 100; if (this.props.centerMode) { - trackLeft += (100 - slideWidth * trackWidth / 100) / 2; + trackLeft += (100 - (slideWidth * trackWidth) / 100) / 2; } let trackStyle = { width: trackWidth + "%", @@ -390,8 +388,7 @@ export class InnerSlider extends React.Component { ); onLazyLoad && slidesToLoad.length > 0 && onLazyLoad(slidesToLoad); this.setState(state, () => { - asNavFor && - asNavFor.innerSlider.slideHandler(index); + asNavFor && asNavFor.innerSlider.slideHandler(index); if (!nextState) return; this.animationEndCallback = setTimeout(() => { const { animating, ...firstBatch } = nextState; diff --git a/src/slider.js b/src/slider.js index d4833da..020ea05 100644 --- a/src/slider.js +++ b/src/slider.js @@ -25,7 +25,7 @@ export default class Slider extends React.Component { } // handles responsive breakpoints - componentWillMount() { + UNSAFE_componentWillMount() { // performance monitoring //if (process.env.NODE_ENV !== 'production') { //const { whyDidYouUpdate } = require('why-did-you-update') @@ -67,7 +67,7 @@ export default class Slider extends React.Component { } } - componentWillUnmount() { + UNSAFE_componentWillUnmount() { this._responsiveMediaHandlers.forEach(function(obj) { enquire.unregister(obj.query, obj.handler); }); @@ -106,9 +106,7 @@ export default class Slider extends React.Component { process.env.NODE_ENV !== "production" ) { console.warn( - `slidesToScroll should be equal to 1 in centerMode, you are using ${ - settings.slidesToScroll - }` + `slidesToScroll should be equal to 1 in centerMode, you are using ${settings.slidesToScroll}` ); } settings.slidesToScroll = 1; @@ -117,9 +115,7 @@ export default class Slider extends React.Component { if (settings.fade) { if (settings.slidesToShow > 1 && process.env.NODE_ENV !== "production") { console.warn( - `slidesToShow should be equal to 1 when fade is true, you're using ${ - settings.slidesToShow - }` + `slidesToShow should be equal to 1 when fade is true, you're using ${settings.slidesToShow}` ); } if ( @@ -127,9 +123,7 @@ export default class Slider extends React.Component { process.env.NODE_ENV !== "production" ) { console.warn( - `slidesToScroll should be equal to 1 when fade is true, you're using ${ - settings.slidesToScroll - }` + `slidesToScroll should be equal to 1 when fade is true, you're using ${settings.slidesToScroll}` ); } settings.slidesToShow = 1; From 7ad883412ef3c35d22dfb32545eb192ae371d27c Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 12 Aug 2019 10:32:44 +0800 Subject: [PATCH 014/106] fix non-existed lifecycle UNSAFE_componentWillUnmount ref https://github.com/reactjs/react-lifecycles-compat/issues/47#issuecomment-520236234 ref https://github.com/akiran/react-slick/commit/97988e897750e1d8f7b10a86b655f50d75d38298#r34651934 --- src/inner-slider.js | 2 +- src/slider.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index a84bd7b..c3b799a 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -107,7 +107,7 @@ export class InnerSlider extends React.Component { window.attachEvent("onresize", this.onWindowResized); } }; - UNSAFE_componentWillUnmount = () => { + componentWillUnmount = () => { if (this.animationEndCallback) { clearTimeout(this.animationEndCallback); } diff --git a/src/slider.js b/src/slider.js index 020ea05..131dcb9 100644 --- a/src/slider.js +++ b/src/slider.js @@ -67,7 +67,7 @@ export default class Slider extends React.Component { } } - UNSAFE_componentWillUnmount() { + componentWillUnmount() { this._responsiveMediaHandlers.forEach(function(obj) { enquire.unregister(obj.query, obj.handler); }); From c8c620951a4e620604a34681995bd3dfd87e4b57 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 12 Aug 2019 10:43:18 +0800 Subject: [PATCH 015/106] :white_check_mark: fix snapshot --- .../__tests__/__snapshots__/CenterMode.test.js.snap | 11 +++++++---- .../__snapshots__/FocusOnSelect.test.js.snap | 8 +++++--- .../__snapshots__/MultipleItems.test.js.snap | 8 ++++---- .../__tests__/__snapshots__/SimpleSlider.test.js.snap | 6 +++--- .../__tests__/__snapshots__/UnevenSets.test.js.snap | 4 ++-- 5 files changed, 21 insertions(+), 16 deletions(-) diff --git a/examples/__tests__/__snapshots__/CenterMode.test.js.snap b/examples/__tests__/__snapshots__/CenterMode.test.js.snap index 4c922a5..cf1b20d 100644 --- a/examples/__tests__/__snapshots__/CenterMode.test.js.snap +++ b/examples/__tests__/__snapshots__/CenterMode.test.js.snap @@ -5,7 +5,7 @@ exports[`CenterMode Tests Activity test 1`] = `

    Center Mode

    -
    +
    @@ -119,7 +119,8 @@ exports[`CenterMode Tests Activity test 1`] = `
    -
    +
    +
    " `; @@ -242,7 +243,8 @@ exports[`CenterMode Tests Counting test 1`] = ` - + + " `; @@ -365,6 +367,7 @@ exports[`CenterMode Tests Positioning test 1`] = ` - + + " `; diff --git a/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap b/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap index cdcc755..181930d 100644 --- a/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap +++ b/examples/__tests__/__snapshots__/FocusOnSelect.test.js.snap @@ -113,7 +113,8 @@ exports[`FocusOnSelect Tests Activity Test 1`] = ` - + + " `; @@ -123,7 +124,7 @@ exports[`FocusOnSelect Tests Activity Test 2`] = `
    Click on any slide to select and make it current slide
    -
    +
    @@ -230,6 +231,7 @@ exports[`FocusOnSelect Tests Activity Test 2`] = `
    -
    +
    +
    " `; diff --git a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap b/examples/__tests__/__snapshots__/MultipleItems.test.js.snap index e5b3d64..ab771bd 100644 --- a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap +++ b/examples/__tests__/__snapshots__/MultipleItems.test.js.snap @@ -661,7 +661,7 @@ exports[`Multiple Items should show last 3 slides when last dot is clicked 1`] =

    Multiple items

    -
    +
    @@ -825,7 +825,7 @@ exports[`Multiple Items should show last 3 slides when previous button is clicke

    Multiple items

    -
    +
    @@ -1153,7 +1153,7 @@ exports[`Multiple Items should show slides from 4 to 6 when middle dot is clicke

    Multiple items

    -
    +
    @@ -1317,7 +1317,7 @@ exports[`Multiple Items should show slides from 4 to 6 when next button is click

    Multiple items

    -
    +
    diff --git a/examples/__tests__/__snapshots__/SimpleSlider.test.js.snap b/examples/__tests__/__snapshots__/SimpleSlider.test.js.snap index be09078..08be357 100644 --- a/examples/__tests__/__snapshots__/SimpleSlider.test.js.snap +++ b/examples/__tests__/__snapshots__/SimpleSlider.test.js.snap @@ -5,7 +5,7 @@ exports[`Simple Slider Snapshots click on 3rd dot 1`] = `

    Single Item

    -
    +
    @@ -116,7 +116,7 @@ exports[`Simple Slider Snapshots click on next button 1`] = `

    Single Item

    -
    +
    @@ -227,7 +227,7 @@ exports[`Simple Slider Snapshots click on prev button 1`] = `

    Single Item

    -
    +
    diff --git a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap b/examples/__tests__/__snapshots__/UnevenSets.test.js.snap index 1ec9b70..0a9ea26 100644 --- a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap +++ b/examples/__tests__/__snapshots__/UnevenSets.test.js.snap @@ -5,7 +5,7 @@ exports[`UnevenSets Finite Activity test 1`] = `

    Uneven sets (finite)

    -
    +
    @@ -179,7 +179,7 @@ exports[`UnevenSets Infinite Activity test 1`] = `

    Uneven sets (infinite)

    -
    +
    From 568542703dbd04748927a963b1e1def4f27b28b9 Mon Sep 17 00:00:00 2001 From: kiran Date: Mon, 12 Aug 2019 10:41:35 +0530 Subject: [PATCH 016/106] version update with fix in lifecycle name --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3275e41..1459989 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.25.0", + "version": "0.25.1", "description": " React port of slick carousel", "main": "./lib", "files": [ From 018bcdf81c5308586abb34cfe7467de407331e85 Mon Sep 17 00:00:00 2001 From: kiran Date: Mon, 12 Aug 2019 10:52:29 +0530 Subject: [PATCH 017/106] version updated with fix for #1180 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1459989..a423c64 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.25.1", + "version": "0.25.2", "description": " React port of slick carousel", "main": "./lib", "files": [ From 08f0cd835cce7726add2741a5a99cc07eaf38eb3 Mon Sep 17 00:00:00 2001 From: KyuWoo Choi Date: Wed, 27 Nov 2019 03:33:42 +0900 Subject: [PATCH 018/106] refactor: remove deprecated vendor prefix the last browsers requiring webkit vendor prefix is about 6years ago. it's good enough to remove it. --- src/track.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/track.js b/src/track.js index 727cb66..da2fe33 100644 --- a/src/track.js +++ b/src/track.js @@ -68,16 +68,6 @@ const getSlideStyle = spec => { spec.speed + "ms " + spec.cssEase; - style.WebkitTransition = - "opacity " + - spec.speed + - "ms " + - spec.cssEase + - ", " + - "visibility " + - spec.speed + - "ms " + - spec.cssEase; } return style; From 9caf50494335fac673f6ec980a52c3c9ea5ba84f Mon Sep 17 00:00:00 2001 From: KyuWoo Choi Date: Sun, 1 Dec 2019 19:53:55 +0900 Subject: [PATCH 019/106] refactor: no componentDidMount called on server There is no case componentDidMount that will be called on server side. Good to not have the guard --- src/inner-slider.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index dfdf4b0..59f85d2 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -97,10 +97,6 @@ export class InnerSlider extends React.Component { slide.onblur = this.props.pauseOnFocus ? this.onSlideBlur : null; } ); - // To support server-side rendering - if (!window) { - return; - } if (window.addEventListener) { window.addEventListener("resize", this.onWindowResized); } else { From 46c42d72a6dd36dbbb5e035ec50a9fcb110683c5 Mon Sep 17 00:00:00 2001 From: Kiran Date: Mon, 6 Jan 2020 09:03:43 +0530 Subject: [PATCH 020/106] Delete stale.yml --- .github/stale.yml | 17 ----------------- 1 file changed, 17 deletions(-) delete mode 100644 .github/stale.yml diff --git a/.github/stale.yml b/.github/stale.yml deleted file mode 100644 index e8039ad..0000000 --- a/.github/stale.yml +++ /dev/null @@ -1,17 +0,0 @@ -# Number of days of inactivity before an issue becomes stale -daysUntilStale: 360 -# Number of days of inactivity before a stale issue is closed -daysUntilClose: 7 -# Issues with these labels will never be considered stale -exemptLabels: - - pinned - - security -# Label to use when marking an issue as stale -staleLabel: stale -# Comment to post when marking an issue as stale. Set to `false` to disable -markComment: > - This issue has been automatically marked as stale because it has not had - recent activity. It will be closed if no further activity occurs. Thank you - for your contributions. -# Comment to post when closing a stale issue. Set to `false` to disable -closeComment: false From ed933c6821a1c1a9f361004988f76c53f37d9d71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Sjo=CC=88berg?= Date: Wed, 8 Jan 2020 09:31:00 +0100 Subject: [PATCH 021/106] Disconnect ResizeObserver when component unmounts to prevent memory-leak. --- src/inner-slider.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index 59f85d2..4fe6e71 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -122,6 +122,7 @@ export class InnerSlider extends React.Component { if (this.autoplayTimer) { clearInterval(this.autoplayTimer); } + this.ro.disconnect(); }; UNSAFE_componentWillReceiveProps = nextProps => { let spec = { @@ -705,7 +706,7 @@ export class InnerSlider extends React.Component { let innerSliderProps = { className: className, dir: "ltr", - style:this.props.style + style: this.props.style }; if (this.props.unslick) { From 77e8184f8b3ed9525606a4598779c01c64ef9bdf Mon Sep 17 00:00:00 2001 From: James George Date: Fri, 10 Jan 2020 18:08:07 +0530 Subject: [PATCH 022/106] meta: enable sponsor button --- .github/FUNDING.yml | 1 + 1 file changed, 1 insertion(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..5fa15fc --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +open_collective: react-slick From d3566ccbee4a5a6976d7ff7c1354aeac50b43caa Mon Sep 17 00:00:00 2001 From: James George Date: Fri, 10 Jan 2020 18:18:54 +0530 Subject: [PATCH 023/106] docs: add reference to the contributing guidelines --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 3d25fa0..1a03867 100644 --- a/README.md +++ b/README.md @@ -104,6 +104,10 @@ open http://localhost:8080 +## Contributing + +Please see the [contributing guidelines](./CONTRIBUTING.md) + ## Contributors This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. From c1c71a1c85117474cd7cc4c5cff3d7fff8a3cc7e Mon Sep 17 00:00:00 2001 From: Kiran Date: Sat, 11 Jan 2020 00:06:52 +0530 Subject: [PATCH 024/106] Update FUNDING.yml --- .github/FUNDING.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index 5fa15fc..e26119c 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1 +1,2 @@ +github: akiran open_collective: react-slick From 80eb208cb7454cc63621f3bcf07a2b8c32999afa Mon Sep 17 00:00:00 2001 From: Kiran Date: Sat, 11 Jan 2020 00:09:34 +0530 Subject: [PATCH 025/106] Update FUNDING.yml --- .github/FUNDING.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index e26119c..5fa15fc 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,2 +1 @@ -github: akiran open_collective: react-slick From c35ce4af4295d0a8496fbcfe8a582227202ec227 Mon Sep 17 00:00:00 2001 From: rex Date: Tue, 4 Feb 2020 19:10:28 +0800 Subject: [PATCH 026/106] fix: to handle image.onload event correctly image.onload event will be handled by other react-slick instance if there are more than one react-slick instance on the same page. --- src/inner-slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index 59f85d2..4c351a6 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -290,7 +290,7 @@ export class InnerSlider extends React.Component { }); }; checkImagesLoad = () => { - let images = document.querySelectorAll(".slick-slide img"); + let images = this.list.querySelectorAll(".slick-slide img"); let imagesCount = images.length, loadedCount = 0; Array.prototype.forEach.call(images, image => { @@ -705,7 +705,7 @@ export class InnerSlider extends React.Component { let innerSliderProps = { className: className, dir: "ltr", - style:this.props.style + style: this.props.style }; if (this.props.unslick) { From 6444cd8e441ae6791b52b91b317a6f0f1532921d Mon Sep 17 00:00:00 2001 From: suekam Date: Mon, 23 Mar 2020 21:51:40 -0400 Subject: [PATCH 027/106] #1749 Correct issue link in CONTRIBUTING.md --- CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 24618ea..8988e69 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,7 +8,7 @@ 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 @@ -31,7 +31,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 hello@react-slick.opencollective.com. ## Credits From 465b97a064b62084ba4b93c86aa504180e3a8c29 Mon Sep 17 00:00:00 2001 From: Kiran Date: Fri, 1 May 2020 22:23:32 +0530 Subject: [PATCH 028/106] Update FUNDING.yml --- .github/FUNDING.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index 5fa15fc..af19086 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1 +1,2 @@ +github: [akiran] open_collective: react-slick From b475df5a5d5c1ec6b8eae93eec37a3a0054c9726 Mon Sep 17 00:00:00 2001 From: Kiran Date: Fri, 1 May 2020 22:25:12 +0530 Subject: [PATCH 029/106] Update FUNDING.yml --- .github/FUNDING.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index af19086..5fa15fc 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,2 +1 @@ -github: [akiran] open_collective: react-slick From e95c462804874c23129caec4c399197aaae64395 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Fri, 8 May 2020 16:43:13 +0800 Subject: [PATCH 030/106] fix: dir --- src/inner-slider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index 59f85d2..b86b71a 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -704,8 +704,8 @@ export class InnerSlider extends React.Component { let innerSliderProps = { className: className, - dir: "ltr", - style:this.props.style + dir: this.props.rtl ? "rtl" : "ltr", + style: this.props.style }; if (this.props.unslick) { From cde2704f09d89a496f53a1a7a5e2b7193fe0280b Mon Sep 17 00:00:00 2001 From: pankaj kumar Date: Sun, 10 May 2020 21:22:34 +0530 Subject: [PATCH 031/106] default children return in case of unslick --- src/slider.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/slider.js b/src/slider.js index f2b0b0c..06b3cf7 100644 --- a/src/slider.js +++ b/src/slider.js @@ -197,12 +197,16 @@ export default class Slider extends React.Component { if (settings === "unslick") { const className = "regular slider " + (this.props.className || ""); - return
    {newChildren}
    ; + return
    {children}
    ; } else if (newChildren.length <= settings.slidesToShow) { settings.unslick = true; } return ( - + {newChildren} ); From 1b4926cf4c97a7cad9862abbcf9c36fb34df382d Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 10 May 2020 22:28:50 +0530 Subject: [PATCH 032/106] version update --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a423c64..d9abdb3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.25.2", + "version": "0.26.0", "description": " React port of slick carousel", "main": "./lib", "files": [ From 2fd45587788fa84592785c2095f830fc69fc5ee4 Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 10 May 2020 22:35:15 +0530 Subject: [PATCH 033/106] change homepage url --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d9abdb3..ff84dc9 100644 --- a/package.json +++ b/package.json @@ -121,7 +121,7 @@ "bugs": { "url": "https://github.com/akiran/react-slick/issues" }, - "homepage": "https://github.com/akiran/react-slick", + "homepage": "https://react-slick.neostack.com", "collective": { "type": "opencollective", "url": "https://opencollective.com/react-slick", From 75a8f24ae5c4a170ce1b587e9bee75928543d9b8 Mon Sep 17 00:00:00 2001 From: kiran Date: Tue, 12 May 2020 00:41:22 +0530 Subject: [PATCH 034/106] single demo setup --- docs/single-demo.js | 51 +++++++++++++++++++++++++++++++++++++++++++++ gulpfile.js | 5 +++++ package.json | 1 + 3 files changed, 57 insertions(+) create mode 100644 docs/single-demo.js diff --git a/docs/single-demo.js b/docs/single-demo.js new file mode 100644 index 0000000..14384fe --- /dev/null +++ b/docs/single-demo.js @@ -0,0 +1,51 @@ +"use strict"; + +import React from "react"; +import ReactDOM from "react-dom"; +import Slider from "../src/slider"; + +function SimpleSlider() { + const settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1 + }; + return ( +
    +

    Single Item

    + +
    +

    1

    +
    +
    +

    2

    +
    +
    +

    3

    +
    +
    +

    4

    +
    +
    +

    5

    +
    +
    +

    6

    +
    +     +
    + ); +} + +function App() { + return ( +
    + +
    + ); +} + +React.initializeTouchEvents && React.initializeTouchEvents(true); +ReactDOM.render(, document.getElementById("rapp")); diff --git a/gulpfile.js b/gulpfile.js index 30ac0ea..64fd88d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -59,6 +59,11 @@ gulp.task( gulp.series(["watch", "copy", "sass"], function() { console.log("Start"); var myConfig = require("./webpack.config"); + if (process.env.SINGLE_DEMO) { + myConfig.entry = { + "docs.js": "./docs/single-demo.js" + }; + } myConfig.plugins = myConfig.plugins.concat( new webpack.DefinePlugin({ "process.env": { diff --git a/package.json b/package.json index ff84dc9..ed103d3 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ ], "scripts": { "start": "gulp server", + "demo": "SINGLE_DEMO=true gulp server", "build": "gulp clean && gulp sass && gulp copy && webpack", "prepublish": "babel ./src --out-dir ./lib && gulp dist", "test": "npm run lint && jest", From 8860dc4f327ee312da856ea5cf7c8671705850a7 Mon Sep 17 00:00:00 2001 From: kiran Date: Tue, 12 May 2020 00:52:33 +0530 Subject: [PATCH 035/106] rename jsx to js files --- docs/demos.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++ docs/demos.jsx | 72 ----------------------------------------------- docs/docs.js | 21 ++++++++++++++ docs/docs.jsx | 21 -------------- docs/index.js | 8 ++++++ docs/index.jsx | 8 ------ docs/routes.js | 12 ++++++++ docs/routes.jsx | 14 --------- webpack.config.js | 2 +- 9 files changed, 114 insertions(+), 116 deletions(-) create mode 100644 docs/demos.js delete mode 100644 docs/demos.jsx create mode 100644 docs/docs.js delete mode 100644 docs/docs.jsx create mode 100644 docs/index.js delete mode 100644 docs/index.jsx create mode 100644 docs/routes.js delete mode 100644 docs/routes.jsx diff --git a/docs/demos.js b/docs/demos.js new file mode 100644 index 0000000..a03cf82 --- /dev/null +++ b/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 ( +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + ); + } +} diff --git a/docs/demos.jsx b/docs/demos.jsx deleted file mode 100644 index de6d67f..0000000 --- a/docs/demos.jsx +++ /dev/null @@ -1,72 +0,0 @@ -'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 ( -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - ); - } -} diff --git a/docs/docs.js b/docs/docs.js new file mode 100644 index 0000000..9c0404e --- /dev/null +++ b/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 ( +
    +
    + React Slick +
    +
    +
    + +
    +
    +
    + ); + } +} diff --git a/docs/docs.jsx b/docs/docs.jsx deleted file mode 100644 index f4b556e..0000000 --- a/docs/docs.jsx +++ /dev/null @@ -1,21 +0,0 @@ -'use strict'; - -import React from 'react' -import Demos from './demos' - -export default class Docs extends React.Component { - render() { - return ( -
    -
    - React Slick -
    -
    -
    - -
    -
    -
    - ); - } -} diff --git a/docs/index.js b/docs/index.js new file mode 100644 index 0000000..9f732a5 --- /dev/null +++ b/docs/index.js @@ -0,0 +1,8 @@ +"use strict"; + +import React from "react"; +import ReactDOM from "react-dom"; +import Docs from "./docs"; + +React.initializeTouchEvents && React.initializeTouchEvents(true); +ReactDOM.render(, document.getElementById("rapp")); diff --git a/docs/index.jsx b/docs/index.jsx deleted file mode 100644 index 949549b..0000000 --- a/docs/index.jsx +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; - -import React from 'react' -import ReactDOM from 'react-dom' -import Docs from './docs' - -React.initializeTouchEvents && React.initializeTouchEvents(true); -ReactDOM.render(, document.getElementById('rapp')); diff --git a/docs/routes.js b/docs/routes.js new file mode 100644 index 0000000..2d96a13 --- /dev/null +++ b/docs/routes.js @@ -0,0 +1,12 @@ +"use strict"; + +var React = require("react"); +var Router = require("react-router"); +var Route = Router.Route; +var Docs = require("./docs"); + +var path = + process.env.NODE_ENV === "dev_docs" ? "/" : "/opensource/react-slick"; +var routes = ; + +module.exports = routes; diff --git a/docs/routes.jsx b/docs/routes.jsx deleted file mode 100644 index 4bf801d..0000000 --- a/docs/routes.jsx +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -var React = require('react'); -var Router = require('react-router'); -var Route = Router.Route; -var Docs = require('./docs'); - -var path = (process.env.NODE_ENV === 'dev_docs') ? '/': '/opensource/react-slick'; -var routes = ( - - -); - -module.exports = routes; diff --git a/webpack.config.js b/webpack.config.js index 407721c..e4e96d4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,7 +5,7 @@ module.exports = { mode: "production", devtool: "source-map", entry: { - "docs.js": "./docs/index.jsx" + "docs.js": "./docs/index.js" }, output: { path: path.join(__dirname, "build"), From bb11613a3c615da499ed3ca8eafdff029902b8f6 Mon Sep 17 00:00:00 2001 From: kiran Date: Tue, 12 May 2020 00:58:38 +0530 Subject: [PATCH 036/106] undoing #1781 change. It is breaking rtl --- src/inner-slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index a84f01a..f9e5c8e 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -705,7 +705,7 @@ export class InnerSlider extends React.Component { let innerSliderProps = { className: className, - dir: this.props.rtl ? "rtl" : "ltr", + dir: "ltr", style: this.props.style }; From 7a30f6940d41fe0237c7d8e81a0698d7c71912f9 Mon Sep 17 00:00:00 2001 From: kiran Date: Tue, 12 May 2020 01:01:04 +0530 Subject: [PATCH 037/106] release 0.26.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ed103d3..843d02c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.26.0", + "version": "0.26.1", "description": " React port of slick carousel", "main": "./lib", "files": [ From 4b42a459f6e34192363bdbd2064ba03b161e2286 Mon Sep 17 00:00:00 2001 From: kiran Date: Wed, 13 May 2020 02:24:55 +0530 Subject: [PATCH 038/106] ran prettier command --- src/utils/innerSliderUtils.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 003298e..06472a9 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -48,7 +48,7 @@ export const getSwipeDirection = (touchObject, verticalSwiping = false) => { xDist = touchObject.startX - touchObject.curX; yDist = touchObject.startY - touchObject.curY; r = Math.atan2(yDist, xDist); - swipeAngle = Math.round(r * 180 / Math.PI); + swipeAngle = Math.round((r * 180) / Math.PI); if (swipeAngle < 0) { swipeAngle = 360 - Math.abs(swipeAngle); } @@ -195,7 +195,7 @@ export const slideHandler = spec => { finalSlide = animationSlide + slideCount; if (!infinite) finalSlide = 0; else if (slideCount % slidesToScroll !== 0) - finalSlide = slideCount - slideCount % slidesToScroll; + finalSlide = slideCount - (slideCount % slidesToScroll); } else if (!canGoNext(spec) && animationSlide > currentSlide) { animationSlide = finalSlide = currentSlide; } else if (centerMode && animationSlide >= slideCount) { @@ -265,7 +265,8 @@ export const changeSlide = (spec, options) => { slideOffset = indexOffset === 0 ? slidesToScroll : indexOffset; targetSlide = currentSlide + slideOffset; if (lazyLoad && !infinite) { - targetSlide = (currentSlide + slidesToScroll) % slideCount + indexOffset; + targetSlide = + ((currentSlide + slidesToScroll) % slideCount) + indexOffset; } } else if (options.message === "dots") { // Click on dots @@ -704,7 +705,7 @@ export const getTrackLeft = spec => { slideCount % slidesToScroll !== 0 && slideIndex + slidesToScroll > slideCount ) { - slidesToOffset = slidesToShow - slideCount % slidesToScroll; + slidesToOffset = slidesToShow - (slideCount % slidesToScroll); } if (centerMode) { slidesToOffset = parseInt(slidesToShow / 2); From 6b41834714707680a9fcc55132703591b71d02f3 Mon Sep 17 00:00:00 2001 From: kiran Date: Wed, 13 May 2020 03:13:51 +0530 Subject: [PATCH 039/106] change localhost to 0.0.0.0 to access local server on mobile --- gulpfile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 64fd88d..9cdbb5f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -78,11 +78,11 @@ gulp.task( stats: { colors: true } - }).listen(DEV_PORT, "localhost", function(err, result) { + }).listen(DEV_PORT, "0.0.0.0", function(err, result) { if (err) { console.log(err); } else { - const server_url = `http://localhost:${DEV_PORT}`; + const server_url = `http://0.0.0.0:${DEV_PORT}`; console.log(`> Dev Server started at ${server_url}`); opn(server_url); } From e5d2cd42316c15140cbd7c472d2b9f47718e5f73 Mon Sep 17 00:00:00 2001 From: Umar Bolatov Date: Mon, 11 May 2020 20:57:14 -0700 Subject: [PATCH 040/106] Remove unused argument fix #1792 --- src/utils/innerSliderUtils.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 003298e..663ca5d 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -48,7 +48,7 @@ export const getSwipeDirection = (touchObject, verticalSwiping = false) => { xDist = touchObject.startX - touchObject.curX; yDist = touchObject.startY - touchObject.curY; r = Math.atan2(yDist, xDist); - swipeAngle = Math.round(r * 180 / Math.PI); + swipeAngle = Math.round((r * 180) / Math.PI); if (swipeAngle < 0) { swipeAngle = 360 - Math.abs(swipeAngle); } @@ -126,10 +126,7 @@ export const initializedState = spec => { currentSlide = slideCount - 1 - spec.initialSlide; } let lazyLoadedList = spec.lazyLoadedList || []; - let slidesToLoad = getOnDemandLazySlides( - { currentSlide, lazyLoadedList }, - spec - ); + let slidesToLoad = getOnDemandLazySlides({ ...spec, currentSlide, lazyLoadedList }); lazyLoadedList.concat(slidesToLoad); let state = { @@ -195,7 +192,7 @@ export const slideHandler = spec => { finalSlide = animationSlide + slideCount; if (!infinite) finalSlide = 0; else if (slideCount % slidesToScroll !== 0) - finalSlide = slideCount - slideCount % slidesToScroll; + finalSlide = slideCount - (slideCount % slidesToScroll); } else if (!canGoNext(spec) && animationSlide > currentSlide) { animationSlide = finalSlide = currentSlide; } else if (centerMode && animationSlide >= slideCount) { @@ -265,7 +262,8 @@ export const changeSlide = (spec, options) => { slideOffset = indexOffset === 0 ? slidesToScroll : indexOffset; targetSlide = currentSlide + slideOffset; if (lazyLoad && !infinite) { - targetSlide = (currentSlide + slidesToScroll) % slideCount + indexOffset; + targetSlide = + ((currentSlide + slidesToScroll) % slideCount) + indexOffset; } } else if (options.message === "dots") { // Click on dots @@ -704,7 +702,7 @@ export const getTrackLeft = spec => { slideCount % slidesToScroll !== 0 && slideIndex + slidesToScroll > slideCount ) { - slidesToOffset = slidesToShow - slideCount % slidesToScroll; + slidesToOffset = slidesToShow - (slideCount % slidesToScroll); } if (centerMode) { slidesToOffset = parseInt(slidesToShow / 2); From 18727171ff3589bc9d6d961d9cf438582168cd5b Mon Sep 17 00:00:00 2001 From: kiran Date: Fri, 17 Jul 2020 13:20:40 +0530 Subject: [PATCH 041/106] added strict mode to demos --- docs/index.js | 7 ++++++- docs/single-demo.js | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/docs/index.js b/docs/index.js index 9f732a5..7632853 100644 --- a/docs/index.js +++ b/docs/index.js @@ -5,4 +5,9 @@ import ReactDOM from "react-dom"; import Docs from "./docs"; React.initializeTouchEvents && React.initializeTouchEvents(true); -ReactDOM.render(, document.getElementById("rapp")); +ReactDOM.render( + + + , + document.getElementById("rapp") +); diff --git a/docs/single-demo.js b/docs/single-demo.js index 14384fe..46ad314 100644 --- a/docs/single-demo.js +++ b/docs/single-demo.js @@ -48,4 +48,9 @@ function App() { } React.initializeTouchEvents && React.initializeTouchEvents(true); -ReactDOM.render(, document.getElementById("rapp")); +ReactDOM.render( + + + , + document.getElementById("rapp") +); From bea916ee4bea32c7fdc5fe562faa9e7503a8ad23 Mon Sep 17 00:00:00 2001 From: kiran Date: Fri, 17 Jul 2020 15:28:40 +0530 Subject: [PATCH 042/106] Release 0.27.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 843d02c..bac8cd5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.26.1", + "version": "0.27.0", "description": " React port of slick carousel", "main": "./lib", "files": [ From b3721a2a6608403d83a81f6dde170900927c8122 Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 26 Jul 2020 12:15:45 +0530 Subject: [PATCH 043/106] remove UNSAFE_componentWillMount usage in slider.js --- src/slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/slider.js b/src/slider.js index 06b3cf7..65d63a4 100644 --- a/src/slider.js +++ b/src/slider.js @@ -25,7 +25,7 @@ export default class Slider extends React.Component { } // handles responsive breakpoints - UNSAFE_componentWillMount() { + componentDidMount() { // performance monitoring //if (process.env.NODE_ENV !== 'production') { //const { whyDidYouUpdate } = require('why-did-you-update') From 8a35db7b4f757debd90ee1b4cd9c903a9c26f4cb Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 26 Jul 2020 12:27:50 +0530 Subject: [PATCH 044/106] remove UNSAFE_componentWillMount usage in inner-slider.js --- src/inner-slider.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index 93bac62..5b655a2 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -40,6 +40,8 @@ export class InnerSlider extends React.Component { this.callbackTimers = []; this.clickable = true; this.debouncedResize = null; + const ssrState = this.ssrInit(); + this.state = { ...this.state, ...ssrState }; } listRefHandler = ref => (this.list = ref); trackRefHandler = ref => (this.track = ref); @@ -51,8 +53,7 @@ export class InnerSlider extends React.Component { this.list.style.height = getHeight(elem) + "px"; } }; - UNSAFE_componentWillMount = () => { - this.ssrInit(); + componentDidMount = () => { this.props.onInit && this.props.onInit(); if (this.props.lazyLoad) { let slidesToLoad = getOnDemandLazySlides({ @@ -68,8 +69,6 @@ export class InnerSlider extends React.Component { } } } - }; - componentDidMount = () => { let spec = { listRef: this.list, trackRef: this.track, ...this.props }; this.updateState(spec, true, () => { this.adaptHeight(); @@ -264,10 +263,9 @@ export class InnerSlider extends React.Component { let currentWidth = `${childrenWidths[this.state.currentSlide]}px`; trackStyle.left = `calc(${trackStyle.left} + (100% - ${currentWidth}) / 2 ) `; } - this.setState({ + return { trackStyle - }); - return; + }; } let childrenCount = React.Children.count(this.props.children); const spec = { ...this.props, ...this.state, slideCount: childrenCount }; @@ -286,10 +284,10 @@ export class InnerSlider extends React.Component { width: trackWidth + "%", left: trackLeft + "%" }; - this.setState({ + return { slideWidth: slideWidth + "%", trackStyle: trackStyle - }); + }; }; checkImagesLoad = () => { let images = this.list.querySelectorAll(".slick-slide img"); From 8d9b8b6644be69131d3195f46d63a20f9bfd8de3 Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 26 Jul 2020 12:40:37 +0530 Subject: [PATCH 045/106] Release 0.27.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bac8cd5..112b775 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.0", + "version": "0.27.1", "description": " React port of slick carousel", "main": "./lib", "files": [ From 2ca29b854a9a0200d896bfc672b13963a4d54c50 Mon Sep 17 00:00:00 2001 From: kiran Date: Fri, 31 Jul 2020 19:20:54 +0530 Subject: [PATCH 046/106] fix for slick current classname --- src/initial-state.js | 3 ++- src/inner-slider.js | 3 ++- src/track.js | 6 ++++-- src/utils/innerSliderUtils.js | 20 ++++++++++++-------- 4 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src/initial-state.js b/src/initial-state.js index 4eaa983..5d5e157 100644 --- a/src/initial-state.js +++ b/src/initial-state.js @@ -20,7 +20,8 @@ const initialState = { swiping: false, touchObject: { startX: 0, startY: 0, curX: 0, curY: 0 }, trackStyle: {}, - trackWidth: 0 + trackWidth: 0, + targetSlide: 0 }; export default initialState; diff --git a/src/inner-slider.js b/src/inner-slider.js index 5b655a2..b4930f7 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -605,7 +605,8 @@ export class InnerSlider extends React.Component { "trackStyle", "variableWidth", "unslick", - "centerPadding" + "centerPadding", + "targetSlide" ]); const { pauseOnHover } = this.props; trackProps = { diff --git a/src/track.js b/src/track.js index 6a7f64e..8a30406 100644 --- a/src/track.js +++ b/src/track.js @@ -33,7 +33,7 @@ const getSlideClasses = spec => { spec.currentSlide <= index && index < spec.currentSlide + spec.slidesToShow; } - let slickCurrent = index === spec.currentSlide; + let slickCurrent = index === spec.targetSlide; return { "slick-slide": true, "slick-active": slickActive, @@ -189,7 +189,9 @@ const renderSlides = spec => { export class Track extends React.PureComponent { node = null; - handleRef = ref => { this.node = ref }; + handleRef = ref => { + this.node = ref; + }; render() { const slides = renderSlides(this.props); diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 5bf499c..c4d9566 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -116,10 +116,7 @@ export const initializedState = spec => { slideWidth = listWidth; } let slideHeight = - listNode && - getHeight( - listNode.querySelector('[data-index="0"]') - ); + listNode && getHeight(listNode.querySelector('[data-index="0"]')); let listHeight = slideHeight * spec.slidesToShow; let currentSlide = spec.currentSlide === undefined ? spec.initialSlide : spec.currentSlide; @@ -127,7 +124,11 @@ export const initializedState = spec => { currentSlide = slideCount - 1 - spec.initialSlide; } let lazyLoadedList = spec.lazyLoadedList || []; - let slidesToLoad = getOnDemandLazySlides({ ...spec, currentSlide, lazyLoadedList }); + let slidesToLoad = getOnDemandLazySlides({ + ...spec, + currentSlide, + lazyLoadedList + }); lazyLoadedList.concat(slidesToLoad); let state = { @@ -218,20 +219,23 @@ export const slideHandler = spec => { state = { currentSlide: finalSlide, trackStyle: getTrackCSS({ ...spec, left: finalLeft }), - lazyLoadedList + lazyLoadedList, + targetSlide: index }; } else { state = { animating: true, currentSlide: finalSlide, trackStyle: getTrackAnimateCSS({ ...spec, left: animationLeft }), - lazyLoadedList + lazyLoadedList, + targetSlide: index }; nextState = { animating: false, currentSlide: finalSlide, trackStyle: getTrackCSS({ ...spec, left: finalLeft }), - swipeLeft: null + swipeLeft: null, + targetSlide: index }; } } From 6e3db9fda4bf7e121972d8b98e47105204889ab4 Mon Sep 17 00:00:00 2001 From: kiran Date: Fri, 31 Jul 2020 19:51:37 +0530 Subject: [PATCH 047/106] 0.27.2-beta-0 release --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 112b775..867deb1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.1", + "version": "0.27.2-beta-0", "description": " React port of slick carousel", "main": "./lib", "files": [ From cf7363ed59c75caf1d6a9fe76bcecac23d4aae42 Mon Sep 17 00:00:00 2001 From: kiran Date: Mon, 3 Aug 2020 18:35:48 +0530 Subject: [PATCH 048/106] fix an issue with focus on select on first slide --- src/utils/innerSliderUtils.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index c4d9566..b00c155 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -273,15 +273,9 @@ export const changeSlide = (spec, options) => { } else if (options.message === "dots") { // Click on dots targetSlide = options.index * options.slidesToScroll; - if (targetSlide === options.currentSlide) { - return null; - } } else if (options.message === "children") { // Click on the slides targetSlide = options.index; - if (targetSlide === options.currentSlide) { - return null; - } if (infinite) { let direction = siblingDirection({ ...spec, targetSlide }); if (targetSlide > options.currentSlide && direction === "left") { @@ -292,9 +286,6 @@ export const changeSlide = (spec, options) => { } } else if (options.message === "index") { targetSlide = Number(options.index); - if (targetSlide === options.currentSlide) { - return null; - } } return targetSlide; }; From a10db5c51d352c258ad1e0aad9d8b2ea93bf0dd5 Mon Sep 17 00:00:00 2001 From: kiran Date: Mon, 3 Aug 2020 19:04:36 +0530 Subject: [PATCH 049/106] fix an issue with slick-current at edge slides --- src/track.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/track.js b/src/track.js index 8a30406..9edb333 100644 --- a/src/track.js +++ b/src/track.js @@ -33,7 +33,16 @@ const getSlideClasses = spec => { spec.currentSlide <= index && index < spec.currentSlide + spec.slidesToShow; } - let slickCurrent = index === spec.targetSlide; + + let focusedSlide; + if (spec.targetSlide < 0) { + focusedSlide = spec.targetSlide + spec.slideCount; + } else if (spec.targetSlide >= spec.slideCount) { + focusedSlide = spec.targetSlide - spec.slideCount; + } else { + focusedSlide = spec.targetSlide; + } + let slickCurrent = index === focusedSlide; return { "slick-slide": true, "slick-active": slickActive, From 2b44d886dd32e741225747329360e6885e91bf59 Mon Sep 17 00:00:00 2001 From: kiran Date: Tue, 4 Aug 2020 19:40:36 +0530 Subject: [PATCH 050/106] release 0.27.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 867deb1..1ae1456 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.2-beta-0", + "version": "0.27.2", "description": " React port of slick carousel", "main": "./lib", "files": [ From bef98becb5ee52486415f6d1fd43848f8bb12cc8 Mon Sep 17 00:00:00 2001 From: kiran Date: Wed, 5 Aug 2020 19:19:31 +0530 Subject: [PATCH 051/106] fix an issue with slick-current when swiped from left to right on first slide --- package.json | 2 +- src/utils/innerSliderUtils.js | 11 ++++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 1ae1456..14dc6e3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.2", + "version": "0.27.3", "description": " React port of slick carousel", "main": "./lib", "files": [ diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index b00c155..4fffd5b 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -1,5 +1,9 @@ import React from "react"; +export function clamp(number, lowerBound, upperBound) { + return Math.max(lowerBound, Math.min(number, upperBound)); +} + export const getOnDemandLazySlides = spec => { let onDemandSlides = []; let startIndex = lazyStartIndex(spec); @@ -172,6 +176,7 @@ export const slideHandler = spec => { finalLeft; let state = {}, nextState = {}; + const targetSlide = infinite ? index : clamp(index, 0, slideCount); if (fade) { if (!infinite && (index < 0 || index >= slideCount)) return {}; if (index < 0) { @@ -220,7 +225,7 @@ export const slideHandler = spec => { currentSlide: finalSlide, trackStyle: getTrackCSS({ ...spec, left: finalLeft }), lazyLoadedList, - targetSlide: index + targetSlide }; } else { state = { @@ -228,14 +233,14 @@ export const slideHandler = spec => { currentSlide: finalSlide, trackStyle: getTrackAnimateCSS({ ...spec, left: animationLeft }), lazyLoadedList, - targetSlide: index + targetSlide }; nextState = { animating: false, currentSlide: finalSlide, trackStyle: getTrackCSS({ ...spec, left: finalLeft }), swipeLeft: null, - targetSlide: index + targetSlide }; } } From 0cb98deacaddf518df87a05b1599dfc5cfbe902d Mon Sep 17 00:00:00 2001 From: kiran Date: Fri, 7 Aug 2020 21:50:19 +0530 Subject: [PATCH 052/106] Fix an issue: showing less slides than slidesToShow in infinite mode --- src/utils/innerSliderUtils.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 4fffd5b..b8f8d8c 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -210,6 +210,11 @@ export const slideHandler = spec => { if (!infinite) finalSlide = slideCount - slidesToShow; else if (slideCount % slidesToScroll !== 0) finalSlide = 0; } + + if (!infinite && animationSlide + slidesToShow >= slideCount) { + finalSlide = slideCount - slidesToShow; + } + animationLeft = getTrackLeft({ ...spec, slideIndex: animationSlide }); finalLeft = getTrackLeft({ ...spec, slideIndex: finalSlide }); if (!infinite) { From 7fe4f6f7fad3285dc230cca005ceacac433ba674 Mon Sep 17 00:00:00 2001 From: kiran Date: Fri, 7 Aug 2020 22:02:13 +0530 Subject: [PATCH 053/106] fixed tests --- examples/__tests__/UnevenSets.test.js | 4 ++++ .../__tests__/__snapshots__/MultipleItems.test.js.snap | 2 +- examples/__tests__/__snapshots__/UnevenSets.test.js.snap | 8 ++++---- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/examples/__tests__/UnevenSets.test.js b/examples/__tests__/UnevenSets.test.js index 07d984c..1c47291 100644 --- a/examples/__tests__/UnevenSets.test.js +++ b/examples/__tests__/UnevenSets.test.js @@ -49,6 +49,8 @@ describe("UnevenSets Finite", () => { activeSlides = slider.find("div.slick-active"); expect(currentSlide.props()["data-index"]).toEqual(4); expect(activeSlides.map(slide => slide.props()["data-index"])).toEqual([ + 2, + 3, 4, 5 ]); @@ -59,6 +61,8 @@ describe("UnevenSets Finite", () => { activeSlides = slider.find("div.slick-active"); expect(currentSlide.props()["data-index"]).toEqual(4); expect(activeSlides.map(slide => slide.props()["data-index"])).toEqual([ + 2, + 3, 4, 5 ]); diff --git a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap b/examples/__tests__/__snapshots__/MultipleItems.test.js.snap index ab771bd..7e4aabd 100644 --- a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap +++ b/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

    Multiple items

    -
    +
    diff --git a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap b/examples/__tests__/__snapshots__/UnevenSets.test.js.snap index 0a9ea26..8b4a729 100644 --- a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap +++ b/examples/__tests__/__snapshots__/UnevenSets.test.js.snap @@ -20,14 +20,14 @@ exports[`UnevenSets Finite Activity test 1`] = `
    -
    +

    3

    -
    +

    4

    @@ -51,8 +51,8 @@ exports[`UnevenSets Finite Activity test 1`] = `
      -
      • -
      • +
      • +
    " From 48c1973ab108d044e678d962b0b054476f52fc11 Mon Sep 17 00:00:00 2001 From: kiran Date: Fri, 7 Aug 2020 22:07:12 +0530 Subject: [PATCH 054/106] release 0.27.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 14dc6e3..5737f26 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.3", + "version": "0.27.4", "description": " React port of slick carousel", "main": "./lib", "files": [ From 8b42e2ebbca9a7a85d5c2cd9d23a6f05f8a6767f Mon Sep 17 00:00:00 2001 From: Kiran Date: Sun, 9 Aug 2020 20:07:43 +0530 Subject: [PATCH 055/106] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1a03867..7c19c80 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ 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 From 8295e4be8ec402830e2f9b142decc20d439713d8 Mon Sep 17 00:00:00 2001 From: kiran Date: Mon, 10 Aug 2020 18:25:38 +0530 Subject: [PATCH 056/106] avoid slide change if it is already on the same slide --- src/inner-slider.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/inner-slider.js b/src/inner-slider.js index b4930f7..c9e649a 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -401,6 +401,7 @@ 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); From 11122dac26fd02401e48f38bfd36030390e6ee55 Mon Sep 17 00:00:00 2001 From: kiran Date: Mon, 10 Aug 2020 19:26:12 +0530 Subject: [PATCH 057/106] fix an issue with waitForAnimate --- src/inner-slider.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/inner-slider.js b/src/inner-slider.js index c9e649a..1c7518a 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -383,6 +383,9 @@ export class InnerSlider extends React.Component { value => this.state.lazyLoadedList.indexOf(value) < 0 ); onLazyLoad && slidesToLoad.length > 0 && onLazyLoad(slidesToLoad); + if (!this.props.waitForAnimate && this.animationEndCallback) { + clearTimeout(this.animationEndCallback); + } this.setState(state, () => { asNavFor && asNavFor.innerSlider.slideHandler(index); if (!nextState) return; From a1e3106dca2a703e583ee7b179e16ff897bc9602 Mon Sep 17 00:00:00 2001 From: kiran Date: Mon, 10 Aug 2020 19:27:53 +0530 Subject: [PATCH 058/106] update test snapshot --- examples/__tests__/__snapshots__/MultipleItems.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap b/examples/__tests__/__snapshots__/MultipleItems.test.js.snap index 7e4aabd..ab771bd 100644 --- a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap +++ b/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

    Multiple items

    -
    +
    From 7260ff76a77f85ff6ef08b66c1a9daae5eb575f5 Mon Sep 17 00:00:00 2001 From: kiran Date: Mon, 10 Aug 2020 19:32:11 +0530 Subject: [PATCH 059/106] release 0.27.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5737f26..8f43ccd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.4", + "version": "0.27.5", "description": " React port of slick carousel", "main": "./lib", "files": [ From ca612049b65d7a34b4c72a02370e0c01abc0d89a Mon Sep 17 00:00:00 2001 From: kiran Date: Tue, 11 Aug 2020 21:30:13 +0530 Subject: [PATCH 060/106] fix to swipe issues --- package.json | 6 ++++-- src/inner-slider.js | 4 +++- src/utils/innerSliderUtils.js | 15 +++++++++------ 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 8f43ccd..ac3b19c 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,10 @@ "scripts": { "start": "gulp server", "demo": "SINGLE_DEMO=true gulp server", - "build": "gulp clean && gulp sass && gulp copy && webpack", - "prepublish": "babel ./src --out-dir ./lib && gulp dist", + "build-dev": "gulp clean && gulp sass && gulp copy && webpack", + "lib": "babel ./src --out-dir ./lib", + "build": "npm run lib && gulp dist", + "prepublish": "npm run build", "test": "npm run lint && jest", "test:watch": "jest --watch", "lint": "eslint src", diff --git a/src/inner-slider.js b/src/inner-slider.js index 1c7518a..f5b4904 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -472,6 +472,7 @@ export class InnerSlider extends React.Component { this.setState(state); if (triggerSlideHandler === undefined) return; this.slideHandler(triggerSlideHandler); + this.clickable = true; if (this.props.verticalSwiping) { this.enableBodyScroll(); } @@ -618,7 +619,8 @@ export class InnerSlider extends React.Component { onMouseEnter: pauseOnHover ? this.onTrackOver : null, onMouseLeave: pauseOnHover ? this.onTrackLeave : null, onMouseOver: pauseOnHover ? this.onTrackOver : null, - focusOnSelect: this.props.focusOnSelect ? this.selectHandler : null + focusOnSelect: + this.props.focusOnSelect && this.clickable ? this.selectHandler : null }; var dots; diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index b8f8d8c..8ec594e 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -176,7 +176,7 @@ export const slideHandler = spec => { finalLeft; let state = {}, nextState = {}; - const targetSlide = infinite ? index : clamp(index, 0, slideCount); + const targetSlide = infinite ? index : clamp(index, 0, slideCount - 1); if (fade) { if (!infinite && (index < 0 || index >= slideCount)) return {}; if (index < 0) { @@ -426,10 +426,12 @@ export const swipeEnd = (e, spec) => { touchThreshold, verticalSwiping, listHeight, - currentSlide, swipeToSlide, scrolling, - onSwipe + onSwipe, + targetSlide, + currentSlide, + infinite } = spec; if (!dragging) { if (swipe) e.preventDefault(); @@ -461,21 +463,22 @@ export const swipeEnd = (e, spec) => { onSwipe(swipeDirection); } let slideCount, newSlide; + let activeSlide = infinite ? currentSlide : targetSlide; switch (swipeDirection) { case "left": case "up": - newSlide = currentSlide + getSlideCount(spec); + newSlide = activeSlide + getSlideCount(spec); slideCount = swipeToSlide ? checkNavigable(spec, newSlide) : newSlide; state["currentDirection"] = 0; break; case "right": case "down": - newSlide = currentSlide - getSlideCount(spec); + newSlide = activeSlide - getSlideCount(spec); slideCount = swipeToSlide ? checkNavigable(spec, newSlide) : newSlide; state["currentDirection"] = 1; break; default: - slideCount = currentSlide; + slideCount = activeSlide; } state["triggerSlideHandler"] = slideCount; } else { From 1b45e4b6c142c8571d131f787fd6c0f85b50bec1 Mon Sep 17 00:00:00 2001 From: kiran Date: Tue, 11 Aug 2020 22:28:25 +0530 Subject: [PATCH 061/106] make asNavFor work with waitForAnimate=false --- src/inner-slider.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index f5b4904..1eee282 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -387,7 +387,11 @@ export class InnerSlider extends React.Component { clearTimeout(this.animationEndCallback); } this.setState(state, () => { - asNavFor && asNavFor.innerSlider.slideHandler(index); + // asNavForIndex check is to avoid recursive calls of slideHandler in waitForAnimate=false mode + if (asNavFor && this.asNavForIndex !== index) { + this.asNavForIndex = index; + asNavFor.innerSlider.slideHandler(index); + } if (!nextState) return; this.animationEndCallback = setTimeout(() => { const { animating, ...firstBatch } = nextState; From fdfc4f99ffbb3bb78329e2aa7587c061c54af070 Mon Sep 17 00:00:00 2001 From: kiran Date: Tue, 11 Aug 2020 22:41:20 +0530 Subject: [PATCH 062/106] release 0.27.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ac3b19c..e311a7d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.5", + "version": "0.27.6", "description": " React port of slick carousel", "main": "./lib", "files": [ From e072da4fcd92521926f421c6330e159d57067cdc Mon Sep 17 00:00:00 2001 From: kiran Date: Tue, 11 Aug 2020 23:11:48 +0530 Subject: [PATCH 063/106] fix test --- .../__tests__/__snapshots__/UnevenSets.test.js.snap | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap b/examples/__tests__/__snapshots__/UnevenSets.test.js.snap index 8b4a729..dcdc28f 100644 --- a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap +++ b/examples/__tests__/__snapshots__/UnevenSets.test.js.snap @@ -20,14 +20,14 @@ exports[`UnevenSets Finite Activity test 1`] = `
    -
    +

    3

    -
    +

    4

    @@ -51,8 +51,8 @@ exports[`UnevenSets Finite Activity test 1`] = `
      -
      • -
      • +
      • +
    " @@ -556,4 +556,4 @@ exports[`UnevenSets Infinite Positioning test 1`] = `
    " -`; +`; \ No newline at end of file From dd93c49b5cfb99678df7e3210c751bb5839cf2c7 Mon Sep 17 00:00:00 2001 From: kiran Date: Wed, 12 Aug 2020 16:29:57 +0530 Subject: [PATCH 064/106] fix dots issue in infinite mode --- docs/single-demo.js | 5 +- .../__snapshots__/UnevenSets.test.js.snap | 6 +- src/dots.js | 57 +++++++++++-------- 3 files changed, 40 insertions(+), 28 deletions(-) diff --git a/docs/single-demo.js b/docs/single-demo.js index 46ad314..d2ada8a 100644 --- a/docs/single-demo.js +++ b/docs/single-demo.js @@ -3,6 +3,8 @@ import React from "react"; import ReactDOM from "react-dom"; import Slider from "../src/slider"; +import UnevenSetsFinite from "../examples/UnevenSetsFinite"; +import UnevenSetsInfinite from "../examples/UnevenSetsInfinite"; function SimpleSlider() { const settings = { @@ -42,7 +44,8 @@ function SimpleSlider() { function App() { return (
    - + + {/* */}
    ); } diff --git a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap b/examples/__tests__/__snapshots__/UnevenSets.test.js.snap index dcdc28f..b1dacdf 100644 --- a/examples/__tests__/__snapshots__/UnevenSets.test.js.snap +++ b/examples/__tests__/__snapshots__/UnevenSets.test.js.snap @@ -20,14 +20,14 @@ exports[`UnevenSets Finite Activity test 1`] = `
    -
    +

    3

    -
    +

    4

    @@ -556,4 +556,4 @@ exports[`UnevenSets Infinite Positioning test 1`] = `
    " -`; \ No newline at end of file +`; diff --git a/src/dots.js b/src/dots.js index ae1e51d..93520cb 100644 --- a/src/dots.js +++ b/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(
  • {React.cloneElement(this.props.customPaging(i), { onClick })}
    • ); - }); + } return React.cloneElement(this.props.appendDots(dots), { className: this.props.dotsClass, From ab9b36b48ced9669bcee29ad1de727ee0a86205b Mon Sep 17 00:00:00 2001 From: Kiran Date: Wed, 12 Aug 2020 20:24:24 +0530 Subject: [PATCH 065/106] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 7c19c80..57ddc38 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,8 @@ ## [Documentation](http://react-slick.neostack.com) +### Don't upgrade to react-slick@0.27 yet. Stick with react-slick@0.26 until we release react-slick@0.28 + ### Installation **npm** From f958da53d1f25e29bb43b5b7ad222621342092d8 Mon Sep 17 00:00:00 2001 From: kiran Date: Wed, 12 Aug 2020 21:12:37 +0530 Subject: [PATCH 066/106] fix to avoid triggering of click after swipe end event on desktop --- src/inner-slider.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index 1eee282..82d7e14 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -476,11 +476,14 @@ export class InnerSlider extends React.Component { this.setState(state); if (triggerSlideHandler === undefined) return; this.slideHandler(triggerSlideHandler); - this.clickable = true; if (this.props.verticalSwiping) { this.enableBodyScroll(); } }; + touchEnd = e => { + this.swipeEnd(e); + this.clickable = true; + }; slickPrev = () => { // this and fellow methods are wrapped in setTimeout // to make sure initialize setState has happened before @@ -708,7 +711,7 @@ export class InnerSlider extends React.Component { onMouseLeave: this.state.dragging && touchMove ? this.swipeEnd : null, onTouchStart: touchMove ? this.swipeStart : null, onTouchMove: this.state.dragging && touchMove ? this.swipeMove : null, - onTouchEnd: touchMove ? this.swipeEnd : null, + onTouchEnd: touchMove ? this.touchEnd : null, onTouchCancel: this.state.dragging && touchMove ? this.swipeEnd : null, onKeyDown: this.props.accessibility ? this.keyHandler : null }; From 0e1e295f7edbebac119ea1b1c02440c8a534494e Mon Sep 17 00:00:00 2001 From: kiran Date: Wed, 12 Aug 2020 21:13:17 +0530 Subject: [PATCH 067/106] release 0.27.7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e311a7d..19e007e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.6", + "version": "0.27.7", "description": " React port of slick carousel", "main": "./lib", "files": [ From 1bb580df99ae9a1438ed543be4baa1773ec1e208 Mon Sep 17 00:00:00 2001 From: kiran Date: Thu, 13 Aug 2020 22:59:08 +0530 Subject: [PATCH 068/106] ability to use useCSS option to disable default fade transition --- src/inner-slider.js | 3 ++- src/track.js | 22 ++++++++++++---------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index 82d7e14..7da3fd9 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -618,7 +618,8 @@ export class InnerSlider extends React.Component { "variableWidth", "unslick", "centerPadding", - "targetSlide" + "targetSlide", + "useCSS" ]); const { pauseOnHover } = this.props; trackProps = { diff --git a/src/track.js b/src/track.js index 9edb333..da5ed76 100644 --- a/src/track.js +++ b/src/track.js @@ -67,16 +67,18 @@ const getSlideStyle = spec => { style.left = -spec.index * parseInt(spec.slideWidth); } style.opacity = spec.currentSlide === spec.index ? 1 : 0; - style.transition = - "opacity " + - spec.speed + - "ms " + - spec.cssEase + - ", " + - "visibility " + - spec.speed + - "ms " + - spec.cssEase; + if (!spec.useCSS) { + style.transition = + "opacity " + + spec.speed + + "ms " + + spec.cssEase + + ", " + + "visibility " + + spec.speed + + "ms " + + spec.cssEase; + } } return style; From b7658c77a6bf4ea3d6bd96a762fc7e95486bb45b Mon Sep 17 00:00:00 2001 From: kiran Date: Thu, 13 Aug 2020 23:20:52 +0530 Subject: [PATCH 069/106] reset autoplay timer when slide is changed with buttons/dots --- src/inner-slider.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/inner-slider.js b/src/inner-slider.js index 7da3fd9..05dfb50 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -415,6 +415,7 @@ export class InnerSlider extends React.Component { } else { this.slideHandler(targetSlide); } + this.props.autoplay && this.autoPlay("update"); }; clickHandler = e => { if (this.clickable === false) { From b6dd6dfbe860ad613a32ea40999249ff3987bbfe Mon Sep 17 00:00:00 2001 From: kiran Date: Thu, 13 Aug 2020 23:33:31 +0530 Subject: [PATCH 070/106] updated readme --- README.md | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 57ddc38..7df463a 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,11 @@ ## [Documentation](http://react-slick.neostack.com) -### Don't upgrade to react-slick@0.27 yet. Stick with react-slick@0.26 until we release react-slick@0.28 +### Alert + +react-slick@0.27._ releases are experimental. +**Use react-slick@0.26 in production** until we make our next stable release (react-slick@0.28) +We welcome if you like to test react-slick@0.27._ and report any breaking changes. ### Installation @@ -35,8 +39,17 @@ import "slick-carousel/slick/slick-theme.css"; or add cdn link in your html ```html - - + + ``` ### [PlayGround](https://codesandbox.io/s/ppwkk5l6xx) From 69348c18e74ff39996c3074e5182da398e081d32 Mon Sep 17 00:00:00 2001 From: kiran Date: Thu, 13 Aug 2020 23:35:55 +0530 Subject: [PATCH 071/106] release 0.27.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 19e007e..e1c87fa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.7", + "version": "0.27.8", "description": " React port of slick carousel", "main": "./lib", "files": [ From 5ce14b25fd56d6b5eb4e417955d1f865eda2b1a3 Mon Sep 17 00:00:00 2001 From: Kiran Date: Fri, 14 Aug 2020 00:03:03 +0530 Subject: [PATCH 072/106] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7df463a..7c12495 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,10 @@ ### Alert -react-slick@0.27._ releases are experimental. +react-slick@0.27.* releases are experimental. + **Use react-slick@0.26 in production** until we make our next stable release (react-slick@0.28) + We welcome if you like to test react-slick@0.27._ and report any breaking changes. ### Installation From 9cac06ff5a236610568df109808a0f40e89a0975 Mon Sep 17 00:00:00 2001 From: Kiran Date: Fri, 14 Aug 2020 00:07:12 +0530 Subject: [PATCH 073/106] Update README.md --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 7c12495..4b0b6ff 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,9 @@ ### Alert -react-slick@0.27.* releases are experimental. - -**Use react-slick@0.26 in production** until we make our next stable release (react-slick@0.28) - -We welcome if you like to test react-slick@0.27._ and report any breaking changes. +react-slick@0.27.* releases are experimental. +**Use react-slick@0.26 in production** until we make our next stable release (react-slick@0.28) +We invite you to test react-slick@0.27.* in dev environment and report any breaking changes. ### Installation From 54566ade1ad330de8bedb69c9f6e946a6e0039a3 Mon Sep 17 00:00:00 2001 From: Kiran Date: Sat, 15 Aug 2020 13:16:12 +0530 Subject: [PATCH 074/106] Update README.md --- README.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/README.md b/README.md index 4b0b6ff..3259882 100644 --- a/README.md +++ b/README.md @@ -138,13 +138,4 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com 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)] - - - - - - - - - From 4f67597573cd0f238fa544bdeab852cddefcd9ca Mon Sep 17 00:00:00 2001 From: Kiran Date: Sat, 15 Aug 2020 15:07:09 +0530 Subject: [PATCH 075/106] Update README.md --- README.md | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/README.md b/README.md index 3259882..8ffd684 100644 --- a/README.md +++ b/README.md @@ -115,27 +115,7 @@ npm start open http://localhost:8080 ``` - - - - ## Contributing Please see the [contributing guidelines](./CONTRIBUTING.md) -## Contributors - -This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. - - -## Backers - -Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/react-slick#backer)] - - - -## 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)] - - From 43bd1648a76d1c62c284fc2e0773b6db3634ce88 Mon Sep 17 00:00:00 2001 From: Kiran Date: Sat, 15 Aug 2020 15:14:57 +0530 Subject: [PATCH 076/106] Update README.md --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 8ffd684..fcc6d12 100644 --- a/README.md +++ b/README.md @@ -6,11 +6,11 @@ ## [Documentation](http://react-slick.neostack.com) -### Alert +### :warning: Alert -react-slick@0.27.* releases are experimental. -**Use react-slick@0.26 in production** until we make our next stable release (react-slick@0.28) -We invite you to test react-slick@0.27.* in dev environment and report any breaking changes. +:construction: react-slick@0.27.* releases are experimental. +:white_check_mark: **Use react-slick@0.26 in production** until we make our next stable release (react-slick@0.28) +:pray: We invite you to test react-slick@0.27.* in dev environment and report any breaking changes. ### Installation From ce07bdbebc42ad2741828d8b5e3415d30b2f2c29 Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 16 Aug 2020 13:13:18 +0530 Subject: [PATCH 077/106] using useCSS to enable/disable default fade transform --- src/track.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/track.js b/src/track.js index da5ed76..f8924c8 100644 --- a/src/track.js +++ b/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 + From d19bc96a49dc1f724046255cea98db47950c504e Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 16 Aug 2020 18:31:50 +0530 Subject: [PATCH 078/106] fix missing afterChange event triggering with waitForAnimate=false --- src/inner-slider.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/inner-slider.js b/src/inner-slider.js index 05dfb50..fe43423 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -385,6 +385,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 From e45b9e75d3e6a42d95f8eaa0b9070c3fe270d5e5 Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 16 Aug 2020 20:33:36 +0530 Subject: [PATCH 079/106] Fix an issue with prev button clicks in fade mode --- docs/single-demo.js | 6 +----- examples/Fade.js | 3 ++- examples/__tests__/Fade.js | 18 ++++++++++++++++++ .../__snapshots__/MultipleItems.test.js.snap | 2 +- src/inner-slider.js | 1 - 5 files changed, 22 insertions(+), 8 deletions(-) create mode 100644 examples/__tests__/Fade.js diff --git a/docs/single-demo.js b/docs/single-demo.js index d2ada8a..48880e3 100644 --- a/docs/single-demo.js +++ b/docs/single-demo.js @@ -3,9 +3,6 @@ import React from "react"; import ReactDOM from "react-dom"; import Slider from "../src/slider"; -import UnevenSetsFinite from "../examples/UnevenSetsFinite"; -import UnevenSetsInfinite from "../examples/UnevenSetsInfinite"; - function SimpleSlider() { const settings = { dots: true, @@ -44,8 +41,7 @@ function SimpleSlider() { function App() { return (
    - - {/* */} +
    ); } diff --git a/examples/Fade.js b/examples/Fade.js index f8fd80e..e4ae2c9 100644 --- a/examples/Fade.js +++ b/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 (
    diff --git a/examples/__tests__/Fade.js b/examples/__tests__/Fade.js new file mode 100644 index 0000000..80a1095 --- /dev/null +++ b/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(); + 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); + }); +}); diff --git a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap b/examples/__tests__/__snapshots__/MultipleItems.test.js.snap index ab771bd..7e4aabd 100644 --- a/examples/__tests__/__snapshots__/MultipleItems.test.js.snap +++ b/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

    Multiple items

    -
    +
    diff --git a/src/inner-slider.js b/src/inner-slider.js index fe43423..20f3ccc 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -410,7 +410,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); From 02189eeccabba1ee63f0cf3d825911effe1bbeaf Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 16 Aug 2020 21:36:39 +0530 Subject: [PATCH 080/106] remove UNSAFE_componentWillReceiveProps usage --- src/inner-slider.js | 68 ++++++++++++++++++++++++++------------------- 1 file changed, 40 insertions(+), 28 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index 20f3ccc..b42f444 100644 --- a/src/inner-slider.js +++ b/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(); From 1c3d70cce795fe2daaeb4b57ce4013fd08b997aa Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 16 Aug 2020 23:38:35 +0530 Subject: [PATCH 081/106] fix in an issue with changing slides with keys in finite mode --- src/utils/innerSliderUtils.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 8ec594e..c4d1fc4 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -259,6 +259,7 @@ export const changeSlide = (spec, options) => { slidesToShow, slideCount, currentSlide, + targetSlide: previousTargetSlide, lazyLoad, infinite } = spec; @@ -273,6 +274,9 @@ 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; @@ -280,6 +284,9 @@ export const changeSlide = (spec, options) => { targetSlide = ((currentSlide + slidesToScroll) % slideCount) + indexOffset; } + if (!infinite) { + targetSlide = previousTargetSlide + slidesToScroll; + } } else if (options.message === "dots") { // Click on dots targetSlide = options.index * options.slidesToScroll; From a43f1093901a9b8967717757d93c37c47bdc7186 Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 16 Aug 2020 23:57:33 +0530 Subject: [PATCH 082/106] release 0.27.9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e1c87fa..8584461 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.8", + "version": "0.27.9", "description": " React port of slick carousel", "main": "./lib", "files": [ From 9e6235cdfad312ba93df264b21280e1b92402cab Mon Sep 17 00:00:00 2001 From: kiran Date: Thu, 20 Aug 2020 18:08:24 +0530 Subject: [PATCH 083/106] focus the slide selected in focusOnSelect mode --- src/inner-slider.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/inner-slider.js b/src/inner-slider.js index b42f444..24820f6 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -429,6 +429,10 @@ export class InnerSlider extends React.Component { this.slideHandler(targetSlide); } this.props.autoplay && this.autoPlay("update"); + if (this.props.focusOnSelect) { + const nodes = this.list.querySelectorAll(".slick-current"); + nodes[0] && nodes[0].focus(); + } }; clickHandler = e => { if (this.clickable === false) { From 313dac71de9e2d20a8e4d8d4689d967b55a45fe3 Mon Sep 17 00:00:00 2001 From: kiran Date: Thu, 20 Aug 2020 18:10:17 +0530 Subject: [PATCH 084/106] release 0.27.10 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8584461..33a2bf6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.9", + "version": "0.27.10", "description": " React port of slick carousel", "main": "./lib", "files": [ From d1fb6bb17f40decf90e1e0d09026fc5cbfb95a63 Mon Sep 17 00:00:00 2001 From: kiran Date: Sat, 5 Sep 2020 23:54:02 +0530 Subject: [PATCH 085/106] Fixes #1881 --- src/utils/innerSliderUtils.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index c4d1fc4..fc8b474 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -190,9 +190,10 @@ export const slideHandler = spec => { state = { animating: true, currentSlide: animationSlide, - lazyLoadedList + lazyLoadedList, + targetSlide: animationSlide }; - nextState = { animating: false }; + nextState = { animating: false, targetSlide: animationSlide }; } else { finalSlide = animationSlide; if (animationSlide < 0) { @@ -265,7 +266,6 @@ export const changeSlide = (spec, options) => { } = spec; unevenOffset = slideCount % slidesToScroll !== 0; indexOffset = unevenOffset ? 0 : (slideCount - currentSlide) % slidesToScroll; - if (options.message === "previous") { slideOffset = indexOffset === 0 ? slidesToScroll : slidesToShow - indexOffset; @@ -304,6 +304,7 @@ export const changeSlide = (spec, options) => { } else if (options.message === "index") { targetSlide = Number(options.index); } + console.log(targetSlide, "targetSlide"); return targetSlide; }; export const keyHandler = (e, accessibility, rtl) => { From 9f3a9b9cca262ef387672acf982cf754ee81164c Mon Sep 17 00:00:00 2001 From: kiran Date: Sun, 6 Sep 2020 00:15:34 +0530 Subject: [PATCH 086/106] remove console.log --- src/utils/innerSliderUtils.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index fc8b474..e3164e0 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -304,7 +304,6 @@ export const changeSlide = (spec, options) => { } else if (options.message === "index") { targetSlide = Number(options.index); } - console.log(targetSlide, "targetSlide"); return targetSlide; }; export const keyHandler = (e, accessibility, rtl) => { From 1fe63ade1518f572ac3afc3e72dc60ee7019e9e0 Mon Sep 17 00:00:00 2001 From: akiran Date: Thu, 8 Oct 2020 22:47:11 +0530 Subject: [PATCH 087/106] release 0.27.11 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 33a2bf6..50a1919 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.10", + "version": "0.27.11", "description": " React port of slick carousel", "main": "./lib", "files": [ From 9779b3ea8596179f7b760c0f58bd191945b3f45f Mon Sep 17 00:00:00 2001 From: Kiran Date: Fri, 9 Oct 2020 12:12:42 +0530 Subject: [PATCH 088/106] remove alert from readme --- README.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/README.md b/README.md index fcc6d12..700663f 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,6 @@ ## [Documentation](http://react-slick.neostack.com) -### :warning: Alert - -:construction: react-slick@0.27.* releases are experimental. -:white_check_mark: **Use react-slick@0.26 in production** until we make our next stable release (react-slick@0.28) -:pray: We invite you to test react-slick@0.27.* in dev environment and report any breaking changes. - ### Installation **npm** @@ -118,4 +112,3 @@ open http://localhost:8080 ## Contributing Please see the [contributing guidelines](./CONTRIBUTING.md) - From 659e9a499d84f33b8437e996aa5c19d02ea0cf74 Mon Sep 17 00:00:00 2001 From: akiran Date: Fri, 9 Oct 2020 12:18:47 +0530 Subject: [PATCH 089/106] converted class to function component in readme --- README.md | 62 +++++++++++++++++++++++++++---------------------------- 1 file changed, 30 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 700663f..67373d5 100644 --- a/README.md +++ b/README.md @@ -54,38 +54,36 @@ or add cdn link in your html 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 ( - -
    -

    1

    -
    -
    -

    2

    -
    -
    -

    3

    -
    -
    -

    4

    -
    -
    -

    5

    -
    -
    -

    6

    -
    -     - ); - } +export default funtion SimpleSlider() { + var settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1 + }; + return ( + +
    +

    1

    +
    +
    +

    2

    +
    +
    +

    3

    +
    +
    +

    4

    +
    +
    +

    5

    +
    +
    +

    6

    +
    +     + ); } ``` From 4b85985bbc0e35915e9b223685ba111e5b75de0b Mon Sep 17 00:00:00 2001 From: "Deron.W" Date: Mon, 19 Oct 2020 11:33:08 +0800 Subject: [PATCH 090/106] typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 67373d5..5a2ff38 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ or add cdn link in your html import React from "react"; import Slider from "react-slick"; -export default funtion SimpleSlider() { +export default function SimpleSlider() { var settings = { dots: true, infinite: true, From cc0f0de4eec076e6472847f71950a11fcd657a14 Mon Sep 17 00:00:00 2001 From: akiran Date: Sat, 31 Oct 2020 15:37:35 +0530 Subject: [PATCH 091/106] release 0.27.12 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 50a1919..938fb9c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.11", + "version": "0.27.12", "description": " React port of slick carousel", "main": "./lib", "files": [ From 4ca610d7792e26c824b6ff34b2a1e097877bc58b Mon Sep 17 00:00:00 2001 From: Kiran Date: Mon, 2 Nov 2020 15:59:20 +0530 Subject: [PATCH 092/106] Fix #1918 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 50a1919..50d3e21 100644 --- a/package.json +++ b/package.json @@ -94,8 +94,8 @@ "resize-observer-polyfill": "^1.5.0" }, "peerDependencies": { - "react": "^0.14.0 || ^15.0.1 || ^16.0.0", - "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0" + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || 17.0.0" }, "jest": { "setupFiles": [ From e10743b9f3fcf858bb9756d8dac593ea5b0b3df9 Mon Sep 17 00:00:00 2001 From: Kiran Date: Mon, 2 Nov 2020 15:59:53 +0530 Subject: [PATCH 093/106] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 50d3e21..03e55bc 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ }, "peerDependencies": { "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", - "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || 17.0.0" + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0" }, "jest": { "setupFiles": [ From de674c0ef651d0051d7153258ca75823a22f0318 Mon Sep 17 00:00:00 2001 From: akiran Date: Fri, 6 Nov 2020 15:28:05 +0530 Subject: [PATCH 094/106] release 0.27.13 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1b24eb9..2b3d969 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.12", + "version": "0.27.13", "description": " React port of slick carousel", "main": "./lib", "files": [ From 4c1f1ddf5b926d6368af8441ca66a0cb6c2874a7 Mon Sep 17 00:00:00 2001 From: SarahAlAshwal Date: Sat, 9 Jan 2021 20:09:44 -0500 Subject: [PATCH 095/106] fix the afterChange-test --- __tests__/afterChange.test.js | 41 +++++++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/__tests__/afterChange.test.js b/__tests__/afterChange.test.js index 4da3f13..8e96e5b 100644 --- a/__tests__/afterChange.test.js +++ b/__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(); 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); }); }); From 61198cf20f96bb507ff7e7c26fe212bf6471f6b2 Mon Sep 17 00:00:00 2001 From: akiran Date: Mon, 11 Jan 2021 23:27:58 +0530 Subject: [PATCH 096/106] fixed and issue with querySelectorAll --- src/inner-slider.js | 20 ++++++++++++-------- src/utils/innerSliderUtils.js | 5 ++++- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index 24820f6..3f1939d 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -88,13 +88,14 @@ export class InnerSlider extends React.Component { } }); this.ro.observe(this.list); - Array.prototype.forEach.call( - document.querySelectorAll(".slick-slide"), - slide => { - slide.onfocus = this.props.pauseOnFocus ? this.onSlideFocus : null; - slide.onblur = this.props.pauseOnFocus ? this.onSlideBlur : null; - } - ); + document.querySelectorAll && + Array.prototype.forEach.call( + document.querySelectorAll(".slick-slide"), + slide => { + slide.onfocus = this.props.pauseOnFocus ? this.onSlideFocus : null; + slide.onblur = this.props.pauseOnFocus ? this.onSlideBlur : null; + } + ); if (window.addEventListener) { window.addEventListener("resize", this.onWindowResized); } else { @@ -302,7 +303,10 @@ export class InnerSlider extends React.Component { }; }; checkImagesLoad = () => { - let images = this.list.querySelectorAll(".slick-slide img"); + let images = + (this.list.querySelectorAll && + this.list.querySelectorAll(".slick-slide img")) || + []; let imagesCount = images.length, loadedCount = 0; Array.prototype.forEach.call(images, image => { diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index e3164e0..84d5cd4 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -530,7 +530,10 @@ export const getSlideCount = spec => { if (spec.swipeToSlide) { let swipedSlide; const slickList = spec.listRef; - const slides = slickList.querySelectorAll(".slick-slide"); + const slides = + (slickList.querySelectorAll && + slickList.querySelectorAll(".slick-slide")) || + []; Array.from(slides).every(slide => { if (!spec.vertical) { if ( From 9c26b25497a6685fe57d5b7c475628223c19797c Mon Sep 17 00:00:00 2001 From: akiran Date: Mon, 11 Jan 2021 23:32:04 +0530 Subject: [PATCH 097/106] release 0.27.14 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2b3d969..c2d120e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.13", + "version": "0.27.14", "description": " React port of slick carousel", "main": "./lib", "files": [ From c2b148b5ee10feaa7e693d22d759619aefef60df Mon Sep 17 00:00:00 2001 From: akiran Date: Wed, 13 Jan 2021 19:57:20 +0530 Subject: [PATCH 098/106] fixed #1958 --- src/utils/innerSliderUtils.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 84d5cd4..9c84652 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -133,7 +133,7 @@ export const initializedState = spec => { currentSlide, lazyLoadedList }); - lazyLoadedList.concat(slidesToLoad); + lazyLoadedList = lazyLoadedList.concat(slidesToLoad); let state = { slideCount, @@ -161,7 +161,6 @@ export const slideHandler = spec => { infinite, index, slideCount, - lazyLoadedList, lazyLoad, currentSlide, centerMode, @@ -169,6 +168,7 @@ export const slideHandler = spec => { slidesToShow, useCSS } = spec; + let { lazyLoadedList } = spec; if (waitForAnimate && animating) return {}; let animationSlide = index, finalSlide, @@ -185,7 +185,7 @@ export const slideHandler = spec => { animationSlide = index - slideCount; } if (lazyLoad && lazyLoadedList.indexOf(animationSlide) < 0) { - lazyLoadedList.push(animationSlide); + lazyLoadedList = lazyLoadedList.concat(animationSlide); } state = { animating: true, @@ -222,10 +222,11 @@ export const slideHandler = spec => { if (animationLeft === finalLeft) animationSlide = finalSlide; animationLeft = finalLeft; } - lazyLoad && - lazyLoadedList.concat( + if (lazyLoad) { + lazyLoadedList = lazyLoadedList.concat( getOnDemandLazySlides({ ...spec, currentSlide: animationSlide }) ); + } if (!useCSS) { state = { currentSlide: finalSlide, From 2c2fe3794e0a37d30d73cef33a4dfedfc6d1b387 Mon Sep 17 00:00:00 2001 From: lipoolock <42861634+lipoolock@users.noreply.github.com> Date: Wed, 20 Jan 2021 18:36:15 +0100 Subject: [PATCH 099/106] Need to enforce images list validation In some cases, for instance while running some tests via storyshot, we can get a blocker with this error message: `Error: Uncaught [TypeError: Cannot read property 'querySelectorAll' of undefined]` Adding `this.list &&` at the beginning of this test will avoid such of issues and let pass well the tests I would really appreciate that fix to be able to move forward from `0.25.2` of react-slick to the latest version Thanks --- src/inner-slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index 3f1939d..7cbdb27 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -304,7 +304,7 @@ export class InnerSlider extends React.Component { }; checkImagesLoad = () => { let images = - (this.list.querySelectorAll && + (this.list && this.list.querySelectorAll && this.list.querySelectorAll(".slick-slide img")) || []; let imagesCount = images.length, From cc5341f28c800c2b33ff033e2e845d4fb50d4243 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mert=20Tu=CC=88rel?= Date: Sun, 24 Jan 2021 18:39:39 +0300 Subject: [PATCH 100/106] Removed preventDefault statements from handlers of passive events: onTouchMove, onTouchStart --- src/utils/innerSliderUtils.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 9c84652..31e95c9 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -316,7 +316,7 @@ export const keyHandler = (e, accessibility, rtl) => { }; export const swipeStart = (e, swipe, draggable) => { - e.target.tagName === "IMG" && e.preventDefault(); + e.target.tagName === "IMG"; if (!swipe || (!draggable && e.type.indexOf("mouse") !== -1)) return ""; return { dragging: true, @@ -352,7 +352,6 @@ export const swipeMove = (e, spec) => { listWidth } = spec; if (scrolling) return; - if (animating) return e.preventDefault(); if (vertical && swipeToSlide && verticalSwiping) e.preventDefault(); let swipeLeft, state = {}; @@ -421,7 +420,6 @@ export const swipeMove = (e, spec) => { } if (touchObject.swipeLength > 10) { state["swiping"] = true; - e.preventDefault(); } return state; }; From 6e121d24484a9ff89a066f877d4c35f360b7e6c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mert=20Tu=CC=88rel?= Date: Sun, 24 Jan 2021 20:08:38 +0300 Subject: [PATCH 101/106] Revert "Removed preventDefault statements from handlers of passive events: onTouchMove, onTouchStart" This reverts commit cc5341f28c800c2b33ff033e2e845d4fb50d4243. --- src/utils/innerSliderUtils.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 31e95c9..9c84652 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -316,7 +316,7 @@ export const keyHandler = (e, accessibility, rtl) => { }; export const swipeStart = (e, swipe, draggable) => { - e.target.tagName === "IMG"; + e.target.tagName === "IMG" && e.preventDefault(); if (!swipe || (!draggable && e.type.indexOf("mouse") !== -1)) return ""; return { dragging: true, @@ -352,6 +352,7 @@ export const swipeMove = (e, spec) => { listWidth } = spec; if (scrolling) return; + if (animating) return e.preventDefault(); if (vertical && swipeToSlide && verticalSwiping) e.preventDefault(); let swipeLeft, state = {}; @@ -420,6 +421,7 @@ export const swipeMove = (e, spec) => { } if (touchObject.swipeLength > 10) { state["swiping"] = true; + e.preventDefault(); } return state; }; From f373992c72c0f8946372d152a319f252fdc174e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mert=20Tu=CC=88rel?= Date: Sun, 24 Jan 2021 20:14:00 +0300 Subject: [PATCH 102/106] Noticed functional side effects after removing preventDefault methods in last commit. Implemented new method. --- src/utils/innerSliderUtils.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 9c84652..7f7822c 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -4,6 +4,13 @@ export function clamp(number, lowerBound, upperBound) { return Math.max(lowerBound, Math.min(number, upperBound)); } +export const safePreventDefault = event => { + const passiveEvents = ["onTouchStart", "onTouchMove", "onTouchEnd"]; + if(!passiveEvents.includes(event._reactName)) { + event.preventDefault(); + } +} + export const getOnDemandLazySlides = spec => { let onDemandSlides = []; let startIndex = lazyStartIndex(spec); @@ -316,7 +323,7 @@ export const keyHandler = (e, accessibility, rtl) => { }; export const swipeStart = (e, swipe, draggable) => { - e.target.tagName === "IMG" && e.preventDefault(); + e.target.tagName === "IMG" && safePreventDefault(e); if (!swipe || (!draggable && e.type.indexOf("mouse") !== -1)) return ""; return { dragging: true, @@ -352,8 +359,8 @@ export const swipeMove = (e, spec) => { listWidth } = spec; if (scrolling) return; - if (animating) return e.preventDefault(); - if (vertical && swipeToSlide && verticalSwiping) e.preventDefault(); + if (animating) return safePreventDefault(e); + if (vertical && swipeToSlide && verticalSwiping) safePreventDefault(e); let swipeLeft, state = {}; let curLeft = getTrackLeft(spec); @@ -421,7 +428,7 @@ export const swipeMove = (e, spec) => { } if (touchObject.swipeLength > 10) { state["swiping"] = true; - e.preventDefault(); + safePreventDefault(e); } return state; }; @@ -442,7 +449,7 @@ export const swipeEnd = (e, spec) => { infinite } = spec; if (!dragging) { - if (swipe) e.preventDefault(); + if (swipe) safePreventDefault(e); return {}; } let minSwipe = verticalSwiping @@ -466,7 +473,7 @@ export const swipeEnd = (e, spec) => { return state; } if (touchObject.swipeLength > minSwipe) { - e.preventDefault(); + safePreventDefault(e); if (onSwipe) { onSwipe(swipeDirection); } From 89c36c7d14d2bf223346b0030831a196bc647c6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mert=20Tu=CC=88rel?= Date: Sun, 24 Jan 2021 21:53:54 +0300 Subject: [PATCH 103/106] Placed reactNames of events from event listeners those React consider they are passive. --- src/utils/innerSliderUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 7f7822c..aa832f2 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -5,7 +5,7 @@ export function clamp(number, lowerBound, upperBound) { } export const safePreventDefault = event => { - const passiveEvents = ["onTouchStart", "onTouchMove", "onTouchEnd"]; + const passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"]; if(!passiveEvents.includes(event._reactName)) { event.preventDefault(); } From 364186bbd20ab2dde47ef0a4e16aef6ce794ade9 Mon Sep 17 00:00:00 2001 From: akiran Date: Mon, 25 Jan 2021 10:22:45 +0530 Subject: [PATCH 104/106] release @0.28.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c2d120e..6e7a957 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.27.14", + "version": "0.28.0", "description": " React port of slick carousel", "main": "./lib", "files": [ From 756afc68e8f01de6f8c3b19710ba6f89ce408e66 Mon Sep 17 00:00:00 2001 From: Muhammad Al Ziqri Date: Wed, 3 Mar 2021 22:59:42 +0700 Subject: [PATCH 105/106] feat: support disable bounce for vertical mode --- src/utils/innerSliderUtils.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index aa832f2..c06029d 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -386,9 +386,9 @@ export const swipeMove = (e, spec) => { let touchSwipeLength = touchObject.swipeLength; if (!infinite) { if ( - (currentSlide === 0 && swipeDirection === "right") || - (currentSlide + 1 >= dotCount && swipeDirection === "left") || - (!canGoNext(spec) && swipeDirection === "left") + (currentSlide === 0 && (swipeDirection === "right" || swipeDirection === "down")) || + (currentSlide + 1 >= dotCount && (swipeDirection === "left" || swipeDirection === "up")) || + (!canGoNext(spec) && (swipeDirection === "left" || swipeDirection === "up")) ) { touchSwipeLength = touchObject.swipeLength * edgeFriction; if (edgeDragged === false && onEdge) { From 5fb7ac78321f3469118a974af3852742b64fcbd3 Mon Sep 17 00:00:00 2001 From: akiran Date: Mon, 8 Mar 2021 10:31:23 +0530 Subject: [PATCH 106/106] released 0.28.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6e7a957..03e7e3e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slick", - "version": "0.28.0", + "version": "0.28.1", "description": " React port of slick carousel", "main": "./lib", "files": [