1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _createClass from 'babel-runtime/helpers/createClass';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | import React from 'react';
|
12 | import ReactDOM from 'react-dom';
|
13 |
|
14 | var Marquee = function (_React$Component) {
|
15 | _inherits(Marquee, _React$Component);
|
16 |
|
17 | function Marquee() {
|
18 | _classCallCheck(this, Marquee);
|
19 |
|
20 | var _this = _possibleConstructorReturn(this, (Marquee.__proto__ || Object.getPrototypeOf(Marquee)).apply(this, arguments));
|
21 |
|
22 | _this.state = {
|
23 | animatedWidth: 0,
|
24 | overflowWidth: 0
|
25 | };
|
26 | return _this;
|
27 | }
|
28 |
|
29 | _createClass(Marquee, [{
|
30 | key: 'componentDidMount',
|
31 | value: function componentDidMount() {
|
32 | this._measureText();
|
33 | this._startAnimation();
|
34 | }
|
35 | }, {
|
36 | key: 'componentDidUpdate',
|
37 | value: function componentDidUpdate() {
|
38 | this._measureText();
|
39 | if (!this._marqueeTimer) {
|
40 | this._startAnimation();
|
41 | }
|
42 | }
|
43 | }, {
|
44 | key: 'componentWillUnmount',
|
45 | value: function componentWillUnmount() {
|
46 | clearTimeout(this._marqueeTimer);
|
47 | }
|
48 | }, {
|
49 | key: 'render',
|
50 | value: function render() {
|
51 | var _this2 = this;
|
52 |
|
53 | var _props = this.props,
|
54 | prefixCls = _props.prefixCls,
|
55 | className = _props.className,
|
56 | text = _props.text;
|
57 |
|
58 | var style = _extends({ position: 'relative', right: this.state.animatedWidth, whiteSpace: 'nowrap', display: 'inline-block' }, this.props.style);
|
59 | return React.createElement(
|
60 | 'div',
|
61 | { className: prefixCls + '-marquee-wrap ' + className, style: { overflow: 'hidden' }, role: 'marquee' },
|
62 | React.createElement(
|
63 | 'div',
|
64 | { ref: function ref(el) {
|
65 | return _this2.textRef = el;
|
66 | }, className: prefixCls + '-marquee', style: style },
|
67 | text
|
68 | )
|
69 | );
|
70 | }
|
71 | }, {
|
72 | key: '_startAnimation',
|
73 | value: function _startAnimation() {
|
74 | var _this3 = this;
|
75 |
|
76 | if (this._marqueeTimer) {
|
77 | clearTimeout(this._marqueeTimer);
|
78 | }
|
79 | var fps = this.props.fps;
|
80 | var TIMEOUT = 1 / fps * 1000;
|
81 | var isLeading = this.state.animatedWidth === 0;
|
82 | var timeout = isLeading ? this.props.leading : TIMEOUT;
|
83 | var animate = function animate() {
|
84 | var overflowWidth = _this3.state.overflowWidth;
|
85 |
|
86 | var animatedWidth = _this3.state.animatedWidth + 1;
|
87 | var isRoundOver = animatedWidth > overflowWidth;
|
88 | if (isRoundOver) {
|
89 | if (_this3.props.loop) {
|
90 | animatedWidth = 0;
|
91 | } else {
|
92 | return;
|
93 | }
|
94 | }
|
95 | if (isRoundOver && _this3.props.trailing) {
|
96 | _this3._marqueeTimer = window.setTimeout(function () {
|
97 | _this3.setState({
|
98 | animatedWidth: animatedWidth
|
99 | });
|
100 | _this3._marqueeTimer = window.setTimeout(animate, TIMEOUT);
|
101 | }, _this3.props.trailing);
|
102 | } else {
|
103 | _this3.setState({
|
104 | animatedWidth: animatedWidth
|
105 | });
|
106 | _this3._marqueeTimer = window.setTimeout(animate, TIMEOUT);
|
107 | }
|
108 | };
|
109 | if (this.state.overflowWidth !== 0) {
|
110 | this._marqueeTimer = setTimeout(animate, timeout);
|
111 | }
|
112 | }
|
113 | }, {
|
114 | key: '_measureText',
|
115 | value: function _measureText() {
|
116 | var container = ReactDOM.findDOMNode(this);
|
117 | var node = this.textRef;
|
118 | if (container && node) {
|
119 | var containerWidth = container.offsetWidth;
|
120 | var textWidth = node.offsetWidth;
|
121 | var overflowWidth = textWidth - containerWidth;
|
122 | if (overflowWidth !== this.state.overflowWidth) {
|
123 | this.setState({
|
124 | overflowWidth: overflowWidth
|
125 | });
|
126 | }
|
127 | }
|
128 | }
|
129 | }]);
|
130 |
|
131 | return Marquee;
|
132 | }(React.Component);
|
133 |
|
134 | export default Marquee;
|
135 |
|
136 | Marquee.defaultProps = {
|
137 | text: '',
|
138 | loop: false,
|
139 | leading: 500,
|
140 | trailing: 800,
|
141 | fps: 40,
|
142 | className: ''
|
143 | }; |
\ | No newline at end of file |