import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; import _createClass from 'babel-runtime/helpers/createClass'; import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; import _inherits from 'babel-runtime/helpers/inherits'; import React, { Component } from 'react'; import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; // https://github.com/hammerjs/hammer.js/issues/930 // https://github.com/JedWatson/react-hammerjs/issues/14 // 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 privateProps = { children: true, direction: true, options: true, recognizeWith: true, vertical: true }; /** * Hammer Component * ================ */ var handlerToEvent = { action: 'tap press', onDoubleTap: 'doubletap', onPan: 'pan', onPanCancel: 'pancancel', onPanEnd: 'panend', onPanStart: 'panstart', onPinch: 'pinch', onPinchCancel: 'pinchcancel', onPinchEnd: 'pinchend', onPinchIn: 'pinchin', onPinchOut: 'pinchout', onPinchStart: 'pinchstart', onPress: 'press', onPressUp: 'pressup', onRotate: 'rotate', onRotateCancel: 'rotatecancel', onRotateEnd: 'rotateend', onRotateMove: 'rotatemove', onRotateStart: 'rotatestart', onSwipe: 'swipe', onSwipeRight: 'swiperight', onSwipeLeft: 'swipeleft', onSwipeUp: 'swipeup', onSwipeDown: 'swipedown', onTap: 'tap' }; Object.keys(handlerToEvent).forEach(function (i) { privateProps[i] = true; }); function updateHammer(hammer, props) { var _this = this; if (props.hasOwnProperty('vertical')) { console.warn('vertical is deprecated, please use `direction` instead'); } var directionProp = props.direction; if (directionProp || props.hasOwnProperty('vertical')) { var direction = directionProp ? directionProp : props.vertical ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL'; hammer.get('pan').set({ direction: Hammer[direction] }); hammer.get('swipe').set({ direction: Hammer[direction] }); } if (props.options) { Object.keys(props.options).forEach(function (option) { if (option === 'recognizers') { 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; var optionObj = {}; optionObj[key] = props.options[option]; hammer.set(optionObj); } }, this); } if (props.recognizeWith) { Object.keys(props.recognizeWith).forEach(function (gesture) { var recognizer = hammer.get(gesture); recognizer.recognizeWith(props.recognizeWith[gesture]); }, this); } Object.keys(props).forEach(function (p) { var e = handlerToEvent[p]; if (e) { hammer.off(e); hammer.on(e, props[p]); } }); } var HammerComponent = function (_React$Component) { _inherits(HammerComponent, _React$Component); function HammerComponent() { _classCallCheck(this, HammerComponent); return _possibleConstructorReturn(this, (HammerComponent.__proto__ || Object.getPrototypeOf(HammerComponent)).apply(this, arguments)); } _createClass(HammerComponent, [{ key: 'componentDidMount', value: function componentDidMount() { this.hammer = new Hammer(ReactDOM.findDOMNode(this)); updateHammer(this.hammer, this.props); } }, { key: 'componentDidUpdate', value: function componentDidUpdate() { if (this.hammer) { updateHammer(this.hammer, this.props); } } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { if (this.hammer) { this.hammer.stop(); this.hammer.destroy(); } 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); // 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; }(React.Component); HammerComponent.displayName = 'Hammer'; HammerComponent.propTypes = { className: PropTypes.string }; export default HammerComponent;