react-animated-slider - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

build/index.js

@@ -137,3 +137,3 @@ module.exports =
 		};
-		_this.animatedSlideCount = 0;
+		_this.slideCount = _react2.default.Children.count(_this.props.children);
 		return _this;
@@ -156,4 +156,5 @@ }
 			    classNames = _state.classNames,
-			    animating = _state.animating;
+			    currentSlideIndex = _state.currentSlideIndex;
 
+			var isDisabled = this.isDisabled();
 			return _react2.default.createElement(
@@ -167,3 +168,3 @@ 'div',
 						className: classNames.previousButton,
-						disabled: animating
+						disabled: isDisabled || !this.canGoPrevious()
 					},
@@ -177,3 +178,3 @@ previousButton
 						className: classNames.nextButton,
-						disabled: animating
+						disabled: isDisabled || !this.canGoNext()
 					},
@@ -188,4 +189,4 @@ nextButton
 							key: index,
-							onTouchStart: _this2.handleTouchStart,
-							onTouchEnd: _this2.handleTouchEnd,
+							onTouchStart: !isDisabled && _this2.handleTouchStart,
+							onTouchEnd: !isDisabled && _this2.handleTouchEnd,
 							className: classNames.slide + ' ' + _this2.getSlideClass(index) + addClassname(item.props.className)
@@ -213,4 +214,20 @@ });
 
+	this.isDisabled = function () {
+		return _this3.slideCount < 2 || _this3.state.animating || _this3.props.disabled;
+	};
+
+	this.isInfinite = function () {
+		return _this3.slideCount > 2 && _this3.props.infinite !== false;
+	};
+
+	this.canGoPrevious = function () {
+		return _this3.isInfinite() || _this3.state.currentSlideIndex > 0;
+	};
+
+	this.canGoNext = function () {
+		return _this3.isInfinite() || _this3.state.currentSlideIndex < _this3.slideCount - 1;
+	};
+
 	this.goTo = function (index, animation) {
-		if (_this3.state.animating) return;
+		if (_this3.isDisabled()) return;
 		_this3.nextSlideIndex = index;
@@ -222,4 +239,5 @@ _this3.setState({ animating: true, animation: animation });
 	this.previous = function () {
+		if (!_this3.canGoPrevious()) return;
 		var nextSlideIndex = _this3.state.currentSlideIndex - 1;
-		var actualNextSlide = nextSlideIndex >= 0 ? nextSlideIndex : _this3.props.children.length - 1;
+		var actualNextSlide = nextSlideIndex >= 0 ? nextSlideIndex : _this3.slideCount - 1;
 		_this3.goTo(actualNextSlide, PREVIOUS);
@@ -229,3 +247,4 @@ };
 	this.next = function () {
-		var nextSlideIndex = (_this3.state.currentSlideIndex + 1) % _this3.props.children.length;
+		if (!_this3.canGoNext()) return;
+		var nextSlideIndex = (_this3.state.currentSlideIndex + 1) % _this3.slideCount;
 		_this3.goTo(nextSlideIndex, NEXT);
@@ -241,6 +260,9 @@ };
 
-		var lastSlideIndex = _this3.props.children.length - 1;
+		var lastSlideIndex = _this3.slideCount - 1;
 		if (index === currentSlideIndex) {
 			if (animation) return classNames.animateOut + ' ' + classNames[animation];
 			return classNames.current;
+		} else if (_this3.slideCount === 2) {
+			if (animation) return classNames.animateIn + ' ' + classNames[animation];
+			return index < currentSlideIndex ? classNames.previous : classNames.next;
 		} else if (index === currentSlideIndex - 1 || currentSlideIndex === 0 && index === lastSlideIndex) {
@@ -261,3 +283,3 @@ if (animation === PREVIOUS) return classNames.animateIn + ' ' + classNames.previous;
 	this.handleTouchStart = function (e) {
-		if (_this3.state.animating) return;
+		if (_this3.isDisabled()) return;
 		var _state$classNames = _this3.state.classNames,
@@ -302,3 +324,2 @@ previous = _state$classNames.previous,
 		e.currentTarget.removeEventListener('touchmove', _this3.handleTouchMove);
-		console.log('this.startLeft < this.left', _this3.startLeft, _this3.left);
 		e.target.style.removeProperty('left');
@@ -305,0 +326,0 @@ e.target.style.removeProperty('transition');

package.json

 {
   "name": "react-animated-slider",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Animated slider component for react",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

 # react-animated-slider
-Animated slider component for react
+Animated slider component for react. 
 
@@ -28,19 +28,27 @@ [Demo](https://p582xl40j.codesandbox.io/) - [Playground](https://codesandbox.io/s/p582xl40j)
 ## Properties:
-**slideIndex** - number, default 0
+**slideIndex** - `number`, default `0`
 
 Index of the slide that will be initially displayed.
 
-**duration** - number, default 2000
+**duration** - `number`, default `2000`(ms)
 
-Number of milliseconds before removing the `animateIn` and `animateOut` classes and adding `current`
+Duration of the animation in milliseconds. It is used to remove the `animateIn` and `animateOut` classNames and assign `current` after the transition has completed.
 
-**previousButton** - ReactElement, default "previous"
+**disabled** - `boolean`, default `false`
 
+Disable slider navigation
+
+**infinite** - `boolean`, default `true`
+
+Enable or disable infinite loop through slides. Sliders with only 2 children will have this option set to `false`
+
+**previousButton** - `ReactElement`, default  `string "previous"`
+
 Will be rendered inside the previous button
 
-**nextButton** - ReactElement, default "next"
+**nextButton** - `ReactElement`, default `string "next"`
 
 Will be rendered inside the next button
 
-**classNames** object, default
+**classNames** `object`, default
 
@@ -62,3 +70,3 @@ ```js
 
-CSS classnames that will be apllied to the slides.
+Object representing the CSS classNames that will be apllied to the slides.
 
@@ -65,0 +73,0 @@ ### Classnames

src/index.js

@@ -32,3 +32,3 @@ import React from 'react';
 		};
-		this.animatedSlideCount = 0;
+		this.slideCount = React.Children.count(this.props.children);
 	}
@@ -44,4 +44,13 @@
 
+	isDisabled = () =>
+		this.slideCount < 2 ||
+		this.state.animating ||
+		this.props.disabled;
+
+	isInfinite = () => this.slideCount > 2 && this.props.infinite !== false;
+	canGoPrevious = () => this.isInfinite() || this.state.currentSlideIndex > 0;
+	canGoNext = () => this.isInfinite() || this.state.currentSlideIndex < this.slideCount - 1;
+
 	goTo = (index, animation) => {
-		if (this.state.animating) return;
+		if (this.isDisabled()) return;
 		this.nextSlideIndex = index;
@@ -53,5 +62,6 @@ this.setState({ animating: true, animation });
 	previous = () => {
+		if (!this.canGoPrevious()) return;
 		const nextSlideIndex = this.state.currentSlideIndex - 1;
 		const actualNextSlide =
-			nextSlideIndex >= 0 ? nextSlideIndex : this.props.children.length - 1;
+			nextSlideIndex >= 0 ? nextSlideIndex : this.slideCount - 1;
 		this.goTo(actualNextSlide, PREVIOUS);
@@ -61,4 +71,5 @@ };
 	next = () => {
+		if (!this.canGoNext()) return;
 		const nextSlideIndex =
-			(this.state.currentSlideIndex + 1) % this.props.children.length;
+			(this.state.currentSlideIndex + 1) % this.slideCount;
 		this.goTo(nextSlideIndex, NEXT);
@@ -69,6 +80,9 @@ };
 		const { currentSlideIndex, classNames, animating, animation } = this.state;
-		const lastSlideIndex = this.props.children.length - 1;
+		const lastSlideIndex = this.slideCount - 1;
 		if (index === currentSlideIndex) {
 			if (animation) return `${classNames.animateOut} ${classNames[animation]}`;
 			return classNames.current;
+		} else if (this.slideCount === 2) {
+			if (animation) return `${classNames.animateIn} ${classNames[animation]}`;
+			return index < currentSlideIndex ? classNames.previous : classNames.next;
 		} else if (
@@ -106,3 +120,3 @@ index === currentSlideIndex - 1 ||
 	handleTouchStart = e => {
-		if (this.state.animating) return;
+		if (this.isDisabled()) return;
 		const { previous, next } = this.state.classNames;
@@ -147,3 +161,2 @@ const touch = e.touches[0];
 		e.currentTarget.removeEventListener('touchmove', this.handleTouchMove);
-		console.log('this.startLeft < this.left', this.startLeft, this.left);
 		e.target.style.removeProperty('left');
@@ -171,5 +184,6 @@ e.target.style.removeProperty('transition');
 			previousButton = 'previous',
-			nextButton = 'next'
+			nextButton = 'next',
 		} = this.props;
-		const { classNames, animating } = this.state;
+		const { classNames, currentSlideIndex } = this.state;
+		const isDisabled = this.isDisabled();
 		return (
@@ -180,3 +194,3 @@ <div className={className}>
 					className={classNames.previousButton}
-					disabled={animating}
+					disabled={isDisabled || !this.canGoPrevious()}
 				>
@@ -188,3 +202,3 @@ {previousButton}
 					className={classNames.nextButton}
-					disabled={animating}
+					disabled={isDisabled || !this.canGoNext()}
 				>
@@ -197,4 +211,4 @@ {nextButton}
 							key: index,
-							onTouchStart: this.handleTouchStart,
-							onTouchEnd: this.handleTouchEnd,
+							onTouchStart: !isDisabled && this.handleTouchStart,
+							onTouchEnd: !isDisabled && this.handleTouchEnd,
 							className:
@@ -201,0 +215,0 @@ classNames.slide +

No alert changes

Improved metrics

Total package byte prevSize

209280

increased by0.87%

Lines of code

699

increased by4.33%

Number of lines in readme file

90

increased by9.76%

No dependency changes