UNPKG

8.22 kBJavaScriptView Raw
1var _jsxFileName='src/js/LottieView.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _reactNativeSafeModules=require('react-native-safe-modules');var _reactNativeSafeModules2=_interopRequireDefault(_reactNativeSafeModules);var _propTypes=require('prop-types');var _propTypes2=_interopRequireDefault(_propTypes);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _toConsumableArray(arr){if(Array.isArray(arr)){for(var i=0,arr2=Array(arr.length);i<arr.length;i++){arr2[i]=arr[i];}return arr2;}else{return Array.from(arr);}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var NativeLottieView=_reactNativeSafeModules2.default.component({viewName:'LottieAnimationView',mockComponent:_reactNative.View});var AnimatedNativeLottieView=_reactNative.Animated.createAnimatedComponent(NativeLottieView);var LottieViewManager=_reactNativeSafeModules2.default.module({moduleName:'LottieAnimationView',mock:{play:function play(){},reset:function reset(){},getConstants:function getConstants(){}}});var ViewStyleExceptBorderPropType=function ViewStyleExceptBorderPropType(props,propName,componentName){for(var _len=arguments.length,rest=Array(_len>3?_len-3:0),_key=3;_key<_len;_key++){rest[_key-3]=arguments[_key];}var flattened=_reactNative.StyleSheet.flatten(props[propName]||{});var usesBorder=Object.keys(flattened).some(function(key){return key.startsWith('border');});if(usesBorder){return Error(componentName+' does not allow any border related style properties to be specified. '+"Border styles for this component will behave differently across platforms. If you'd "+'like to render a border around this component, wrap it with a View.');}return _reactNative.ViewPropTypes.style.apply(_reactNative.ViewPropTypes,[props,propName,componentName].concat(rest));};var NotAllowedPropType=function NotAllowedPropType(props,propName,componentName){var value=props[propName];if(value!=null){return Error(componentName+' cannot specify \''+propName+'\'.');}return null;};var propTypes=_extends({},_reactNative.ViewPropTypes,{style:ViewStyleExceptBorderPropType,children:NotAllowedPropType,resizeMode:_propTypes2.default.oneOf(['cover','contain','center']),progress:_propTypes2.default.oneOfType([_propTypes2.default.number,_propTypes2.default.object]),speed:_propTypes2.default.number,duration:_propTypes2.default.number,loop:_propTypes2.default.bool,autoPlay:_propTypes2.default.bool,autoSize:_propTypes2.default.bool,enableMergePathsAndroidForKitKatAndAbove:_propTypes2.default.bool,source:_propTypes2.default.oneOfType([_propTypes2.default.object,_propTypes2.default.string]).isRequired,onAnimationFinish:_propTypes2.default.func});var defaultProps={progress:0,speed:1,loop:true,autoPlay:false,autoSize:false,enableMergePathsAndroidForKitKatAndAbove:false,resizeMode:'contain'};var viewConfig={uiViewClassName:'LottieAnimationView',validAttributes:{progress:true}};var safeGetViewManagerConfig=function safeGetViewManagerConfig(moduleName){if(_reactNative.UIManager.getViewManagerConfig){return _reactNative.UIManager.getViewManagerConfig(moduleName);}return _reactNative.UIManager[moduleName];};var LottieView=function(_React$Component){_inherits(LottieView,_React$Component);function LottieView(props){_classCallCheck(this,LottieView);var _this=_possibleConstructorReturn(this,(LottieView.__proto__||Object.getPrototypeOf(LottieView)).call(this,props));_this.viewConfig=viewConfig;_this.refRoot=_this.refRoot.bind(_this);_this.onAnimationFinish=_this.onAnimationFinish.bind(_this);return _this;}_createClass(LottieView,[{key:'componentDidUpdate',value:function componentDidUpdate(prevProps){if(this.props.source.nm!==prevProps.source.nm&&this.props.autoPlay){this.play();}}},{key:'setNativeProps',value:function setNativeProps(props){_reactNative.UIManager.updateView(this.getHandle(),this.viewConfig.uiViewClassName,{progress:props.progress});}},{key:'play',value:function play(){var startFrame=arguments.length>0&&arguments[0]!==undefined?arguments[0]:-1;var endFrame=arguments.length>1&&arguments[1]!==undefined?arguments[1]:-1;this.runCommand('play',[startFrame,endFrame]);}},{key:'reset',value:function reset(){this.runCommand('reset');}},{key:'runCommand',value:function runCommand(name){var _this2=this;var args=arguments.length>1&&arguments[1]!==undefined?arguments[1]:[];var handle=this.getHandle();if(!handle){return null;}return _reactNative.Platform.select({android:function android(){return _reactNative.UIManager.dispatchViewManagerCommand(handle,safeGetViewManagerConfig('LottieAnimationView').Commands[name],args);},ios:function ios(){return LottieViewManager[name].apply(LottieViewManager,[_this2.getHandle()].concat(_toConsumableArray(args)));}})();}},{key:'getHandle',value:function getHandle(){return(0,_reactNative.findNodeHandle)(this.root);}},{key:'refRoot',value:function refRoot(root){this.root=root;if(this.props.autoPlay){this.play();}}},{key:'onAnimationFinish',value:function onAnimationFinish(evt){if(this.props.onAnimationFinish){this.props.onAnimationFinish(evt.nativeEvent.isCancelled);}}},{key:'render',value:function render(){var _props=this.props,style=_props.style,source=_props.source,autoSize=_props.autoSize,rest=_objectWithoutProperties(_props,['style','source','autoSize']);var sourceName=typeof source==='string'?source:undefined;var sourceJson=typeof source==='string'?undefined:JSON.stringify(source);var aspectRatioStyle=sourceJson?{aspectRatio:source.w/source.h}:undefined;var styleObject=_reactNative.StyleSheet.flatten(style);var sizeStyle=void 0;if(!styleObject||styleObject.width===undefined&&styleObject.height===undefined){sizeStyle=autoSize&&sourceJson?{width:source.w}:_reactNative.StyleSheet.absoluteFill;}var speed=this.props.duration&&sourceJson&&this.props.source.fr?Math.round(this.props.source.op/this.props.source.fr*1000/this.props.duration):this.props.speed;return _react2.default.createElement(_reactNative.View,{style:[aspectRatioStyle,sizeStyle,style],__source:{fileName:_jsxFileName,lineNumber:174}},_react2.default.createElement(AnimatedNativeLottieView,_extends({ref:this.refRoot},rest,{speed:speed,style:[aspectRatioStyle,sizeStyle||{width:'100%',height:'100%'},style],sourceName:sourceName,sourceJson:sourceJson,onAnimationFinish:this.onAnimationFinish,__source:{fileName:_jsxFileName,lineNumber:175}})));}}]);return LottieView;}(_react2.default.Component);LottieView.propTypes=propTypes;LottieView.defaultProps=defaultProps;module.exports=LottieView;
\No newline at end of file