react-responsive-carousel - npm Package Compare versions

Comparing version 3.2.11 to 3.2.12

CHANGELOG.md

@@ -10,2 +10,12 @@ # Changelog
 
+## [v3.2.11](https://github.com/leandrowd/react-responsive-carousel/compare/v3.2.10...v3.2.11) - 2020-12-05
+
+### Merged
+
+-   #514 Add autoFocus prop so useKeyboardArrows works without clicking first [`#530`](https://github.com/leandrowd/react-responsive-carousel/pull/530)
+
+### Commits
+
+-   #514 Introduce autoFocus props so useKeyboardArrows can work without initial interaction [`1b06898`](https://github.com/leandrowd/react-responsive-carousel/commit/1b06898ad223a8e29cc4e0d4f911b6e553e9946c)
+
 ## [v3.2.10](https://github.com/leandrowd/react-responsive-carousel/compare/v3.2.9...v3.2.10) - 2020-09-23
@@ -12,0 +22,0 @@

lib/js/components/Carousel.js

@@ -113,7 +113,8 @@ "use strict";
     _defineProperty(_assertThisInitialized(_this), "autoPlay", function () {
-      if (!_this.state.autoPlay || _react.Children.count(_this.props.children) <= 1) {
+      if (_react.Children.count(_this.props.children) <= 1) {
         return;
       }
 
-      if (_this.timer) clearTimeout(_this.timer);
+      _this.clearAutoPlay();
+
       _this.timer = setTimeout(function () {
@@ -125,6 +126,2 @@ _this.increment();
     _defineProperty(_assertThisInitialized(_this), "clearAutoPlay", function () {
-      if (!_this.state.autoPlay) {
-        return;
-      }
-
       if (_this.timer) clearTimeout(_this.timer);
@@ -268,3 +265,4 @@ });
         swiping: false,
-        cancelClick: false
+        cancelClick: false,
+        swipeMovementStarted: false
       });
@@ -315,3 +313,9 @@
 
-      if (!_this.props.preventMovementUntilSwipeScrollTolerance || hasMoved) {
+      if (!_this.props.preventMovementUntilSwipeScrollTolerance || hasMoved || _this.state.swipeMovementStarted) {
+        if (!_this.state.swipeMovementStarted) {
+          _this.setState({
+            swipeMovementStarted: true
+          });
+        }
+
         _this.setPosition(position);
@@ -426,2 +430,8 @@ } // allows scroll if the swipe was within the tolerance
       _this.increment(1, true);
+
+      if (_this.props.emulateTouch) {
+        _this.setState({
+          cancelClick: true
+        });
+      }
     });
@@ -431,2 +441,8 @@
       _this.decrement(1, true);
+
+      if (_this.props.emulateTouch) {
+        _this.setState({
+          cancelClick: true
+        });
+      }
     });
@@ -476,5 +492,7 @@
           }
-        }
+        } // try to get img first, if img not there find first display tag
 
-        var height = item.children[0].clientHeight;
+
+        var displayItem = slideImages[0] || item.children[0];
+        var height = displayItem.clientHeight;
         return height > 0 ? height : null;
@@ -493,2 +511,3 @@ }
       swiping: false,
+      swipeMovementStarted: false,
       cancelClick: false,
@@ -758,2 +777,3 @@ itemSize: 1
 
+      var isSwipeable = this.props.swipeable && _react.Children.count(this.props.children) > 1;
       var isHorizontal = this.props.axis === 'horizontal';
@@ -829,6 +849,6 @@ var canShowArrows = this.props.showArrows && _react.Children.count(this.props.children) > 1; // show left arrow?
         }
-      }, this.props.renderArrowPrev(this.onClickPrev, hasPrev, this.props.labels.leftArrow), /*#__PURE__*/_react.default.createElement("div", {
+      }, this.renderControls(), this.props.renderArrowPrev(this.onClickPrev, hasPrev, this.props.labels.leftArrow), /*#__PURE__*/_react.default.createElement("div", {
         className: _cssClasses.default.WRAPPER(true, this.props.axis),
         style: containerStyles
-      }, this.props.swipeable ? /*#__PURE__*/_react.default.createElement(_reactEasySwipe.default, _extends({
+      }, isSwipeable ? /*#__PURE__*/_react.default.createElement(_reactEasySwipe.default, _extends({
         tagName: "ul",
@@ -844,3 +864,3 @@ innerRef: this.setListRef
         style: itemListStyles
-      }, this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone)), this.props.renderArrowNext(this.onClickNext, hasNext, this.props.labels.rightArrow), this.renderControls(), this.renderStatus()), this.renderThumbs());
+      }, this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone)), this.props.renderArrowNext(this.onClickNext, hasNext, this.props.labels.rightArrow), this.renderStatus()), this.renderThumbs());
     }
@@ -870,3 +890,5 @@ }]);
   onSwipeEnd: function onSwipeEnd() {},
-  onSwipeMove: function onSwipeMove() {},
+  onSwipeMove: function onSwipeMove() {
+    return false;
+  },
   preventMovementUntilSwipeScrollTolerance: false,
@@ -873,0 +895,0 @@ renderArrowPrev: function renderArrowPrev(onClickHandler, hasPrev, label) {

lib/js/components/Thumbs.js

@@ -301,4 +301,5 @@ "use strict";
         return null;
-      } // show left arrow?
+      }
 
+      var isSwipeable = _react.Children.count(this.props.children) > 1; // show left arrow?
 
@@ -339,3 +340,3 @@ var hasPrev = this.state.showArrows && this.state.firstItem > 0; // show right arrow
         "aria-label": this.props.labels.leftArrow
-      }), /*#__PURE__*/_react.default.createElement(_reactEasySwipe.default, {
+      }), isSwipeable ? /*#__PURE__*/_react.default.createElement(_reactEasySwipe.default, {
         tagName: "ul",
@@ -350,2 +351,8 @@ className: _cssClasses.default.SLIDER(false, this.state.swiping),
         innerRef: this.setItemsListRef
+      }, this.renderItems()) : /*#__PURE__*/_react.default.createElement("ul", {
+        className: _cssClasses.default.SLIDER(false, this.state.swiping),
+        ref: function ref(node) {
+          return _this3.setItemsListRef(node);
+        },
+        style: itemListStyles
       }, this.renderItems()), /*#__PURE__*/_react.default.createElement("button", {
@@ -352,0 +359,0 @@ type: "button",

lib/ts/components/Carousel.d.ts

@@ -58,2 +58,3 @@ import React from 'react';
     swiping?: boolean;
+    swipeMovementStarted: boolean;
 }
@@ -67,36 +68,3 @@ export default class Carousel extends React.Component<Props, State> {
     static displayName: string;
-    static defaultProps: {
-        axis: string;
-        centerSlidePercentage: number;
-        interval: number;
-        labels: {
-            leftArrow: string;
-            rightArrow: string;
-            item: string;
-        };
-        onClickItem: () => void;
-        onClickThumb: () => void;
-        onChange: () => void;
-        onSwipeStart: () => void;
-        onSwipeEnd: () => void;
-        onSwipeMove: () => void;
-        preventMovementUntilSwipeScrollTolerance: boolean;
-        renderArrowPrev: (onClickHandler: () => void, hasPrev: boolean, label: string) => JSX.Element;
-        renderArrowNext: (onClickHandler: () => void, hasNext: boolean, label: string) => JSX.Element;
-        renderIndicator: (onClickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void, isSelected: boolean, index: number, label: string) => JSX.Element;
-        renderItem: (item: React.ReactNode) => React.ReactNode;
-        renderThumbs: (children: React.ReactChild[]) => {}[];
-        statusFormatter: (current: number, total: number) => string;
-        selectedItem: number;
-        showArrows: boolean;
-        showIndicators: boolean;
-        showStatus: boolean;
-        showThumbs: boolean;
-        stopOnHover: boolean;
-        swipeScrollTolerance: number;
-        swipeable: boolean;
-        transitionTime: number;
-        verticalSwipe: string;
-        width: string;
-    };
+    static defaultProps: Props;
     constructor(props: Props);
@@ -103,0 +71,0 @@ componentDidMount(): void;

package.json

 {
     "name": "react-responsive-carousel",
-    "version": "3.2.11",
+    "version": "3.2.12",
     "description": "React Responsive Carousel",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -9,2 +9,5 @@ # React Responsive Carousel
 
+### Important
+I don't have any time available to keep maintaining this package. If you have any request, try to sort it within the comuninity. I'm able to merge pull requests that look safe from time to time but no commitment on timelines here. Feel free to fork it and publish under other name if you are in a hurry or to use another component.
+
 ### Features
@@ -11,0 +14,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

270905

increased by0.14%

Number of lines in readme file

165

increased by1.85%

Worsened metrics

Lines of code

4225

decreased by-0.14%

No dependency changes