Add disableEdgeSwiping prop (#551)

* Fixed visibility for initial load and added height prop * Add disable edge swiping prop
FormidableLabs · May 24, 2019 · fea6324 · fea6324
1 parent 1352bbf
commit fea6324
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -79,6 +79,7 @@ Or on CodeSandBox at the following url: <a href="https://codesandbox.io/s/04wxlo
 | cellSpacing                | `React.PropTypes.number`                                                                | Space between slides, as an integer, but reflected as `px`                                                                                                                                                                                                                                  |                                                                           |
 | enableKeyboardControls     | `React.PropTypes.bool`                                                                  | When set to `true` will enable keyboard controls.                                                                                                                                                                                                                                           |                                                                           | `false` |
 | disableAnimation           | `React.PropTypes.bool`                                                                  | When set to `true`, will disable animation.                                                                                                                                                                                                                                                 | `false`                                                                   |
+| disableEdgeSwiping         | `React.PropTypes.bool`                                                                  | When set to `true`, will disable swiping before first slide and after last slide.                                                                                                                                                                                                                                                 | `false`                                                                   |
 | dragging                   | `React.PropTypes.bool`                                                                  | Enable mouse swipe/dragging.                                                                                                                                                                                                                                                                | `true`                                                                    |
 | easing                     | `React.PropTypes.string`                                                                | Animation easing function. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease)                                                                                                                                                                                     |                                                                           |
 | edgeEasing                 | `React.PropTypes.string`                                                                | Animation easing function when swipe exceeds edge. See valid easings here: [D3 Easing Functions](https://github.com/d3/d3-ease)                                                                                                                                                             |                                                                           |

diff --git a/index.d.ts b/index.d.ts
@@ -159,6 +159,12 @@ export interface CarouselProps {
    */
   disableAnimation?: boolean;
 
+  /**
+   * Disable swipe before first slide and after last slide
+   * @default false
+   */
+  disableEdgeSwiping?: boolean;
+
   /**
    * Enable mouse swipe/dragging
    */

diff --git a/src/index.js b/src/index.js
@@ -615,6 +615,14 @@ export default class Carousel extends React.Component {
     };
   }
 
+  isEdgeSwiping() {
+    const { slideCount, slideWidth } = this.state;
+    const { tx } = this.getOffsetDeltas();
+
+    // returns true if tx offset is outside first or last slide
+    return tx > 0 || -tx > slideWidth * (slideCount - 1);
+  }
+
   // Action Methods
 
   goToSlide(index, props) {
@@ -977,43 +985,51 @@ export default class Carousel extends React.Component {
             update={() => {
               const { tx, ty } = this.getOffsetDeltas();
 
-              return {
-                tx,
-                ty,
-                timing: {
-                  duration,
-                  ease: this.state.easing
-                },
-                events: {
-                  end: () => {
-                    const newLeft = this.props.vertical
-                      ? 0
-                      : this.getTargetLeft();
-                    const newTop = this.props.vertical
-                      ? this.getTargetLeft()
-                      : 0;
-
-                    if (
-                      newLeft !== this.state.left ||
-                      newTop !== this.state.top
-                    ) {
-                      this.setState(
-                        {
-                          left: newLeft,
-                          top: newTop,
-                          isWrappingAround: false,
-                          resetWrapAroundPosition: true
-                        },
-                        () => {
-                          this.setState({
-                            resetWrapAroundPosition: false
-                          });
-                        }
-                      );
+              if (
+                this.props.disableEdgeSwiping &&
+                !this.props.wrapAround &&
+                this.isEdgeSwiping()
+              ) {
+                return {};
+              } else {
+                return {
+                  tx,
+                  ty,
+                  timing: {
+                    duration,
+                    ease: this.state.easing
+                  },
+                  events: {
+                    end: () => {
+                      const newLeft = this.props.vertical
+                        ? 0
+                        : this.getTargetLeft();
+                      const newTop = this.props.vertical
+                        ? this.getTargetLeft()
+                        : 0;
+
+                      if (
+                        newLeft !== this.state.left ||
+                        newTop !== this.state.top
+                      ) {
+                        this.setState(
+                          {
+                            left: newLeft,
+                            top: newTop,
+                            isWrappingAround: false,
+                            resetWrapAroundPosition: true
+                          },
+                          () => {
+                            this.setState({
+                              resetWrapAroundPosition: false
+                            });
+                          }
+                        );
+                      }
                     }
                   }
-                }
-              };
+                };
+              }
             }}
             children={({ tx, ty }) => (
               <TransitionControl
@@ -1052,6 +1068,7 @@ Carousel.propTypes = {
   cellSpacing: PropTypes.number,
   enableKeyboardControls: PropTypes.bool,
   disableAnimation: PropTypes.bool,
+  disableEdgeSwiping: PropTypes.bool,
   dragging: PropTypes.bool,
   easing: PropTypes.string,
   edgeEasing: PropTypes.string,
@@ -1104,6 +1121,7 @@ Carousel.defaultProps = {
   cellSpacing: 0,
   enableKeyboardControls: false,
   disableAnimation: false,
+  disableEdgeSwiping: false,
   dragging: true,
   easing: 'easeCircleOut',
   edgeEasing: 'easeElasticOut',