Merge pull request #99 from femioladeji/add-easing-prop

Add easing property

docs/views/codeStrings.js

@@ -54,7 +54,7 @@ const slideImages = [
 const Slideshow = () => {
     return (
       <div>
-        <Slide>
+        <Slide easing="ease">
           <div className="each-slide">
             <div style={{'backgroundImage': \`url(\${slideImages[0]})\`\}}>
               <span>Slide 1</span>

docs/views/pages/ApiPage.js

@@ -109,6 +109,15 @@ const Api = () => {
                 oldIndex and newIndex are passed as arguments
               </td>
             </tr>
+            <tr>
+              <td>Easing</td>
+              <td>string</td>
+              <td>linear</td>
+              <td>
+                The timing transition function to use. You can use one of linear,
+                ease, ease-in, ease-out, cubic, cubic-in, cubic-out
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>

docs/views/pages/LandingPage.js

@@ -41,7 +41,7 @@ const LandingPage = () => {
       </div>
       <h2>Simple Slide Example</h2>
       <div>
-        <Slide>
+        <Slide easing="ease">
           {slideImages.map((each, index) => (
             <div key={index} className="each-slide">
               <div style={{ backgroundImage: `url(${each})` }}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-slideshow-image",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "author": "Femi Oladeji",
   "description": "An image slideshow with react",
   "files": [

src/fade.js

@@ -6,7 +6,8 @@ import {
   getUnhandledProps,
   showNextArrow,
   showPreviousArrow,
-  showIndicators
+  showIndicators,
+  getEasing
 } from './helpers.js';
 
 class Fade extends Component {
@@ -212,7 +213,8 @@ class Fade extends Component {
       infinite,
       duration,
       transitionDuration,
-      onChange
+      onChange,
+      easing
     } = this.props;
     const existingTweens = this.tweenGroup.getAll();
     if (!existingTweens.length) {
@@ -240,7 +242,7 @@ class Fade extends Component {
           this.divsContainer.children[index].style.opacity = 1 - value.opacity;
         })
         .start();
-
+      tween.easing(getEasing(easing));
       tween.onComplete(() => {
         if (this.willUnmount) {
           return;
@@ -270,7 +272,8 @@ Fade.defaultProps = {
   arrows: true,
   autoplay: true,
   infinite: true,
-  pauseOnHover: true
+  pauseOnHover: true,
+  easing: 'linear'
 };
 
 Fade.propTypes = {
@@ -284,6 +287,7 @@ Fade.propTypes = {
   onChange: PropTypes.func,
   pauseOnHover: PropTypes.bool,
   prevArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  nextArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+  nextArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  easing: PropTypes.string
 };
 export default Fade;

src/helpers.js

@@ -1,4 +1,19 @@
 import React from 'react';
+import TWEEN from '@tweenjs/tween.js';
+
+const EASING_METHODS = {
+  linear: TWEEN.Easing.Linear.None,
+  ease: TWEEN.Easing.Quadratic.InOut,
+  'ease-in': TWEEN.Easing.Quadratic.In,
+  'ease-out': TWEEN.Easing.Quadratic.Out,
+  cubic: TWEEN.Easing.Cubic.InOut,
+  'cubic-in': TWEEN.Easing.Cubic.In,
+  'cubic-out': TWEEN.Easing.Cubic.Out
+}
+
+const getEasing = (easeMethod) => {
+  return EASING_METHODS[easeMethod] || EASING_METHODS.linear
+}
 
 const getUnhandledProps = (ComponentProps, props) => {
   const handledProps = Object.keys(ComponentProps);
@@ -104,17 +119,20 @@ const showIndicators = (props, currentIndex, navigate) => {
           'aria-label': `Go to slide ${key + 1}`,
           onClick: navigate
         };
-        return isCustomIndicator
-          ? showCustomIndicator(
-              currentIndex,
-              key,
-              indicatorProps,
-              indicators(key)
-            )
-          : showDefaultIndicator(currentIndex, key, indicatorProps);
+        if (isCustomIndicator) {
+          return showCustomIndicator(
+            currentIndex,
+            key,
+            indicatorProps,
+            indicators(key)
+          )
+        }
+        return showDefaultIndicator(currentIndex, key, indicatorProps);
       })}
     </div>
   );
 };
 
-export { showNextArrow, showPreviousArrow, getUnhandledProps, showIndicators };
+
+
+export { getEasing, showNextArrow, showPreviousArrow, getUnhandledProps, showIndicators };

src/slide.js

@@ -6,7 +6,8 @@ import {
   getUnhandledProps,
   showNextArrow,
   showPreviousArrow,
-  showIndicators
+  showIndicators,
+  getEasing
 } from './helpers.js';
 
 class Slideshow extends Component {
@@ -267,7 +268,8 @@ class Slideshow extends Component {
       autoplay,
       infinite,
       duration,
-      onChange
+      onChange,
+      easing
     } = this.props;
     transitionDuration = animationDuration || transitionDuration;
     const existingTweens = this.tweenGroup.getAll();
@@ -280,7 +282,7 @@ class Slideshow extends Component {
           this.imageContainer.style.transform = `translate(${value.margin}px)`;
         })
         .start();
-
+      tween.easing(getEasing(easing));
       let animate = () => {
         if (this.willUnmount) {
           this.tweenGroup.removeAll();
@@ -293,16 +295,17 @@ class Slideshow extends Component {
       animate();
 
       tween.onComplete(() => {
-        this.distanceSwiped = 0;
-        const newIndex =
-          index < 0
-            ? children.length - 1
-            : index >= children.length
-            ? 0
-            : index;
         if (this.willUnmount) {
           return;
         }
+        this.distanceSwiped = 0;
+        let newIndex = index;
+        if (newIndex < 0) {
+          newIndex = children.length - 1;
+        } else if (newIndex >= children.length) {
+          newIndex = 0;
+        }
+
         if (typeof onChange === 'function') {
           onChange(this.state.index, newIndex);
         }
@@ -330,7 +333,8 @@ Slideshow.defaultProps = {
   autoplay: true,
   indicators: false,
   arrows: true,
-  pauseOnHover: true
+  pauseOnHover: true,
+  easing: 'linear'
 };
 
 Slideshow.propTypes = {
@@ -344,6 +348,7 @@ Slideshow.propTypes = {
   onChange: PropTypes.func,
   pauseOnHover: PropTypes.bool,
   prevArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  nextArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+  nextArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  easing: PropTypes.string
 };
 export default Slideshow;

src/zoom.js

@@ -6,7 +6,8 @@ import {
   getUnhandledProps,
   showNextArrow,
   showPreviousArrow,
-  showIndicators
+  showIndicators,
+  getEasing
 } from './helpers.js';
 
 class Zoom extends Component {
@@ -215,7 +216,8 @@ class Zoom extends Component {
       infinite,
       transitionDuration,
       duration,
-      onChange
+      onChange,
+      easing
     } = this.props;
     const existingTweens = this.tweenGroup.getAll();
     if (!existingTweens.length) {
@@ -249,7 +251,7 @@ class Zoom extends Component {
           ].style.transform = `scale(${value.scale})`;
         })
         .start();
-
+      tween.easing(getEasing(easing));
       tween.onComplete(() => {
         if (this.willUnmount) {
           return;
@@ -284,7 +286,8 @@ Zoom.defaultProps = {
   arrows: true,
   autoplay: true,
   infinite: true,
-  pauseOnHover: true
+  pauseOnHover: true,
+  easing: 'linear'
 };
 
 Zoom.propTypes = {
@@ -299,6 +302,7 @@ Zoom.propTypes = {
   onChange: PropTypes.func,
   pauseOnHover: PropTypes.bool,
   prevArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  nextArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+  nextArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  easing: PropTypes.string
 };
 export default Zoom;