Merge pull request #92 from sag1v/support-all-props-from-breakpoint

Support all props through breakpoints (resolve #91 )

Author: sag1v

src/docs/mdx/breakpoints.mdx

@@ -14,10 +14,12 @@ _This is the coolest feature and one of the main reasons that `react-elastic-car
 The `breakPoints` array, allows you to set different `props` for different sizes of the element, regardless to the window's size.  
 This is due to the fact that `react-elastic-carousel` is listening to the element's `resize` event instead of the window.
 
-#### You can pass an array of objects that will signal `react-elastic-carousel` to change props like `itemsToShow` and `itemsToScroll` on different `width` values.
+#### You can pass an array of objects that will signal `react-elastic-carousel` to change props like `itemsToShow` and `itemsToScroll` (and others) on different `width` values.
+
+**ANY** prop can be passed directly to React Elastic Carousel or via a the breakpoint object. Keep in mind that a prop passed via a breakpoint will override a direct prop. 
 
 ## Example
-(_Drag or use the resize buttons to see the changes..._)
+(_Resize the container to see the changes..._)
 
 <Playground >
   {
@@ -26,7 +28,7 @@ This is due to the fact that `react-elastic-carousel` is listening to the elemen
         super(props);
         this.breakPoints = [
           { width: 1, itemsToShow: 1 },
-          { width: 550, itemsToShow: 2, itemsToScroll: 2 },
+          { width: 550, itemsToShow: 2, itemsToScroll: 2, pagination: false },
           { width: 850, itemsToShow: 3 },
           { width: 1150, itemsToShow: 4, itemsToScroll: 2 },
           { width: 1450, itemsToShow: 5 },

src/docs/mdx/onResize.mdx

@@ -17,7 +17,7 @@ import breakPoints from '../components/breakPoints';
 ```
 
 <Playground >
-    <Carousel breakPoints={breakPoints} onResize={currentBreakPoint => console.log(JSON.stringify(currentBreakPoint))}>
+    <Carousel breakPoints={breakPoints} onResize={currentBreakPoint => console.log(currentBreakPoint)}>
     <Item>1</Item>
     <Item>2</Item>
     <Item>3</Item>

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

@@ -137,13 +137,12 @@ class Carousel extends React.Component {
     this.slider.removeEventListener("transitionend", fn);
   };
 
-  getCurrentBreakpoint = () => {
-    const { breakPoints, itemsToShow, itemsToScroll } = this.props;
+  getDerivedPropsFromBreakPoint = () => {
+    const { breakPoints, ...restOfProps } = this.props;
     const { sliderContainerWidth } = this.state;
 
     // default breakpoint from individual props
-    let currentBreakPoint = { itemsToScroll, itemsToShow };
-
+    let currentBreakPoint;
     // if breakpoints were added as props override the individual props
     if (breakPoints && breakPoints.length > 0) {
       currentBreakPoint = breakPoints
@@ -157,45 +156,22 @@ class Carousel extends React.Component {
         currentBreakPoint = breakPoints[0];
       }
     }
-    return currentBreakPoint;
-  };
-
-  /** We might get itemsToShow as a direct prop
-   ** Or we might get it as a prop inside a selected breakpoint.
-   ***/
-  getCalculatedItemsToShow = () => {
-    const { itemsToShow } = this.props;
-    let visibleItems = itemsToShow;
-
-    const currentBreakPoint = this.getCurrentBreakpoint();
-    if (currentBreakPoint) {
-      visibleItems = currentBreakPoint.itemsToShow;
-    }
-    return visibleItems;
-  };
-
-  /** We might get itemsToScroll as a direct prop
-   ** Or we might get it as a prop inside a selected breakpoint.
-   ***/
-  getItemsToScroll = () => {
-    const { itemsToScroll } = this.props;
-    const currentBreakPoint = this.getCurrentBreakpoint();
-    let effectiveItemsToScroll = itemsToScroll;
-    if (currentBreakPoint && currentBreakPoint.itemsToScroll) {
-      effectiveItemsToScroll = currentBreakPoint.itemsToScroll;
-    }
-    return effectiveItemsToScroll;
+    // merge direct props with current breakpoint Props
+    return { ...restOfProps, ...currentBreakPoint };
   };
 
   updateSliderPosition = () => {
-    this.setState((state, props) => {
-      const { children, verticalMode } = props;
+    this.setState(state => {
+      const {
+        children,
+        verticalMode,
+        itemsToShow
+      } = this.getDerivedPropsFromBreakPoint();
       const { childWidth, childHeight, activeIndex } = state;
       const totalItems = children.length;
-      const numOfVisibleItems = this.getCalculatedItemsToShow();
-      const hiddenSlots = totalItems - numOfVisibleItems;
+      const hiddenSlots = totalItems - itemsToShow;
       let moveBy = activeIndex * -1;
-      const emptySlots = numOfVisibleItems - (totalItems - activeIndex);
+      const emptySlots = itemsToShow - (totalItems - activeIndex);
       if (emptySlots > 0 && hiddenSlots > 0) {
         moveBy = emptySlots + activeIndex * -1;
       }
@@ -210,13 +186,16 @@ class Carousel extends React.Component {
   };
 
   onSliderResize = sliderNode => {
-    const { verticalMode, children } = this.props;
+    const {
+      verticalMode,
+      children,
+      itemsToShow
+    } = this.getDerivedPropsFromBreakPoint();
     const { height } = sliderNode.contentRect;
     const nextState = {};
     if (verticalMode) {
-      const numOfVisibleItems = this.getCalculatedItemsToShow();
       const childHeight = height / children.length;
-      nextState.rootHeight = childHeight * numOfVisibleItems;
+      nextState.rootHeight = childHeight * itemsToShow;
       nextState.childHeight = childHeight;
     } else {
       nextState.rootHeight = height;
@@ -225,15 +204,18 @@ class Carousel extends React.Component {
   };
 
   onContainerResize = sliderContainerNode => {
-    const { onResize, verticalMode } = this.props;
+    const {
+      onResize,
+      verticalMode,
+      itemsToShow
+    } = this.getDerivedPropsFromBreakPoint();
     const { width } = sliderContainerNode.contentRect;
     // update slider container width
     this.setState({ sliderContainerWidth: width }, () => {
       /* based on slider container's width, get num of items to show
       * and calculate child's width (and update it in state)
       */
-      const visibleItems = this.getCalculatedItemsToShow();
-      const childWidth = verticalMode ? width : width / visibleItems;
+      const childWidth = verticalMode ? width : width / itemsToShow;
       this.setState(
         state => ({ childWidth }),
         () => {
@@ -243,7 +225,7 @@ class Carousel extends React.Component {
           * pass the current breakpoint to the consumer's callback
           */
           this.updateSliderPosition();
-          const currentBreakPoint = this.getCurrentBreakpoint();
+          const currentBreakPoint = this.getDerivedPropsFromBreakPoint();
           onResize(currentBreakPoint);
         }
       );
@@ -274,13 +256,15 @@ class Carousel extends React.Component {
   };
 
   getNextItemIndex = (currentIndex, getPrev) => {
-    const { children } = this.props;
-    const itemsToScroll = this.getItemsToScroll();
-    const numOfvisibleItems = this.getCalculatedItemsToShow();
-    const notEnoughItemsToshow = numOfvisibleItems > children.length;
-    let limit = getPrev ? 0 : children.length - numOfvisibleItems;
+    const {
+      children,
+      itemsToShow,
+      itemsToScroll
+    } = this.getDerivedPropsFromBreakPoint();
+    const notEnoughItemsToShow = itemsToShow > children.length;
+    let limit = getPrev ? 0 : children.length - itemsToShow;
 
-    if (notEnoughItemsToshow) {
+    if (notEnoughItemsToShow) {
       limit = 0; // basically don't move
     }
     const nextAction = getPrev
@@ -312,15 +296,19 @@ class Carousel extends React.Component {
   onSwiping = data => {
     const { deltaX, absX, deltaY, absY, dir } = data;
 
-    this.setState((state, props) => {
+    this.setState(state => {
       const {
         rootHeight,
         activeIndex,
         sliderPosition,
         sliderContainerWidth
       } = state;
-      const { verticalMode, children, isRTL } = props;
-      const itemsToShow = this.getCalculatedItemsToShow();
+      const {
+        itemsToShow,
+        verticalMode,
+        children,
+        isRTL
+      } = this.getDerivedPropsFromBreakPoint();
 
       // determine how far can user swipe
       const isOnStart = activeIndex === 0;
@@ -519,23 +507,26 @@ class Carousel extends React.Component {
   };
 
   goTo = nextItemId => {
-    const { children, verticalMode } = this.props;
+    const {
+      children,
+      verticalMode,
+      itemsToShow
+    } = this.getDerivedPropsFromBreakPoint();
     const { activeIndex } = this.state;
     const isPrev = activeIndex > nextItemId;
     const nextAvailbaleItem = this.getNextItemIndex(activeIndex, isPrev);
-    const itemsToshow = this.getCalculatedItemsToShow();
     const noChange = nextAvailbaleItem === activeIndex;
-    const outOfBoundry = nextItemId + itemsToshow >= children.length;
+    const outOfBoundry = nextItemId + itemsToShow >= children.length;
     if (noChange) {
       return;
     }
     if (outOfBoundry) {
-      if (children.length - itemsToshow > 0) {
-        nextItemId = children.length - itemsToshow;
+      if (children.length - itemsToShow > 0) {
+        nextItemId = children.length - itemsToShow;
       } else {
         nextItemId = Math.max(
           children.length - 1,
-          children.length - itemsToshow
+          children.length - itemsToShow
         );
       }
     }
@@ -563,26 +554,25 @@ class Carousel extends React.Component {
   };
 
   getNumOfPages = () => {
-    const { children } = this.props;
-    const numOfVisibleItems = this.getCalculatedItemsToShow();
-    const numOfPages = Math.ceil(children.length / numOfVisibleItems);
+    const { children, itemsToShow } = this.getDerivedPropsFromBreakPoint();
+    const numOfPages = Math.ceil(children.length / itemsToShow);
     return numOfPages || 1;
   };
 
   updateActivePage = () => {
     this.setState(state => {
+      const { itemsToShow } = this.getDerivedPropsFromBreakPoint();
       const { activeIndex, activePage } = state;
-      const numOfVisibleItems = this.getCalculatedItemsToShow();
-      const newActivePage = Math.ceil(activeIndex / numOfVisibleItems);
+      const newActivePage = Math.ceil(activeIndex / itemsToShow);
       if (activePage !== newActivePage) {
         return { activePage: newActivePage };
       }
     });
   };
 
   onIndicatorClick = indicatorId => {
-    const numOfVisibleItems = this.getCalculatedItemsToShow();
-    const gotoIndex = indicatorId * numOfVisibleItems;
+    const { itemsToShow } = this.getDerivedPropsFromBreakPoint();
+    const gotoIndex = indicatorId * itemsToShow;
     this.setState({ activePage: indicatorId });
     this.goTo(gotoIndex);
   };
@@ -601,6 +591,7 @@ class Carousel extends React.Component {
     const {
       className,
       style,
+      itemsToShow,
       verticalMode,
       isRTL,
       easing,
@@ -619,7 +610,7 @@ class Carousel extends React.Component {
       preventDefaultTouchmoveEvent,
       renderArrow,
       renderPagination
-    } = this.props;
+    } = this.getDerivedPropsFromBreakPoint();
 
     const numOfPages = this.getNumOfPages();
 
@@ -677,7 +668,7 @@ class Carousel extends React.Component {
                 childWidth={childWidth}
                 currentItem={activeIndex}
                 autoTabIndexVisibleItems={autoTabIndexVisibleItems}
-                itemsToShow={this.getCalculatedItemsToShow()}
+                itemsToShow={itemsToShow}
                 itemPosition={itemPosition}
                 itemPadding={itemPadding}
                 enableSwipe={enableSwipe}