2024-12-01 11:56:54 +00:00
import { _ _awaiter , _ _generator } from "tslib" ;
import { Component , triggerEventOnly , getValueFromProps , } from '../_util/simply' ;
import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect' ;
import { NoticeBarDefaultProps } from './props' ;
Component ( NoticeBarDefaultProps , {
getInstance : function ( ) {
if ( this . $id ) {
return my ;
}
return this ;
} ,
getBoundingClientRectWithId : function ( prefix ) {
return _ _awaiter ( this , void 0 , void 0 , function ( ) {
return _ _generator ( this , function ( _a ) {
switch ( _a . label ) {
case 0 : return [ 4 /*yield*/ , getInstanceBoundingClientRect ( this . getInstance ( ) , "" . concat ( prefix ) . concat ( this . $id ? "-" . concat ( this . $id ) : '' ) ) ] ;
case 1 : return [ 2 /*return*/ , _a . sent ( ) ] ;
}
} ) ;
} ) ;
} ,
onTap : function ( ) {
var mode = getValueFromProps ( this , 'mode' ) ;
if ( mode === 'link' ) {
triggerEventOnly ( this , 'tap' ) ;
}
if ( mode === 'closeable' ) {
if ( typeof this . props . onTap !== 'function' ) {
return ;
}
this . setData ( {
show : false ,
} ) ;
triggerEventOnly ( this , 'tap' ) ;
}
} ,
startMarquee : function ( state ) {
var loop = getValueFromProps ( this , 'loop' ) ;
var leading = 500 ;
var duration = state . duration , overflowWidth = state . overflowWidth , viewWidth = state . viewWidth ;
var marqueeScrollWidth = overflowWidth ;
if ( loop ) {
marqueeScrollWidth = overflowWidth + viewWidth ;
}
var newMarqueeStyle = "transform: translate3d(" . concat ( - marqueeScrollWidth , "px, 0, 0); transition: " ) . concat ( duration , "s all linear " ) . concat ( typeof leading === 'number' ? "" . concat ( leading / 1000 , "s" ) : '0s' , ";" ) ;
this . setData ( {
marqueeStyle : newMarqueeStyle ,
} ) ;
return newMarqueeStyle ;
2024-11-10 07:01:22 +00:00
} ,
2024-12-01 11:56:54 +00:00
measureText : function ( callback ) {
var _this = this ;
var fps = 40 ;
var loop = getValueFromProps ( this , 'loop' ) ;
// 计算文本所占据的宽度,计算需要滚动的宽度
setTimeout ( function ( ) { return _ _awaiter ( _this , void 0 , void 0 , function ( ) {
var marqueeSize , contentSize , overflowWidth , viewWidth , marqueeScrollWidth ;
return _ _generator ( this , function ( _a ) {
switch ( _a . label ) {
case 0 : return [ 4 /*yield*/ , this . getBoundingClientRectWithId ( '.ant-notice-bar-marquee' ) ] ;
case 1 :
marqueeSize = _a . sent ( ) ;
return [ 4 /*yield*/ , this . getBoundingClientRectWithId ( '.ant-notice-bar-content' ) ] ;
case 2 :
contentSize = _a . sent ( ) ;
overflowWidth = ( marqueeSize &&
contentSize &&
marqueeSize . width - contentSize . width ) ||
0 ;
viewWidth = ( contentSize === null || contentSize === void 0 ? void 0 : contentSize . width ) || 0 ;
marqueeScrollWidth = overflowWidth ;
if ( loop ) {
marqueeScrollWidth = overflowWidth + viewWidth ;
}
if ( overflowWidth > 0 ) {
callback ( {
overflowWidth : overflowWidth ,
viewWidth : viewWidth ,
duration : marqueeScrollWidth / fps ,
} ) ;
}
return [ 2 /*return*/ ] ;
}
} ) ;
} ) ; } , 0 ) ;
} ,
// 文本滚动的计算
resetMarquee : function ( state ) {
var loop = getValueFromProps ( this , 'loop' ) ;
var viewWidth = state . viewWidth ;
var showMarqueeWidth = '0px' ;
if ( loop ) {
showMarqueeWidth = "" . concat ( viewWidth , "px" ) ;
}
var marqueeStyle = "transform: translate3d(" . concat ( showMarqueeWidth , ", 0, 0); transition: 0s all linear;" ) ;
this . setData ( {
marqueeStyle : marqueeStyle ,
} ) ;
} ,
onTransitionEnd : function ( ) {
var _this = this ;
var loop = getValueFromProps ( this , 'loop' ) ;
var trailing = 200 ;
if ( loop ) {
var timer _1 = setTimeout ( function ( ) {
_this . measureText ( function ( state ) {
_this . resetMarquee . call ( _this , state ) ;
} ) ;
clearTimeout ( timer _1 ) ;
} , trailing ) ;
}
} ,
} , {
show : true ,
marqueeStyle : '' ,
} , undefined , {
2024-11-10 07:01:22 +00:00
didMount : function ( ) {
2024-12-01 11:56:54 +00:00
var _this = this ;
2024-11-10 07:01:22 +00:00
var enableMarquee = this . props . enableMarquee ;
if ( enableMarquee ) {
2024-12-01 11:56:54 +00:00
this . measureText ( function ( state ) {
_this . startMarquee . call ( _this , state ) ;
} ) ;
2024-11-10 07:01:22 +00:00
}
} ,
didUpdate : function ( ) {
2024-12-01 11:56:54 +00:00
var _this = this ;
2024-11-10 07:01:22 +00:00
var enableMarquee = this . props . enableMarquee ;
// 这里更新处理的原因是防止notice内容在动画过程中发生改变。
if ( enableMarquee ) {
2024-12-01 11:56:54 +00:00
this . measureText ( function ( state ) {
_this . startMarquee . call ( _this , state ) ;
} ) ;
2024-11-10 07:01:22 +00:00
}
} ,
pageEvents : {
onShow : function ( ) {
var _this = this ;
if ( this . props . enableMarquee ) {
2024-12-01 11:56:54 +00:00
this . setData ( { marqueeStyle : '' } ) ;
this . resetMarquee ( {
2024-11-10 07:01:22 +00:00
overflowWidth : 0 ,
duration : 0 ,
viewWidth : 0 ,
} ) ;
2024-12-01 11:56:54 +00:00
this . measureText ( function ( state ) {
_this . startMarquee . call ( _this , state ) ;
2024-11-10 07:01:22 +00:00
} ) ;
}
} ,
} ,
2024-12-01 11:56:54 +00:00
} ) ;