@ximu/notice-bar
Version:
a react component of notice bar
2 lines (1 loc) • 1.15 kB
JavaScript
import e,{useRef as t,useMemo as n,useEffect as r}from"react";var a="NoticeBar-module_notice-bar__sq6MK",s="NoticeBar-module_tip-content__rDbsm",o="NoticeBar-module_tip__6tINL",c={whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"};function i(i){var l=t(null),u=n((function(){return i.message.length?i.message.concat(i.message[0]):[]}),[]);r((function(){var e=i.message.length,t=l.current.offsetHeight-30;l.current.style.transitionDuration="".concat(i.duration||e,"s"),l.current.style.transform="translateY(".concat(-t,"px)")}),[]);return e.createElement("div",{className:a},e.createElement("img",{src:require("./notice.png").default,alt:""}),e.createElement("div",{className:s},e.createElement("ul",{className:o,ref:l,onTransitionEnd:function(){var e=i.message.length,t=l.current.offsetHeight-30;l.current.style.transitionDuration="0s",l.current.style.transform="translateY(0)",setTimeout((function(){l.current.style.transitionDuration="".concat(i.duration||e,"s"),l.current.style.transform="translateY(".concat(-t,"px)")}),0)}},u.map((function(t,n){return e.createElement("li",{style:i.newLine?null:c,key:n},t)})))))}export{i as default};