UNPKG

@ant-design/react-native

Version:

基于蚂蚁金服移动设计规范的 React Native 组件库

1 lines 4.05 kB
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));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 _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");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 Marquee=function(_React$PureComponent){(0,_inherits2["default"])(Marquee,_React$PureComponent);var _super=_createSuper(Marquee);function Marquee(props){var _this;(0,_classCallCheck2["default"])(this,Marquee);_this=_super.call(this,props);_this.onLayout=function(e){if(_this.state.twidth){return;}_this.setState({twidth:e.nativeEvent.layout.width},function(){_this.tryStart();});};_this.onLayoutContainer=function(e){if(!_this.state.width){_this.setState({width:e.nativeEvent.layout.width},function(){_this.left.setValue(0);_this.tryStart();});}};_this.startMove=function(){var _this$props=_this.props,_this$props$fps=_this$props.fps,fps=_this$props$fps===void 0?40:_this$props$fps,loop=_this$props.loop;var SPPED=1/fps*1000;var _assertThisInitialize=(0,_assertThisInitialized2["default"])(_this),props=_assertThisInitialize.props;_reactNative.Animated.timing(_this.left,{toValue:1,duration:_this.state.twidth*SPPED,easing:_reactNative.Easing.linear,delay:props.leading,isInteraction:false,useNativeDriver:true}).start(function(){if(loop){_this.moveToHeader();}});};_this.moveToHeader=function(){_reactNative.Animated.timing(_this.left,{toValue:0,duration:0,delay:_this.props.trailing,isInteraction:false,useNativeDriver:true}).start(function(){_this.startMove();});};_this.texts={};_this.left=new _reactNative.Animated.Value(0);_this.state={twidth:0,width:0};return _this;}(0,_createClass2["default"])(Marquee,[{key:"tryStart",value:function tryStart(){if(this.state.twidth>this.state.width&&this.state.width){this.startMove();}}},{key:"render",value:function render(){var _this$state=this.state,width=_this$state.width,twidth=_this$state.twidth;var _this$props2=this.props,style=_this$props2.style,text=_this$props2.text,maxWidth=_this$props2.maxWidth;var textChildren=_react["default"].createElement(_reactNative.Text,{onLayout:this.onLayout,numberOfLines:1,ellipsizeMode:"tail",style:style},text);return _react["default"].createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center'},onLayout:this.onLayoutContainer},_react["default"].createElement(_reactNative.Animated.View,{style:{flexDirection:'row',transform:[{translateX:this.left.interpolate({inputRange:[0,1],outputRange:[0,-twidth+width]})}],width:maxWidth}},textChildren));}}]);return Marquee;}(_react["default"].PureComponent);Marquee.defaultProps={text:'',loop:false,leading:500,trailing:800,fps:40,maxWidth:1000};var _default=Marquee;exports["default"]=_default;