From e8729a52a5b3afa996a98a28e7a29692b4a29db1 Mon Sep 17 00:00:00 2001 From: "sagiv.bengiat" Date: Sat, 24 Oct 2020 12:58:54 +0300 Subject: [PATCH 1/6] resolve #94 --- .../components/Carousel.js | 15 +++++++++++---- .../components/styled/Slider.js | 16 ++++++++++------ 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/react-elastic-carousel/components/Carousel.js b/src/react-elastic-carousel/components/Carousel.js index 435da56..a73a759 100644 --- a/src/react-elastic-carousel/components/Carousel.js +++ b/src/react-elastic-carousel/components/Carousel.js @@ -26,6 +26,7 @@ class Carousel extends React.Component { swipedSliderPosition: 0, isSwiping: false, transitioning: false, + transitionMs: this.props.transitionMs, activeIndex: this.props.initialActiveIndex || this.props.initialFirstItem, // support deprecated initialFirstItem pages: [], activePage: 0, @@ -168,7 +169,8 @@ class Carousel extends React.Component { const { children, verticalMode, - itemsToShow + itemsToShow, + transitionMs } = this.getDerivedPropsFromBreakPoint(); const { childWidth, childHeight, activeIndex } = state; const totalItems = children.length; @@ -181,6 +183,10 @@ class Carousel extends React.Component { let sliderPosition = (verticalMode ? childHeight : childWidth) * moveBy; const newActiveIndex = emptySlots > 0 ? activeIndex - emptySlots : activeIndex; + // 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 })); return { sliderPosition, activeIndex: newActiveIndex < 0 ? 0 : newActiveIndex @@ -209,7 +215,8 @@ class Carousel extends React.Component { onContainerResize = sliderContainerNode => { const { width } = sliderContainerNode.contentRect; // update slider container width - this.setState({ sliderContainerWidth: width }, () => { + // disable animation on resize see https://github.com/sag1v/react-elastic-carousel/issues/94 + this.setState({ sliderContainerWidth: width, transitionMs: 0 }, () => { // we must get these props inside setState (get future props because its async) const { onResize, @@ -585,7 +592,8 @@ class Carousel extends React.Component { swipedSliderPosition, rootHeight, pages, - activeIndex + activeIndex, + transitionMs } = this.state; const { className, @@ -595,7 +603,6 @@ class Carousel extends React.Component { isRTL, easing, tiltEasing, - transitionMs, children, focusOnSelect, autoTabIndexVisibleItems, diff --git a/src/react-elastic-carousel/components/styled/Slider.js b/src/react-elastic-carousel/components/styled/Slider.js index d72eb29..7f9b65b 100644 --- a/src/react-elastic-carousel/components/styled/Slider.js +++ b/src/react-elastic-carousel/components/styled/Slider.js @@ -47,13 +47,17 @@ const calcTransition = ({ isSwiping, transitionMs, easing, tiltEasing }) => { return `all ${duration}ms ${effectiveEasing}`; }; -export default styled.div` +// We use attributes (style) to bypass multiple creation of classes (dynamic styling) +export default styled.div.attrs(props => ({ + style: { + transition: calcTransition(props), + left: calcLeft(props), + right: calcRight(props), + top: calcTop(props) + } +}))` position: absolute; display: flex; flex-direction: ${({ verticalMode }) => (verticalMode ? "column" : "row")}; - ${({ verticalMode }) => (verticalMode ? "min-height: 100%;" : "")} - transition: ${calcTransition}; - left: ${calcLeft}; - right: ${calcRight}; - top: ${calcTop}; + ${({ verticalMode }) => (verticalMode ? "min-height: 100%;" : "")}; `; From 3ded0518c170afd3d94c4f0cee1f27a7c57208ae Mon Sep 17 00:00:00 2001 From: "sagiv.bengiat" Date: Sat, 24 Oct 2020 13:29:06 +0300 Subject: [PATCH 2/6] beta version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 730125e..51741ea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-elastic-carousel", - "version": "0.9.1", + "version": "0.9.2-beta", "description": "A flexible and responsive carousel component for react", "author": "sag1v (Sagiv Ben Giat)", "license": "MIT", From 81e1b6bd2b8928da96c7b4caf6ab2d6dd57a9d63 Mon Sep 17 00:00:00 2001 From: "sagiv.bengiat" Date: Wed, 28 Oct 2020 19:53:26 +0200 Subject: [PATCH 3/6] prevent swipe while scrolling window + fix verticalMode styling resolve #96 --- .../components/Carousel.js | 29 +++++++++++++------ .../components/Track.js | 7 ++++- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/src/react-elastic-carousel/components/Carousel.js b/src/react-elastic-carousel/components/Carousel.js index a73a759..9f46520 100644 --- a/src/react-elastic-carousel/components/Carousel.js +++ b/src/react-elastic-carousel/components/Carousel.js @@ -341,23 +341,28 @@ class Carousel extends React.Component { divider = largeDivider; } - let distanceSwipe = verticalMode + const distanceSwipe = verticalMode ? rootHeight / divider : sliderContainerWidth / divider; - const isHorizontalSwipe = dir === "Left" || dir === "Right"; + const horizontalSwipe = dir === "Left" || dir === "Right"; + const verticalSwipe = dir === "Up" || dir === "Down"; + const horizontalMode = !verticalMode; const shouldHorizontalSkipUpdate = - isHorizontalSwipe && (!verticalMode && absX > distanceSwipe); + (horizontalMode && verticalSwipe) || + (horizontalMode && horizontalSwipe && absX > distanceSwipe); + const shouldVerticalSkipUpdate = - !isHorizontalSwipe && (verticalMode && absY > distanceSwipe); + (verticalMode && horizontalSwipe) || + (verticalMode && verticalSwipe && absY > distanceSwipe); if (shouldHorizontalSkipUpdate || shouldVerticalSkipUpdate) { // bail out of state update return; } return { - swipedSliderPosition: isHorizontalSwipe + swipedSliderPosition: horizontalSwipe ? sliderPosition - deltaX : sliderPosition - deltaY, isSwiping: true, @@ -373,19 +378,24 @@ class Carousel extends React.Component { // 3. vertical mode - swipe up or down const { absX, absY, dir } = data; - const { childWidth } = this.state; + const { childWidth, childHeight } = this.state; const { verticalMode, isRTL } = this.props; let func = this.resetSwipe; - const minSwipeDistance = childWidth / 3; + const minSwipeDistanceHorizontal = childWidth / 3; + const minSwipeDistanceVertical = childHeight / 3; const swipedLeft = dir === "Left"; const swipedRight = dir === "Right"; const swipedUp = dir === "Up"; const swipedDown = dir === "Down"; const verticalGoSwipe = - verticalMode && (swipedUp || swipedDown) && absY > minSwipeDistance; + verticalMode && + (swipedUp || swipedDown) && + absY > minSwipeDistanceVertical; const horizontalGoSwipe = - !verticalMode && (swipedRight || swipedLeft) && absX > minSwipeDistance; + !verticalMode && + (swipedRight || swipedLeft) && + absX > minSwipeDistanceHorizontal; let goodToGo = false; if (verticalGoSwipe || horizontalGoSwipe) { @@ -670,6 +680,7 @@ class Carousel extends React.Component { ref={this.setRef("slider")} > { const width = `${childWidth}px`; @@ -47,7 +48,10 @@ const Track = ({ }); const toRender = enableSwipe ? ( Date: Thu, 29 Oct 2020 10:06:33 +0200 Subject: [PATCH 4/6] version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 51741ea..e2d8cc8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-elastic-carousel", - "version": "0.9.2-beta", + "version": "0.9.2-beta.2", "description": "A flexible and responsive carousel component for react", "author": "sag1v (Sagiv Ben Giat)", "license": "MIT", From 46b8c53c746f9cf4e222b08f9ead44e50243e032 Mon Sep 17 00:00:00 2001 From: "sagiv.bengiat" Date: Sat, 31 Oct 2020 13:35:30 +0200 Subject: [PATCH 5/6] export types resolve #95 --- src/react-elastic-carousel/components/Carousel.js | 1 + src/react-elastic-carousel/index.d.ts | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/react-elastic-carousel/components/Carousel.js b/src/react-elastic-carousel/components/Carousel.js index 9f46520..9f45d2b 100644 --- a/src/react-elastic-carousel/components/Carousel.js +++ b/src/react-elastic-carousel/components/Carousel.js @@ -760,6 +760,7 @@ Carousel.defaultProps = { autoPlaySpeed: 2000, // callbacks + onChange: noop, onNextEnd: noop, onPrevEnd: noop, onNextStart: noop, diff --git a/src/react-elastic-carousel/index.d.ts b/src/react-elastic-carousel/index.d.ts index df09e42..04db852 100644 --- a/src/react-elastic-carousel/index.d.ts +++ b/src/react-elastic-carousel/index.d.ts @@ -1,12 +1,12 @@ import * as React from "react"; -type RenderArrowProps = { +export type RenderArrowProps = { type: "PREV" | "NEXT"; onClick: () => void; isEdge: boolean; }; -type RenderPaginationProps = { +export type RenderPaginationProps = { pages: number[]; activePage: number; // The onClick event that sets the state of the carousel and sends @@ -14,13 +14,13 @@ type RenderPaginationProps = { onClick: (indicatorId: string) => void; }; -type ItemObject = { +export type ItemObject = { // Children's props object: any; index: number; }; -type Breakpoint = { +export type Breakpoint = { itemsToScroll: number; itemsToShow: number; }; From 39172ff7e85685e74d2146911f3059b541aca4be Mon Sep 17 00:00:00 2001 From: "sagiv.bengiat" Date: Sat, 31 Oct 2020 13:41:28 +0200 Subject: [PATCH 6/6] version bump 0.9.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e2d8cc8..cf1e979 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-elastic-carousel", - "version": "0.9.2-beta.2", + "version": "0.9.3", "description": "A flexible and responsive carousel component for react", "author": "sag1v (Sagiv Ben Giat)", "license": "MIT",