react-animated-slider - npm Package Compare versions

Comparing version 0.4.4 to 0.5.0-beta0

build/index.js

@@ -102,4 +102,7 @@ module.exports =
 var DEFAULT_CLASSNAMES = {
-	previousButton: 'previousButton',
-	nextButton: 'nextButton',
+	buttons: {
+		previous: 'previousButton',
+		next: 'nextButton',
+		disabled: 'disabled'
+	},
 	track: 'track',
@@ -151,7 +154,8 @@ slide: 'slide',
 			    children = _props.children,
-			    className = _props.className,
+			    _props$className = _props.className,
+			    className = _props$className === undefined ? 'slider' : _props$className,
 			    _props$previousButton = _props.previousButton,
-			    previousButton = _props$previousButton === undefined ? 'previous' : _props$previousButton,
+			    previousButton = _props$previousButton === undefined ? '‹' : _props$previousButton,
 			    _props$nextButton = _props.nextButton,
-			    nextButton = _props$nextButton === undefined ? 'next' : _props$nextButton;
+			    nextButton = _props$nextButton === undefined ? '›' : _props$nextButton;
 
@@ -164,7 +168,7 @@ var classNames = this.getClassNames();
 				_react2.default.createElement(
-					'button',
+					'a',
 					{
+						href: 'javascript:void()',
 						onClick: this.previous,
-						className: classNames.previousButton,
-						disabled: isDisabled || !this.canGoPrevious()
+						className: '' + classNames.buttons.previous + (isDisabled || !this.canGoPrevious() ? ' ' + classNames.buttons.disabled : '')
 					},
@@ -174,7 +178,7 @@ previousButton
 				_react2.default.createElement(
-					'button',
+					'a',
 					{
+						href: 'javascript:void()',
 						onClick: this.next,
-						className: classNames.nextButton,
-						disabled: isDisabled || !this.canGoNext()
+						className: '' + classNames.buttons.next + (isDisabled || !this.canGoNext() ? ' ' + classNames.buttons.disabled : '')
 					},
@@ -346,10 +350,6 @@ nextButton
 		}
-		var touchDelta = _this3.currentElementStartPosition - _this3.currentElementPosition;
-		var minSwipeOffset = _this3.props.minSwipeOffset || 15;
-		if (Math.abs(touchDelta) > minSwipeOffset) {
-			if (touchDelta < 0) {
-				_this3.previous();
-			} else {
-				_this3.next();
-			}
+		if (_this3.currentElementStartPosition < _this3.currentElementPosition) {
+			_this3.previous();
+		} else {
+			_this3.next();
 		}
@@ -356,0 +356,0 @@ };

package.json

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

README.md

@@ -15,3 +15,2 @@ # react-animated-slider
 ## Features:
-
 - Ready to use slider component with animations
@@ -46,5 +45,3 @@ - Easy customization
 ```
-
 ## Properties:
-
 **slideIndex** - `number`, default `0`
@@ -66,6 +63,2 @@
 
-**minSwipeOffset** - `number`, default `15`(px)
-
-Minimum distance to swipe for triggering a navigation event
-
 **previousButton** - `ReactElement`, default  `string "previous"`
@@ -72,0 +65,0 @@

src/index.js

@@ -10,4 +10,7 @@ import React from 'react';
 const DEFAULT_CLASSNAMES = {
-	previousButton: 'previousButton',
-	nextButton: 'nextButton',
+	buttons: {
+		previous: 'previousButton',
+		next: 'nextButton',
+		disabled: 'disabled',
+	},
 	track: 'track',
@@ -191,10 +194,6 @@ slide: 'slide',
 		}
-		const touchDelta = this.currentElementStartPosition - this.currentElementPosition;
-		const minSwipeOffset = this.props.minSwipeOffset || 15;
-		if (Math.abs(touchDelta) > minSwipeOffset) {
-			if (touchDelta < 0) {
-				this.previous();
-			} else {
-				this.next();
-			}
+		if (this.currentElementStartPosition < this.currentElementPosition) {
+			this.previous();
+		} else {
+			this.next();
 		}
@@ -218,5 +217,5 @@ };
 			children,
-			className,
-			previousButton = 'previous',
-			nextButton = 'next',
+			className = 'slider',
+			previousButton = '‹',
+			nextButton = '›',
 		} = this.props;
@@ -227,16 +226,16 @@ const classNames = this.getClassNames();
 			<div className={className} ref={this.initTouchEvents}>
-				<button
+				<a
+					href="javascript:void()"
 					onClick={this.previous}
-					className={classNames.previousButton}
-					disabled={isDisabled || !this.canGoPrevious()}
+					className={`${classNames.buttons.previous}${isDisabled || !this.canGoPrevious() ? ` ${classNames.buttons.disabled}` : ''}`}
 				>
 					{previousButton}
-				</button>
-				<button
+				</a>
+				<a
+					href="javascript:void()"
 					onClick={this.next}
-					className={classNames.nextButton}
-					disabled={isDisabled || !this.canGoNext()}
+					className={`${classNames.buttons.next}${isDisabled || !this.canGoNext() ? ` ${classNames.buttons.disabled}` : ''}`}
 				>
 					{nextButton}
-				</button>
+				</a>
 				<div className={classNames.track}>
@@ -243,0 +242,0 @@ {React.Children.map(children, (item, index) =>

No alert changes

Improved metrics

Total package byte prevSize

255259

increased by1.14%

Lines of code

993

increased by15.2%

Worsened metrics

Number of lines in readme file

107

decreased by-6.14%

No dependency changes