From cab34f8621f061e7486f73ef52c97a9941ca2faf Mon Sep 17 00:00:00 2001 From: akiran Date: Thu, 7 Aug 2025 17:27:07 +0530 Subject: [PATCH 1/4] removed rendering in unslick moder from slider.js to hadning it in only one place (inner-slider.js) --- src/slider.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/slider.js b/src/slider.js index 7fdbe4a13..951dc0e1c 100644 --- a/src/slider.js +++ b/src/slider.js @@ -200,12 +200,10 @@ export default class Slider extends React.Component { } } - if (settings === "unslick") { - const className = "regular slider " + (this.props.className || ""); - return
{children}
; - } else if (newChildren.length <= settings.slidesToShow) { + if (settings === "unslick" || newChildren.length <= settings.slidesToShow) { settings.unslick = true; } + return ( Date: Thu, 7 Aug 2025 17:49:53 +0530 Subject: [PATCH 2/4] migrated arrow components from class to function --- src/arrows.js | 149 ++++++++++++++++++++++++-------------------------- 1 file changed, 71 insertions(+), 78 deletions(-) diff --git a/src/arrows.js b/src/arrows.js index a0dca3b1e..623ba0c40 100644 --- a/src/arrows.js +++ b/src/arrows.js @@ -4,100 +4,93 @@ import React from "react"; import classnames from "classnames"; import { canGoNext } from "./utils/innerSliderUtils"; -export class PrevArrow extends React.PureComponent { - clickHandler(options, e) { +export function PrevArrow(props) { + let prevClasses = { "slick-arrow": true, "slick-prev": true }; + function prevHandler(e) { if (e) { e.preventDefault(); } - this.props.clickHandler(options, e); + props.clickHandler({ message: "previous" }, e); } - render() { - let prevClasses = { "slick-arrow": true, "slick-prev": true }; - let prevHandler = this.clickHandler.bind(this, { message: "previous" }); - if ( - !this.props.infinite && - (this.props.currentSlide === 0 || - this.props.slideCount <= this.props.slidesToShow) - ) { - prevClasses["slick-disabled"] = true; - prevHandler = null; - } + if ( + !props.infinite && + (props.currentSlide === 0 || props.slideCount <= props.slidesToShow) + ) { + prevClasses["slick-disabled"] = true; + prevHandler = null; + } - let prevArrowProps = { - key: "0", - "data-role": "none", - className: classnames(prevClasses), - style: { display: "block" }, - onClick: prevHandler - }; - let customProps = { - currentSlide: this.props.currentSlide, - slideCount: this.props.slideCount - }; - let prevArrow; + let prevArrowProps = { + key: "0", + "data-role": "none", + className: classnames(prevClasses), + style: { display: "block" }, + onClick: prevHandler + }; + let customProps = { + currentSlide: props.currentSlide, + slideCount: props.slideCount + }; + let prevArrow; - if (this.props.prevArrow) { - prevArrow = React.cloneElement(this.props.prevArrow, { - ...prevArrowProps, - ...customProps - }); - } else { - prevArrow = ( - - ); - } - - return prevArrow; + if (props.prevArrow) { + prevArrow = React.cloneElement(props.prevArrow, { + ...prevArrowProps, + ...customProps + }); + } else { + prevArrow = ( + + ); } + + return prevArrow; } -export class NextArrow extends React.PureComponent { - clickHandler(options, e) { +export function NextArrow(props) { + let nextClasses = { "slick-arrow": true, "slick-next": true }; + function nextHandler(e) { if (e) { e.preventDefault(); } - this.props.clickHandler(options, e); + props.clickHandler({ message: "next" }, e); } - render() { - let nextClasses = { "slick-arrow": true, "slick-next": true }; - let nextHandler = this.clickHandler.bind(this, { message: "next" }); - if (!canGoNext(this.props)) { - nextClasses["slick-disabled"] = true; - nextHandler = null; - } + if (!canGoNext(props)) { + nextClasses["slick-disabled"] = true; + nextHandler = null; + } - let nextArrowProps = { - key: "1", - "data-role": "none", - className: classnames(nextClasses), - style: { display: "block" }, - onClick: nextHandler - }; - let customProps = { - currentSlide: this.props.currentSlide, - slideCount: this.props.slideCount - }; - let nextArrow; + let nextArrowProps = { + key: "1", + "data-role": "none", + className: classnames(nextClasses), + style: { display: "block" }, + onClick: nextHandler + }; + let customProps = { + currentSlide: props.currentSlide, + slideCount: props.slideCount + }; + let nextArrow; - if (this.props.nextArrow) { - nextArrow = React.cloneElement(this.props.nextArrow, { - ...nextArrowProps, - ...customProps - }); - } else { - nextArrow = ( - - ); - } - - return nextArrow; + if (props.nextArrow) { + nextArrow = React.cloneElement(props.nextArrow, { + ...nextArrowProps, + ...customProps + }); + } else { + nextArrow = ( + + ); } + + return nextArrow; } From 74ff071482b2bd95b5c90de84de93b8cc573b674 Mon Sep 17 00:00:00 2001 From: akiran Date: Thu, 7 Aug 2025 18:03:21 +0530 Subject: [PATCH 3/4] reverted the unslick change in #cab34f8 commit --- src/slider.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/slider.js b/src/slider.js index 951dc0e1c..7fdbe4a13 100644 --- a/src/slider.js +++ b/src/slider.js @@ -200,10 +200,12 @@ export default class Slider extends React.Component { } } - if (settings === "unslick" || newChildren.length <= settings.slidesToShow) { + if (settings === "unslick") { + const className = "regular slider " + (this.props.className || ""); + return
{children}
; + } else if (newChildren.length <= settings.slidesToShow) { settings.unslick = true; } - return ( Date: Thu, 7 Aug 2025 18:09:58 +0530 Subject: [PATCH 4/4] migrated dots component from class to function --- src/dots.js | 111 +++++++++++++++++++++++++--------------------------- 1 file changed, 54 insertions(+), 57 deletions(-) diff --git a/src/dots.js b/src/dots.js index 93520cbd7..244cd3285 100644 --- a/src/dots.js +++ b/src/dots.js @@ -18,67 +18,64 @@ const getDotCount = spec => { return dots; }; -export class Dots extends React.PureComponent { - clickHandler(options, e) { - // In Autoplay the focus stays on clicked button even after transition - // to next slide. That only goes away by click somewhere outside - e.preventDefault(); - this.props.clickHandler(options); - } - render() { - const { - onMouseEnter, - onMouseOver, - onMouseLeave, - infinite, - slidesToScroll, - slidesToShow, - slideCount, - currentSlide - } = this.props; - let dotCount = getDotCount({ - slideCount, - slidesToScroll, - slidesToShow, - infinite - }); +export function Dots(props) { + const { + onMouseEnter, + onMouseOver, + onMouseLeave, + infinite, + slidesToScroll, + slidesToShow, + slideCount, + currentSlide + } = props; + let dotCount = getDotCount({ + slideCount, + slidesToScroll, + slidesToShow, + infinite + }); - const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave }; - 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); + const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave }; + 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": infinite - ? currentSlide >= leftBound && currentSlide <= rightBound - : currentSlide === leftBound - }); + let className = classnames({ + "slick-active": infinite + ? currentSlide >= leftBound && currentSlide <= rightBound + : currentSlide === leftBound + }); - let dotOptions = { - message: "dots", - index: i, - slidesToScroll, - currentSlide - }; + let dotOptions = { + message: "dots", + index: i, + slidesToScroll, + currentSlide + }; - let onClick = this.clickHandler.bind(this, dotOptions); - dots = dots.concat( -
  • - {React.cloneElement(this.props.customPaging(i), { onClick })} -
    • - ); + function onClick(e) { + // In Autoplay the focus stays on clicked button even after transition + // to next slide. That only goes away by click somewhere outside + e.preventDefault(); + props.clickHandler(dotOptions); } - - return React.cloneElement(this.props.appendDots(dots), { - className: this.props.dotsClass, - ...mouseEvents - }); + dots = dots.concat( +
  • + {React.cloneElement(props.customPaging(i), { onClick })} +
    • + ); } + + return React.cloneElement(props.appendDots(dots), { + className: props.dotsClass, + ...mouseEvents + }); }