@momo-kits/swipe 0.0.32-beta → 0.0.32

package/SwipeAction.js

@@ -1 +1,656 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _core=require("@momo-kits/core");var _jsxFileName="/Users/trinh.ho2/momo-folk/kits/src/libs/swipe/dist/SwipeAction.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});}keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var DEFAULT_PREVIEW_OPEN_DELAY=700;var PREVIEW_CLOSE_DELAY=300;var MAX_VELOCITY_CONTRIBUTION=5;var SCROLL_LOCK_MILLISECONDS=300;var SCREEN_WIDTH=_reactNative.Dimensions.get('window').width;var WIDTH_HIDDEN_RIGHT=190;var SwipeAction=function(_Component){(0,_inherits2.default)(SwipeAction,_Component);var _super=_createSuper(SwipeAction);function SwipeAction(props){var _this;(0,_classCallCheck2.default)(this,SwipeAction);_this=_super.call(this,props);_this.ensureScrollEnabled=function(){if(!_this.parentScrollEnabled){_this.parentScrollEnabled=true;_this.props.setScrollEnabled&&_this.props.setScrollEnabled(true);}};_this.onLeftActionLayout=function(_ref){var nativeEvent=_ref.nativeEvent;_this.setState({leftOpenValue:nativeEvent.layout.width});};_this.onRightActionLayout=function(_ref2){var nativeEvent=_ref2.nativeEvent;_this.setState({rightOpenValue:-nativeEvent.layout.width});};_this.renderHiddenContent=function(){var _rightAction$slice;var _this$props=_this.props,actionBackground=_this$props.actionBackground,rowIndex=_this$props.rowIndex,rightAction=_this$props.rightAction,leftAction=_this$props.leftAction;var hiddenRowStyle=_objectSpread(_objectSpread({},styles.standaloneRowBack),{backgroundColor:actionBackground});return _react.default.createElement(_reactNative.View,{style:hiddenRowStyle,__source:{fileName:_jsxFileName,lineNumber:439,columnNumber:4}},_this.state.isLeftActionVisible&&_react.default.createElement(_reactNative.View,{style:styles.leftItemRow,__source:{fileName:_jsxFileName,lineNumber:443,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},onLayout:_this.onLeftActionLayout,__source:{fileName:_jsxFileName,lineNumber:444,columnNumber:8}},leftAction==null?void 0:leftAction.map==null?void 0:leftAction.map(function(item,index){return _this.renderLeftAction(item,index);}))),_this.state.isRightActionVisible&&_react.default.createElement(_reactNative.View,{style:styles.rightItemRow,__source:{fileName:_jsxFileName,lineNumber:455,columnNumber:7}},_react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},onLayout:_this.onRightActionLayout,__source:{fileName:_jsxFileName,lineNumber:456,columnNumber:8}},rightAction==null?void 0:rightAction.slice==null?void 0:(_rightAction$slice=rightAction.slice(0))==null?void 0:_rightAction$slice.reverse().map(function(item,index){return _this.renderRightAction(item,index);}))));};_this.renderIcon=function(icon){var actionIconStyle=_this.props.actionIconStyle;var iconSource=_core.ValueUtil.getImageSource(icon);return _react.default.createElement(_reactNative.Image,{source:iconSource,resizeMode:"contain",style:[styles.icon,actionIconStyle],__source:{fileName:_jsxFileName,lineNumber:473,columnNumber:4}});};_this.renderTitle=function(title){var actionTextStyle=_this.props.actionTextStyle;return _react.default.createElement(_core.Text.SubTitle,{style:[styles.text,actionTextStyle],__source:{fileName:_jsxFileName,lineNumber:484,columnNumber:4}},title);};_this.onActionPress=function(item,rowIndex){return function(){var onPress=item.onPress;onPress==null?void 0:onPress(item,rowIndex);};};_this.renderRightAction=function(item,index){var _this$props2=_this.props,rowIndex=_this$props2.rowIndex,renderRightAction=_this$props2.renderRightAction;if(renderRightAction){return _react.default.createElement(_reactNative.View,{key:item+index,__source:{fileName:_jsxFileName,lineNumber:499,columnNumber:5}},renderRightAction({item:item,index:index,rowIndex:rowIndex}));}return _react.default.createElement(_reactNative.TouchableOpacity,{key:index.toString(),style:[styles.buttonContainer,{backgroundColor:item.color,height:_this.state.hiddenHeight}],onPress:_this.onActionPress(item,rowIndex),__source:{fileName:_jsxFileName,lineNumber:505,columnNumber:4}},item.icon&&_this.renderIcon(item.icon),item.title&&_this.renderTitle(item.title));};_this.renderLeftAction=function(item,index){var _this$props3=_this.props,rowIndex=_this$props3.rowIndex,renderLeftAction=_this$props3.renderLeftAction;if(renderLeftAction){return _react.default.createElement(_reactNative.View,{key:item+index,__source:{fileName:_jsxFileName,lineNumber:523,columnNumber:5}},renderLeftAction({item:item,index:index,rowIndex:rowIndex}));}return _react.default.createElement(_reactNative.TouchableOpacity,{key:index.toString(),style:[styles.buttonContainer,{backgroundColor:item.color,height:_this.state.hiddenHeight}],onPress:_this.onActionPress(item,rowIndex),__source:{fileName:_jsxFileName,lineNumber:529,columnNumber:4}},item.icon&&_this.renderIcon(item.icon),item.title&&_this.renderTitle(item.title));};_this.isOpen=false;_this.previousTrackedTranslateX=0;_this.previousTrackedDirection=null;_this.horizontalSwipeGestureBegan=false;_this.swipeInitialX=null;_this.parentScrollEnabled=true;_this.ranPreview=false;_this._ensureScrollEnabledTimer=null;_this.isForceClosing=false;_this.state={dimensionsSet:false,hiddenHeight:_this.props.disableHiddenLayoutCalculation?'100%':0,hiddenWidth:_this.props.disableHiddenLayoutCalculation?'100%':0,isLeftActionVisible:false,isRightActionVisible:false,leftOpenValue:0,rightOpenValue:0};var _this$props4=_this.props,_leftAction=_this$props4.leftAction,_rightAction=_this$props4.rightAction;var buttonCellWidth=WIDTH_HIDDEN_RIGHT/2;_this.stopLeftSwipe=SCREEN_WIDTH;_this.stopRightSwipe=-SCREEN_WIDTH;_this._translateX=new _reactNative.Animated.Value(0);if(_this.props.onSwipeValueChange){_this._translateX.addListener(function(_ref3){var value=_ref3.value;var direction=_this.previousTrackedDirection;if(value!==_this.previousTrackedTranslateX){direction=value>_this.previousTrackedTranslateX?'right':'left';}_this.props.onSwipeValueChange&&_this.props.onSwipeValueChange({isOpen:_this.isOpen,direction:direction,value:value});_this.previousTrackedTranslateX=value;_this.previousTrackedDirection=direction;});}if(_this.props.forceCloseToRightThreshold&&_this.props.forceCloseToRightThreshold>0){_this._translateX.addListener(function(_ref4){var value=_ref4.value;if(!_this.isForceClosing&&SCREEN_WIDTH+value<_this.props.forceCloseToRightThreshold){_this.isForceClosing=true;_this.forceCloseRow('right');if(_this.props.onForceCloseToRight){_this.props.onForceCloseToRight();}}});}if(_this.props.forceCloseToLeftThreshold&&_this.props.forceCloseToLeftThreshold>0){_this._translateX.addListener(function(_ref5){var value=_ref5.value;if(!_this.isForceClosing&&SCREEN_WIDTH-value<_this.props.forceCloseToLeftThreshold){_this.isForceClosing=true;_this.forceCloseRow('left');if(_this.props.onForceCloseToLeft){_this.props.onForceCloseToLeft();}}});}return _this;}(0,_createClass2.default)(SwipeAction,[{key:"UNSAFE_componentWillMount",value:function UNSAFE_componentWillMount(){var _this2=this;this._panResponder=_reactNative.PanResponder.create({onMoveShouldSetPanResponder:function onMoveShouldSetPanResponder(e,gs){return _this2.handleOnMoveShouldSetPanResponder(e,gs);},onPanResponderMove:function onPanResponderMove(e,gs){return _this2.handlePanResponderMove(e,gs);},onPanResponderRelease:function onPanResponderRelease(e,gs){return _this2.handlePanResponderEnd(e,gs);},onPanResponderTerminate:function onPanResponderTerminate(e,gs){return _this2.handlePanResponderEnd(e,gs);},onShouldBlockNativeResponder:function onShouldBlockNativeResponder(_){return false;}});}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this._ensureScrollEnabledTimer);this._translateX.removeAllListeners();}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps,nextState){if(this.state.hiddenHeight!==nextState.hiddenHeight||this.state.hiddenWidth!==nextState.hiddenWidth||!this.props.shouldItemUpdate||this.props.shouldItemUpdate&&this.props.shouldItemUpdate(this.props.item,nextProps.item)){return true;}return false;}},{key:"getPreviewAnimation",value:function getPreviewAnimation(toValue,delay){return _reactNative.Animated.timing(this._translateX,{duration:this.props.previewDuration,toValue:toValue,delay:delay,useNativeDriver:this.props.useNativeDriver});}},{key:"onContentLayout",value:function onContentLayout(e){var _this3=this;this.setState(_objectSpread({dimensionsSet:!this.props.recalculateHiddenLayout},!this.props.disableHiddenLayoutCalculation?{hiddenHeight:e.nativeEvent.layout.height,hiddenWidth:e.nativeEvent.layout.width}:{}));if(this.props.preview&&!this.ranPreview){this.ranPreview=true;var previewOpenValue=this.props.previewOpenValue||this.state.rightOpenValue*0.5;this.getPreviewAnimation(previewOpenValue,this.props.previewOpenDelay).start(function(_){_this3.getPreviewAnimation(0,PREVIEW_CLOSE_DELAY).start();});}}},{key:"onPress",value:function onPress(){if(this.swipeInitialX==null||this.swipeInitialX===0){if(this.props.onPress&&typeof this.props.onPress==='function'){this.props.onPress();}}else{if(this.props.closeOnPress){this.closeRow();}}}},{key:"handleOnMoveShouldSetPanResponder",value:function handleOnMoveShouldSetPanResponder(e,gs){var dx=gs.dx;return Math.abs(dx)>this.props.directionalDistanceChangeThreshold;}},{key:"handlePanResponderMove",value:function handlePanResponderMove(e,gestureState){if(this.isForceClosing){return;}var dx=gestureState.dx,dy=gestureState.dy;var absDx=Math.abs(dx);var absDy=Math.abs(dy);if(absDx>this.props.directionalDistanceChangeThreshold||absDy>this.props.directionalDistanceChangeThreshold){if(absDy>absDx&&!this.horizontalSwipeGestureBegan){return;}if(this.parentScrollEnabled){this.parentScrollEnabled=false;this.props.setScrollEnabled&&this.props.setScrollEnabled(false);}if(this.swipeInitialX===null){this.swipeInitialX=this._translateX._value;}if(!this.horizontalSwipeGestureBegan){this.horizontalSwipeGestureBegan=true;var direction=dx>0?'TO_RIGHT':'TO_LEFT';this.props.swipeGestureBegan&&this.props.swipeGestureBegan(direction);}var newDX=this.swipeInitialX+dx;if(this.props.disableRightAction&&newDX<0){newDX=0;}if(this.props.disableLeftAction&&newDX>0){newDX=0;}if(this.stopLeftSwipe&&newDX>this.stopLeftSwipe){newDX=this.stopLeftSwipe;}if(this.stopRightSwipe&&newDX<this.stopRightSwipe){newDX=this.stopRightSwipe;}if(newDX>0){this.setState({isLeftActionVisible:true,isRightActionVisible:false});}else if(newDX<0){this.setState({isRightActionVisible:true,isLeftActionVisible:false});}this._translateX.setValue(newDX);}}},{key:"handlePanResponderEnd",value:function handlePanResponderEnd(e,gestureState){if(this.isForceClosing){this.isForceClosing=false;}var swipeToOpenVelocityContribution=this.props.swipeToOpenVelocityContribution;var possibleExtraPixels=this.state.rightOpenValue*swipeToOpenVelocityContribution;var clampedVelocity=Math.min(gestureState.vx,MAX_VELOCITY_CONTRIBUTION);var projectedExtraPixels=possibleExtraPixels*(clampedVelocity/MAX_VELOCITY_CONTRIBUTION);this._ensureScrollEnabledTimer=setTimeout(this.ensureScrollEnabled,SCROLL_LOCK_MILLISECONDS);var toValue=0;if(this._translateX._value>=0){if(this.swipeInitialX<this._translateX._value){if(this._translateX._value-projectedExtraPixels>this.state.leftOpenValue*(this.props.swipeToOpenPercent/100)){toValue=this.state.leftOpenValue;}}else if(this._translateX._value-projectedExtraPixels>this.state.leftOpenValue*(1-this.props.swipeToClosePercent/100)){toValue=this.state.leftOpenValue;}}else{if(this.swipeInitialX>this._translateX._value){if(this._translateX._value-projectedExtraPixels<this.state.rightOpenValue*(this.props.swipeToOpenPercent/100)){toValue=this.state.rightOpenValue;}}else if(this._translateX._value-projectedExtraPixels<this.state.rightOpenValue*(1-this.props.swipeToClosePercent/100)){toValue=this.state.rightOpenValue;}}this.props.swipeGestureEnd&&this.props.swipeGestureEnd();this.manuallySwipeRow(toValue);}},{key:"closeRow",value:function closeRow(){this.manuallySwipeRow(0);}},{key:"forceCloseRow",value:function forceCloseRow(direction){var _this4=this;this.manuallySwipeRow(0,function(){if(direction==='right'&&_this4.props.onForceCloseToRightEnd){_this4.props.onForceCloseToRightEnd();}else if(direction==='left'&&_this4.props.onForceCloseToLeftEnd){_this4.props.onForceCloseToLeftEnd();}});}},{key:"closeRowWithoutAnimation",value:function closeRowWithoutAnimation(){this._translateX.setValue(0);this.ensureScrollEnabled();this.isOpen=false;this.props.onDidClose&&this.props.onDidClose();this.props.onClose&&this.props.onClose();this.swipeInitialX=null;this.horizontalSwipeGestureBegan=false;}},{key:"manuallySwipeRow",value:function manuallySwipeRow(toValue,onAnimationEnd){var _this5=this;_reactNative.Animated.spring(this._translateX,{toValue:toValue,friction:this.props.friction,tension:this.props.tension,useNativeDriver:this.props.useNativeDriver}).start(function(_){_this5._translateX.setValue(toValue);_this5.ensureScrollEnabled();if(toValue===0){_this5.isOpen=false;_this5.props.onDidClose&&_this5.props.onDidClose();}else{_this5.isOpen=true;_this5.props.onDidOpen&&_this5.props.onDidOpen(toValue);}if(onAnimationEnd){onAnimationEnd();}});if(toValue===0){this.props.onClose&&this.props.onClose();}else{this.props.onOpen&&this.props.onOpen(toValue);}this.swipeInitialX=toValue;this.horizontalSwipeGestureBegan=false;}},{key:"renderVisibleContent",value:function renderVisibleContent(){var _this6=this;if(this.props.children){var onPress=this.props.children.props.onPress;if(onPress){var newOnPress=function newOnPress(_){_this6.onPress();onPress();};return _react.default.cloneElement(this.props.children,_objectSpread(_objectSpread({},this.props.children.props),{},{onPress:newOnPress}));}return _react.default.createElement(_reactNative.TouchableOpacity,{activeOpacity:1,onPress:function onPress(_){return _this6.onPress();},__source:{fileName:_jsxFileName,lineNumber:372,columnNumber:5}},this.props.children);}}},{key:"renderRowContent",value:function renderRowContent(){var _this7=this;if(this.state.dimensionsSet){return _react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({manipulationModes:['translateX']},this._panResponder.panHandlers,{style:{zIndex:2,transform:[{translateX:this._translateX}]},__source:{fileName:_jsxFileName,lineNumber:387,columnNumber:5}}),this.renderVisibleContent());}return _react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({manipulationModes:['translateX']},this._panResponder.panHandlers,{onLayout:function onLayout(e){return _this7.onContentLayout(e);},style:{zIndex:2,transform:[{translateX:this._translateX}]},__source:{fileName:_jsxFileName,lineNumber:402,columnNumber:4}}),this.renderVisibleContent());}},{key:"render",value:function render(){return _react.default.createElement(_reactNative.View,{style:this.props.style?this.props.style:styles.container,__source:{fileName:_jsxFileName,lineNumber:545,columnNumber:4}},_react.default.createElement(_reactNative.View,{style:[styles.hidden,{height:this.state.hiddenHeight,width:this.state.hiddenWidth}],__source:{fileName:_jsxFileName,lineNumber:546,columnNumber:5}},this.renderHiddenContent()),this.renderRowContent());}}]);return SwipeAction;}(_react.Component);var styles=_reactNative.StyleSheet.create({container:{},hidden:{zIndex:1,bottom:0,left:0,overflow:'hidden',position:'absolute',right:0,top:0},standaloneRowBack:{backgroundColor:_core.Colors.white,alignItems:'center',flex:1,flexDirection:'row',justifyContent:'space-between'},leftItemRow:{alignItems:'center',flex:1,flexDirection:'row',justifyContent:'flex-start',paddingRight:10},rightItemRow:{alignItems:'center',flex:1,flexDirection:'row',justifyContent:'flex-end',paddingLeft:10},buttonContainer:{backgroundColor:'red',alignItems:'center',justifyContent:'center',width:88},icon:{height:24,width:24,tintColor:'white'},text:{color:_core.Colors.white,textAlign:'center',marginHorizontal:10,marginTop:10}});SwipeAction.propTypes={onOpen:_propTypes.default.func,closeOnPress:_propTypes.default.bool,disableRightAction:_propTypes.default.bool,disableLeftAction:_propTypes.default.bool,onClose:_propTypes.default.func,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),leftAction:_propTypes.default.array,rightAction:_propTypes.default.array,renderRightAction:_propTypes.default.func,renderLeftAction:_propTypes.default.func,onPress:_propTypes.default.func,children:_propTypes.default.element.isRequired,actionBackground:_propTypes.default.string,actionTextStyle:_propTypes.default.object};SwipeAction.defaultProps={closeOnPress:true,disableRightAction:true,disableLeftAction:true,recalculateHiddenLayout:false,disableHiddenLayoutCalculation:false,preview:false,previewDuration:300,previewOpenDelay:DEFAULT_PREVIEW_OPEN_DELAY,directionalDistanceChangeThreshold:2,swipeToOpenPercent:50,swipeToOpenVelocityContribution:0,swipeToClosePercent:50,swipeToPerformActionPercent:50,item:{},useNativeDriver:true,rightAction:[],leftAction:[],actionBackground:_core.Colors.white};var _default=SwipeAction;exports.default=_default;
+/* eslint-disable react/default-props-match-prop-types */
+/* eslint-disable react/jsx-closing-tag-location */
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable indent */
+/* eslint-disable react/jsx-indent */
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-mixed-spaces-and-tabs */
+/* eslint-disable no-lonely-if */
+/* eslint-disable no-tabs */
+/* eslint-disable no-unused-expressions */
+/* eslint-disable react/destructuring-assignment */
+
+import React, {
+	Component,
+} from 'react';
+import PropTypes from 'prop-types';
+import {
+	Dimensions,
+	Animated,
+	PanResponder,
+	StyleSheet,
+	TouchableOpacity,
+	View,
+	Image
+} from 'react-native';
+import { Colors, ValueUtil, Text } from '@momo-kits/core';
+
+const DEFAULT_PREVIEW_OPEN_DELAY = 700;
+const PREVIEW_CLOSE_DELAY = 300;
+const MAX_VELOCITY_CONTRIBUTION = 5;
+const SCROLL_LOCK_MILLISECONDS = 300;
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const WIDTH_HIDDEN_RIGHT = 190;
+class SwipeAction extends Component {
+	constructor(props) {
+		super(props);
+		this.isOpen = false;
+		this.previousTrackedTranslateX = 0;
+		this.previousTrackedDirection = null;
+		this.horizontalSwipeGestureBegan = false;
+		this.swipeInitialX = null;
+		this.parentScrollEnabled = true;
+		this.ranPreview = false;
+		this._ensureScrollEnabledTimer = null;
+		this.isForceClosing = false;
+		this.state = {
+			dimensionsSet: false,
+			hiddenHeight: this.props.disableHiddenLayoutCalculation ? '100%' : 0,
+			hiddenWidth: this.props.disableHiddenLayoutCalculation ? '100%' : 0,
+			isLeftActionVisible: false,
+			isRightActionVisible: false,
+			leftOpenValue: 0,
+			rightOpenValue: 0
+		};
+		const { leftAction, rightAction } = this.props;
+		const buttonCellWidth = WIDTH_HIDDEN_RIGHT / 2;
+		// leftAction ? this.leftOpenValue = leftAction.length * buttonCellWidth : 0;
+		// rightAction ? this.rightOpenValue = -rightAction.length * buttonCellWidth : 0;
+		this.stopLeftSwipe = SCREEN_WIDTH;
+		this.stopRightSwipe = -SCREEN_WIDTH;
+		this._translateX = new Animated.Value(0);
+		if (this.props.onSwipeValueChange) {
+			this._translateX.addListener(({ value }) => {
+				let direction = this.previousTrackedDirection;
+				if (value !== this.previousTrackedTranslateX) {
+					direction = value > this.previousTrackedTranslateX ? 'right' : 'left';
+				}
+				this.props.onSwipeValueChange && this.props.onSwipeValueChange({
+					isOpen: this.isOpen,
+					direction,
+					value,
+				});
+				this.previousTrackedTranslateX = value;
+				this.previousTrackedDirection = direction;
+			});
+		}
+
+		if (this.props.forceCloseToRightThreshold && this.props.forceCloseToRightThreshold > 0) {
+			this._translateX.addListener(({ value }) => {
+				if (!this.isForceClosing && (SCREEN_WIDTH + value) < this.props.forceCloseToRightThreshold) {
+					this.isForceClosing = true;
+					this.forceCloseRow('right');
+					if (this.props.onForceCloseToRight) {
+						this.props.onForceCloseToRight();
+					}
+				}
+			});
+		}
+
+		if (this.props.forceCloseToLeftThreshold && this.props.forceCloseToLeftThreshold > 0) {
+			this._translateX.addListener(({ value }) => {
+				if (!this.isForceClosing && (SCREEN_WIDTH - value) < this.props.forceCloseToLeftThreshold) {
+					this.isForceClosing = true;
+					this.forceCloseRow('left');
+					if (this.props.onForceCloseToLeft) {
+						this.props.onForceCloseToLeft();
+					}
+				}
+			});
+		}
+	}
+
+	UNSAFE_componentWillMount() {
+		this._panResponder = PanResponder.create({
+			onMoveShouldSetPanResponder: (e, gs) => this.handleOnMoveShouldSetPanResponder(e, gs),
+			onPanResponderMove: (e, gs) => this.handlePanResponderMove(e, gs),
+			onPanResponderRelease: (e, gs) => this.handlePanResponderEnd(e, gs),
+			onPanResponderTerminate: (e, gs) => this.handlePanResponderEnd(e, gs),
+			onShouldBlockNativeResponder: (_) => false,
+		});
+	}
+
+	componentWillUnmount() {
+		clearTimeout(this._ensureScrollEnabledTimer);
+		this._translateX.removeAllListeners();
+	}
+
+	shouldComponentUpdate(nextProps, nextState) {
+		if (this.state.hiddenHeight !== nextState.hiddenHeight
+			|| this.state.hiddenWidth !== nextState.hiddenWidth
+			|| !this.props.shouldItemUpdate
+			|| (this.props.shouldItemUpdate && this.props.shouldItemUpdate(this.props.item, nextProps.item))) {
+			return true;
+		}
+
+		return false;
+	}
+
+	getPreviewAnimation(toValue, delay) {
+		return Animated.timing(
+			this._translateX,
+			{
+				duration: this.props.previewDuration, toValue, delay, useNativeDriver: this.props.useNativeDriver
+			}
+		);
+	}
+
+	onContentLayout(e) {
+		this.setState({
+			dimensionsSet: !this.props.recalculateHiddenLayout,
+			...(!this.props.disableHiddenLayoutCalculation ? {
+				hiddenHeight: e.nativeEvent.layout.height,
+				hiddenWidth: e.nativeEvent.layout.width,
+			} : {})
+		});
+
+		if (this.props.preview && !this.ranPreview) {
+			this.ranPreview = true;
+			const previewOpenValue = this.props.previewOpenValue || this.state.rightOpenValue * 0.5;
+			this.getPreviewAnimation(previewOpenValue, this.props.previewOpenDelay)
+				.start((_) => {
+					this.getPreviewAnimation(0, PREVIEW_CLOSE_DELAY).start();
+				});
+		}
+	}
+
+	onPress() {
+		if (this.swipeInitialX == null || this.swipeInitialX === 0) {
+			if (this.props.onPress && typeof this.props.onPress === 'function') {
+				this.props.onPress();
+			}
+		} else {
+			if (this.props.closeOnPress) {
+				this.closeRow();
+			}
+		}
+	}
+
+	handleOnMoveShouldSetPanResponder(e, gs) {
+		const { dx } = gs;
+		return Math.abs(dx) > this.props.directionalDistanceChangeThreshold;
+	}
+
+	handlePanResponderMove(e, gestureState) {
+		/* If the view is force closing, then ignore Moves. Return */
+		if (this.isForceClosing) {
+			return;
+		}
+
+		/* Else, do normal job */
+		const { dx, dy } = gestureState;
+		const absDx = Math.abs(dx);
+		const absDy = Math.abs(dy);
+
+		// this check may not be necessary because we don't capture the move until we pass the threshold
+		// just being extra safe here
+		if (absDx > this.props.directionalDistanceChangeThreshold || absDy > this.props.directionalDistanceChangeThreshold) {
+			// we have enough to determine direction
+			if (absDy > absDx && !this.horizontalSwipeGestureBegan) {
+				// user is moving vertically, do nothing, listView will handle
+				return;
+			}
+
+			// user is moving horizontally
+			if (this.parentScrollEnabled) {
+				// disable scrolling on the listView parent
+				this.parentScrollEnabled = false;
+				this.props.setScrollEnabled && this.props.setScrollEnabled(false);
+			}
+
+			if (this.swipeInitialX === null) {
+				// set tranlateX value when user started swiping
+				this.swipeInitialX = this._translateX._value;
+			}
+			if (!this.horizontalSwipeGestureBegan) {
+				this.horizontalSwipeGestureBegan = true;
+				const direction = dx > 0 ? 'TO_RIGHT' : 'TO_LEFT';
+				this.props.swipeGestureBegan && this.props.swipeGestureBegan(direction);
+			}
+
+			let newDX = this.swipeInitialX + dx;
+			if (this.props.disableRightAction && newDX < 0) { newDX = 0; }
+			if (this.props.disableLeftAction && newDX > 0) { newDX = 0; }
+
+			if (this.stopLeftSwipe && newDX > this.stopLeftSwipe) { newDX = this.stopLeftSwipe; }
+			if (this.stopRightSwipe && newDX < this.stopRightSwipe) { newDX = this.stopRightSwipe; }
+
+			// set action buttons visibility
+			if (newDX > 0) {
+				this.setState({
+					isLeftActionVisible: true,
+					isRightActionVisible: false
+				});
+			} else if (newDX < 0) {
+				this.setState({
+					isRightActionVisible: true,
+					isLeftActionVisible: false,
+				});
+			}
+
+			this._translateX.setValue(newDX);
+		}
+	}
+
+	ensureScrollEnabled = () => {
+		if (!this.parentScrollEnabled) {
+			this.parentScrollEnabled = true;
+			this.props.setScrollEnabled && this.props.setScrollEnabled(true);
+		}
+	}
+
+	handlePanResponderEnd(e, gestureState) {
+		/* PandEnd will reset the force-closing state when it's true. */
+		if (this.isForceClosing) {
+			this.isForceClosing = false;
+		}
+		// decide how much the velocity will affect the final position that the list item settles in.
+		const { swipeToOpenVelocityContribution } = this.props;
+		const possibleExtraPixels = this.state.rightOpenValue * (swipeToOpenVelocityContribution);
+		const clampedVelocity = Math.min(gestureState.vx, MAX_VELOCITY_CONTRIBUTION);
+		const projectedExtraPixels = possibleExtraPixels * (clampedVelocity / MAX_VELOCITY_CONTRIBUTION);
+
+		// re-enable scrolling on listView parent
+		this._ensureScrollEnabledTimer = setTimeout(this.ensureScrollEnabled, SCROLL_LOCK_MILLISECONDS);
+
+		// finish up the animation
+		let toValue = 0;
+		if (this._translateX._value >= 0) {
+			// trying to swipe right
+			if (this.swipeInitialX < this._translateX._value) {
+				if ((this._translateX._value - projectedExtraPixels) > this.state.leftOpenValue * (this.props.swipeToOpenPercent / 100)) {
+					// we're more than halfway
+					toValue = this.state.leftOpenValue;
+				}
+			} else if ((this._translateX._value - projectedExtraPixels) > this.state.leftOpenValue * (1 - (this.props.swipeToClosePercent / 100))) {
+				toValue = this.state.leftOpenValue;
+			}
+		} else {
+			// trying to swipe left
+			if (this.swipeInitialX > this._translateX._value) {
+				if ((this._translateX._value - projectedExtraPixels) < this.state.rightOpenValue * (this.props.swipeToOpenPercent / 100)) {
+					// we're more than halfway
+					toValue = this.state.rightOpenValue;
+				}
+			} else if ((this._translateX._value - projectedExtraPixels) < this.state.rightOpenValue * (1 - (this.props.swipeToClosePercent / 100))) {
+				toValue = this.state.rightOpenValue;
+			}
+		}
+
+		this.props.swipeGestureEnd && this.props.swipeGestureEnd();
+		this.manuallySwipeRow(toValue);
+	}
+
+	/*
+	 * This method is called by SwipeListView
+	 */
+	closeRow() {
+		this.manuallySwipeRow(0);
+	}
+
+	/**
+	 * Force close the row toward the end of the given direction.
+	 * @param  {String} direction The direction to force close.
+	 */
+	forceCloseRow(direction) {
+		this.manuallySwipeRow(0, () => {
+			if (direction === 'right' && this.props.onForceCloseToRightEnd) {
+				this.props.onForceCloseToRightEnd();
+			} else if (direction === 'left' && this.props.onForceCloseToLeftEnd) {
+				this.props.onForceCloseToLeftEnd();
+			}
+		});
+	}
+
+	closeRowWithoutAnimation() {
+		this._translateX.setValue(0);
+
+		this.ensureScrollEnabled();
+		this.isOpen = false;
+		this.props.onDidClose && this.props.onDidClose();
+
+		this.props.onClose && this.props.onClose();
+
+		this.swipeInitialX = null;
+		this.horizontalSwipeGestureBegan = false;
+	}
+
+	manuallySwipeRow(toValue, onAnimationEnd) {
+		Animated.spring(
+			this._translateX,
+			{
+				toValue,
+				friction: this.props.friction,
+				tension: this.props.tension,
+				useNativeDriver: this.props.useNativeDriver,
+			}
+		).start((_) => {
+			this._translateX.setValue(toValue);
+			this.ensureScrollEnabled();
+			if (toValue === 0) {
+				this.isOpen = false;
+				this.props.onDidClose && this.props.onDidClose();
+			} else {
+				this.isOpen = true;
+				this.props.onDidOpen && this.props.onDidOpen(toValue);
+			}
+			if (onAnimationEnd) {
+				onAnimationEnd();
+			}
+		});
+
+		if (toValue === 0) {
+			this.props.onClose && this.props.onClose();
+		} else {
+			this.props.onOpen && this.props.onOpen(toValue);
+		}
+
+		// reset everything
+		this.swipeInitialX = toValue;
+		this.horizontalSwipeGestureBegan = false;
+	}
+
+	renderVisibleContent() {
+		if (this.props.children) {
+			// handle touchables
+			const { onPress } = this.props.children.props;
+
+			if (onPress) {
+				const newOnPress = (_) => {
+					this.onPress();
+					onPress();
+				};
+				return React.cloneElement(
+					this.props.children,
+					{
+						...this.props.children.props,
+						onPress: newOnPress
+					}
+				);
+			}
+			return (
+				<TouchableOpacity
+					activeOpacity={1}
+					onPress={(_) => this.onPress()}
+				>
+					{this.props.children}
+				</TouchableOpacity>
+			);
+		}
+	}
+
+	renderRowContent() {
+		// We do this annoying if statement for performance.
+		// We don't want the onLayout func to run after it runs once.
+		if (this.state.dimensionsSet) {
+			return (
+				<Animated.View
+					manipulationModes={['translateX']}
+					{...this._panResponder.panHandlers}
+					style={{
+						zIndex: 2,
+						transform: [
+							{ translateX: this._translateX }
+						]
+					}}
+				>
+					{this.renderVisibleContent()}
+				</Animated.View>
+			);
+		}
+		return (
+			<Animated.View
+				manipulationModes={['translateX']}
+				{...this._panResponder.panHandlers}
+				onLayout={(e) => this.onContentLayout(e)}
+				style={{
+					zIndex: 2,
+					transform: [
+						{ translateX: this._translateX }
+					]
+				}}
+			>
+				{this.renderVisibleContent()}
+			</Animated.View>
+		);
+	}
+
+	onLeftActionLayout = ({ nativeEvent }) => {
+		this.setState({
+			leftOpenValue: nativeEvent.layout.width
+		});
+	}
+
+	onRightActionLayout = ({ nativeEvent }) => {
+		this.setState({
+			rightOpenValue: -nativeEvent.layout.width
+		});
+	}
+
+	renderHiddenContent = () => {
+		const {
+			actionBackground, rowIndex, rightAction, leftAction
+		} = this.props;
+		const hiddenRowStyle = {
+			...styles.standaloneRowBack,
+			...{ backgroundColor: actionBackground }
+		};
+		return (
+			<View style={hiddenRowStyle}>
+				{
+					this.state.isLeftActionVisible
+					&& (
+						<View style={styles.leftItemRow}>
+							<View style={{ flexDirection: 'row' }} onLayout={this.onLeftActionLayout}>
+								{
+									leftAction?.map?.((item, index) => this.renderLeftAction(item, index))
+								}
+							</View>
+						</View>
+					)
+				}
+				{
+					this.state.isRightActionVisible
+					&& (
+						<View style={styles.rightItemRow}>
+							<View style={{ flexDirection: 'row' }} onLayout={this.onRightActionLayout}>
+								{
+									rightAction?.slice?.(0)?.reverse().map((item, index) => this.renderRightAction(item, index))
+								}
+							</View>
+						</View>
+					)
+				}
+
+			</View>
+		);
+	}
+
+	renderIcon = (icon) => {
+		const { actionIconStyle } = this.props;
+		const iconSource = ValueUtil.getImageSource(icon);
+		return (
+			<Image
+				source={iconSource}
+				resizeMode="contain"
+				style={[styles.icon, actionIconStyle]}
+			/>
+		);
+	}
+
+	renderTitle = (title) => {
+		const { actionTextStyle } = this.props;
+		return (
+			<Text.SubTitle style={[styles.text, actionTextStyle]}>
+				{title}
+			</Text.SubTitle>
+		);
+	}
+
+	onActionPress = (item, rowIndex) => () => {
+		const { onPress } = item;
+		onPress?.(item, rowIndex);
+	}
+
+	renderRightAction = (item, index) => {
+		const { rowIndex, renderRightAction } = this.props;
+		if (renderRightAction) {
+			return (
+				<View key={item + index}>
+					{renderRightAction({ item, index, rowIndex })}
+				</View>
+			);
+		}
+		return (
+			<TouchableOpacity
+				key={index.toString()}
+				style={[
+					styles.buttonContainer,
+					{ backgroundColor: item.color, height: this.state.hiddenHeight }
+				]}
+				onPress={this.onActionPress(item, rowIndex)}
+			>
+				{item.icon && this.renderIcon(item.icon)}
+				{item.title && this.renderTitle(item.title)}
+			</TouchableOpacity>
+		);
+	}
+
+	renderLeftAction = (item, index) => {
+		const { rowIndex, renderLeftAction } = this.props;
+		if (renderLeftAction) {
+			return (
+				<View key={item + index}>
+					{renderLeftAction({ item, index, rowIndex })}
+				</View>
+			);
+		}
+		return (
+			<TouchableOpacity
+				key={index.toString()}
+				style={[
+					styles.buttonContainer,
+					{ backgroundColor: item.color, height: this.state.hiddenHeight }
+				]}
+				onPress={this.onActionPress(item, rowIndex)}
+			>
+				{item.icon && this.renderIcon(item.icon)}
+				{item.title && this.renderTitle(item.title)}
+			</TouchableOpacity>
+		);
+	}
+
+	render() {
+		return (
+			<View style={this.props.style ? this.props.style : styles.container}>
+				<View style={[
+					styles.hidden,
+					{
+						height: this.state.hiddenHeight,
+						width: this.state.hiddenWidth,
+					}
+				]}
+				>
+					{this.renderHiddenContent()}
+				</View>
+				{this.renderRowContent()}
+			</View>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	container: {
+		// As of RN 0.29 flex: 1 is causing all rows to be the same height
+		// flex: 1
+	},
+	hidden: {
+		zIndex: 1,
+		bottom: 0,
+		left: 0,
+		overflow: 'hidden',
+		position: 'absolute',
+		right: 0,
+		top: 0,
+	},
+	standaloneRowBack: {
+		backgroundColor: Colors.white,
+		alignItems: 'center',
+		flex: 1,
+		flexDirection: 'row',
+		justifyContent: 'space-between'
+	},
+	leftItemRow: {
+		alignItems: 'center',
+		flex: 1,
+		flexDirection: 'row',
+		justifyContent: 'flex-start',
+		paddingRight: 10
+	},
+	rightItemRow: {
+		alignItems: 'center',
+		flex: 1,
+		flexDirection: 'row',
+		justifyContent: 'flex-end',
+		paddingLeft: 10,
+	},
+	buttonContainer: {
+		backgroundColor: 'red',
+		alignItems: 'center',
+		justifyContent: 'center',
+		width: 88
+	},
+	icon: {
+		height: 24,
+		width: 24,
+		tintColor: 'white'
+	},
+	text: {
+		color: Colors.white,
+		textAlign: 'center',
+		marginHorizontal: 10,
+		marginTop: 10
+	}
+});
+
+SwipeAction.propTypes = {
+	onOpen: PropTypes.func,
+	closeOnPress: PropTypes.bool,
+	disableRightAction: PropTypes.bool,
+	disableLeftAction: PropTypes.bool,
+	onClose: PropTypes.func,
+	style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+	leftAction: PropTypes.array,
+	rightAction: PropTypes.array,
+	renderRightAction: PropTypes.func,
+	renderLeftAction: PropTypes.func,
+	onPress: PropTypes.func,
+	children: PropTypes.element.isRequired,
+	actionBackground: PropTypes.string,
+	actionTextStyle: PropTypes.object,
+	swipeGestureBegan: PropTypes.func,
+	swipeGestureEnd: PropTypes.func,
+};
+
+SwipeAction.defaultProps = {
+	closeOnPress: true,
+	disableRightAction: true,
+	disableLeftAction: true,
+	recalculateHiddenLayout: false,
+	disableHiddenLayoutCalculation: false,
+	preview: false,
+	previewDuration: 300,
+	previewOpenDelay: DEFAULT_PREVIEW_OPEN_DELAY,
+	directionalDistanceChangeThreshold: 2,
+	swipeToOpenPercent: 50,
+	swipeToOpenVelocityContribution: 0,
+	swipeToClosePercent: 50,
+	swipeToPerformActionPercent: 50,
+	item: {},
+	useNativeDriver: true,
+	rightAction: [],
+	leftAction: [],
+	actionBackground: Colors.white
+};
+
+export default SwipeAction;