react-native-animated-background-color-view/animated-background-color-view/animated-background-color-view.component.js

A modified React Native 'View' component that animates it's 'backgroundColor' when 'color' prop changes.

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _typeof=require("@babel/runtime/helpers/typeof");Object.defineProperty(exports,"__esModule",{value:true});exports.AnimatedBackgroundColorView=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 _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _reactNative=require("react-native");var _react=_interopRequireWildcard(require("react"));var _color=_interopRequireDefault(require("color"));var _propTypes=_interopRequireDefault(require("prop-types"));var _lodash=_interopRequireDefault(require("lodash.isequal"));var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="/Users/joey/Documents/workspace/react-native-animated-background-color-view/src/animated-background-color-view/animated-background-color-view.component.js";var _excluded=["children","color","delay","duration","easing","initialColor","style"];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 _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 AnimatedBackgroundColorView=function(_Component){(0,_inherits2["default"])(AnimatedBackgroundColorView,_Component);var _super=_createSuper(AnimatedBackgroundColorView);function AnimatedBackgroundColorView(props){var _this;(0,_classCallCheck2["default"])(this,AnimatedBackgroundColorView);_this=_super.call(this,props);var initialColor=props.initialColor,color=props.color;var currentColor=initialColor||color;_this.animation=new _reactNative.Animated.Value(0);_this.currentColor=currentColor;return _this;}(0,_createClass2["default"])(AnimatedBackgroundColorView,[{key:"componentDidMount",value:function componentDidMount(){this.animate();}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){var _this$props=this.props,children=_this$props.children,color=_this$props.color;return!(0,_lodash["default"])([color,children],[nextProps.color,nextProps.children]);}},{key:"componentDidUpdate",value:function componentDidUpdate(){this.animate();}},{key:"getBackgroundColor",value:function getBackgroundColor(){var color=this.props.color;var backgroundColor=this.animation.interpolate({inputRange:[0,1],outputRange:[this.currentColor,color]});return backgroundColor;}},{key:"getCurrentColor",value:function getCurrentColor(){var animationFinished=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;var mixValue=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;var color=this.props.color;if(animationFinished)return color;return this.getMixedColorValue(mixValue);}},{key:"getMixedColorValue",value:function getMixedColorValue(){var mixValue=arguments.length>0&&arguments[0]!==undefined?arguments[0]:1;var color=this.props.color;var nextColor=(0,_color["default"])(color);var currentColor=(0,_color["default"])(this.currentColor);var mixedColor=currentColor.mix(nextColor,mixValue).hex();return mixedColor;}},{key:"shouldAnimate",value:function shouldAnimate(){var color=this.props.color;return color!==this.currentColor;}},{key:"stopAnimationAndReturnAnimationValue",value:function stopAnimationAndReturnAnimationValue(){this.animation.stopAnimation(function(value){return value;});}},{key:"animate",value:function animate(){var _this2=this;if(!this.shouldAnimate())return;var _this$props2=this.props,delay=_this$props2.delay,duration=_this$props2.duration,easing=_this$props2.easing;var stopValue=this.stopAnimationAndReturnAnimationValue();this.animation.setValue(0);_reactNative.Animated.timing(this.animation,{delay:delay,duration:duration,easing:easing,toValue:1,useNativeDriver:false}).start(function(_ref){var finished=_ref.finished;_this2.currentColor=_this2.getCurrentColor(finished,stopValue);});}},{key:"render",value:function render(){var _this$props3=this.props,children=_this$props3.children,color=_this$props3.color,delay=_this$props3.delay,duration=_this$props3.duration,easing=_this$props3.easing,initialColor=_this$props3.initialColor,style=_this$props3.style,other=(0,_objectWithoutProperties2["default"])(_this$props3,_excluded);var backgroundColor=this.getBackgroundColor();var viewStyle=[style,{backgroundColor:backgroundColor}];return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,Object.assign({},other,{style:viewStyle,children:children}));}}]);return AnimatedBackgroundColorView;}(_react.Component);exports.AnimatedBackgroundColorView=AnimatedBackgroundColorView;(0,_defineProperty2["default"])(AnimatedBackgroundColorView,"propTypes",{children:_propTypes["default"].oneOfType([_propTypes["default"].array,_propTypes["default"].object]),color:_propTypes["default"].string,delay:_propTypes["default"].number,duration:_propTypes["default"].number,easing:_propTypes["default"].func,initialColor:_propTypes["default"].string,style:_propTypes["default"].object});(0,_defineProperty2["default"])(AnimatedBackgroundColorView,"defaultProps",{children:null,color:'#00aced',delay:0,duration:2400,easing:_reactNative.Easing.out(_reactNative.Easing.exp),initialColor:undefined,style:undefined});