From a1746df382eac00257d133a89d6e331829b88ac9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Nicol=C3=A1s?= Date: Tue, 1 Feb 2022 21:40:31 -0300 Subject: [PATCH 1/2] first attempt fix right alignment --- src/utils/innerSliderUtils.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index c06029d0a..a70e7ec47 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -82,12 +82,40 @@ export const getSwipeDirection = (touchObject, verticalSwiping = false) => { return "vertical"; }; +export const isStickedToRight = (spec) => { + const { trackRef, listWidth } = spec; + if (trackRef) { + const trackElem = trackRef && trackRef.node; + const targetSlideIndex = spec.slideIndex + getPreClones(spec); + const targetSlide = trackElem && trackElem.childNodes[targetSlideIndex]; + const targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0; + const sumSlidesWidth = + trackElem && + trackElem.childNodes + .toArray() + .reduce((sum, el) => sum + el.getBoundingClientRect().width, 0); + let maxLeft = + sumSlidesWidth >= listWidth ? (sumSlidesWidth - listWidth) * -1 : 0.1; + + if (targetLeft > maxLeft) { + maxLeft = false; + } + return maxLeft; + } +}; + // whether or not we can go next export const canGoNext = spec => { + const variableWidth = spec.trackRef ? spec.trackRef.props.variableWidth : null; let canGo = true; if (!spec.infinite) { if (spec.centerMode && spec.currentSlide >= spec.slideCount - 1) { canGo = false; + } else if ( + variableWidth && + isStickedToRight({ ...spec, slideIndex: spec.currentSlide }) + ) { + canGo = false; } else if ( spec.slideCount <= spec.slidesToShow || spec.currentSlide >= spec.slideCount - spec.slidesToShow @@ -750,6 +778,10 @@ export const getTrackLeft = spec => { targetSlideIndex = slideIndex + getPreClones(spec); targetSlide = trackElem && trackElem.childNodes[targetSlideIndex]; targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0; + const stickToRight = isStickedToRight(spec); + if (!infinite && stickToRight) { + targetLeft = stickToRight; + } if (centerMode === true) { targetSlideIndex = infinite ? slideIndex + getPreClones(spec) From 479ea7387b60776f6a2c51770fd7a079b65a2313 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ramirez=20Nicol=C3=A1s?= Date: Wed, 2 Feb 2022 17:56:39 -0300 Subject: [PATCH 2/2] add missing parts --- src/arrows.js | 3 +-- src/inner-slider.js | 15 +++++++++++++-- src/utils/innerSliderUtils.js | 33 +++++++++++++++++++++------------ 3 files changed, 35 insertions(+), 16 deletions(-) diff --git a/src/arrows.js b/src/arrows.js index a0dca3b1e..d88a649da 100644 --- a/src/arrows.js +++ b/src/arrows.js @@ -2,7 +2,6 @@ import React from "react"; import classnames from "classnames"; -import { canGoNext } from "./utils/innerSliderUtils"; export class PrevArrow extends React.PureComponent { clickHandler(options, e) { @@ -66,7 +65,7 @@ export class NextArrow extends React.PureComponent { let nextClasses = { "slick-arrow": true, "slick-next": true }; let nextHandler = this.clickHandler.bind(this, { message: "next" }); - if (!canGoNext(this.props)) { + if (!this.props.canGoNext) { nextClasses["slick-disabled"] = true; nextHandler = null; } diff --git a/src/inner-slider.js b/src/inner-slider.js index 7cbdb27ad..ebd7ac76c 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -53,6 +53,7 @@ export class InnerSlider extends React.Component { this.list.style.height = getHeight(elem) + "px"; } }; + canGoNext = () => canGoNext({ ...this.props, ...this.state }); componentDidMount = () => { this.props.onInit && this.props.onInit(); if (this.props.lazyLoad) { @@ -197,6 +198,14 @@ export class InnerSlider extends React.Component { } }); }; + shouldComponentUpdate = (nextProps, nextState) => { + const nextCanGoNext = canGoNext({ ...nextProps, ...nextState }); + if (this.state.canGoNext !== nextCanGoNext) { + this.setState({ canGoNext: nextCanGoNext }); + return false; + } + return true; + }; onWindowResized = setTrackStyle => { if (this.debouncedResize) this.debouncedResize.cancel(); this.debouncedResize = debounce(() => this.resizeWindow(setTrackStyle), 50); @@ -304,7 +313,8 @@ export class InnerSlider extends React.Component { }; checkImagesLoad = () => { let images = - (this.list && this.list.querySelectorAll && + (this.list && + this.list.querySelectorAll && this.list.querySelectorAll(".slick-slide img")) || []; let imagesCount = images.length, @@ -542,7 +552,7 @@ export class InnerSlider extends React.Component { if (this.props.rtl) { nextIndex = this.state.currentSlide - this.props.slidesToScroll; } else { - if (canGoNext({ ...this.props, ...this.state })) { + if (this.canGoNext()) { nextIndex = this.state.currentSlide + this.props.slidesToScroll; } else { return false; @@ -692,6 +702,7 @@ export class InnerSlider extends React.Component { "nextArrow" ]); arrowProps.clickHandler = this.changeSlide; + arrowProps.canGoNext = this.canGoNext(); if (this.props.arrows) { prevArrow = ; diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index a70e7ec47..2b9bbee87 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -6,10 +6,10 @@ export function clamp(number, lowerBound, upperBound) { export const safePreventDefault = event => { const passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"]; - if(!passiveEvents.includes(event._reactName)) { + if (!passiveEvents.includes(event._reactName)) { event.preventDefault(); } -} +}; export const getOnDemandLazySlides = spec => { let onDemandSlides = []; @@ -82,7 +82,7 @@ export const getSwipeDirection = (touchObject, verticalSwiping = false) => { return "vertical"; }; -export const isStickedToRight = (spec) => { +export const isStickedToRight = spec => { const { trackRef, listWidth } = spec; if (trackRef) { const trackElem = trackRef && trackRef.node; @@ -91,12 +91,12 @@ export const isStickedToRight = (spec) => { const targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0; const sumSlidesWidth = trackElem && - trackElem.childNodes - .toArray() - .reduce((sum, el) => sum + el.getBoundingClientRect().width, 0); + Array.from(trackElem.childNodes).reduce( + (sum, el) => sum + el.getBoundingClientRect().width, + 0 + ); let maxLeft = sumSlidesWidth >= listWidth ? (sumSlidesWidth - listWidth) * -1 : 0.1; - if (targetLeft > maxLeft) { maxLeft = false; } @@ -106,7 +106,9 @@ export const isStickedToRight = (spec) => { // whether or not we can go next export const canGoNext = spec => { - const variableWidth = spec.trackRef ? spec.trackRef.props.variableWidth : null; + const variableWidth = spec.trackRef + ? spec.trackRef.props.variableWidth + : null; let canGo = true; if (!spec.infinite) { if (spec.centerMode && spec.currentSlide >= spec.slideCount - 1) { @@ -136,6 +138,7 @@ export const extractObject = (spec, keys) => { // get initialized state export const initializedState = spec => { // spec also contains listRef, trackRef + const { listRef, trackRef } = spec; let slideCount = React.Children.count(spec.children); const listNode = spec.listRef; let listWidth = Math.ceil(getWidth(listNode)); @@ -178,7 +181,9 @@ export const initializedState = spec => { currentSlide, slideHeight, listHeight, - lazyLoadedList + lazyLoadedList, + listRef, + trackRef }; if (spec.autoplaying === null && spec.autoplay) { @@ -274,6 +279,7 @@ export const slideHandler = spec => { animating: true, currentSlide: finalSlide, trackStyle: getTrackAnimateCSS({ ...spec, left: animationLeft }), + canGoNext: canGoNext(spec), lazyLoadedList, targetSlide }; @@ -414,9 +420,12 @@ export const swipeMove = (e, spec) => { let touchSwipeLength = touchObject.swipeLength; if (!infinite) { if ( - (currentSlide === 0 && (swipeDirection === "right" || swipeDirection === "down")) || - (currentSlide + 1 >= dotCount && (swipeDirection === "left" || swipeDirection === "up")) || - (!canGoNext(spec) && (swipeDirection === "left" || swipeDirection === "up")) + (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) {