Merge pull request #5 from vadymshymko/develop

V2.0.1
vadymshymko · Oct 6, 2019 · 335e29a · 335e29a
2 parents 31dd724 + ccb74f8
commit 335e29a
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -49,17 +49,19 @@ class App extends Component {
       <Carousel
         activeSlideIndex={this.state.activeSlideIndex}
         onRequestChange={this.setActiveSlideIndex}
+        itemsToShow={3}
+        itemsToScroll={3}
       >
-        <div style={{ width: 300, height: 300 }}>slide 0<div>
-        <div style={{ width: 300, height: 300 }}>slide 1<div>
-        <div style={{ width: 300, height: 300 }}>slide 2<div>
-        <div style={{ width: 300, height: 300 }}>slide 3<div>
-        <div style={{ width: 300, height: 300 }}>slide 4<div>
-        <div style={{ width: 300, height: 300 }}>slide 5<div>
-        <div style={{ width: 300, height: 300 }}>slide 6<div>
-        <div style={{ width: 300, height: 300 }}>slide 7<div>
-        <div style={{ width: 300, height: 300 }}>slide 8<div>
-        <div style={{ width: 300, height: 300 }}>slide 9<div>
+        <div style={{ width: 300, height: 300 }}>slide 0</div>
+        <div style={{ width: 300, height: 300 }}>slide 1</div>
+        <div style={{ width: 300, height: 300 }}>slide 2</div>
+        <div style={{ width: 300, height: 300 }}>slide 3</div>
+        <div style={{ width: 300, height: 300 }}>slide 4</div>
+        <div style={{ width: 300, height: 300 }}>slide 5</div>
+        <div style={{ width: 300, height: 300 }}>slide 6</div>
+        <div style={{ width: 300, height: 300 }}>slide 7</div>
+        <div style={{ width: 300, height: 300 }}>slide 8</div>
+        <div style={{ width: 300, height: 300 }}>slide 9</div>
       </Carousel>
     );
   }

diff --git a/example/src/App.js b/example/src/App.js
@@ -3,7 +3,6 @@ import Carousel from 'react-simply-carousel';
 import logo from './logo.svg';
 import './App.css';
 
-
 class App extends Component {
   state = {
     activeSlideIndex: 0,
@@ -43,8 +42,8 @@ class App extends Component {
             });
           }}
           updateOnItemClick
-          speed={0}
-          delay={0}
+          speed={400}
+          delay={400}
           easing={'linear'}
           itemsToShow={3}
           itemsToScroll={1}
@@ -90,22 +89,16 @@ class App extends Component {
             }
           ]}
         >
-
-          {Array.from({ length: 5 }).map((item, index) => (
-            <div
-              style={{
-                height: '300px',
-                width: '300px',
-                fontSize: "240px",
-                border: "30px solid #fff",
-                backgroundColor: "#000",
-                color: "#fff",
-              }}
-              key={index}
-            >
-              {index}
-            </div>
-          ))}
+          <div style={{ width: 300, height: 300 }}>slide 0</div>
+          <div style={{ width: 300, height: 300 }}>slide 1</div>
+          <div style={{ width: 300, height: 300 }}>slide 2</div>
+          <div style={{ width: 300, height: 300 }}>slide 3</div>
+          <div style={{ width: 300, height: 300 }}>slide 4</div>
+          <div style={{ width: 300, height: 300 }}>slide 5</div>
+          <div style={{ width: 300, height: 300 }}>slide 6</div>
+          <div style={{ width: 300, height: 300 }}>slide 7</div>
+          <div style={{ width: 300, height: 300 }}>slide 8</div>
+          <div style={{ width: 300, height: 300 }}>slide 9</div>
         </Carousel>
       </div>
     )

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-simply-carousel",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Simple react.js carousel component",
   "main": "dist/index.js",
   "files": [

diff --git a/src/index.jsx b/src/index.jsx
@@ -87,10 +87,12 @@ class ReactJSSimpleCarousel extends Component {
 
   componentDidUpdate(prevProps, prevState) {
     const { activeSlideIndex: prevActiveSlideIndex } = this.getRenderProps(prevState, prevProps);
-    const { activeSlideIndex } = this.renderProps;
+    const { activeSlideIndex, speed, delay } = this.renderProps;
 
     if (activeSlideIndex === prevActiveSlideIndex) {
       this.direction = '';
+    } else if (!speed && !delay) {
+      this.updatePositionIndex();
     }
   }
 
@@ -166,7 +168,7 @@ class ReactJSSimpleCarousel extends Component {
         return result;
       }
 
-      return result + item.current.offsetWidth;
+      return result + item.offsetWidth;
     }, 0);
   }
 
@@ -176,7 +178,7 @@ class ReactJSSimpleCarousel extends Component {
         return total;
       }
 
-      return total + (item.current.offsetWidth || 0);
+      return total + (item.offsetWidth || 0);
     }, 0);
 
     return offsetByIndex;
@@ -265,9 +267,31 @@ class ReactJSSimpleCarousel extends Component {
       onRequestChange(newActiveSlideIndex);
     } else {
       this.itemsListRef.current.style.transform = `translateX(-${this.itemsListRef.current.offsetWidth / 3}px)`;
+
+      if (!speed && !delay) {
+        this.updatePositionIndex();
+      }
     }
   }
 
+  updatePositionIndex = () => {
+    const { activeSlideIndex, onAfterChange } = this.renderProps;
+    const { positionIndex } = this.state;
+
+    this.setState(() => ({
+      positionIndex: activeSlideIndex,
+    }), () => {
+      this.itemsListDragStartPos = null;
+      this.isListDragging = false;
+
+      this.startAutoplay();
+
+      if (onAfterChange) {
+        onAfterChange(activeSlideIndex, positionIndex);
+      }
+    });
+  }
+
   startAutoplay = () => {
     const {
       autoplay,
@@ -319,25 +343,6 @@ class ReactJSSimpleCarousel extends Component {
     this.updateActiveSlideIndex(this.getNextSlideIndex('forward'), 'forward');
   }
 
-  handleItemsListTransitionEnd = () => {
-    const { activeSlideIndex, onAfterChange } = this.renderProps;
-
-    this.setState(() => ({
-      positionIndex: activeSlideIndex,
-    }), () => {
-      const { positionIndex } = this.state;
-
-      this.itemsListDragStartPos = null;
-      this.isListDragging = false;
-
-      this.startAutoplay();
-
-      if (onAfterChange) {
-        onAfterChange(activeSlideIndex, positionIndex);
-      }
-    });
-  }
-
   updateItemsListPosByDragPos = (dragPos) => {
     const dragPosDiff = (this.itemsListDragStartPos - dragPos)
     + (this.itemsListRef.current.offsetWidth / 3);
@@ -352,7 +357,7 @@ class ReactJSSimpleCarousel extends Component {
   handleItemsListDragEnd = (dragPos) => {
     const { activeSlideIndex } = this.renderProps;
     const mousePosDiff = this.itemsListDragStartPos - dragPos;
-    const activeItemHalfWidth = this.slides[activeSlideIndex].current.offsetWidth / 2;
+    const activeItemHalfWidth = this.slides[activeSlideIndex].offsetWidth / 2;
 
     if (mousePosDiff > activeItemHalfWidth) {
       this.updateActiveSlideIndex(this.getNextSlideIndex('forward'), 'forward');
@@ -427,17 +432,19 @@ class ReactJSSimpleCarousel extends Component {
 
     return (
       items.map((
-        {
+        item,
+        index,
+      ) => {
+        const {
           props: {
             className: itemClassName = '',
             style: itemStyle = {},
             onClick: itemOnClick,
             ...itemComponentProps
           } = {},
           ...slideComponentData
-        },
-        index,
-      ) => {
+        } = item;
+
         const direction = this.renderedSlidesCount >= this.slidesCount ? 'forward' : 'backward';
 
         const isActive = index + startIndex === activeSlideIndex;
@@ -458,31 +465,29 @@ class ReactJSSimpleCarousel extends Component {
           })
           : itemOnClick;
         const props = {
+          role: 'tabpanel',
           className,
           style,
           onClick,
           ...itemComponentProps,
           ...(isActive ? activeSlideProps : {}),
         };
 
-        this.slides[index + startIndex] = createRef();
-
         this.renderedSlidesCount = this.renderedSlidesCount + 1;
 
         return {
-          props: {
-            role: 'tabpanel',
-            ...props,
-          },
+          props,
           ...slideComponentData,
-          ref: this.slides[index + startIndex],
         };
       })
     );
   }
 
   render() {
+    const { windowWidth, positionIndex } = this.state;
+
     this.renderProps = this.getRenderProps(this.state, this.props);
+    this.slides = windowWidth ? [...this.itemsListRef.current.children] : [];
 
     const {
       activeSlideIndex,
@@ -524,8 +529,6 @@ class ReactJSSimpleCarousel extends Component {
       },
     } = this.renderProps;
 
-    const { windowWidth, positionIndex } = this.state;
-
     const slidesItems = Children.toArray(children);
 
     const innerWidth = this.getInnerWidth();
@@ -551,7 +554,6 @@ class ReactJSSimpleCarousel extends Component {
       ? `translateX(-${(activeSlideIndexOffset - positionIndexOffset + this.getOffsetCorrectionForEdgeSlides(activeSlideIndex, positionIndex)) + this.itemsListRef.current.offsetWidth / 3}px)`
       : null;
 
-    this.slides = [];
     this.slidesCount = slidesItems.length;
     this.renderedSlidesCount = 0;
 
@@ -590,7 +592,7 @@ class ReactJSSimpleCarousel extends Component {
             }}
             onTouchStart={this.handleItemsListTouchStart}
             onMouseDown={this.handleItemsListMouseDown}
-            onTransitionEnd={this.handleItemsListTransitionEnd}
+            onTransitionEnd={speed || delay ? this.updatePositionIndex : null}
             tabIndex="-1"
             role="presentation"
             {...itemsListProps}