Merge pull request #99 from sag1v/next

Merge next to master

Author: sag1v

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-elastic-carousel",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "A flexible and responsive carousel component for react",
   "author": "sag1v (Sagiv Ben Giat)",
   "license": "MIT",

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,
@@ -334,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,
@@ -366,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) {
@@ -585,7 +602,8 @@ class Carousel extends React.Component {
       swipedSliderPosition,
       rootHeight,
       pages,
-      activeIndex
+      activeIndex,
+      transitionMs
     } = this.state;
     const {
       className,
@@ -595,7 +613,6 @@ class Carousel extends React.Component {
       isRTL,
       easing,
       tiltEasing,
-      transitionMs,
       children,
       focusOnSelect,
       autoTabIndexVisibleItems,
@@ -663,6 +680,7 @@ class Carousel extends React.Component {
               ref={this.setRef("slider")}
             >
               <Track
+                verticalMode={verticalMode}
                 children={children}
                 childWidth={childWidth}
                 currentItem={activeIndex}
@@ -742,6 +760,7 @@ Carousel.defaultProps = {
   autoPlaySpeed: 2000,
 
   // callbacks
+  onChange: noop,
   onNextEnd: noop,
   onPrevEnd: noop,
   onNextStart: noop,

src/react-elastic-carousel/components/Track.js

@@ -17,6 +17,7 @@ const Track = ({
   itemPadding,
   onSwiped,
   onSwiping,
+  verticalMode,
   onItemClick
 }) => {
   const width = `${childWidth}px`;
@@ -47,7 +48,10 @@ const Track = ({
   });
   const toRender = enableSwipe ? (
     <Swipeable
-      style={{ display: "flex" }}
+      style={{
+        display: "flex",
+        flexDirection: verticalMode ? "column" : "row"
+      }}
       stopPropagation
       preventDefaultTouchmoveEvent={preventDefaultTouchmoveEvent}
       trackMouse={enableMouseSwipe}
@@ -71,6 +75,7 @@ Track.propTypes = {
   itemPosition: PropTypes.string,
   itemPadding: PropTypes.array,
   childWidth: PropTypes.number,
+  verticalMode: PropTypes.bool,
   enableSwipe: PropTypes.bool,
   enableMouseSwipe: PropTypes.bool,
   preventDefaultTouchmoveEvent: PropTypes.bool,

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%;" : "")};
 `;

src/react-elastic-carousel/index.d.ts

@@ -1,26 +1,26 @@
 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
   // it to a specific page.
   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;
 };