From 30f7dd16d5b2d4c01a2c747d22c1f2268b99abfd Mon Sep 17 00:00:00 2001 From: goncy Date: Thu, 5 Apr 2018 16:37:51 -0300 Subject: [PATCH 1/6] Update data on props data change --- src/main.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/main.js b/src/main.js index d6b90cb..401dd2e 100755 --- a/src/main.js +++ b/src/main.js @@ -61,6 +61,14 @@ class MotionStack extends React.Component { window.removeEventListener('mouseup', this.handleMouseUp); } + componentWillReceiveProps(nextProps) { + if (this.props.data.length !== nextProps.data.length) { + this.setState({ + data: nextProps.data + }) + } + } + handleMouseDown = (id, pressX, { pageX }) => { if (this.el) { this.setState(prevState => ({ From 0dc0be7153b6c82736f0d4f1ecf1df48292eea4d Mon Sep 17 00:00:00 2001 From: goncy Date: Fri, 1 Jun 2018 17:53:09 -0300 Subject: [PATCH 2/6] Builds --- .gitignore | 3 - build/cjs/react-motion-stack.js | 456 +++++++++++++++++++++++++++++++ build/esm/react-motion-stack.js | 452 ++++++++++++++++++++++++++++++ build/motion-stack.css | 13 + package-lock.json | 468 +++++++++++++++++--------------- package.json | 17 +- 6 files changed, 1179 insertions(+), 230 deletions(-) create mode 100644 build/cjs/react-motion-stack.js create mode 100644 build/esm/react-motion-stack.js create mode 100644 build/motion-stack.css diff --git a/.gitignore b/.gitignore index d30f40e..12752e0 100755 --- a/.gitignore +++ b/.gitignore @@ -6,9 +6,6 @@ # testing /coverage -# production -/build - # misc .DS_Store .env.local diff --git a/build/cjs/react-motion-stack.js b/build/cjs/react-motion-stack.js new file mode 100644 index 0000000..19452e7 --- /dev/null +++ b/build/cjs/react-motion-stack.js @@ -0,0 +1,456 @@ +'use strict'; + +function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } + +var React = _interopDefault(require('react')); +var PropTypes = _interopDefault(require('prop-types')); +var reactMotion = require('react-motion'); + +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a 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); + } +} + +function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; +} + +function _extends() { + _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; + }; + + return _extends.apply(this, arguments); +} + +function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + + 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; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; +} + +function _possibleConstructorReturn(self, call) { + if (call && (typeof call === "object" || typeof call === "function")) { + return call; + } + + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; +} + +var Fragment = React.Fragment || 'div'; + +var clamp = function clamp(n, min, max) { + return Math.max(Math.min(n, max), min); +}; + +var MotionStack = +/*#__PURE__*/ +function (_React$Component) { + _inherits(MotionStack, _React$Component); + + function MotionStack(_ref) { + var _this; + + var data = _ref.data; + _classCallCheck(this, MotionStack); + _this = _possibleConstructorReturn(this, (MotionStack.__proto__ || Object.getPrototypeOf(MotionStack)).apply(this, arguments)); + + _initialiseProps.call(_assertThisInitialized(_this)); + + _this.state = { + topDeltaX: 0, + mouseX: 0, + isPressed: false, + pressedId: null, + swiped: false, + swipedId: null, + direction: null, + data: data + }; + return _this; + } + + _createClass(MotionStack, [{ + key: "componentDidMount", + value: function componentDidMount() { + window.addEventListener('touchmove', this.handleTouchMove); + window.addEventListener('touchend', this.handleMouseUp); + window.addEventListener('mousemove', this.handleMouseMove); + window.addEventListener('mouseup', this.handleMouseUp); + } + }, { + key: "componentWillUnMount", + value: function componentWillUnMount() { + window.removeEventListener('touchmove', this.handleTouchMove); + window.removeEventListener('touchend', this.handleMouseUp); + window.removeEventListener('mousemove', this.handleMouseMove); + window.removeEventListener('mouseup', this.handleMouseUp); + } + }, { + key: "componentWillReceiveProps", + value: function componentWillReceiveProps(nextProps) { + if (this.props.data.length !== nextProps.data.length) { + this.setState({ + data: nextProps.data + }); + } + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var _state = this.state, + swipedId = _state.swipedId, + data = _state.data; + var _props = this.props, + renderCount = _props.renderCount, + renderButtons = _props.renderButtons; + return React.createElement(Fragment, null, React.createElement("div", { + className: "motion-card-stack", + ref: function ref(el) { + return _this2.el = el; + } + }, data.map(function (_ref2, i) { + var id = _ref2.id, + rest = _objectWithoutProperties(_ref2, ["id"]); + return i < renderCount && React.createElement(reactMotion.Motion, { + key: id, + style: _this2.getStyle(id, i), + onRest: function onRest() { + var action = _this2.props.infinite ? _this2.shuffle : _this2.handleRemove; + swipedId === id && action(swipedId); + } + }, function (_ref3) { + var scale = _ref3.scale, + shadow = _ref3.shadow, + x = _ref3.x, + rotate = _ref3.rotate, + opacity = _ref3.opacity; + return React.createElement("div", { + className: "motion-card-item", + onMouseDown: _this2.handleMouseDown.bind(null, id, x), + onTouchStart: _this2.handleTouchStart.bind(null, id, x), + children: _this2.props.render(_extends({ + id: id + }, rest)), + style: { + boxShadow: "rgba(0, 0, 0, 0.2) 0px ".concat(shadow, "px ").concat(shadow, "px 0px"), + opacity: opacity, + transform: "translate3d(".concat(x, "px, 0, 0) scale(").concat(scale, ") rotate(").concat(rotate, "deg)"), + zIndex: data.length - i + } + }); + }); + })), renderButtons && renderButtons({ + accept: this.accept, + reject: this.reject + })); + } + }]); + return MotionStack; +}(React.Component); + +Object.defineProperty(MotionStack, "propTypes", { + configurable: true, + enumerable: true, + writable: true, + value: { + springConfig: PropTypes.object, + threshold: PropTypes.number, + renderCount: PropTypes.number, + infinite: PropTypes.bool, + onSwipeEnd: PropTypes.func, + render: PropTypes.func.isRequired, + renderButtons: PropTypes.func, + data: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.any + })).isRequired + } +}); +Object.defineProperty(MotionStack, "defaultProps", { + configurable: true, + enumerable: true, + writable: true, + value: { + springConfig: { + stiffness: 1600, + damping: 80 + }, + threshold: 200, + renderCount: 3, + infinite: true, + onSwipeEnd: function onSwipeEnd() {} + } +}); + +var _initialiseProps = function _initialiseProps() { + var _this3 = this; + + Object.defineProperty(this, "handleMouseDown", { + configurable: true, + enumerable: true, + writable: true, + value: function value(id, pressX, _ref4) { + var pageX = _ref4.pageX; + + if (_this3.el) { + _this3.setState(function (prevState) { + return { + topDeltaX: pageX - pressX, + mouseX: pressX, + isPressed: !prevState.swiped, + pressedId: id + }; + }); + } + } + }); + Object.defineProperty(this, "handleMouseMove", { + configurable: true, + enumerable: true, + writable: true, + value: function value(_ref5) { + var pageX = _ref5.pageX; + + if (_this3.el) { + var _this3$state = _this3.state, + isPressed = _this3$state.isPressed, + topDeltaX = _this3$state.topDeltaX, + pressedId = _this3$state.pressedId; + var threshold = _this3.props.threshold; + + if (isPressed) { + var mouseX = pageX - topDeltaX; + + _this3.setState({ + mouseX: mouseX + }); + + if (Math.abs(mouseX) > threshold) { + _this3.handleSwipe(mouseX, pressedId); + } + } + } + } + }); + Object.defineProperty(this, "handleMouseUp", { + configurable: true, + enumerable: true, + writable: true, + value: function value() { + if (_this3.el) { + _this3.setState({ + isPressed: false, + topDeltaX: 0, + mouseX: 0 + }); + } + } + }); + Object.defineProperty(this, "handleTouchStart", { + configurable: true, + enumerable: true, + writable: true, + value: function value(id, pressLocation, e) { + if (_this3.el) { + _this3.handleMouseDown(id, pressLocation, e.touches[0]); + } + } + }); + Object.defineProperty(this, "handleTouchMove", { + configurable: true, + enumerable: true, + writable: true, + value: function value(e) { + e.preventDefault(); + + if (_this3.el) { + _this3.handleMouseMove(e.touches[0]); + } + } + }); + Object.defineProperty(this, "handleSwipe", { + configurable: true, + enumerable: true, + writable: true, + value: function value(x, id) { + _this3.setState({ + swiped: true, + direction: x > 0 ? 'right' : 'left', + swipedId: id + }); + } + }); + Object.defineProperty(this, "accept", { + configurable: true, + enumerable: true, + writable: true, + value: function value() { + _this3.handleSwipe(1, _this3.state.data[0].id); + } + }); + Object.defineProperty(this, "reject", { + configurable: true, + enumerable: true, + writable: true, + value: function value() { + _this3.handleSwipe(-1, _this3.state.data[0].id); + } + }); + Object.defineProperty(this, "handleRemove", { + configurable: true, + enumerable: true, + writable: true, + value: function value(id) { + _this3.setState(function (_ref6) { + var data = _ref6.data; + return { + data: data.filter(function (item) { + return item.id !== id; + }), + swipedId: null, + mouseX: 0, + swiped: false + }; + }); + + _this3.props.onSwipeEnd(_this3.state); + } + }); + Object.defineProperty(this, "shuffle", { + configurable: true, + enumerable: true, + writable: true, + value: function value(id) { + _this3.setState(function (_ref7) { + var data = _ref7.data; + data.push(data.shift()); + return { + data: data, + swipedId: null, + mouseX: 0, + swiped: false + }; + }); + + _this3.props.onSwipeEnd(_this3.state); + } + }); + Object.defineProperty(this, "getStyle", { + configurable: true, + enumerable: true, + writable: true, + value: function value(id, i) { + var _this3$state2 = _this3.state, + isPressed = _this3$state2.isPressed, + mouseX = _this3$state2.mouseX, + direction = _this3$state2.direction, + swiped = _this3$state2.swiped, + swipedId = _this3$state2.swipedId, + pressedId = _this3$state2.pressedId; + var _this3$props = _this3.props, + springConfig = _this3$props.springConfig, + threshold = _this3$props.threshold; + var isSecond = !isPressed ? i === 1 && swiped ? 1 : 0.5 : clamp(1 * Math.abs(mouseX) / threshold, 0.5, 1); + var nextOpacity = i > 1 ? 0 : 1; + var next = { + scale: reactMotion.spring(isSecond, springConfig), + shadow: reactMotion.spring(0, springConfig), + rotate: reactMotion.spring(0, springConfig), + opacity: reactMotion.spring(nextOpacity, springConfig), + x: reactMotion.spring(0, springConfig) + }; + var first = _extends({}, next, { + scale: reactMotion.spring(1, springConfig), + opacity: reactMotion.spring(1, springConfig) + }); + var pan = { + scale: reactMotion.spring(1.1, springConfig), + shadow: reactMotion.spring(16, springConfig), + opacity: reactMotion.spring(clamp(1 / (Math.abs(mouseX) / 100) + 0.5, 0, 1), springConfig), + rotate: clamp(mouseX / 15, -45, 45), + x: mouseX + }; + var finish = _extends({}, pan, { + rotate: reactMotion.spring(direction === 'left' ? -45 : 45, springConfig), + opacity: reactMotion.spring(0, springConfig), + x: reactMotion.spring(direction === 'left' ? -360 : 360, springConfig) + }); + return swiped && swipedId === id ? finish : pressedId === id && isPressed ? pan : i < 1 ? first : next; + } + }); +}; + +module.exports = MotionStack; diff --git a/build/esm/react-motion-stack.js b/build/esm/react-motion-stack.js new file mode 100644 index 0000000..f0f8530 --- /dev/null +++ b/build/esm/react-motion-stack.js @@ -0,0 +1,452 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Motion, spring } from 'react-motion'; + +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a 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); + } +} + +function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; +} + +function _extends() { + _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; + }; + + return _extends.apply(this, arguments); +} + +function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + + 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; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; +} + +function _possibleConstructorReturn(self, call) { + if (call && (typeof call === "object" || typeof call === "function")) { + return call; + } + + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; +} + +var Fragment = React.Fragment || 'div'; + +var clamp = function clamp(n, min, max) { + return Math.max(Math.min(n, max), min); +}; + +var MotionStack = +/*#__PURE__*/ +function (_React$Component) { + _inherits(MotionStack, _React$Component); + + function MotionStack(_ref) { + var _this; + + var data = _ref.data; + _classCallCheck(this, MotionStack); + _this = _possibleConstructorReturn(this, (MotionStack.__proto__ || Object.getPrototypeOf(MotionStack)).apply(this, arguments)); + + _initialiseProps.call(_assertThisInitialized(_this)); + + _this.state = { + topDeltaX: 0, + mouseX: 0, + isPressed: false, + pressedId: null, + swiped: false, + swipedId: null, + direction: null, + data: data + }; + return _this; + } + + _createClass(MotionStack, [{ + key: "componentDidMount", + value: function componentDidMount() { + window.addEventListener('touchmove', this.handleTouchMove); + window.addEventListener('touchend', this.handleMouseUp); + window.addEventListener('mousemove', this.handleMouseMove); + window.addEventListener('mouseup', this.handleMouseUp); + } + }, { + key: "componentWillUnMount", + value: function componentWillUnMount() { + window.removeEventListener('touchmove', this.handleTouchMove); + window.removeEventListener('touchend', this.handleMouseUp); + window.removeEventListener('mousemove', this.handleMouseMove); + window.removeEventListener('mouseup', this.handleMouseUp); + } + }, { + key: "componentWillReceiveProps", + value: function componentWillReceiveProps(nextProps) { + if (this.props.data.length !== nextProps.data.length) { + this.setState({ + data: nextProps.data + }); + } + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var _state = this.state, + swipedId = _state.swipedId, + data = _state.data; + var _props = this.props, + renderCount = _props.renderCount, + renderButtons = _props.renderButtons; + return React.createElement(Fragment, null, React.createElement("div", { + className: "motion-card-stack", + ref: function ref(el) { + return _this2.el = el; + } + }, data.map(function (_ref2, i) { + var id = _ref2.id, + rest = _objectWithoutProperties(_ref2, ["id"]); + return i < renderCount && React.createElement(Motion, { + key: id, + style: _this2.getStyle(id, i), + onRest: function onRest() { + var action = _this2.props.infinite ? _this2.shuffle : _this2.handleRemove; + swipedId === id && action(swipedId); + } + }, function (_ref3) { + var scale = _ref3.scale, + shadow = _ref3.shadow, + x = _ref3.x, + rotate = _ref3.rotate, + opacity = _ref3.opacity; + return React.createElement("div", { + className: "motion-card-item", + onMouseDown: _this2.handleMouseDown.bind(null, id, x), + onTouchStart: _this2.handleTouchStart.bind(null, id, x), + children: _this2.props.render(_extends({ + id: id + }, rest)), + style: { + boxShadow: "rgba(0, 0, 0, 0.2) 0px ".concat(shadow, "px ").concat(shadow, "px 0px"), + opacity: opacity, + transform: "translate3d(".concat(x, "px, 0, 0) scale(").concat(scale, ") rotate(").concat(rotate, "deg)"), + zIndex: data.length - i + } + }); + }); + })), renderButtons && renderButtons({ + accept: this.accept, + reject: this.reject + })); + } + }]); + return MotionStack; +}(React.Component); + +Object.defineProperty(MotionStack, "propTypes", { + configurable: true, + enumerable: true, + writable: true, + value: { + springConfig: PropTypes.object, + threshold: PropTypes.number, + renderCount: PropTypes.number, + infinite: PropTypes.bool, + onSwipeEnd: PropTypes.func, + render: PropTypes.func.isRequired, + renderButtons: PropTypes.func, + data: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.any + })).isRequired + } +}); +Object.defineProperty(MotionStack, "defaultProps", { + configurable: true, + enumerable: true, + writable: true, + value: { + springConfig: { + stiffness: 1600, + damping: 80 + }, + threshold: 200, + renderCount: 3, + infinite: true, + onSwipeEnd: function onSwipeEnd() {} + } +}); + +var _initialiseProps = function _initialiseProps() { + var _this3 = this; + + Object.defineProperty(this, "handleMouseDown", { + configurable: true, + enumerable: true, + writable: true, + value: function value(id, pressX, _ref4) { + var pageX = _ref4.pageX; + + if (_this3.el) { + _this3.setState(function (prevState) { + return { + topDeltaX: pageX - pressX, + mouseX: pressX, + isPressed: !prevState.swiped, + pressedId: id + }; + }); + } + } + }); + Object.defineProperty(this, "handleMouseMove", { + configurable: true, + enumerable: true, + writable: true, + value: function value(_ref5) { + var pageX = _ref5.pageX; + + if (_this3.el) { + var _this3$state = _this3.state, + isPressed = _this3$state.isPressed, + topDeltaX = _this3$state.topDeltaX, + pressedId = _this3$state.pressedId; + var threshold = _this3.props.threshold; + + if (isPressed) { + var mouseX = pageX - topDeltaX; + + _this3.setState({ + mouseX: mouseX + }); + + if (Math.abs(mouseX) > threshold) { + _this3.handleSwipe(mouseX, pressedId); + } + } + } + } + }); + Object.defineProperty(this, "handleMouseUp", { + configurable: true, + enumerable: true, + writable: true, + value: function value() { + if (_this3.el) { + _this3.setState({ + isPressed: false, + topDeltaX: 0, + mouseX: 0 + }); + } + } + }); + Object.defineProperty(this, "handleTouchStart", { + configurable: true, + enumerable: true, + writable: true, + value: function value(id, pressLocation, e) { + if (_this3.el) { + _this3.handleMouseDown(id, pressLocation, e.touches[0]); + } + } + }); + Object.defineProperty(this, "handleTouchMove", { + configurable: true, + enumerable: true, + writable: true, + value: function value(e) { + e.preventDefault(); + + if (_this3.el) { + _this3.handleMouseMove(e.touches[0]); + } + } + }); + Object.defineProperty(this, "handleSwipe", { + configurable: true, + enumerable: true, + writable: true, + value: function value(x, id) { + _this3.setState({ + swiped: true, + direction: x > 0 ? 'right' : 'left', + swipedId: id + }); + } + }); + Object.defineProperty(this, "accept", { + configurable: true, + enumerable: true, + writable: true, + value: function value() { + _this3.handleSwipe(1, _this3.state.data[0].id); + } + }); + Object.defineProperty(this, "reject", { + configurable: true, + enumerable: true, + writable: true, + value: function value() { + _this3.handleSwipe(-1, _this3.state.data[0].id); + } + }); + Object.defineProperty(this, "handleRemove", { + configurable: true, + enumerable: true, + writable: true, + value: function value(id) { + _this3.setState(function (_ref6) { + var data = _ref6.data; + return { + data: data.filter(function (item) { + return item.id !== id; + }), + swipedId: null, + mouseX: 0, + swiped: false + }; + }); + + _this3.props.onSwipeEnd(_this3.state); + } + }); + Object.defineProperty(this, "shuffle", { + configurable: true, + enumerable: true, + writable: true, + value: function value(id) { + _this3.setState(function (_ref7) { + var data = _ref7.data; + data.push(data.shift()); + return { + data: data, + swipedId: null, + mouseX: 0, + swiped: false + }; + }); + + _this3.props.onSwipeEnd(_this3.state); + } + }); + Object.defineProperty(this, "getStyle", { + configurable: true, + enumerable: true, + writable: true, + value: function value(id, i) { + var _this3$state2 = _this3.state, + isPressed = _this3$state2.isPressed, + mouseX = _this3$state2.mouseX, + direction = _this3$state2.direction, + swiped = _this3$state2.swiped, + swipedId = _this3$state2.swipedId, + pressedId = _this3$state2.pressedId; + var _this3$props = _this3.props, + springConfig = _this3$props.springConfig, + threshold = _this3$props.threshold; + var isSecond = !isPressed ? i === 1 && swiped ? 1 : 0.5 : clamp(1 * Math.abs(mouseX) / threshold, 0.5, 1); + var nextOpacity = i > 1 ? 0 : 1; + var next = { + scale: spring(isSecond, springConfig), + shadow: spring(0, springConfig), + rotate: spring(0, springConfig), + opacity: spring(nextOpacity, springConfig), + x: spring(0, springConfig) + }; + var first = _extends({}, next, { + scale: spring(1, springConfig), + opacity: spring(1, springConfig) + }); + var pan = { + scale: spring(1.1, springConfig), + shadow: spring(16, springConfig), + opacity: spring(clamp(1 / (Math.abs(mouseX) / 100) + 0.5, 0, 1), springConfig), + rotate: clamp(mouseX / 15, -45, 45), + x: mouseX + }; + var finish = _extends({}, pan, { + rotate: spring(direction === 'left' ? -45 : 45, springConfig), + opacity: spring(0, springConfig), + x: spring(direction === 'left' ? -360 : 360, springConfig) + }); + return swiped && swipedId === id ? finish : pressedId === id && isPressed ? pan : i < 1 ? first : next; + } + }); +}; + +export default MotionStack; diff --git a/build/motion-stack.css b/build/motion-stack.css new file mode 100644 index 0000000..b7b90c1 --- /dev/null +++ b/build/motion-stack.css @@ -0,0 +1,13 @@ +.motion-card-stack { + display: grid; + grid-template-columns: 240px; + grid-template-rows: 360px; + align-items: center; + justify-content: center; +} + +.motion-card-item { + grid-column: 1/2; + grid-row: 1/2; + will-change: transform; +} diff --git a/package-lock.json b/package-lock.json index 14daee6..cac7eb0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-motion-stack", - "version": "0.0.1", + "version": "0.0.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -10,9 +10,9 @@ "integrity": "sha512-PConL+YIK9BgNUWWC2q4fbltj1g475TofpNVNivSypcAAKElfpSS1cv7MrpLYRG8TzZvwcVu9M30hLA/WAp1HQ==", "dev": true, "requires": { - "chalk": "2.3.0", - "esutils": "2.0.2", - "js-tokens": "3.0.2" + "chalk": "^2.0.0", + "esutils": "^2.0.2", + "js-tokens": "^3.0.0" }, "dependencies": { "ansi-styles": { @@ -21,7 +21,7 @@ "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==", "dev": true, "requires": { - "color-convert": "1.9.1" + "color-convert": "^1.9.0" } }, "chalk": { @@ -30,9 +30,9 @@ "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==", "dev": true, "requires": { - "ansi-styles": "3.2.0", - "escape-string-regexp": "1.0.5", - "supports-color": "4.5.0" + "ansi-styles": "^3.1.0", + "escape-string-regexp": "^1.0.5", + "supports-color": "^4.0.0" } }, "supports-color": { @@ -41,7 +41,7 @@ "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=", "dev": true, "requires": { - "has-flag": "2.0.0" + "has-flag": "^2.0.0" } } } @@ -59,13 +59,13 @@ "@babel/traverse": "7.0.0-beta.39", "@babel/types": "7.0.0-beta.39", "babylon": "7.0.0-beta.39", - "convert-source-map": "1.5.1", - "debug": "3.1.0", - "json5": "0.5.1", - "lodash": "4.17.5", - "micromatch": "2.3.11", - "resolve": "1.5.0", - "source-map": "0.5.7" + "convert-source-map": "^1.1.0", + "debug": "^3.0.1", + "json5": "^0.5.0", + "lodash": "^4.2.0", + "micromatch": "^2.3.11", + "resolve": "^1.3.2", + "source-map": "^0.5.0" }, "dependencies": { "@babel/types": { @@ -74,9 +74,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "babylon": { @@ -109,10 +109,10 @@ "dev": true, "requires": { "@babel/types": "7.0.0-beta.39", - "jsesc": "2.5.1", - "lodash": "4.17.5", - "source-map": "0.5.7", - "trim-right": "1.0.1" + "jsesc": "^2.5.1", + "lodash": "^4.2.0", + "source-map": "^0.5.0", + "trim-right": "^1.0.1" }, "dependencies": { "@babel/types": { @@ -121,9 +121,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "jsesc": { @@ -155,9 +155,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -184,9 +184,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -204,7 +204,7 @@ "dev": true, "requires": { "@babel/types": "7.0.0-beta.39", - "esutils": "2.0.2" + "esutils": "^2.0.0" }, "dependencies": { "@babel/types": { @@ -213,9 +213,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -243,9 +243,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -264,7 +264,7 @@ "requires": { "@babel/helper-function-name": "7.0.0-beta.39", "@babel/types": "7.0.0-beta.39", - "lodash": "4.17.5" + "lodash": "^4.2.0" }, "dependencies": { "@babel/types": { @@ -273,9 +273,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -302,9 +302,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -332,9 +332,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -360,9 +360,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -388,9 +388,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -411,7 +411,7 @@ "@babel/helper-simple-access": "7.0.0-beta.39", "@babel/template": "7.0.0-beta.39", "@babel/types": "7.0.0-beta.39", - "lodash": "4.17.5" + "lodash": "^4.2.0" }, "dependencies": { "@babel/helper-module-imports": { @@ -421,7 +421,7 @@ "dev": true, "requires": { "@babel/types": "7.0.0-beta.39", - "lodash": "4.17.5" + "lodash": "^4.2.0" } }, "@babel/types": { @@ -430,9 +430,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -458,9 +458,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -477,7 +477,7 @@ "integrity": "sha512-6VSdqCkWsz7ofU78HcmO4+ZJzg++tFlBRj0Jl+eedCzFXfvj+P8Tyhdi/UcLV6Ik8WiUXoJgVEoF//NuTVFk3Q==", "dev": true, "requires": { - "lodash": "4.17.5" + "lodash": "^4.2.0" } }, "@babel/helper-remap-async-to-generator": { @@ -499,9 +499,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -530,9 +530,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -551,7 +551,7 @@ "requires": { "@babel/template": "7.0.0-beta.39", "@babel/types": "7.0.0-beta.39", - "lodash": "4.17.5" + "lodash": "^4.2.0" }, "dependencies": { "@babel/types": { @@ -560,9 +560,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -591,9 +591,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -621,9 +621,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -770,7 +770,7 @@ "dev": true, "requires": { "@babel/helper-regex": "7.0.0-beta.39", - "regexpu-core": "4.1.3" + "regexpu-core": "^4.1.3" }, "dependencies": { "regexpu-core": { @@ -779,12 +779,12 @@ "integrity": "sha512-mB+njEzO7oezA57IbQxxd6fVPOeWKDmnGvJ485CwmfNchjHe5jWwqKepapmzUEj41yxIAqOg+C4LbXuJlkiO8A==", "dev": true, "requires": { - "regenerate": "1.3.3", - "regenerate-unicode-properties": "5.1.3", - "regjsgen": "0.3.0", - "regjsparser": "0.2.1", - "unicode-match-property-ecmascript": "1.0.3", - "unicode-match-property-value-ecmascript": "1.0.1" + "regenerate": "^1.3.3", + "regenerate-unicode-properties": "^5.1.1", + "regjsgen": "^0.3.0", + "regjsparser": "^0.2.1", + "unicode-match-property-ecmascript": "^1.0.3", + "unicode-match-property-value-ecmascript": "^1.0.1" } }, "regjsgen": { @@ -799,7 +799,7 @@ "integrity": "sha1-w3h1U/rwTndcMCEC7zRtmVAA7Bw=", "dev": true, "requires": { - "jsesc": "0.5.0" + "jsesc": "~0.5.0" } } } @@ -929,7 +929,7 @@ "dev": true, "requires": { "@babel/types": "7.0.0-beta.39", - "lodash": "4.17.5" + "lodash": "^4.2.0" } }, "@babel/types": { @@ -938,9 +938,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "to-fast-properties": { @@ -963,7 +963,7 @@ "integrity": "sha512-IZ398KtlXSKLqjxVF7745k2R18oSyF+NwPy5Xmc0+VjdPb/5hk9HcGWCvHhLEfZQFVcBxLkZj6/3PWX/xRpV2A==", "dev": true, "requires": { - "lodash": "4.17.5" + "lodash": "^4.2.0" } }, "@babel/plugin-transform-classes": { @@ -977,7 +977,7 @@ "@babel/helper-function-name": "7.0.0-beta.39", "@babel/helper-optimise-call-expression": "7.0.0-beta.39", "@babel/helper-replace-supers": "7.0.0-beta.39", - "globals": "11.3.0" + "globals": "^11.1.0" }, "dependencies": { "globals": { @@ -1007,7 +1007,7 @@ "dev": true, "requires": { "@babel/helper-regex": "7.0.0-beta.39", - "regexpu-core": "4.1.3" + "regexpu-core": "^4.1.3" }, "dependencies": { "regexpu-core": { @@ -1016,12 +1016,12 @@ "integrity": "sha512-mB+njEzO7oezA57IbQxxd6fVPOeWKDmnGvJ485CwmfNchjHe5jWwqKepapmzUEj41yxIAqOg+C4LbXuJlkiO8A==", "dev": true, "requires": { - "regenerate": "1.3.3", - "regenerate-unicode-properties": "5.1.3", - "regjsgen": "0.3.0", - "regjsparser": "0.2.1", - "unicode-match-property-ecmascript": "1.0.3", - "unicode-match-property-value-ecmascript": "1.0.1" + "regenerate": "^1.3.3", + "regenerate-unicode-properties": "^5.1.1", + "regjsgen": "^0.3.0", + "regjsparser": "^0.2.1", + "unicode-match-property-ecmascript": "^1.0.3", + "unicode-match-property-value-ecmascript": "^1.0.1" } }, "regjsgen": { @@ -1036,7 +1036,7 @@ "integrity": "sha1-w3h1U/rwTndcMCEC7zRtmVAA7Bw=", "dev": true, "requires": { - "jsesc": "0.5.0" + "jsesc": "~0.5.0" } } } @@ -1179,7 +1179,7 @@ "integrity": "sha512-FA4hKu/EJzzDJFBKgFvaIZfiu0RkYJ/PP0tV9+V//28HSV4Yu2QcOWpqiTZCZzPqn1PAfwP2FRFZYTvI0iU3nQ==", "dev": true, "requires": { - "regenerator-transform": "0.12.3" + "regenerator-transform": "^0.12.3" }, "dependencies": { "regenerator-transform": { @@ -1188,7 +1188,7 @@ "integrity": "sha512-y2uxO/6u+tVmtEDIKo+tLCtI0GcbQr0OreosKgCd7HP4VypGjtTrw79DezuwT+W5QX0YWuvpeBOgumrepwM1kA==", "dev": true, "requires": { - "private": "0.1.8" + "private": "^0.1.6" } } } @@ -1236,7 +1236,7 @@ "dev": true, "requires": { "@babel/helper-regex": "7.0.0-beta.39", - "regexpu-core": "4.1.3" + "regexpu-core": "^4.1.3" }, "dependencies": { "regexpu-core": { @@ -1245,12 +1245,12 @@ "integrity": "sha512-mB+njEzO7oezA57IbQxxd6fVPOeWKDmnGvJ485CwmfNchjHe5jWwqKepapmzUEj41yxIAqOg+C4LbXuJlkiO8A==", "dev": true, "requires": { - "regenerate": "1.3.3", - "regenerate-unicode-properties": "5.1.3", - "regjsgen": "0.3.0", - "regjsparser": "0.2.1", - "unicode-match-property-ecmascript": "1.0.3", - "unicode-match-property-value-ecmascript": "1.0.1" + "regenerate": "^1.3.3", + "regenerate-unicode-properties": "^5.1.1", + "regjsgen": "^0.3.0", + "regjsparser": "^0.2.1", + "unicode-match-property-ecmascript": "^1.0.3", + "unicode-match-property-value-ecmascript": "^1.0.1" } }, "regjsgen": { @@ -1265,7 +1265,7 @@ "integrity": "sha1-w3h1U/rwTndcMCEC7zRtmVAA7Bw=", "dev": true, "requires": { - "jsesc": "0.5.0" + "jsesc": "~0.5.0" } } } @@ -1310,9 +1310,9 @@ "@babel/plugin-transform-template-literals": "7.0.0-beta.39", "@babel/plugin-transform-typeof-symbol": "7.0.0-beta.39", "@babel/plugin-transform-unicode-regex": "7.0.0-beta.39", - "browserslist": "2.11.3", - "invariant": "2.2.2", - "semver": "5.5.0" + "browserslist": "^2.4.0", + "invariant": "^2.2.2", + "semver": "^5.3.0" } }, "@babel/preset-react": { @@ -1380,7 +1380,7 @@ "@babel/code-frame": "7.0.0-beta.39", "@babel/types": "7.0.0-beta.39", "babylon": "7.0.0-beta.39", - "lodash": "4.17.5" + "lodash": "^4.2.0" }, "dependencies": { "@babel/types": { @@ -1389,9 +1389,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "babylon": { @@ -1419,10 +1419,10 @@ "@babel/helper-function-name": "7.0.0-beta.39", "@babel/types": "7.0.0-beta.39", "babylon": "7.0.0-beta.39", - "debug": "3.1.0", - "globals": "11.3.0", - "invariant": "2.2.2", - "lodash": "4.17.5" + "debug": "^3.0.1", + "globals": "^11.1.0", + "invariant": "^2.2.0", + "lodash": "^4.2.0" }, "dependencies": { "@babel/types": { @@ -1431,9 +1431,9 @@ "integrity": "sha512-wrEe0z4kFP0KbFz8aHbPOGQal0gn+J2Iv9ZJGYbD77JN4BpavbF5l/BvLNZ0Omn665VENncoLVmQpclMbh64sQ==", "dev": true, "requires": { - "esutils": "2.0.2", - "lodash": "4.17.5", - "to-fast-properties": "2.0.0" + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" } }, "babylon": { @@ -1465,6 +1465,18 @@ } } }, + "@types/estree": { + "version": "0.0.39", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", + "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "dev": true + }, + "@types/node": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.0.tgz", + "integrity": "sha512-hWzNviaVFIr1TqcRA8ou49JaSHp+Rfabmnqg2kNvusKqLhPU0rIsGPUj5WJJ7ld4Bb7qdgLmIhLfCD1qS08IVA==", + "dev": true + }, "acorn": { "version": "5.4.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.4.1.tgz", @@ -1477,7 +1489,7 @@ "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=", "dev": true, "requires": { - "arr-flatten": "1.1.0" + "arr-flatten": "^1.0.1" } }, "arr-flatten": { @@ -1509,7 +1521,7 @@ "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=", "dev": true, "requires": { - "balanced-match": "1.0.0", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, @@ -1519,9 +1531,9 @@ "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=", "dev": true, "requires": { - "expand-range": "1.8.2", - "preserve": "0.2.0", - "repeat-element": "1.1.2" + "expand-range": "^1.8.1", + "preserve": "^0.2.0", + "repeat-element": "^1.1.2" } }, "browserslist": { @@ -1530,8 +1542,8 @@ "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==", "dev": true, "requires": { - "caniuse-lite": "1.0.30000804", - "electron-to-chromium": "1.3.33" + "caniuse-lite": "^1.0.30000792", + "electron-to-chromium": "^1.3.30" } }, "builtin-modules": { @@ -1552,7 +1564,7 @@ "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", "dev": true, "requires": { - "color-name": "1.1.3" + "color-name": "^1.1.1" } }, "color-name": { @@ -1589,7 +1601,7 @@ "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", "requires": { - "iconv-lite": "0.4.19" + "iconv-lite": "~0.4.13" } }, "escape-string-regexp": { @@ -1616,7 +1628,7 @@ "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=", "dev": true, "requires": { - "is-posix-bracket": "0.1.1" + "is-posix-bracket": "^0.1.0" } }, "expand-range": { @@ -1625,7 +1637,7 @@ "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=", "dev": true, "requires": { - "fill-range": "2.2.3" + "fill-range": "^2.1.0" } }, "extglob": { @@ -1634,7 +1646,7 @@ "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "fbjs": { @@ -1642,13 +1654,13 @@ "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", "requires": { - "core-js": "1.2.7", - "isomorphic-fetch": "2.2.1", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "promise": "7.3.1", - "setimmediate": "1.0.5", - "ua-parser-js": "0.7.17" + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.9" } }, "filename-regex": { @@ -1663,11 +1675,11 @@ "integrity": "sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=", "dev": true, "requires": { - "is-number": "2.1.0", - "isobject": "2.1.0", - "randomatic": "1.1.7", - "repeat-element": "1.1.2", - "repeat-string": "1.6.1" + "is-number": "^2.1.0", + "isobject": "^2.0.0", + "randomatic": "^1.1.3", + "repeat-element": "^1.1.2", + "repeat-string": "^1.5.2" } }, "for-in": { @@ -1682,7 +1694,7 @@ "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=", "dev": true, "requires": { - "for-in": "1.0.2" + "for-in": "^1.0.1" } }, "glob-base": { @@ -1691,8 +1703,8 @@ "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=", "dev": true, "requires": { - "glob-parent": "2.0.0", - "is-glob": "2.0.1" + "glob-parent": "^2.0.0", + "is-glob": "^2.0.0" } }, "glob-parent": { @@ -1701,7 +1713,7 @@ "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=", "dev": true, "requires": { - "is-glob": "2.0.1" + "is-glob": "^2.0.0" } }, "has-flag": { @@ -1721,7 +1733,7 @@ "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=", "dev": true, "requires": { - "loose-envify": "1.3.1" + "loose-envify": "^1.0.0" } }, "is-buffer": { @@ -1742,7 +1754,7 @@ "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=", "dev": true, "requires": { - "is-primitive": "2.0.0" + "is-primitive": "^2.0.0" } }, "is-extendable": { @@ -1763,7 +1775,7 @@ "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, "requires": { - "is-extglob": "1.0.0" + "is-extglob": "^1.0.0" } }, "is-module": { @@ -1778,7 +1790,7 @@ "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=", "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" } }, "is-posix-bracket": { @@ -1818,8 +1830,8 @@ "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", "requires": { - "node-fetch": "1.7.3", - "whatwg-fetch": "2.0.3" + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" } }, "js-tokens": { @@ -1845,7 +1857,7 @@ "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } }, "lodash": { @@ -1859,7 +1871,7 @@ "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", "requires": { - "js-tokens": "3.0.2" + "js-tokens": "^3.0.0" } }, "magic-string": { @@ -1868,7 +1880,7 @@ "integrity": "sha512-kxBL06p6iO2qPBHsqGK2b3cRwiRGpnmSuVWNhwHcMX7qJOUr1HvricYP1LZOCdkQBUp0jiWg2d6WJwR3vYgByw==", "dev": true, "requires": { - "vlq": "0.2.3" + "vlq": "^0.2.1" } }, "micromatch": { @@ -1877,19 +1889,19 @@ "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=", "dev": true, "requires": { - "arr-diff": "2.0.0", - "array-unique": "0.2.1", - "braces": "1.8.5", - "expand-brackets": "0.1.5", - "extglob": "0.3.2", - "filename-regex": "2.0.1", - "is-extglob": "1.0.0", - "is-glob": "2.0.1", - "kind-of": "3.2.2", - "normalize-path": "2.1.1", - "object.omit": "2.0.1", - "parse-glob": "3.0.4", - "regex-cache": "0.4.4" + "arr-diff": "^2.0.0", + "array-unique": "^0.2.1", + "braces": "^1.8.2", + "expand-brackets": "^0.1.4", + "extglob": "^0.3.1", + "filename-regex": "^2.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.1", + "kind-of": "^3.0.2", + "normalize-path": "^2.0.1", + "object.omit": "^2.0.0", + "parse-glob": "^3.0.4", + "regex-cache": "^0.4.2" } }, "minimatch": { @@ -1898,7 +1910,7 @@ "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "requires": { - "brace-expansion": "1.1.8" + "brace-expansion": "^1.1.7" } }, "minimist": { @@ -1927,8 +1939,8 @@ "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", "requires": { - "encoding": "0.1.12", - "is-stream": "1.1.0" + "encoding": "^0.1.11", + "is-stream": "^1.0.1" } }, "normalize-path": { @@ -1937,7 +1949,7 @@ "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", "dev": true, "requires": { - "remove-trailing-separator": "1.1.0" + "remove-trailing-separator": "^1.0.1" } }, "object-assign": { @@ -1951,8 +1963,8 @@ "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=", "dev": true, "requires": { - "for-own": "0.1.5", - "is-extendable": "0.1.1" + "for-own": "^0.1.4", + "is-extendable": "^0.1.1" } }, "parse-glob": { @@ -1961,10 +1973,10 @@ "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=", "dev": true, "requires": { - "glob-base": "0.3.0", - "is-dotfile": "1.0.3", - "is-extglob": "1.0.0", - "is-glob": "2.0.1" + "glob-base": "^0.3.0", + "is-dotfile": "^1.0.0", + "is-extglob": "^1.0.0", + "is-glob": "^2.0.0" } }, "path-parse": { @@ -1995,7 +2007,7 @@ "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", "requires": { - "asap": "2.0.6" + "asap": "~2.0.3" } }, "prop-types": { @@ -2003,9 +2015,9 @@ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz", "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=", "requires": { - "fbjs": "0.8.16", - "loose-envify": "1.3.1", - "object-assign": "4.1.1" + "fbjs": "^0.8.16", + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" } }, "raf": { @@ -2013,7 +2025,7 @@ "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz", "integrity": "sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==", "requires": { - "performance-now": "2.1.0" + "performance-now": "^2.1.0" }, "dependencies": { "performance-now": { @@ -2029,8 +2041,8 @@ "integrity": "sha512-D5JUjPyJbaJDkuAazpVnSfVkLlpeO3wDlPROTMLGKG1zMFNFRgrciKo1ltz/AzNTkqE0HzDx655QOL51N06how==", "dev": true, "requires": { - "is-number": "3.0.0", - "kind-of": "4.0.0" + "is-number": "^3.0.0", + "kind-of": "^4.0.0" }, "dependencies": { "is-number": { @@ -2039,7 +2051,7 @@ "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", "dev": true, "requires": { - "kind-of": "3.2.2" + "kind-of": "^3.0.2" }, "dependencies": { "kind-of": { @@ -2048,7 +2060,7 @@ "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -2059,7 +2071,7 @@ "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=", "dev": true, "requires": { - "is-buffer": "1.1.6" + "is-buffer": "^1.1.5" } } } @@ -2070,10 +2082,10 @@ "integrity": "sha1-nMMHnD3NcNTG4BuEqrKn40wwP1g=", "dev": true, "requires": { - "fbjs": "0.8.16", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "prop-types": "15.6.0" + "fbjs": "^0.8.16", + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.0" } }, "react-motion": { @@ -2081,9 +2093,9 @@ "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz", "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==", "requires": { - "performance-now": "0.2.0", - "prop-types": "15.6.0", - "raf": "3.4.0" + "performance-now": "^0.2.0", + "prop-types": "^15.5.8", + "raf": "^3.1.0" } }, "regenerate": { @@ -2098,7 +2110,7 @@ "integrity": "sha512-Yjy6t7jFQczDhYE+WVm7pg6gWYE258q4sUkk9qDErwXJIqx7jU9jGrMFHutJK/SRfcg7MEkXjGaYiVlOZyev/A==", "dev": true, "requires": { - "regenerate": "1.3.3" + "regenerate": "^1.3.3" } }, "regex-cache": { @@ -2107,7 +2119,7 @@ "integrity": "sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==", "dev": true, "requires": { - "is-equal-shallow": "0.1.3" + "is-equal-shallow": "^0.1.3" } }, "remove-trailing-separator": { @@ -2134,7 +2146,17 @@ "integrity": "sha512-hgoSGrc3pjzAPHNBg+KnFcK2HwlHTs/YrAGUr6qgTVUZmXv1UEXXl0bZNBKMA9fud6lRYFdPGz0xXxycPzmmiw==", "dev": true, "requires": { - "path-parse": "1.0.5" + "path-parse": "^1.0.5" + } + }, + "rollup": { + "version": "0.59.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.59.4.tgz", + "integrity": "sha512-ISiMqq/aJa+57QxX2MRcvLESHdJ7wSavmr6U1euMr+6UgFe6KM+3QANrYy8LQofwhTC1I7BcAdlLnDiaODs1BA==", + "dev": true, + "requires": { + "@types/estree": "0.0.39", + "@types/node": "*" } }, "rollup-plugin-babel": { @@ -2143,7 +2165,7 @@ "integrity": "sha512-tmGAZQO4L015R7STTvUr7f/5Y47GZipQ8WKOkTgwod0K5BfugkpuGTfw7N+wyvYrXMiNTXM4zb5nvAgkIgYq6g==", "dev": true, "requires": { - "rollup-pluginutils": "1.5.2" + "rollup-pluginutils": "^1.5.0" } }, "rollup-plugin-commonjs": { @@ -2152,11 +2174,11 @@ "integrity": "sha512-PYs3OiYgENFYEmI3vOEm5nrp3eY90YZqd5vGmQqeXmhJsAWFIrFdROCvOasqJ1HgeTvqyYo9IGXnFDyoboNcgQ==", "dev": true, "requires": { - "acorn": "5.4.1", - "estree-walker": "0.5.1", - "magic-string": "0.22.4", - "resolve": "1.5.0", - "rollup-pluginutils": "2.0.1" + "acorn": "^5.2.1", + "estree-walker": "^0.5.0", + "magic-string": "^0.22.4", + "resolve": "^1.4.0", + "rollup-pluginutils": "^2.0.1" }, "dependencies": { "estree-walker": { @@ -2171,8 +2193,8 @@ "integrity": "sha1-fslbNXP2VDpGpkYb2afFRFJdD8A=", "dev": true, "requires": { - "estree-walker": "0.3.1", - "micromatch": "2.3.11" + "estree-walker": "^0.3.0", + "micromatch": "^2.3.11" }, "dependencies": { "estree-walker": { @@ -2191,8 +2213,8 @@ "integrity": "sha512-a9hhQnwajgrVEyyp+QPvOyV5QC9AN6PILO4Teg2+MCKTZgYAQkZy4B1pYjAuMOH9qgyFiJY8hAu6CEVIDU5Zjw==", "dev": true, "requires": { - "mkdirp": "0.5.1", - "rollup-pluginutils": "1.5.2" + "mkdirp": "^0.5.1", + "rollup-pluginutils": "^1.5.2" } }, "rollup-plugin-node-resolve": { @@ -2201,9 +2223,9 @@ "integrity": "sha512-ZwmMip/yqw6cmDQJuCQJ1G7gw2z11iGUtQNFYrFZHmqadRHU+OZGC3nOXwXu+UTvcm5lzDspB1EYWrkTgPWybw==", "dev": true, "requires": { - "builtin-modules": "1.1.1", - "is-module": "1.0.0", - "resolve": "1.5.0" + "builtin-modules": "^1.1.0", + "is-module": "^1.0.0", + "resolve": "^1.1.6" } }, "rollup-pluginutils": { @@ -2212,8 +2234,8 @@ "integrity": "sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=", "dev": true, "requires": { - "estree-walker": "0.2.1", - "minimatch": "3.0.4" + "estree-walker": "^0.2.1", + "minimatch": "^3.0.2" } }, "semver": { @@ -2256,8 +2278,8 @@ "integrity": "sha512-nFcaBFcr08UQNF15ZgI5ISh3yUnQm7SJRRxwYrL5VYX46pS+6Q7TCTv4zbK+j6/l7rQt0mMiTL2zpmeygny6rA==", "dev": true, "requires": { - "unicode-canonical-property-names-ecmascript": "1.0.3", - "unicode-property-aliases-ecmascript": "1.0.3" + "unicode-canonical-property-names-ecmascript": "^1.0.2", + "unicode-property-aliases-ecmascript": "^1.0.3" } }, "unicode-match-property-value-ecmascript": { diff --git a/package.json b/package.json index 109163d..da97195 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,6 @@ { "name": "react-motion-stack", - "description": - "A simple react component that gives you a beautiful 60fps swipe interaction", + "description": "A simple react component that gives you a beautiful 60fps swipe interaction", "version": "0.0.3", "main": "build/cjs/react-motion-stack.js", "module": "build/esm/react-motion-stack.js", @@ -19,6 +18,7 @@ "@babel/preset-react": "^7.0.0-beta.39", "@babel/preset-stage-1": "^7.0.0-beta.39", "react-dom": "^16.0.0", + "rollup": "^0.59.4", "rollup-plugin-babel": "^4.0.0-beta.0", "rollup-plugin-commonjs": "^8.0.2", "rollup-plugin-css-only": "^0.4.0", @@ -30,6 +30,15 @@ "test": "node test/test.js", "pretest": "npm run build" }, - "files": ["build"], - "keywords": ["card", "swipe", "tinder", "animation", "react", "motion"] + "files": [ + "build" + ], + "keywords": [ + "card", + "swipe", + "tinder", + "animation", + "react", + "motion" + ] } From 89b95028c94dbe90b362abdc97ca488b23963bb0 Mon Sep 17 00:00:00 2001 From: goncy Date: Fri, 1 Jun 2018 17:58:07 -0300 Subject: [PATCH 3/6] Adds onBeforeSwipeEnd --- build/cjs/react-motion-stack.js | 17 +++++++++++------ build/esm/react-motion-stack.js | 17 +++++++++++------ src/main.js | 15 +++++++++------ 3 files changed, 31 insertions(+), 18 deletions(-) diff --git a/build/cjs/react-motion-stack.js b/build/cjs/react-motion-stack.js index 19452e7..0260b7e 100644 --- a/build/cjs/react-motion-stack.js +++ b/build/cjs/react-motion-stack.js @@ -251,7 +251,10 @@ Object.defineProperty(MotionStack, "defaultProps", { threshold: 200, renderCount: 3, infinite: true, - onSwipeEnd: function onSwipeEnd() {} + onSwipeEnd: function onSwipeEnd() {}, + onBeforeSwipeEnd: function onBeforeSwipeEnd() { + return true; + } } }); @@ -346,11 +349,13 @@ var _initialiseProps = function _initialiseProps() { enumerable: true, writable: true, value: function value(x, id) { - _this3.setState({ - swiped: true, - direction: x > 0 ? 'right' : 'left', - swipedId: id - }); + if (_this3.props.onBeforeSwipeEnd(_this3.state)) { + _this3.setState({ + swiped: true, + direction: x > 0 ? 'right' : 'left', + swipedId: id + }); + } } }); Object.defineProperty(this, "accept", { diff --git a/build/esm/react-motion-stack.js b/build/esm/react-motion-stack.js index f0f8530..8ddc7c3 100644 --- a/build/esm/react-motion-stack.js +++ b/build/esm/react-motion-stack.js @@ -247,7 +247,10 @@ Object.defineProperty(MotionStack, "defaultProps", { threshold: 200, renderCount: 3, infinite: true, - onSwipeEnd: function onSwipeEnd() {} + onSwipeEnd: function onSwipeEnd() {}, + onBeforeSwipeEnd: function onBeforeSwipeEnd() { + return true; + } } }); @@ -342,11 +345,13 @@ var _initialiseProps = function _initialiseProps() { enumerable: true, writable: true, value: function value(x, id) { - _this3.setState({ - swiped: true, - direction: x > 0 ? 'right' : 'left', - swipedId: id - }); + if (_this3.props.onBeforeSwipeEnd(_this3.state)) { + _this3.setState({ + swiped: true, + direction: x > 0 ? 'right' : 'left', + swipedId: id + }); + } } }); Object.defineProperty(this, "accept", { diff --git a/src/main.js b/src/main.js index 401dd2e..89510e5 100755 --- a/src/main.js +++ b/src/main.js @@ -30,7 +30,8 @@ class MotionStack extends React.Component { threshold: 200, renderCount: 3, infinite: true, - onSwipeEnd: () => {} + onSwipeEnd: () => {}, + onBeforeSwipeEnd: () => true, }; constructor({ data }) { @@ -118,11 +119,13 @@ class MotionStack extends React.Component { }; handleSwipe = (x, id) => { - this.setState({ - swiped: true, - direction: x > 0 ? 'right' : 'left', - swipedId: id - }); + if (this.props.onBeforeSwipeEnd(this.state)) { + this.setState({ + swiped: true, + direction: x > 0 ? 'right' : 'left', + swipedId: id + }); + } }; accept = () => { From 0747f6d770552602eae120b506fc71472124a663 Mon Sep 17 00:00:00 2001 From: goncy Date: Fri, 1 Jun 2018 18:05:54 -0300 Subject: [PATCH 4/6] Pass swipe as callback --- build/cjs/react-motion-stack.js | 28 ++++++++++++++++++++-------- build/esm/react-motion-stack.js | 28 ++++++++++++++++++++-------- src/main.js | 22 +++++++++++++++------- 3 files changed, 55 insertions(+), 23 deletions(-) diff --git a/build/cjs/react-motion-stack.js b/build/cjs/react-motion-stack.js index 0260b7e..e14c516 100644 --- a/build/cjs/react-motion-stack.js +++ b/build/cjs/react-motion-stack.js @@ -252,9 +252,7 @@ Object.defineProperty(MotionStack, "defaultProps", { renderCount: 3, infinite: true, onSwipeEnd: function onSwipeEnd() {}, - onBeforeSwipeEnd: function onBeforeSwipeEnd() { - return true; - } + onBeforeSwipeEnd: null } }); @@ -349,15 +347,29 @@ var _initialiseProps = function _initialiseProps() { enumerable: true, writable: true, value: function value(x, id) { - if (_this3.props.onBeforeSwipeEnd(_this3.state)) { - _this3.setState({ - swiped: true, - direction: x > 0 ? 'right' : 'left', - swipedId: id + var direction = x > 0 ? 'right' : 'left'; + + if (_this3.props.onBeforeSwipeEnd) { + _this3.props.onBeforeSwipeEnd(state, function (_direction) { + return _this3.swipe(_direction || direction, id); }); + } else { + _this3.swipe(direction, id); } } }); + Object.defineProperty(this, "swipe", { + configurable: true, + enumerable: true, + writable: true, + value: function value(direction, id) { + _this3.setState({ + direction: direction, + swiped: true, + swipedId: id + }); + } + }); Object.defineProperty(this, "accept", { configurable: true, enumerable: true, diff --git a/build/esm/react-motion-stack.js b/build/esm/react-motion-stack.js index 8ddc7c3..62095b1 100644 --- a/build/esm/react-motion-stack.js +++ b/build/esm/react-motion-stack.js @@ -248,9 +248,7 @@ Object.defineProperty(MotionStack, "defaultProps", { renderCount: 3, infinite: true, onSwipeEnd: function onSwipeEnd() {}, - onBeforeSwipeEnd: function onBeforeSwipeEnd() { - return true; - } + onBeforeSwipeEnd: null } }); @@ -345,15 +343,29 @@ var _initialiseProps = function _initialiseProps() { enumerable: true, writable: true, value: function value(x, id) { - if (_this3.props.onBeforeSwipeEnd(_this3.state)) { - _this3.setState({ - swiped: true, - direction: x > 0 ? 'right' : 'left', - swipedId: id + var direction = x > 0 ? 'right' : 'left'; + + if (_this3.props.onBeforeSwipeEnd) { + _this3.props.onBeforeSwipeEnd(state, function (_direction) { + return _this3.swipe(_direction || direction, id); }); + } else { + _this3.swipe(direction, id); } } }); + Object.defineProperty(this, "swipe", { + configurable: true, + enumerable: true, + writable: true, + value: function value(direction, id) { + _this3.setState({ + direction: direction, + swiped: true, + swipedId: id + }); + } + }); Object.defineProperty(this, "accept", { configurable: true, enumerable: true, diff --git a/src/main.js b/src/main.js index 89510e5..4041eb1 100755 --- a/src/main.js +++ b/src/main.js @@ -31,7 +31,7 @@ class MotionStack extends React.Component { renderCount: 3, infinite: true, onSwipeEnd: () => {}, - onBeforeSwipeEnd: () => true, + onBeforeSwipeEnd: null, }; constructor({ data }) { @@ -119,15 +119,23 @@ class MotionStack extends React.Component { }; handleSwipe = (x, id) => { - if (this.props.onBeforeSwipeEnd(this.state)) { - this.setState({ - swiped: true, - direction: x > 0 ? 'right' : 'left', - swipedId: id - }); + const direction = x > 0 ? 'right' : 'left'; + + if (this.props.onBeforeSwipeEnd) { + this.props.onBeforeSwipeEnd(state, (_direction) => this.swipe(_direction || direction, id)) + } else { + this.swipe(direction, id) } }; + swipe = (direction, id) => { + this.setState({ + direction, + swiped: true, + swipedId: id + }); + } + accept = () => { this.handleSwipe(1, this.state.data[0].id); }; From 48a42604bd5ff5c51f207d37e98f84e34536f17f Mon Sep 17 00:00:00 2001 From: goncy Date: Fri, 1 Jun 2018 18:24:15 -0300 Subject: [PATCH 5/6] Adds handle mouse Up --- src/main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 4041eb1..e955491 100755 --- a/src/main.js +++ b/src/main.js @@ -122,7 +122,8 @@ class MotionStack extends React.Component { const direction = x > 0 ? 'right' : 'left'; if (this.props.onBeforeSwipeEnd) { - this.props.onBeforeSwipeEnd(state, (_direction) => this.swipe(_direction || direction, id)) + this.handleMouseUp(); + this.props.onBeforeSwipeEnd(this.state, (_direction) => this.swipe(_direction || direction, id)) } else { this.swipe(direction, id) } From 1fda25b0eaad1fac7d03b49907bf230c6dae28ea Mon Sep 17 00:00:00 2001 From: goncy Date: Fri, 1 Jun 2018 18:26:59 -0300 Subject: [PATCH 6/6] Rebuild --- build/cjs/react-motion-stack.js | 4 +++- build/esm/react-motion-stack.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/build/cjs/react-motion-stack.js b/build/cjs/react-motion-stack.js index e14c516..8bd7183 100644 --- a/build/cjs/react-motion-stack.js +++ b/build/cjs/react-motion-stack.js @@ -350,7 +350,9 @@ var _initialiseProps = function _initialiseProps() { var direction = x > 0 ? 'right' : 'left'; if (_this3.props.onBeforeSwipeEnd) { - _this3.props.onBeforeSwipeEnd(state, function (_direction) { + _this3.handleMouseUp(); + + _this3.props.onBeforeSwipeEnd(_this3.state, function (_direction) { return _this3.swipe(_direction || direction, id); }); } else { diff --git a/build/esm/react-motion-stack.js b/build/esm/react-motion-stack.js index 62095b1..fc91059 100644 --- a/build/esm/react-motion-stack.js +++ b/build/esm/react-motion-stack.js @@ -346,7 +346,9 @@ var _initialiseProps = function _initialiseProps() { var direction = x > 0 ? 'right' : 'left'; if (_this3.props.onBeforeSwipeEnd) { - _this3.props.onBeforeSwipeEnd(state, function (_direction) { + _this3.handleMouseUp(); + + _this3.props.onBeforeSwipeEnd(_this3.state, function (_direction) { return _this3.swipe(_direction || direction, id); }); } else {