mopinion-react-native-sdk/dist/components/Ripple.js

Collect in-app feedback with Mopinion for React Native. Built fully in React Native for optimal integration with your React Native app.

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.radius=exports.Ripple=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styles=require("../styles");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["delayLongPress","delayPressIn","delayPressOut","disabled","hitSlop","pressRetentionOffset","children","rippleContainerBorderRadius","testID","nativeID","accessible","accessibilityLabel","onLayout"];function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f;})(e,t);}function _callSuper(t,o,e){return o=(0,_getPrototypeOf2.default)(o),(0,_possibleConstructorReturn2.default)(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2.default)(t).constructor):o.apply(t,e));}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}var radius=exports.radius=10;var styles=exports.styles=_reactNative.StyleSheet.create({container:Object.assign({},_reactNative.StyleSheet.absoluteFillObject,{backgroundColor:'transparent',overflow:'hidden'}),ripple:{width:radius*2,height:radius*2,borderRadius:radius,overflow:'hidden',position:'absolute'}});var Ripple=function(_PureComponent){function Ripple(props){var _this;(0,_classCallCheck2.default)(this,Ripple);_this=_callSuper(this,Ripple,[props]);_this.rippleColor=props.theme.rippleColor;_this.onLayout=_this.onLayout.bind(_this);_this.onPress=_this.onPress.bind(_this);_this.onPressIn=_this.onPressIn.bind(_this);_this.onPressOut=_this.onPressOut.bind(_this);_this.onLongPress=_this.onLongPress.bind(_this);_this.onAnimationEnd=_this.onAnimationEnd.bind(_this);_this.renderRipple=_this.renderRipple.bind(_this);_this.unique=0;_this.mounted=false;_this.state={width:0,height:0,ripples:[]};return _this;}(0,_inherits2.default)(Ripple,_PureComponent);return(0,_createClass2.default)(Ripple,[{key:"componentDidMount",value:function componentDidMount(){this.mounted=true;}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.mounted=false;}},{key:"onLayout",value:function onLayout(event){var _event$nativeEvent$la=event.nativeEvent.layout,width=_event$nativeEvent$la.width,height=_event$nativeEvent$la.height;var onLayout=this.props.onLayout;if('function'===typeof onLayout){onLayout(event);}this.setState({width:width,height:height});}},{key:"onPress",value:function onPress(event){var ripples=this.state.ripples;var _this$props=this.props,onPress=_this$props.onPress,rippleSequential=_this$props.rippleSequential;if(!rippleSequential||!ripples.length){if('function'===typeof onPress){requestAnimationFrame(function(){return onPress(event);});}this.startRipple(event);}}},{key:"onLongPress",value:function onLongPress(event){var onLongPress=this.props.onLongPress;if('function'===typeof onLongPress){requestAnimationFrame(function(){return onLongPress(event);});}this.startRipple(event);}},{key:"onPressIn",value:function onPressIn(event){var onPressIn=this.props.onPressIn;if('function'===typeof onPressIn){onPressIn(event);}}},{key:"onPressOut",value:function onPressOut(event){var onPressOut=this.props.onPressOut;if('function'===typeof onPressOut){onPressOut(event);}}},{key:"onAnimationEnd",value:function onAnimationEnd(){if(this.mounted){this.setState(function(_ref){var ripples=_ref.ripples;return{ripples:ripples.slice(1)};});}}},{key:"startRipple",value:function startRipple(event){var _this$state=this.state,width=_this$state.width,height=_this$state.height;var _this$props2=this.props,rippleDuration=_this$props2.rippleDuration,rippleCentered=_this$props2.rippleCentered,rippleSize=_this$props2.rippleSize,onRippleAnimation=_this$props2.onRippleAnimation;var w2=0.5*width;var h2=0.5*height;var _ref2=rippleCentered?{locationX:w2,locationY:h2}:event.nativeEvent,locationX=_ref2.locationX,locationY=_ref2.locationY;var offsetX=Math.abs(w2-locationX);var offsetY=Math.abs(h2-locationY);var R=rippleSize>0?0.5*rippleSize:Math.sqrt(Math.pow(w2+offsetX,2)+Math.pow(h2+offsetY,2));var ripple={unique:this.unique++,progress:new _reactNative.Animated.Value(0),locationX:locationX,locationY:locationY,R:R};var animation=_reactNative.Animated.timing(ripple.progress,{toValue:1,easing:_reactNative.Easing.out(_reactNative.Easing.ease),duration:rippleDuration,useNativeDriver:true});onRippleAnimation(animation,this.onAnimationEnd);this.setState(function(_ref3){var ripples=_ref3.ripples;return{ripples:ripples.concat(ripple)};});}},{key:"renderRipple",value:function renderRipple(_ref4){var unique=_ref4.unique,progress=_ref4.progress,locationX=_ref4.locationX,locationY=_ref4.locationY,R=_ref4.R;var _this$props3=this.props,rippleColor=_this$props3.rippleColor,rippleOpacity=_this$props3.rippleOpacity,rippleFades=_this$props3.rippleFades;var rippleStyle={top:locationY-radius,left:locationX-radius,backgroundColor:rippleColor,transform:[{scale:progress.interpolate({inputRange:[0,1],outputRange:[0.5/radius,R/radius]})}],opacity:rippleFades?progress.interpolate({inputRange:[0,1],outputRange:[rippleOpacity,0]}):rippleOpacity};return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[styles.ripple,rippleStyle]},unique);}},{key:"render",value:function render(){var ripples=this.state.ripples;var onPress=this.onPress,onPressIn=this.onPressIn,onPressOut=this.onPressOut,onLongPress=this.onLongPress,onLayout=this.onLayout;var _this$props4=this.props,delayLongPress=_this$props4.delayLongPress,delayPressIn=_this$props4.delayPressIn,delayPressOut=_this$props4.delayPressOut,disabled=_this$props4.disabled,hitSlop=_this$props4.hitSlop,pressRetentionOffset=_this$props4.pressRetentionOffset,children=_this$props4.children,rippleContainerBorderRadius=_this$props4.rippleContainerBorderRadius,testID=_this$props4.testID,nativeID=_this$props4.nativeID,accessible=_this$props4.accessible,accessibilityLabel=_this$props4.accessibilityLabel,__ignored__=_this$props4.onLayout,props=(0,_objectWithoutProperties2.default)(_this$props4,_excluded);var touchableProps={delayLongPress:delayLongPress,delayPressIn:delayPressIn,delayPressOut:delayPressOut,disabled:disabled,hitSlop:hitSlop,pressRetentionOffset:pressRetentionOffset,onPress:onPress,onPressIn:onPressIn,testID:testID,nativeID:nativeID,accessible:accessible,accessibilityLabel:accessibilityLabel,onPressOut:onPressOut,onLongPress:props.onLongPress?onLongPress:undefined,onLayout:onLayout};var containerStyle={borderRadius:rippleContainerBorderRadius};return(0,_jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback,Object.assign({},touchableProps,{children:(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,Object.assign({},props,{pointerEvents:"box-only",children:[children,(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.container,containerStyle],children:ripples.map(this.renderRipple)})]}))}));}}]);}(_react.PureComponent);Ripple.defaultProps=Object.assign({},_reactNative.TouchableWithoutFeedback.defaultProps,{rippleColor:'rgb(0, 0, 0)',rippleOpacity:0.3,rippleDuration:400,rippleSize:0,rippleContainerBorderRadius:0,rippleCentered:false,rippleSequential:false,rippleFades:true,disabled:false,onRippleAnimation:function onRippleAnimation(animation,callback){return animation.start(callback);}});var themedRipple=exports.Ripple=(0,_styles.withTheme)(Ripple);