LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Jed Watson
+Copyright (c) 2017 Jed Watson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -23,8 +23,7 @@ React-HammerJS wraps a React component, binding Hammer events to it so it can fi
 
 ## Properties
 
-The following events are supported:
-
+### Event Listener properties
 * `onTap`
 * `onDoubleTap`
 * `onPan`
@@ -45,12 +44,12 @@ The following events are supported:
 * `onRotateMove`
 * `onRotateStart`
 * `onSwipe`
+* `action` - like the `onTap` event handler but will also be fired `onPress`.
 
-You can also provide an `action` property which is like the `onTap` event handler but will also be fired `onPress`.
-
-If you provide the prop `direction` the `pan` and `swipe` events will support `Hammer.DIRECTION_(NONE/LEFT/RIGHT/UP/DOWN/HORIZONTAL/VERTICAL/ALL)`.
+### Behavior properties
+* `direction` - (string) `'DIRECTION_ALL'` | `'DIRECTION_HORIZONTAL'` | `'DIRECTION_VERTICAL'`.  Used to restrict the `pan` and `swipe` direction. These string values may also work: `'DIRECTION_NONE'` |`'DIRECTION_LEFT'` | `'DIRECTION_RIGHT'` | `'DIRECTION_UP'` | `'DIRECTION_DOWN'`.
 
-The `options` property can be used to configure the Hammer manager. These properties will be merged with the default ones.
+* `options` - can be used to configure the Hammer manager. These properties will be merged with the default ones.
 
 ### Example
 
@@ -98,4 +97,4 @@ Disabled events are detailed in the hammer.js api documentation:
 
 # License
 
-MIT Licensed. Copyright (c) Jed Watson 2016.
+MIT Licensed. Copyright (c) Jed Watson 2017.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "react-hammerjs",
   "main": "dist/react-hammerjs.min.js",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "homepage": "https://github.com/JedWatson/react-hammerjs",
   "authors": [
     "Jed Watson"

dist/react-hammerjs.js

@@ -1,18 +1,43 @@
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Hammer = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 (function (global){
-var React = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
-var ReactDOM = (typeof window !== "undefined" ? window['ReactDOM'] : typeof global !== "undefined" ? global['ReactDOM'] : null);
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = (typeof window !== "undefined" ? window['ReactDOM'] : typeof global !== "undefined" ? global['ReactDOM'] : null);
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 // require('hammerjs') when in a browser. This is safe because Hammer is only
 // invoked in componentDidMount, which is not executed on the server.
-var Hammer = (typeof window !== 'undefined') ? require('hammerjs') : undefined;
+var Hammer = typeof window !== 'undefined' ? require('hammerjs') : undefined;
 
 var privateProps = {
 	children: true,
 	direction: true,
 	options: true,
 	recognizeWith: true,
-	vertical: true,
+	vertical: true
 };
 
 /**
@@ -41,21 +66,25 @@ var handlerToEvent = {
 	onRotateMove: 'rotatemove',
 	onRotateStart: 'rotatestart',
 	onSwipe: 'swipe',
-	onTap: 'tap',
+	onSwipeRight: 'swiperight',
+	onSwipeLeft: 'swipeleft',
+	onSwipeUp: 'swipeup',
+	onSwipeDown: 'swipedown',
+	onTap: 'tap'
 };
 
 Object.keys(handlerToEvent).forEach(function (i) {
 	privateProps[i] = true;
 });
 
-function updateHammer (hammer, props) {
+function updateHammer(hammer, props) {
 	if (props.hasOwnProperty('vertical')) {
 		console.warn('vertical is deprecated, please use `direction` instead');
 	}
 
 	var directionProp = props.direction;
 	if (directionProp || props.hasOwnProperty('vertical')) {
-		direction = directionProp ? directionProp : (props.vertical ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL');
+		var direction = directionProp ? directionProp : props.vertical ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL';
 		hammer.get('pan').set({ direction: Hammer[direction] });
 		hammer.get('swipe').set({ direction: Hammer[direction] });
 	}
@@ -66,6 +95,9 @@ function updateHammer (hammer, props) {
 				Object.keys(props.options.recognizers).forEach(function (gesture) {
 					var recognizer = hammer.get(gesture);
 					recognizer.set(props.options.recognizers[gesture]);
+					if (props.options.recognizers[gesture].requireFailure) {
+						recognizer.requireFailure(props.options.recognizers[gesture].requireFailure);
+					}
 				}, this);
 			} else {
 				var key = option;
@@ -92,50 +124,71 @@ function updateHammer (hammer, props) {
 	});
 }
 
-var HammerComponent = React.createClass({
+var HammerComponent = function (_React$Component) {
+	_inherits(HammerComponent, _React$Component);
 
-	displayName: 'Hammer',
+	function HammerComponent() {
+		_classCallCheck(this, HammerComponent);
 
-	propTypes: {
-		className: React.PropTypes.string,
-	},
-
-	componentDidMount: function () {
-		this.hammer = new Hammer(ReactDOM.findDOMNode(this));
-		updateHammer(this.hammer, this.props);
-	},
+		return _possibleConstructorReturn(this, (HammerComponent.__proto__ || Object.getPrototypeOf(HammerComponent)).apply(this, arguments));
+	}
 
-	componentDidUpdate: function () {
-		if (this.hammer) {
+	_createClass(HammerComponent, [{
+		key: 'componentDidMount',
+		value: function componentDidMount() {
+			this.hammer = new Hammer(this.domElement);
 			updateHammer(this.hammer, this.props);
 		}
-	},
-
-	componentWillUnmount: function () {
-		if (this.hammer) {
-			this.hammer.stop();
-			this.hammer.destroy();
+	}, {
+		key: 'componentDidUpdate',
+		value: function componentDidUpdate() {
+			if (this.hammer) {
+				updateHammer(this.hammer, this.props);
+			}
 		}
-		this.hammer = null;
-	},
-
-	render: function () {
-		var props = {};
-
-		Object.keys(this.props).forEach(function (i) {
-			if (!privateProps[i]) {
-				props[i] = this.props[i];
+	}, {
+		key: 'componentWillUnmount',
+		value: function componentWillUnmount() {
+			if (this.hammer) {
+				this.hammer.stop();
+				this.hammer.destroy();
 			}
-		}, this);
+			this.hammer = null;
+		}
+	}, {
+		key: 'render',
+		value: function render() {
+			var props = {};
+
+			Object.keys(this.props).forEach(function (i) {
+				if (!privateProps[i]) {
+					props[i] = this.props[i];
+				}
+			}, this);
+
+			var self = this;
+			props.ref = function (domElement) {
+				if (self.props.ref) {
+					self.props.ref(domElement);
+				}
+				self.domElement = domElement;
+			};
+
+			// Reuse the child provided
+			// This makes it flexible to use whatever element is wanted (div, ul, etc)
+			return _react2.default.cloneElement(_react2.default.Children.only(this.props.children), props);
+		}
+	}]);
 
-		// Reuse the child provided
-		// This makes it flexible to use whatever element is wanted (div, ul, etc)
-		return React.cloneElement(React.Children.only(this.props.children), props);
-	}
-});
+	return HammerComponent;
+}(_react2.default.Component);
 
-module.exports = HammerComponent;
+HammerComponent.displayName = 'Hammer';
+HammerComponent.propTypes = {
+	className: _propTypes2.default.string
+};
+exports.default = HammerComponent;
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"hammerjs":undefined}]},{},[1])(1)
+},{"hammerjs":undefined,"prop-types":undefined}]},{},[1])(1)
 });

gulpfile.js

@@ -11,7 +11,7 @@ var uglify = require('gulp-uglify');
 var gutil = require('gulp-util');
 var merge = require('merge-stream');
 var source = require('vinyl-source-stream');
-
+var babelify = require('babelify');
 
 /**
  * Config
@@ -26,6 +26,7 @@ var COMPONENT_NAME = 'Hammer';
 
 var DEPENDENCIES = [
 	'hammerjs',
+	'prop-types',
 	'react',
 	'react-dom',
 ];
@@ -44,6 +45,17 @@ gulp.task('build:dist', ['prepare:dist'], function () {
 	var standalone = browserify('./' + SRC_PATH + '/' + PACKAGE_FILE, {
 			standalone: COMPONENT_NAME
 		})
+		.transform(babelify.configure({
+			presets: [
+				["env", {
+				  targets: {
+					browsers: ["last 2 versions", "ie 10"]
+				  },
+				}]
+			  ],
+			  'plugins': ['transform-class-properties'],
+			ignore: /(bower_components)|(node_modules)/
+		}))
 		.transform(shim);
 
 	DEPENDENCIES.forEach(function (pkg) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hammerjs",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "ReactJS / HammerJS integration. Support touch events in your React app.",
   "main": "src/Hammer.js",
   "author": "Jed Watson",
@@ -13,24 +13,27 @@
     "hammerjs": "^2.0.8"
   },
   "devDependencies": {
-    "browserify": "^13.0.1",
+    "babel-preset-env": "^1.6.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babelify": "^7.3.0",
+    "browserify": "^14.4.0",
     "browserify-shim": "^3.8.12",
     "chalk": "^1.1.3",
     "del": "^2.2.1",
     "gulp": "^3.9.1",
     "gulp-bump": "^2.2.0",
-    "gulp-git": "^1.8.0",
+    "gulp-git": "^2.4.0",
     "gulp-rename": "^1.2.2",
     "gulp-streamify": "^1.0.2",
     "gulp-uglify": "^1.5.4",
     "gulp-util": "^3.0.7",
     "merge-stream": "^1.0.0",
-    "react": "^15.2.0",
-    "react-dom": "^15.2.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "vinyl-source-stream": "^1.1.0"
   },
   "peerDependencies": {
-    "react": "^0.14.3 || ^15.0.0"
+    "react": "^0.14.3 || ^15.0.0 || ^16.0.0"
   },
   "browserify-shim": {
     "react": "global:React",