react-textscroll/dist/bundle.js

text scroll for notice board.

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("tslib"),require("react"),require("styled-components"),require("react-dom")):"function"==typeof define&&define.amd?define(["tslib","react","styled-components","react-dom"],n):e.TextScroll=n(e.tslib_1,e.React,e.styled,e.ReactDOM)}(this,function(e,n,t,i){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n,t=t&&t.hasOwnProperty("default")?t.default:t,i=i&&i.hasOwnProperty("default")?i.default:i;var o,r,a,s,l,p,d,c=function(a){function s(){var e=null!==a&&a.apply(this,arguments)||this;return e.state={duration:5e3,content_width:500,container_width:500},e}return e.__extends(s,a),s.prototype.componentDidMount=function(){for(var e=i.findDOMNode(this.container),n=e.parentElement,t=e.children,o=n?n.clientWidth:500,r=0,a=0;a<t.length;a++)r+=t[a].scrollWidth,r+=o;r=0===r?500:r;var s=(this.props.speed||5e3)*r/5e5;this.setState({duration:s,content_width:r,container_width:o})},s.prototype.render=function(){var i=this,a=t.div(o||(o=e.__makeTemplateObject(["\n        position: relative;\n        height:30px;\n        left:","px;\n        animation: changebox ","s linear infinite;\n        animation-play-state: running;\n        animation-fill-mode: forwards;\n        \n        &:hover {\n            animation-play-state: paused;\n            cursor: default;\n        }\n        @keyframes changebox {\n            0% {\n                transform: translateX(0);\n            }\n            100% {\n                transform: translateX(-","px);\n            }\n        } \n        "],["\n        position: relative;\n        height:30px;\n        left:","px;\n        animation: changebox ","s linear infinite;\n        animation-play-state: running;\n        animation-fill-mode: forwards;\n        \n        &:hover {\n            animation-play-state: paused;\n            cursor: default;\n        }\n        @keyframes changebox {\n            0% {\n                transform: translateX(0);\n            }\n            100% {\n                transform: translateX(-","px);\n            }\n        } \n        "])),this.state.container_width,this.state.duration,this.state.content_width),s=t.span(r||(r=e.__makeTemplateObject(["\n            display:inline-block;\n            line-height:30px;\n            margin-right: ","px\n        "],["\n            display:inline-block;\n            line-height:30px;\n            margin-right: ","px\n        "])),this.state.container_width);return n.createElement("div",{className:this.props.className},n.createElement(a,{ref:function(e){return i.container=e}},this.props.text.map(function(e,t){return n.createElement(s,{key:t,title:e}," ",e)})))},s}(n.Component),m=t(c)(a||(a=e.__makeTemplateObject(["\n    width:100%;\n    height: 40px;\n    overflow: hidden;\n    border-bottom: 1px solid #eee;\n    word-break: keep-all;\n    white-space: nowrap;\n    display:flex;\n    align-items:center;\n"],["\n    width:100%;\n    height: 40px;\n    overflow: hidden;\n    border-bottom: 1px solid #eee;\n    word-break: keep-all;\n    white-space: nowrap;\n    display:flex;\n    align-items:center;\n"]))),h=t.li(s||(s=e.__makeTemplateObject(["\n  padding: 0 5px;\n  line-height:30px;\n  color: rgba(0, 0, 0, 0.85);\n  list-style-type:none;\n  cursor: default;\n  overflow:hidden;\n  white-space:nowrap;\n  text-overflow: ellipsis;\n  display:block;\n  \n"],["\n  padding: 0 5px;\n  line-height:30px;\n  color: rgba(0, 0, 0, 0.85);\n  list-style-type:none;\n  cursor: default;\n  overflow:hidden;\n  white-space:nowrap;\n  text-overflow: ellipsis;\n  display:block;\n  \n"]))),u=t.div(l||(l=e.__makeTemplateObject(["\n  width: 100%;\n  overflow: hidden;\n  cursor: default;\n"],["\n  width: 100%;\n  overflow: hidden;\n  cursor: default;\n"]))),f=function(i){function o(){var e=null!==i&&i.apply(this,arguments)||this;return e.timer=0,e.innerTimer=0,e.time=1,e.run=!0,e.position=0,e.state={position:0,num:e.props.text.length,data:[]},e.tick=function(){e.time%Math.round((e.props.speed||5e3)/1e3*60)==0&&e.run&&(cancelAnimationFrame(e.innerTimer),e.innerTimer=requestAnimationFrame(e.scroll),e.time=0),e.time++,e.run||(e.time=0),cancelAnimationFrame(e.timer),e.timer=requestAnimationFrame(e.tick)},e.scroll=function(){e.position%30!=0?(e.setState({position:e.position+1}),e.position>30*(e.state.num-1)&&(e.position=0),cancelAnimationFrame(e.innerTimer),e.innerTimer=requestAnimationFrame(e.scroll)):cancelAnimationFrame(e.innerTimer),e.position++},e.handleMouseEnter=function(){e.run=!1},e.handleMouseLeave=function(){e.run=!0},e}return e.__extends(o,i),o.prototype.componentWillMount=function(){var e=this.props.text;e.push(e[0]),this.setState({data:e})},o.prototype.componentDidMount=function(){cancelAnimationFrame(this.innerTimer),this.timer=requestAnimationFrame(this.tick)},o.prototype.componentWillUnmount=function(){cancelAnimationFrame(this.timer)},o.prototype.render=function(){var i=t.ul(p||(p=e.__makeTemplateObject(["\n      width: 100%;\n      height: 30px;\n      position: relative;\n      top:-","px;\n      padding:0px;\n      margin:0px;\n    "],["\n      width: 100%;\n      height: 30px;\n      position: relative;\n      top:-","px;\n      padding:0px;\n      margin:0px;\n    "])),this.state.position);return n.createElement("div",{className:this.props.className,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},n.createElement(u,null,n.createElement(i,null,this.state.data.map(function(e,t){return n.createElement(h,{key:t,title:e},e)}))))},o}(n.Component),x=t(f)(d||(d=e.__makeTemplateObject(["\n  height: 40px;\n  border-bottom: 1px solid #eee;\n  display: flex;\n  align-content: flex-start;\n  align-items: center;\n"],["\n  height: 40px;\n  border-bottom: 1px solid #eee;\n  display: flex;\n  align-content: flex-start;\n  align-items: center;\n"])));return function(t){function i(){return null!==t&&t.apply(this,arguments)||this}return e.__extends(i,t),i.prototype.render=function(){return"horizontal"===this.props.mode?n.createElement(m,{text:this.props.text,speed:this.props.speed}):n.createElement(x,{text:this.props.text,speed:this.props.speed})},i}(n.Component)});