react-animated-slider - npm Package Compare versions

Comparing version 0.2.3 to 0.3.1

build/index.js

@@ -77,2 +77,3 @@ module.exports =
 });
+exports.VERTICAL = exports.HORIZONTAL = undefined;
 
@@ -97,4 +98,6 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 var NEXT = 'next';
-var HORIZONTAL = 'horizontal';
-var VERTICAL = 'vertical';
+
+var HORIZONTAL = exports.HORIZONTAL = 'horizontal';
+var VERTICAL = exports.VERTICAL = 'vertical';
+
 var DEFAULT_CLASSNAMES = {
@@ -112,7 +115,4 @@ previousButton: 'previousButton',
 };
+var DEFAULT_DURATION = 2000;
 
-function addClassname(value) {
-	return value ? ' ' + value : '';
-}
-
 var Slider = function (_React$PureComponent) {
@@ -133,4 +133,2 @@ _inherits(Slider, _React$PureComponent);
 		    classNames = _this$props$className === undefined ? {} : _this$props$className,
-		    _this$props$duration = _this$props.duration,
-		    duration = _this$props$duration === undefined ? 2000 : _this$props$duration,
 		    _this$props$direction = _this$props.direction,
@@ -141,10 +139,7 @@ direction = _this$props$direction === undefined ? HORIZONTAL : _this$props$direction;
 			currentSlideIndex: slideIndex,
-			classNames: _extends({}, DEFAULT_CLASSNAMES, classNames),
-			animating: false,
-			duration: duration,
-			direction: direction
+			animating: false
 		};
 		_this.slideCount = _react2.default.Children.count(_this.props.children);
 		_this.swipeProperty = direction === HORIZONTAL ? 'left' : 'top';
-		_this.swipeEventProperty = direction === HORIZONTAL ? 'clientX' : 'clientY'; // client Y possibly not working in ie
+		_this.swipeEventProperty = direction === HORIZONTAL ? 'clientX' : 'clientY';
 		return _this;
@@ -165,6 +160,4 @@ }
 			    nextButton = _props$nextButton === undefined ? 'next' : _props$nextButton;
-			var _state = this.state,
-			    classNames = _state.classNames,
-			    currentSlideIndex = _state.currentSlideIndex;
 
+			var classNames = this.getClassNames();
 			var isDisabled = this.isDisabled();
@@ -202,3 +195,5 @@ return _react2.default.createElement(
 							onTouchEnd: !isDisabled ? _this2.handleTouchEnd : undefined,
-							className: classNames.slide + ' ' + _this2.getSlideClass(index) + addClassname(item.props.className)
+							className: [classNames.slide, _this2.getSlideClass(index), item.props.className].filter(function (v) {
+								return v;
+							}).join(' ')
 						});
@@ -245,3 +240,3 @@ })
 		_this3.setState({ animating: true, animation: animation });
-		setTimeout(_this3.onAnimationEnd, _this3.state.duration);
+		setTimeout(_this3.onAnimationEnd, _this3.props.duration || DEFAULT_DURATION);
 	};
@@ -263,8 +258,7 @@
 	this.getSlideClass = function (index) {
-		var _state2 = _this3.state,
-		    currentSlideIndex = _state2.currentSlideIndex,
-		    classNames = _state2.classNames,
-		    animating = _state2.animating,
-		    animation = _state2.animation;
+		var _state = _this3.state,
+		    currentSlideIndex = _state.currentSlideIndex,
+		    animation = _state.animation;
 
+		var classNames = _this3.getClassNames();
 		var lastSlideIndex = _this3.slideCount - 1;
@@ -289,17 +283,18 @@ if (index === currentSlideIndex) {
 
-	this.left = 0;
-
 	this.handleTouchStart = function (e) {
 		if (_this3.isDisabled()) return;
-		var _state$classNames = _this3.state.classNames,
-		    current = _state$classNames.current,
-		    previous = _state$classNames.previous,
-		    next = _state$classNames.next;
 
+		var _getClassNames = _this3.getClassNames(),
+		    current = _getClassNames.current,
+		    previous = _getClassNames.previous,
+		    next = _getClassNames.next;
+
 		var touch = e.touches[0];
-		_this3.startPageX = touch[_this3.swipeEventProperty];
+		_this3.pageStartPosition = touch[_this3.swipeEventProperty];
 		_this3.currentElement = _this3.sliderRef.getElementsByClassName(current)[0];
 		_this3.previousElement = _this3.sliderRef.getElementsByClassName(previous)[0];
 		_this3.nextElement = _this3.sliderRef.getElementsByClassName(next)[0];
-		_this3.startLeft = _this3.currentElement.getBoundingClientRect()[_this3.swipeProperty];
+		var touchDelta = _this3.currentElement.getBoundingClientRect()[_this3.swipeProperty];
+		_this3.currentElementStartPosition = 0;
+		_this3.currentElementPosition = 0;
 		_this3.sliderRef.addEventListener('touchmove', _this3.handleTouchMove, {
@@ -312,3 +307,3 @@ passive: false
 			_this3.previousElement.style.visibility = 'visible';
-			_this3.previousElementStartLeft = _this3.previousElement.getBoundingClientRect()[_this3.swipeProperty];
+			_this3.previousElementStartPosition = _this3.previousElement.getBoundingClientRect()[_this3.swipeProperty] - touchDelta;
 		}
@@ -318,3 +313,3 @@ if (_this3.nextElement) {
 			_this3.nextElement.style.transition = 'none';
-			_this3.nextElementStartLeft = _this3.nextElement.getBoundingClientRect()[_this3.swipeProperty];
+			_this3.nextElementStartPosition = _this3.nextElement.getBoundingClientRect()[_this3.swipeProperty] - touchDelta;
 		}
@@ -329,12 +324,12 @@ };
 			var touch = e.touches[0];
-			var newLeft = touch[_this3.swipeEventProperty] - _this3.startPageX;
-			_this3.left = _this3.startLeft + newLeft;
-			_this3.currentElement.style[_this3.swipeProperty] = _this3.left + 'px';
+			var newLeft = touch[_this3.swipeEventProperty] - _this3.pageStartPosition;
+			_this3.currentElementPosition = _this3.currentElementStartPosition + newLeft;
+			_this3.currentElement.style[_this3.swipeProperty] = _this3.currentElementPosition + 'px';
 			if (_this3.previousElement) {
-				_this3.previousElementLeft = _this3.previousElementStartLeft + newLeft;
-				_this3.previousElement.style[_this3.swipeProperty] = _this3.previousElementLeft + 'px';
+				_this3.previousElementPosition = _this3.previousElementStartPosition + newLeft;
+				_this3.previousElement.style[_this3.swipeProperty] = _this3.previousElementPosition + 'px';
 			}
 			if (_this3.nextElement) {
-				_this3.nextElementLeft = _this3.nextElementStartLeft + newLeft;
-				_this3.nextElement.style[_this3.swipeProperty] = _this3.nextElementLeft + 'px';
+				_this3.nextElementPosition = _this3.nextElementStartPosition + newLeft;
+				_this3.nextElement.style[_this3.swipeProperty] = _this3.nextElementPosition + 'px';
 			}
@@ -345,3 +340,3 @@ _this3.animating = false;
 
-	this.handleTouchEnd = function (e) {
+	this.handleTouchEnd = function () {
 		_this3.sliderRef.removeEventListener('touchmove', _this3.handleTouchMove);
@@ -360,3 +355,3 @@ _this3.currentElement.style.removeProperty(_this3.swipeProperty);
 		}
-		if (_this3.startLeft < _this3.left) {
+		if (_this3.currentElementStartPosition < _this3.currentElementPosition) {
 			_this3.previous();
@@ -366,12 +361,7 @@ } else {
 		}
-		_this3.startLeft = undefined;
-		_this3.startPageX = undefined;
-		_this3.currentElement;
-		_this3.previousElement;
-		_this3.nextElement;
-		_this3.previousElementStartLeft;
-		_this3.nextElementStartLeft;
-		_this3.previousElementLeft;
-		_this3.nextElementLeft;
 	};
+
+	this.getClassNames = function () {
+		return _extends({}, DEFAULT_CLASSNAMES, _this3.props.classNames);
+	};
 };
@@ -378,0 +368,0 @@

package.json

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

postcss.config.js

 module.exports = {
 	plugins: [
-		require("postcss-cssnext")
-	]
-};
+		require('postcss-cssnext'),
+	],
+};

README.md

 # react-animated-slider
-Animated slider component for react. 
+Animated slider component for react.
 
@@ -8,2 +8,13 @@ [Demo](https://p582xl40j.codesandbox.io/) - [Playground](https://codesandbox.io/s/p582xl40j)
 
+## Features:
+- Ready to use slider component with animations
+- Easy customization
+- Horizontal or vertical navigation
+- Swipe navigation on touch devices
+- Infinite slider
+- Supports any element as children
+- Clean DOM without dirty manipulations
+- Works with SSR
+- Works on IE11
+
 ## Install:
@@ -10,0 +21,0 @@

src/index.js

@@ -5,4 +5,6 @@ import React from 'react';
 const NEXT = 'next';
-const HORIZONTAL = 'horizontal';
-const VERTICAL = 'vertical';
+
+export const HORIZONTAL = 'horizontal';
+export const VERTICAL = 'vertical';
+
 const DEFAULT_CLASSNAMES = {
@@ -18,23 +20,21 @@ previousButton: 'previousButton',
 	animateIn: 'animateIn',
-	animateOut: 'animateOut'
+	animateOut: 'animateOut',
 };
+const DEFAULT_DURATION = 2000;
 
-function addClassname(value) {
-	return value ? ` ${value}` : '';
-}
-
 class Slider extends React.PureComponent {
 	constructor(props) {
 		super(props);
-		const { slideIndex = 0, classNames = {}, duration = 2000, direction = HORIZONTAL } = this.props;
+		const {
+			slideIndex = 0,
+			classNames = {},
+			direction = HORIZONTAL,
+		} = this.props;
 		this.state = {
 			currentSlideIndex: slideIndex,
-			classNames: { ...DEFAULT_CLASSNAMES, ...classNames },
 			animating: false,
-			duration,
-			direction,
 		};
 		this.slideCount = React.Children.count(this.props.children);
 		this.swipeProperty = direction === HORIZONTAL ? 'left' : 'top';
-		this.swipeEventProperty = direction === HORIZONTAL ? 'clientX' : 'clientY'; // client Y possibly not working in ie
+		this.swipeEventProperty = direction === HORIZONTAL ? 'clientX' : 'clientY';
 	}
@@ -46,3 +46,3 @@
 			animating: false,
-			animation: undefined
+			animation: undefined,
 		});
@@ -64,3 +64,3 @@ };
 		this.setState({ animating: true, animation });
-		setTimeout(this.onAnimationEnd, this.state.duration);
+		setTimeout(this.onAnimationEnd, this.props.duration || DEFAULT_DURATION);
 	};
@@ -83,4 +83,8 @@
 
-	getSlideClass = index => {
-		const { currentSlideIndex, classNames, animating, animation } = this.state;
+	getSlideClass = (index) => {
+		const {
+			currentSlideIndex,
+			animation,
+		} = this.state;
+		const classNames = this.getClassNames();
 		const lastSlideIndex = this.slideCount - 1;
@@ -97,4 +101,3 @@ if (index === currentSlideIndex) {
 		) {
-			if (animation === PREVIOUS)
-				return `${classNames.animateIn} ${classNames.previous}`;
+			if (animation === PREVIOUS) return `${classNames.animateIn} ${classNames.previous}`;
 			if (animation === NEXT) return classNames.hidden;
@@ -106,4 +109,3 @@ return classNames.previous;
 		) {
-			if (animation === NEXT)
-				return `${classNames.animateIn} ${classNames.next}`;
+			if (animation === NEXT) return `${classNames.animateIn} ${classNames.next}`;
 			if (animation === PREVIOUS) return classNames.hidden;
@@ -116,36 +118,38 @@ return classNames.next;
 	sliderRef;
-	startPageX;
-	startLeft;
-	left = 0;
+	pageStartPosition;
 
 	currentElement;
+	currentElementStartPosition;
+	currentElementPosition;
 	previousElement;
+	previousElementStartPosition;
+	previousElementPosition;
 	nextElement;
-	previousElementStartLeft;
-	nextElementStartLeft;
-	previousElementLeft;
-	nextElementLeft;
+	nextElementStartPosition;
+	nextElementPosition;
 
-	handleTouchStart = e => {
+	handleTouchStart = (e) => {
 		if (this.isDisabled()) return;
-		const { current, previous, next } = this.state.classNames;
+		const { current, previous, next } = this.getClassNames();
 		const touch = e.touches[0];
-		this.startPageX = touch[this.swipeEventProperty];
+		this.pageStartPosition = touch[this.swipeEventProperty];
 		this.currentElement = this.sliderRef.getElementsByClassName(current)[0];
 		this.previousElement = this.sliderRef.getElementsByClassName(previous)[0];
 		this.nextElement = this.sliderRef.getElementsByClassName(next)[0];
-		this.startLeft = this.currentElement.getBoundingClientRect()[this.swipeProperty];
+		const touchDelta = this.currentElement.getBoundingClientRect()[this.swipeProperty];
+		this.currentElementStartPosition = 0;
+		this.currentElementPosition = 0;
 		this.sliderRef.addEventListener('touchmove', this.handleTouchMove, {
-			passive: false
+			passive: false,
 		});
-		this.currentElement.style.transition = `none`;
+		this.currentElement.style.transition = 'none';
 		if (this.previousElement) {
-			this.previousElement.style.transition = `none`;
-			this.previousElement.style.visibility = `visible`;
-			this.previousElementStartLeft = this.previousElement.getBoundingClientRect()[this.swipeProperty];
+			this.previousElement.style.transition = 'none';
+			this.previousElement.style.visibility = 'visible';
+			this.previousElementStartPosition = this.previousElement.getBoundingClientRect()[this.swipeProperty] - touchDelta;
 		}
 		if (this.nextElement) {
-			this.nextElement.style.visibility = `visible`;
-			this.nextElement.style.transition = `none`;
-			this.nextElementStartLeft = this.nextElement.getBoundingClientRect()[this.swipeProperty];
+			this.nextElement.style.visibility = 'visible';
+			this.nextElement.style.transition = 'none';
+			this.nextElementStartPosition = this.nextElement.getBoundingClientRect()[this.swipeProperty] - touchDelta;
 		}
@@ -155,3 +159,3 @@ };
 	animating = false;
-	handleTouchMove = e => {
+	handleTouchMove = (e) => {
 		e.preventDefault();
@@ -162,12 +166,12 @@ this.animating =
 				const touch = e.touches[0];
-				const newLeft = touch[this.swipeEventProperty] - this.startPageX;
-				this.left = this.startLeft + newLeft;
-				this.currentElement.style[this.swipeProperty] = `${this.left}px`;
+				const newLeft = touch[this.swipeEventProperty] - this.pageStartPosition;
+				this.currentElementPosition = this.currentElementStartPosition + newLeft;
+				this.currentElement.style[this.swipeProperty] = `${this.currentElementPosition}px`;
 				if (this.previousElement) {
-					this.previousElementLeft = this.previousElementStartLeft + newLeft;
-					this.previousElement.style[this.swipeProperty] = `${this.previousElementLeft}px`;
+					this.previousElementPosition = this.previousElementStartPosition + newLeft;
+					this.previousElement.style[this.swipeProperty] = `${this.previousElementPosition}px`;
 				}
 				if (this.nextElement) {
-					this.nextElementLeft = this.nextElementStartLeft + newLeft;
-					this.nextElement.style[this.swipeProperty] = `${this.nextElementLeft}px`;
+					this.nextElementPosition = this.nextElementStartPosition + newLeft;
+					this.nextElement.style[this.swipeProperty] = `${this.nextElementPosition}px`;
 				}
@@ -178,3 +182,3 @@ this.animating = false;
 
-	handleTouchEnd = e => {
+	handleTouchEnd = () => {
 		this.sliderRef.removeEventListener('touchmove', this.handleTouchMove);
@@ -193,3 +197,3 @@ this.currentElement.style.removeProperty(this.swipeProperty);
 		}
-		if (this.startLeft < this.left) {
+		if (this.currentElementStartPosition < this.currentElementPosition) {
 			this.previous();
@@ -199,13 +203,6 @@ } else {
 		}
-		this.startLeft = undefined;
-		this.startPageX = undefined;
-		this.currentElement;
-		this.previousElement;
-		this.nextElement;
-		this.previousElementStartLeft;
-		this.nextElementStartLeft;
-		this.previousElementLeft;
-		this.nextElementLeft;
 	};
 
+	getClassNames = () => ({ ...DEFAULT_CLASSNAMES, ...this.props.classNames })
+
 	render() {
@@ -218,3 +215,3 @@ const {
 		} = this.props;
-		const { classNames, currentSlideIndex } = this.state;
+		const classNames = this.getClassNames();
 		const isDisabled = this.isDisabled();
@@ -243,9 +240,4 @@ return (
 							onTouchEnd: !isDisabled ? this.handleTouchEnd : undefined,
-							className:
-								classNames.slide +
-								' ' +
-								this.getSlideClass(index) +
-								addClassname(item.props.className)
-						})
-					)}
+							className: [classNames.slide, this.getSlideClass(index), item.props.className].filter(v => v).join(' '),
+						}))}
 				</div>
@@ -252,0 +244,0 @@ </div>

webpack.config.js

 const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
@@ -11,3 +11,3 @@ const extractCSS = new ExtractTextPlugin('[name].css');
 		filename: 'index.js',
-		libraryTarget: 'commonjs2'
+		libraryTarget: 'commonjs2',
 	},
@@ -27,12 +27,12 @@ module: {
 							'transform-class-properties',
-							'transform-react-jsx'
-						]
-					}
-				}
-			}
-		]
+							'transform-react-jsx',
+						],
+					},
+				},
+			},
+		],
 	},
 	externals: {
-		'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
-	}
+		react: 'commonjs react', // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
+	},
 };
@@ -43,3 +43,3 @@
 		horizontal: './src/css/horizontal.css',
-		vertical: './src/css/vertical.css'
+		vertical: './src/css/vertical.css',
 	},
@@ -55,3 +55,3 @@ output: {
 				use: extractCSS.extract(['css-loader', 'postcss-loader']),
-			}
+			},
 		],
@@ -61,6 +61,6 @@ },
 	externals: {
-		'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
+		react: 'commonjs react', // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
 	},
 };
 
-module.exports = [ sliderConfig, cssConfig ];
+module.exports = [sliderConfig, cssConfig];

No alert changes

Improved metrics

Number of lines in readme file

101

increased by12.22%

Worsened metrics

Total package byte prevSize

211259

decreased by-0.19%

Lines of code

736

decreased by-2.65%

No dependency changes