mopinion-react-native-sdk/dist/components/Buttons/button/index.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 _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 _Ripple=require("../../Ripple");var _Icon=_interopRequireDefault(require("../../Icon"));var _styles=require("./styles");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["color","disabledColor","shadeColor","shadeOpacity","shadeBorderRadius","style","children","loading","icon","prependIcon","activityIndicatorColor"];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 Button=exports.default=function(_PureComponent){function Button(props){var _this;(0,_classCallCheck2.default)(this,Button);_this=_callSuper(this,Button,[props]);_this.onPress=_this.onPress.bind(_this);_this.onPressIn=_this.onFocusChange.bind(_this,true);_this.onPressOut=_this.onFocusChange.bind(_this,false);var _this$props=_this.props,disabled=_this$props.disabled,_this$props$focusAnim=_this$props.focusAnimation,focusAnimation=_this$props$focusAnim===void 0?new _reactNative.Animated.Value(0):_this$props$focusAnim,_this$props$disableAn=_this$props.disableAnimation,disableAnimation=_this$props$disableAn===void 0?new _reactNative.Animated.Value(disabled?1:0):_this$props$disableAn;_this.state={focusAnimation:focusAnimation,disableAnimation:disableAnimation};return _this;}(0,_inherits2.default)(Button,_PureComponent);return(0,_createClass2.default)(Button,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var disabled=this.props.disabled;if(disabled^prevProps.disabled){var duration=this.props.disableAnimationDuration;var disableAnimation=this.state.disableAnimation;_reactNative.Animated.timing(disableAnimation,{toValue:disabled?1:0,duration:duration}).start();}}},{key:"onPress",value:function onPress(){var _this$props2=this.props,onPress=_this$props2.onPress,payload=_this$props2.payload;if('function'===typeof onPress){onPress(payload);}}},{key:"onFocusChange",value:function onFocusChange(focused){var focusAnimation=this.state.focusAnimation;var focusAnimationDuration=this.props.focusAnimationDuration;_reactNative.Animated.timing(focusAnimation,{toValue:focused?1:0,duration:focusAnimationDuration,easing:_reactNative.Easing.out(_reactNative.Easing.ease),useNativeDriver:false}).start();}},{key:"render",value:function render(){var _this$state=this.state,focusAnimation=_this$state.focusAnimation,disableAnimation=_this$state.disableAnimation;var _this$props3=this.props,color=_this$props3.color,disabledColor=_this$props3.disabledColor,shadeColor=_this$props3.shadeColor,shadeOpacity=_this$props3.shadeOpacity,shadeBorderRadius=_this$props3.shadeBorderRadius,style=_this$props3.style,children=_this$props3.children,loading=_this$props3.loading,icon=_this$props3.icon,prependIcon=_this$props3.prependIcon,activityIndicatorColor=_this$props3.activityIndicatorColor,props=(0,_objectWithoutProperties2.default)(_this$props3,_excluded);var rippleStyle={backgroundColor:disableAnimation.interpolate({inputRange:[0,1],outputRange:[color,disabledColor]})};var shadeContainerStyle={borderRadius:shadeBorderRadius};var shadeStyle={backgroundColor:shadeColor,opacity:focusAnimation.interpolate({inputRange:[0,1],outputRange:[0,shadeOpacity]})};return(0,_jsxRuntime.jsxs)(_Ripple.Ripple,Object.assign({},props,{style:[_styles.styles.container,rippleStyle,style],onPress:this.onPress,onPressIn:this.onPressIn,onPressOut:this.onPressOut,children:[prependIcon&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:_styles.styles.prependIcon,children:(0,_jsxRuntime.jsx)(_Icon.default,{icon:prependIcon,style:{color:props.titleColor}})}),children,icon&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:_styles.styles.icon,children:(0,_jsxRuntime.jsx)(_Icon.default,{icon:icon,style:{color:props.titleColor}})}),loading&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:_styles.styles.loadingContainer,children:(0,_jsxRuntime.jsx)(_reactNative.ActivityIndicator,{size:"small",color:activityIndicatorColor})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_styles.styles.shadeContainer,shadeContainerStyle],children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[_styles.styles.shade,shadeStyle]})})]}));}}]);}(_react.PureComponent);Button.defaultProps={rippleContainerBorderRadius:2,rippleSequential:true,hitSlop:{top:6,right:4,bottom:6,left:4},color:'rgb(224, 224, 224)',disabledColor:'rgb(240, 240, 240)',titleColor:'#fff',activityIndicatorColor:'rgba(255,255,255,.75)',shadeColor:'rgb(0, 0, 0)',shadeOpacity:0.12,shadeBorderRadius:3,focusAnimationDuration:225,disableAnimationDuration:225,disabled:false};