Carousel v2 #5

canalplus · Jan 8, 2018 · e0383c3 · e0383c3
1 parent aedbf07
commit e0383c3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/dev/dev.jsx b/dev/dev.jsx
@@ -209,7 +209,7 @@ class CarouselV2Wrapper extends React.Component {
           itemsVisiblesCount={3}
           loop={loop}
           onEnter={this.onEnter}
-          preloadItemsCount={5}
+          preloadItemsCount={3}
           focusedClassName={'focuseditemlol'}
           nestedFocusedClassName={'focuseditemlolilol'}
           wrapperWidth={600}

diff --git a/src/components/carouselv2/Carousel.js b/src/components/carouselv2/Carousel.js
@@ -115,7 +115,7 @@ class Carousel extends Component {
     };
   }
 
-  renderItems(carouselId, iFocused, itemsVisiblesCount, children, direction, itemStyles, preloadItemsCount, scrollableTranslateY, wrapperHeight) {
+  renderItems(carouselId, iFocused, itemsVisiblesCount, children, direction, itemStyles, preloadItemsCount, scrollableTranslateX, scrollableTranslateY, wrapperHeight) {
     const { verticalChildItemWrapper } = this.props;
     if (direction === CAROUSEL_DIRECTIONS.verticalBidirectional) {
       const maxItemsVisible = iFocused + itemsVisiblesCount + preloadItemsCount;
@@ -128,7 +128,7 @@ class Carousel extends Component {
         const maxNestedItemsVisible = nestedIFocused + itemsVisiblesCount + preloadItemsCount;
         const minNestedItemsVisible = nestedIFocused - itemsVisiblesCount - preloadItemsCount;
 
-        if (!isItemVisible) {
+        if (!isItemVisible && iIndex < maxItemsVisible) {
           const height = getItemOffsetHeight(carouselId, iIndex);
           const width = getItemOffsetWidth(carouselId, iIndex);
           return (
@@ -138,10 +138,12 @@ class Carousel extends Component {
             </div>
           )
         }
+
         return isItemVisible && (
           <CarouselItem
             carouselId={carouselId}
             direction={direction}
+            hasNestedItems
             key={`item_${iIndex}`}
             itemIndex={iIndex}
             itemStyles={itemStyles}
@@ -158,13 +160,13 @@ class Carousel extends Component {
                       carouselId={`${carouselId}_${iIndex}`}
                       direction={CAROUSEL_DIRECTIONS.horizontal}
                       nested
-                      scrollableTranslateX={0}
-                      scrollableTranslateY={0}
+                      scrollableTranslateX={scrollableTranslateX}
+                      scrollableTranslateY={scrollableTranslateY}
                     >
                       {nestedChild.props.children.map((nestedChildItem, iNestedItem) => {
                         const isItemVisible = iNestedItem < maxNestedItemsVisible && iNestedItem > minNestedItemsVisible
 
-                        if (!isItemVisible) {
+                        if (!isItemVisible && iNestedItem < maxNestedItemsVisible) {
                           const width = getNestedItemOffsetWidth(carouselId, iIndex, iNestedItem);
                           return (
                             <div key={`spacer_${iIndex}_${iNested}_${iNestedItem}`} style={{ display: 'inline-block' }}>
@@ -324,6 +326,7 @@ class Carousel extends Component {
               direction,
               itemStyles,
               preloadItemsCount,
+              scrollableTranslateX,
               scrollableTranslateY,
               wrapperHeight
             )

diff --git a/src/components/carouselv2/CarouselItem.js b/src/components/carouselv2/CarouselItem.js
@@ -15,6 +15,10 @@ class CarouselItem extends Component {
     }
   }
 
+  shouldComponentUpdate(){
+    return this.props.hasNestedItems ? true : false;
+  }
+
   render() {
     const {
       direction,
@@ -29,7 +33,7 @@ class CarouselItem extends Component {
       height: `${itemHeight}px`,
       display: direction === CAROUSEL_DIRECTIONS.horizontal ? 'inline-block' : 'block'
     };
-    
+
     return (
       <div ref={(el) => { this.el = el }} style={itemWrapperStyles}>
         <div style={itemStyles}>
@@ -40,4 +44,4 @@ class CarouselItem extends Component {
   }
 }
 
-export default CarouselItem;
+export default CarouselItem;
diff --git a/src/components/carouselv2/CarouselScrollable.js b/src/components/carouselv2/CarouselScrollable.js
@@ -30,7 +30,7 @@ class CarouselScrollable extends React.PureComponent {
     }
   }
 
-  getVerticalScrollableStyles(scrollableTranslateY, scrollableHeight) {
+  getVerticalScrollableStyles(scrollableHeight) {
     return {
       width: '100%',
       height: scrollableHeight,
@@ -48,8 +48,8 @@ class CarouselScrollable extends React.PureComponent {
       scrollableWidth
     } = this.props;
 
-    const scrollableStyles = direction === CAROUSEL_DIRECTIONS.horizontal ? this.getHorizontalScrollableStyles() : this.getVerticalScrollableStyles(scrollableTranslateY, scrollableHeight),
-      scrollable2Styles = this.getHorizontalScrollableStyles(scrollable2TranslateX, scrollableWidth);
+    const scrollableStyles = direction === CAROUSEL_DIRECTIONS.horizontal ? this.getHorizontalScrollableStyles() : this.getVerticalScrollableStyles(scrollableHeight),
+      scrollable2Styles = this.getHorizontalScrollableStyles();
 
     return (
       <div className="keys-carousel-scrollable" ref={(el) => { this.el = el }} style={scrollableStyles} >