From 55237df501f32a72d23ca258fc8fb6e6a797c218 Mon Sep 17 00:00:00 2001 From: "sagiv.bengiat" Date: Thu, 8 Apr 2021 22:21:36 +0300 Subject: [PATCH 1/6] stop autoplay on unmount --- demoApp/src/DemoApp.js | 52 +++++++++++++------ demoApp/src/index.js | 9 +++- .../components/Carousel.js | 12 +++-- 3 files changed, 53 insertions(+), 20 deletions(-) diff --git a/demoApp/src/DemoApp.js b/demoApp/src/DemoApp.js index 11c01ec3..080f1446 100644 --- a/demoApp/src/DemoApp.js +++ b/demoApp/src/DemoApp.js @@ -1,5 +1,5 @@ -import React, { useState, useRef } from "react"; -import Carousel from "react-elastic-carousel"; +import React, { useState, useRef, useEffect } from "react"; +import Carousel from "../../src/react-elastic-carousel/components/Carousel"; import styled from "styled-components"; const Item = styled.div` @@ -16,7 +16,6 @@ const Item = styled.div` const Layout = styled.div` display: flex; flex-direction: column; - justify-content: center; align-items: center; height: 100vh; `; @@ -47,8 +46,12 @@ const CheckBox = ({ label, onToggle, ...rest }) => { ); }; +const serverItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + const DemoApp = () => { - const [items, setItems] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); + const [show, setShow] = useState(true); + const [enableAutoPlay, setEnableAutoPlay] = useState(false); + const [items, setItems] = useState([]); const [itemsToShow, setItemsToShow] = useState(3); const [showArrows, setShowArrows] = useState(true); const [pagination, setPagination] = useState(true); @@ -68,9 +71,20 @@ const DemoApp = () => { const goTo = ({ target }) => carouselRef.current.goTo(Number(target.value)); + useEffect(() => { + setTimeout(() => { + setItems(serverItems); + }, 2500); + }, []); + return ( + + + @@ -102,18 +116,26 @@ const DemoApp = () => { checked={verticalMode} onToggle={setVerticalMode} /> + - - {items.map((item) => ( - {item} - ))} - + {show && ( + + {items.map((item) => ( + {item} + ))} + + )} ); }; diff --git a/demoApp/src/index.js b/demoApp/src/index.js index 5953049c..dd3d709a 100644 --- a/demoApp/src/index.js +++ b/demoApp/src/index.js @@ -1,5 +1,10 @@ import React from "react"; import ReactDOM from "react-dom"; -import DemoApp from './DemoApp'; +import DemoApp from "./DemoApp"; -ReactDOM.render(, document.getElementById("app")); +ReactDOM.render( + + + , + document.getElementById("app") +); diff --git a/src/react-elastic-carousel/components/Carousel.js b/src/react-elastic-carousel/components/Carousel.js index cce55929..6e2442e1 100644 --- a/src/react-elastic-carousel/components/Carousel.js +++ b/src/react-elastic-carousel/components/Carousel.js @@ -17,6 +17,7 @@ import { pipe, noop, cssPrefix, numberToArray } from "../utils/helpers"; import { Pagination } from "./Pagination"; class Carousel extends React.Component { + isComponentMounted = false; state = { rootHeight: 0, childHeight: 0, @@ -32,6 +33,7 @@ class Carousel extends React.Component { }; componentDidMount() { + this.isComponentMounted = true; this.initResizeObserver(); this.updateActivePage(); this.setPages(); @@ -89,6 +91,8 @@ class Carousel extends React.Component { } componentWillUnmount() { + this.isComponentMounted = false; + this.removeAutoPlay(); this.unSubscribeObserver(); } @@ -125,9 +129,11 @@ class Carousel extends React.Component { setAutoPlay = () => { const { autoPlaySpeed } = this.getDerivedPropsFromBreakPoint(); this.autoPlayIntervalId = setInterval(() => { - const { transitioning } = this.state; - if (!transitioning) { - this.slideNext(); + if (this.isComponentMounted) { + const { transitioning } = this.state; + if (!transitioning) { + this.slideNext(); + } } }, autoPlaySpeed); }; From 8c89410095f5d13bee023fe27700b6552e3e090a Mon Sep 17 00:00:00 2001 From: "sagiv.bengiat" Date: Thu, 8 Apr 2021 22:36:22 +0300 Subject: [PATCH 2/6] version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 49b62f0e..6e0d3443 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-elastic-carousel", - "version": "0.11.4", + "version": "0.11.5-beta.1", "description": "A flexible and responsive carousel component for react", "author": "sag1v (Sagiv Ben Giat)", "license": "MIT", From de3cd738f9197b2ecb1d3220ef8ca94d1ea76d4e Mon Sep 17 00:00:00 2001 From: "sagiv.bengiat" Date: Tue, 13 Apr 2021 22:08:38 +0300 Subject: [PATCH 3/6] prevent onresize calls when unmounted --- package.json | 2 +- src/react-elastic-carousel/components/Carousel.js | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 6e0d3443..235de882 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-elastic-carousel", - "version": "0.11.5-beta.1", + "version": "0.11.5-beta.2", "description": "A flexible and responsive carousel component for react", "author": "sag1v (Sagiv Ben Giat)", "license": "MIT", diff --git a/src/react-elastic-carousel/components/Carousel.js b/src/react-elastic-carousel/components/Carousel.js index 6e2442e1..ec228bfc 100644 --- a/src/react-elastic-carousel/components/Carousel.js +++ b/src/react-elastic-carousel/components/Carousel.js @@ -215,6 +215,10 @@ class Carousel extends React.Component { }; onSliderResize = sliderNode => { + if (!this.isComponentMounted) { + return; + } + const { verticalMode, children, @@ -277,7 +281,10 @@ class Carousel extends React.Component { const containerWidth = newSliderContainerWidth - (initialVerticalMode ? 0 : outerSpacing * 2); - if (this.state.sliderContainerWidth === newSliderContainerWidth) { + if ( + !this.isComponentMounted || + this.state.sliderContainerWidth === newSliderContainerWidth + ) { // prevent infinite loop return; } From 86db0c7210507edc8f7e1e10c230a307be8a0dfc Mon Sep 17 00:00:00 2001 From: "sagiv.bengiat" Date: Wed, 14 Apr 2021 22:38:54 +0300 Subject: [PATCH 4/6] conditionally state update inside rAF --- package.json | 1 - src/react-elastic-carousel/components/Carousel.js | 6 +++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 235de882..06a032ba 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "test:watch": "react-scripts test --env=jsdom", "prebuild": "yarn run lint:fix", "build": "rollup -c", - "prepare": "yarn run build", "build-doc": "docz build", "deploy-doc": "gh-pages -d demo" }, diff --git a/src/react-elastic-carousel/components/Carousel.js b/src/react-elastic-carousel/components/Carousel.js index ec228bfc..4df82009 100644 --- a/src/react-elastic-carousel/components/Carousel.js +++ b/src/react-elastic-carousel/components/Carousel.js @@ -206,7 +206,11 @@ class Carousel extends React.Component { // go back from 0ms to whatever set by the user // We were at 0ms because we wanted to disable animation on resize // see https://github.com/sag1v/react-elastic-carousel/issues/94 - window.requestAnimationFrame(() => this.setState({ transitionMs })); + window.requestAnimationFrame(() => { + if (this.isComponentMounted) { + this.setState({ transitionMs }); + } + }); return { sliderPosition, activeIndex: newActiveIndex < 0 ? 0 : newActiveIndex From f7a9033619339a7c8b43846fa1bb0f9bd40443ba Mon Sep 17 00:00:00 2001 From: "sagiv.bengiat" Date: Thu, 15 Apr 2021 00:01:44 +0300 Subject: [PATCH 5/6] version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 06a032ba..4b218080 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-elastic-carousel", - "version": "0.11.5-beta.2", + "version": "0.11.5-beta.3", "description": "A flexible and responsive carousel component for react", "author": "sag1v (Sagiv Ben Giat)", "license": "MIT", From 6f129b51bf39b36d31375e39c66a8f0c4b669076 Mon Sep 17 00:00:00 2001 From: "sagiv.bengiat" Date: Thu, 15 Apr 2021 00:04:53 +0300 Subject: [PATCH 6/6] version 0.11.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4b218080..79d2f7a0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-elastic-carousel", - "version": "0.11.5-beta.3", + "version": "0.11.5", "description": "A flexible and responsive carousel component for react", "author": "sag1v (Sagiv Ben Giat)", "license": "MIT",