mopinion-react-native-sdk/dist/components/Rating.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.default=void 0;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 _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 _Images=require("./Images");var _jsxRuntime=require("react/jsx-runtime");function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}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 Rating=function(_Component){function Rating(props){var _this$props$block,_this$props$block2;var _this;(0,_classCallCheck2.default)(this,Rating);_this=_callSuper(this,Rating,[props]);_this.state={maxStars:((_this$props$block=_this.props.block)==null?void 0:_this$props$block.typeName)==='nps'?11:_this.props.scale,rating:_this.props.rating,selectedBackground:_this.props.theme.selectedControlColor||_this.props.selectedBackground,unselectedBackground:_this.props.unselectedBackground,values:_this.scoresAsArray(),animations:_this.scoresAsArray().map(function(){return{value:new _reactNative.Animated.Value(0)};}),labelHeight:{}};_this.state.starSize=(_reactNative.Dimensions.get('window').width-20)/(_this.props.includeZero?_this.props.scale+1:_this.props.scale);if(_this.state.starSize>60&&((_this$props$block2=_this.props.block)==null?void 0:_this$props$block2.properties.type)==='stars'){_this.state.starSize=40;}if(_this.state.starSize>40&&_this.state.starSize<65){_this.state.starHeight=_this.state.starSize;}else{_this.state.starHeight=_this.props.block.properties.type==='emoji'?55:_this.props.block.properties.type==='stars'?40:45;}return _this;}(0,_inherits2.default)(Rating,_Component);return(0,_createClass2.default)(Rating,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this._panResponder=_reactNative.PanResponder.create({onStartShouldSetPanResponder:function onStartShouldSetPanResponder(evt,gestureState){return true;},onStartShouldSetPanResponderCapture:function onStartShouldSetPanResponderCapture(evt,gestureState){return true;},onMoveShouldSetPanResponder:function onMoveShouldSetPanResponder(evt,gestureState){return true;},onMoveShouldSetPanResponderCapture:function onMoveShouldSetPanResponderCapture(evt,gestureState){return true;},onPanResponderGrant:function onPanResponderGrant(evt,gestureState){_this2._updateChangeValue(evt);_this2.props.isSwiping(true);},onPanResponderMove:function onPanResponderMove(evt,gestureState){_this2._updateChangeValue(evt);},onPanResponderRelease:function onPanResponderRelease(evt,gestureState){_this2._updateChangeValue(evt,true);_this2.props.isSwiping(false);},onPanResponderTerminate:function onPanResponderTerminate(evt,gestureState){_this2.props.isSwiping(false);},onPanResponderTerminationRequest:function onPanResponderTerminationRequest(evt,gestureState){return true;},onShouldBlockNativeResponder:function onShouldBlockNativeResponder(evt,gestureState){return true;}});}},{key:"scoresAsArray",value:function scoresAsArray(){var _this3=this;var range=function range(start,end){return Array.from({length:end-start},function(v,k){return k+start;});};var start=this.props.includeZero?0:1;var scores=function scores(){if(_this3.props.reverseScore){return range(start,_this3.props.scale+1).reverse();}else{return range(start,_this3.props.scale+1);}};return scores();}},{key:"_label",value:function _label(labelText,i){var _this4=this;var block=this.props.block;var labelContainerStyle={pointerEvents:'none',backgroundColor:'rgba(0,0,0,.7)',borderRadius:_styles.baseTheme.borderRadius,padding:(0,_styles.spacing)(0.25),overflow:'hidden',flex:1,justifyContent:'center',alignItems:'center',alignSelf:'center',position:'absolute',overflow:'visible',bottom:Number.isNaN(-this.state.labelHeight[i])?0:-this.state.labelHeight[i],transform:[{translateY:this.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:[0,10]})}],opacity:this.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:[0,1]})};var labelTextStyle=[{fontSize:12,color:'#fff',textAlign:'center',fontWeight:'600'}];return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:labelContainerStyle,onLayout:function onLayout(event){var height=event.nativeEvent.layout.height;_this4.setState(function(prevState){return Object.assign({},prevState,{labelHeight:Object.assign({},prevState.labelHeight,(0,_defineProperty2.default)({},i,height))});});},children:(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{style:labelTextStyle,children:labelText})});}},{key:"getScores",value:function getScores(){var _this5=this;var _this$props=this.props,block=_this$props.block,reverseScore=_this$props.reverseScore,redToGreen=_this$props.redToGreen;return this.state.values.map(function(score,i){var baseStyle={transform:[{scale:_this5.state.animations[i].value.interpolate({inputRange:[0,0.5,1],outputRange:[1,0.667,1]})}],zIndex:_this5.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:[1,10]}),overflow:'visible'};var textStyle=[styles.text,{color:_this5.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:['rgba(0,0,0,.54)',block.typeName==='ces'?reverseScore?[].concat(redToGreen).reverse()[i]:redToGreen[i]:'#fff']})}];if(block.properties.type==='numeric'||block.typeName==='nps'){var barStyle={width:_this5.state.starSize,height:_this5.state.starHeight,alignItems:'center',justifyContent:'center',backgroundColor:_this5.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:[_this5.state.unselectedBackground,_this5.state.selectedBackground]}),borderColor:_this5.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:['rgba(0,0,0,.12)',_this5.state.selectedBackground]}),borderTopWidth:1,borderBottomWidth:1,borderLeftWidth:i==0?1:0,borderRightWidth:_this5.state.values.length-1===i?1:0,borderTopLeftRadius:i==0?_styles.baseTheme.borderRadius:0,borderBottomLeftRadius:i==0?_styles.baseTheme.borderRadius:0,borderRightWidth:1,borderTopRightRadius:_this5.state.values.length-1===i?_styles.baseTheme.borderRadius:0,borderBottomRightRadius:_this5.state.values.length-1===i?_styles.baseTheme.borderRadius:0};return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[baseStyle,barStyle],children:(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{style:textStyle,children:score})},i);}else if(block.properties.type==='stars'){var starStyle={width:_this5.state.starSize,height:_this5.state.starHeight,alignItems:'center',justifyContent:'center',zIndex:10};var starSize=_this5.state.starSize>_this5.state.starHeight?_this5.state.starHeight:_this5.state.starSize;var inactiveStar={opacity:_this5.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:[1,0]}),width:starSize,height:starSize,transform:[{scale:0.9}]};var activeStar={opacity:_this5.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:[0,1]}),zIndex:10,width:starSize,height:starSize,position:'absolute',transform:[{scale:0.9}]};var label=block.properties.showCaptions?_this5._label(block.properties.elements[i+1].label,i):null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[baseStyle,starStyle],children:[(0,_jsxRuntime.jsx)(_reactNative.Animated.Image,{source:{uri:_this5.props.stars.unselected},style:[inactiveStar]}),(0,_jsxRuntime.jsx)(_reactNative.Animated.Image,{source:{uri:_this5.props.stars.selected},style:[activeStar]})]}),label]},i);}else if(block.properties.type==='emoji'){var emojiStyle={width:_this5.state.starSize,height:_this5.state.starHeight,alignItems:'center',justifyContent:'center',zIndex:10};var emojiSize=_this5.state.starSize>_this5.state.starHeight?_this5.state.starHeight:_this5.state.starSize;var inActiveEmoji={opacity:_this5.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:[1,0]}),width:emojiSize,height:emojiSize,transform:[{scale:0.8}]};var activeEmoji={opacity:_this5.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:[0,1]}),zIndex:10,width:emojiSize,height:emojiSize,position:'absolute'};var emoji=_this5.props.emojis[i];var _label2=block.properties.showCaptions?_this5._label(block.properties.emoji[i+1].label,i):null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[baseStyle,emojiStyle],children:[(0,_jsxRuntime.jsx)(_reactNative.Animated.Image,{source:{uri:emoji.img},style:[inActiveEmoji]}),(0,_jsxRuntime.jsx)(_reactNative.Animated.Image,{source:{uri:emoji.imgActive},style:[activeEmoji]})]}),_label2]},i);}else if(block.properties.type=='bar'){var _barStyle={width:_this5.state.starSize,height:_this5.state.starHeight,alignItems:'center',justifyContent:'center',backgroundColor:_this5.props.redToGreen[i],opacity:_this5.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:[0.15,1]}),borderTopLeftRadius:i==0?2:0,borderBottomLeftRadius:i==0?2:0,borderTopRightRadius:_this5.state.values.length-1===i?2:0,borderBottomRightRadius:_this5.state.values.length-1===i?2:0};return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[baseStyle,_barStyle]},i);}else if(block.typeName==='ces'){var rtgColor=reverseScore?[].concat(redToGreen).reverse()[i]:redToGreen[i];var cesStyle={width:_this5.state.starSize,height:_this5.state.starHeight,alignItems:'center',justifyContent:'center',borderBottomColor:_this5.state.animations[i].value.interpolate({inputRange:[0,1],outputRange:['rgba(0,0,0,.54)',rtgColor]}),borderBottomWidth:3};var _label3=block.properties.showCaptions?_this5._label(reverseScore?block.properties.elements[score].label:block.properties.elements[i+1].label,i):null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[baseStyle,cesStyle],children:(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{style:textStyle,children:reverseScore?[].concat(_this5.props.ces).reverse()[i]:_this5.props.ces[i]})}),_label3]},i);}});}},{key:"render",value:function render(){var _this$_panResponder$p,_this$_panResponder;var block=this.props.block;var wrapperStyle=[styles.wrapper,block.properties.type==='numeric'||block.typeName==='nps'?styles.radius:{}];var containerStyle=[styles.container,block.properties.showCaptions?styles.labelPadding:{}];return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:wrapperStyle,children:[(0,_jsxRuntime.jsx)(_reactNative.View,Object.assign({style:containerStyle},(_this$_panResponder$p=(_this$_panResponder=this._panResponder)==null?void 0:_this$_panResponder.panHandlers)!=null?_this$_panResponder$p:{},{children:this.getScores()})),block.properties.legend&&(0,_jsxRuntime.jsx)(Legend,{legend:block.properties.legend,reverse:block.properties.reverseScore})]});}},{key:"_updateChangeValue",value:function _updateChangeValue(evt,shouldUpdateState){var _this6=this;var starWidth=this.state.starSize;var isRTL=_reactNative.I18nManager.isRTL;var pageX=evt.nativeEvent.pageX;var containerWidth=_reactNative.Dimensions.get('window').width;var elementPosition=isRTL?Math.floor((containerWidth-pageX)/starWidth):Math.ceil(pageX/starWidth)-1;var fitPosition=elementPosition<=0?0:elementPosition>=this.state.maxStars?this.state.maxStars-1:elementPosition;var ratingValue=this.state.values[fitPosition];var cb=function cb(){if(shouldUpdateState){_this6.setState({rating:ratingValue});_this6.props.valueChanged(ratingValue);}};this._animate(fitPosition,cb);}},{key:"_animate",value:function _animate(elementPosition,callback){var _this7=this;this.state.animations.forEach(function(o,i){var to=_this7.props.block.properties.type==='stars'?i<=elementPosition:i===elementPosition;var toLabel=i==elementPosition;_reactNative.Animated.spring(o.value,{toValue:to?1:0,duration:225,useNativeDriver:false}).start(callback);});}}]);}(_react.Component);Rating.defaultProps={maxStars:5,rating:-1,starWidth:30,valueChanged:function valueChanged(index){},unselectedBackground:'#ffffff',selectedBackground:'#2196f3',emojis:[{label:'Hate',img:_Images.base64Images.emojis.angry,imgActive:_Images.base64Images.emojis.angryActive},{label:'Dislike',img:_Images.base64Images.emojis.sad,imgActive:_Images.base64Images.emojis.sadActive},{label:'Neutral',img:_Images.base64Images.emojis.neutral,imgActive:_Images.base64Images.emojis.neutralActive},{label:'Like',img:_Images.base64Images.emojis.like,imgActive:_Images.base64Images.emojis.likeActive},{label:'Love',img:_Images.base64Images.emojis.love,imgActive:_Images.base64Images.emojis.loveActive}],stars:{unselected:_Images.base64Images.stars.unselected,selected:_Images.base64Images.stars.selected},ces:['--','-','0','+','++'],redToGreen:['#e51c23','#ff5722','#FFC107','#8bc34a','#259b24'],isSwiping:function isSwiping(){},elementProps:{}};function Legend(_ref){var _ref$legend=_ref.legend,legend=_ref$legend===void 0?{}:_ref$legend,reverse=_ref.reverse;var theme=(0,_styles.useTheme)();var left=reverse?legend.legendHigh:legend.legendLow;var right=reverse?legend.legendLow:legend.legendHigh;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.legend,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:theme.typography.caption,children:left}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:theme.typography.caption,children:right})]});}var styles=_reactNative.StyleSheet.create({wrapper:{overflow:'visible'},container:{flexDirection:'row',justifyContent:'flex-start',alignItems:'center',zIndex:10},border:{borderRadius:_styles.baseTheme.borderRadius,borderColor:'rgba(0,0,0,.12)',borderWidth:1,overflow:'hidden'},radius:{borderRadius:2},text:{fontSize:_styles.baseTheme.typography.base.fontSize,fontWeight:600},labelPadding:{paddingBottom:15},legend:{flex:1,flexDirection:'row',justifyContent:'space-between'}});var _default=exports.default=(0,_styles.withTheme)(Rating);