1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
12 |
|
13 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
14 |
|
15 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
16 |
|
17 | var _createClass3 = _interopRequireDefault(_createClass2);
|
18 |
|
19 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
20 |
|
21 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
22 |
|
23 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
24 |
|
25 | var _inherits3 = _interopRequireDefault(_inherits2);
|
26 |
|
27 | var _react = require('react');
|
28 |
|
29 | var _react2 = _interopRequireDefault(_react);
|
30 |
|
31 | var _reactDom = require('react-dom');
|
32 |
|
33 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
34 |
|
35 | var _propTypes = require('prop-types');
|
36 |
|
37 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
38 |
|
39 | var _ticker = require('rc-tween-one/lib/ticker');
|
40 |
|
41 | var _ticker2 = _interopRequireDefault(_ticker);
|
42 |
|
43 | var _Arrow = require('./Arrow');
|
44 |
|
45 | var _Arrow2 = _interopRequireDefault(_Arrow);
|
46 |
|
47 | var _Thumb = require('./Thumb');
|
48 |
|
49 | var _Thumb2 = _interopRequireDefault(_Thumb);
|
50 |
|
51 | var _utils = require('./utils');
|
52 |
|
53 | var _anim = require('./anim');
|
54 |
|
55 | var _anim2 = _interopRequireDefault(_anim);
|
56 |
|
57 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
58 |
|
59 | var BannerAnim = function (_Component) {
|
60 | (0, _inherits3['default'])(BannerAnim, _Component);
|
61 |
|
62 | function BannerAnim(props) {
|
63 | (0, _classCallCheck3['default'])(this, BannerAnim);
|
64 |
|
65 | var _this = (0, _possibleConstructorReturn3['default'])(this, (BannerAnim.__proto__ || Object.getPrototypeOf(BannerAnim)).call(this, props));
|
66 |
|
67 | _this.onMouseEnter = function (e) {
|
68 | _this.props.onMouseEnter(e);
|
69 | if (_this.props.autoPlay && _this.props.autoPlayEffect) {
|
70 | _ticker2['default'].clear(_this.autoPlayId);
|
71 | _this.autoPlayId = -1;
|
72 | }
|
73 | };
|
74 |
|
75 | _this.onMouseLeave = function (e) {
|
76 | _this.props.onMouseLeave(e);
|
77 | if (_this.props.autoPlay && _this.props.autoPlayEffect) {
|
78 | _this.autoPlay();
|
79 | }
|
80 | };
|
81 |
|
82 | _this.onTouchStart = function (e) {
|
83 | if (e.touches && e.touches.length > 1 || _this.elemWrapper.length <= 1 || _this.getDomIsArrowOrThumb(e) || e.button === 2 || _this.tweenBool) {
|
84 | return;
|
85 | }
|
86 | if (_this.props.autoPlay) {
|
87 | _ticker2['default'].clear(_this.autoPlayId);
|
88 | _this.autoPlayId = -1;
|
89 | }
|
90 | _this.animType = _this.getAnimType(_this.props.type);
|
91 | _this.currentShow = _this.state.currentShow;
|
92 |
|
93 | _this.mouseStartXY = {
|
94 | startX: e.touches === undefined ? e.clientX : e.touches[0].clientX,
|
95 | startY: e.touches === undefined ? e.clientY : e.touches[0].clientY
|
96 | };
|
97 | };
|
98 |
|
99 | _this.onTouchMove = function (e) {
|
100 | if (!_this.mouseStartXY || e.touches && e.touches.length > 1 || _this.tweenBool) {
|
101 | return;
|
102 | }
|
103 |
|
104 | var _this$getDiffer = _this.getDiffer(e, e.touches),
|
105 | differ = _this$getDiffer.differ,
|
106 | rectName = _this$getDiffer.rectName;
|
107 |
|
108 | if (!differ) {
|
109 | return;
|
110 | }
|
111 | var ratio = differ / _this.state.domRect[rectName] * 2;
|
112 | var ratioType = ratio > 0 ? '+' : '-';
|
113 | var currentShow = _this.currentShow;
|
114 | _this.mouseMoveType = 'update';
|
115 | if (_this.ratioType !== ratioType) {
|
116 | _this.ratioType = ratioType;
|
117 | _this.mouseMoveType = 'reChild';
|
118 | _this.setState({
|
119 | currentShow: currentShow
|
120 | });
|
121 | return;
|
122 | }
|
123 | if ((_this.animType === _anim2['default'].gridBar || _this.animType === _anim2['default'].grid) && e.touches) {
|
124 | return;
|
125 | }
|
126 | _this.ratio = ratio;
|
127 | if (_this.ratio) {
|
128 | var type = void 0;
|
129 | if (_this.ratio > 0) {
|
130 | currentShow += 1;
|
131 | type = 'next';
|
132 | } else {
|
133 | currentShow -= 1;
|
134 | type = 'prev';
|
135 | }
|
136 | _this.ratio = Math.abs(_this.ratio);
|
137 | _this.ratio = _this.ratio > 0.99 ? 0.99 : _this.ratio;
|
138 | currentShow = currentShow >= _this.elemWrapper.length ? 0 : currentShow;
|
139 | currentShow = currentShow < 0 ? _this.elemWrapper.length - 1 : currentShow;
|
140 | _this.setState({
|
141 | currentShow: currentShow,
|
142 | direction: type
|
143 | });
|
144 | }
|
145 | };
|
146 |
|
147 | _this.onTouchEnd = function (e) {
|
148 | if (!_this.mouseStartXY || e.changedTouches && e.changedTouches.length > 1 || _this.tweenBool) {
|
149 | return;
|
150 | }
|
151 | if (_this.props.autoPlay && _this.autoPlayId === -1) {
|
152 | _this.autoPlay();
|
153 | }
|
154 |
|
155 | var _this$getDiffer2 = _this.getDiffer(e, e.changedTouches),
|
156 | differ = _this$getDiffer2.differ,
|
157 | rectName = _this$getDiffer2.rectName;
|
158 |
|
159 | delete _this.mouseStartXY;
|
160 | _this.mouseMoveType = 'end';
|
161 | if (!differ) {
|
162 | _this.mouseMoveType = '';
|
163 | return;
|
164 | }
|
165 | _this.tweenBool = true;
|
166 | if ((_this.animType === _anim2['default'].gridBar || _this.animType === _anim2['default'].grid) && e.changedTouches) {
|
167 | var currentShow = _this.currentShow;
|
168 | var ratio = differ / _this.state.domRect[rectName] * 2;
|
169 | if (ratio > 0) {
|
170 | currentShow += 1;
|
171 | } else {
|
172 | currentShow -= 1;
|
173 | }
|
174 | currentShow = currentShow >= _this.elemWrapper.length ? 0 : currentShow;
|
175 | currentShow = currentShow < 0 ? _this.elemWrapper.length - 1 : currentShow;
|
176 | _this.ratio = 0;
|
177 | _this.mouseMoveType = '';
|
178 | _this.slickGoTo(currentShow, true);
|
179 | return;
|
180 | }
|
181 |
|
182 | if (_this.ratio > 0.3) {
|
183 | _this.forceUpdate(function () {
|
184 | _this.ratio = 0;
|
185 | _this.mouseMoveType = '';
|
186 | });
|
187 | } else {
|
188 | _this.setState({
|
189 | currentShow: _this.currentShow,
|
190 | direction: _this.ratioType === '+' ? 'prev' : 'next'
|
191 | }, function () {
|
192 | _this.ratio = 0;
|
193 | _this.mouseMoveType = '';
|
194 | });
|
195 | }
|
196 | };
|
197 |
|
198 | _this.getDiffer = function (e, touches) {
|
199 | var currentX = touches === undefined ? e.clientX : touches[0].clientX;
|
200 | var currentY = touches === undefined ? e.clientY : touches[0].clientY;
|
201 | var differX = currentX - _this.mouseStartXY.startX;
|
202 | var differY = currentY - _this.mouseStartXY.startY;
|
203 | var differ = Math.max(Math.abs(differX), Math.abs(differY));
|
204 | differ = differ === Math.abs(differX) ? differX : differY;
|
205 | return {
|
206 | differ: differ,
|
207 | rectName: differ === Math.abs(differX) ? 'width' : 'height'
|
208 | };
|
209 | };
|
210 |
|
211 | _this.getDomIsArrowOrThumb = function (e) {
|
212 | var arrowClassName = e.target.className;
|
213 | var thumbClassName = e.target.parentNode.className;
|
214 | if (arrowClassName.indexOf('banner-anim-arrow') >= 0 || thumbClassName.indexOf('banner-anim-thumb') >= 0) {
|
215 | return true;
|
216 | }
|
217 | return false;
|
218 | };
|
219 |
|
220 | _this.getRenderChildren = function (children) {
|
221 | var elem = [];
|
222 | var arrow = [];
|
223 | var thumb = void 0;
|
224 | var elementKeyNum = 0;
|
225 | var thumbKeyNum = 0;
|
226 |
|
227 | (0, _utils.toArrayChildren)(children).forEach(function (item, i) {
|
228 | if (!item) {
|
229 | return;
|
230 | }
|
231 | var itemProps = (0, _extends3['default'])({}, item.props);
|
232 | if (item.type.isBannerAnimElement) {
|
233 | itemProps.key = item.key || 'element-' + elementKeyNum;
|
234 | elementKeyNum += 1;
|
235 | itemProps.callBack = _this.animEnd;
|
236 | itemProps.show = _this.state.currentShow === i;
|
237 | itemProps.animType = _this.animType;
|
238 | itemProps.duration = _this.props.duration;
|
239 | itemProps.delay = _this.props.delay;
|
240 | itemProps.ease = _this.props.ease;
|
241 | itemProps.sync = _this.props.sync || itemProps.sync;
|
242 | itemProps.elemOffset = {
|
243 | top: _this.state.domRect.top,
|
244 | width: _this.state.domRect.width,
|
245 | height: _this.state.wrapperHeight
|
246 | };
|
247 | itemProps.direction = _this.state.direction;
|
248 | itemProps.ratio = _this.ratio;
|
249 | itemProps.mouseMoveType = _this.mouseMoveType;
|
250 | elem.push(_react2['default'].cloneElement(item, itemProps));
|
251 | } else if (item.type.isBannerAnimArrow) {
|
252 | itemProps.next = _this.next;
|
253 | itemProps.prev = _this.prev;
|
254 | itemProps.key = item.key || itemProps.arrowType;
|
255 | itemProps.elemHeight = _this.state.wrapperHeight;
|
256 | arrow.push(_react2['default'].cloneElement(item, itemProps));
|
257 | } else if (item.type.isBannerAnimThumb) {
|
258 | itemProps.key = item.key || 'thumb-' + thumbKeyNum;
|
259 | thumbKeyNum += 1;
|
260 | itemProps.thumbClick = _this.slickGoTo;
|
261 | itemProps.active = _this.state.currentShow;
|
262 | thumb = _react2['default'].cloneElement(item, itemProps);
|
263 | }
|
264 | });
|
265 | if (elem.length > 1) {
|
266 | if (!arrow.length && _this.props.arrow) {
|
267 | arrow.push(_react2['default'].createElement(_Arrow2['default'], { arrowType: 'prev', key: 'arrowPrev', next: _this.next, prev: _this.prev, 'default': true,
|
268 | elemHeight: _this.state.wrapperHeight
|
269 | }), _react2['default'].createElement(_Arrow2['default'], { arrowType: 'next', key: 'arrowNext', next: _this.next, prev: _this.prev, 'default': true,
|
270 | elemHeight: _this.state.wrapperHeight
|
271 | }));
|
272 | }
|
273 | if (!thumb && _this.props.thumb) {
|
274 | thumb = _react2['default'].createElement(_Thumb2['default'], { length: elem.length, key: 'thumb',
|
275 | thumbClick: _this.slickGoTo,
|
276 | active: _this.state.currentShow,
|
277 | 'default': true
|
278 | });
|
279 | }
|
280 | }
|
281 | _this.elemWrapper = elem;
|
282 | return elem.concat(arrow, thumb);
|
283 | };
|
284 |
|
285 | _this.getDomDataSetToState = function () {
|
286 | _this.dom = _reactDom2['default'].findDOMNode(_this);
|
287 | var domRect = _this.dom.getBoundingClientRect();
|
288 |
|
289 | var wrapperHeight = _this.getElementHeight(_this.dom.getElementsByClassName('banner-anim-elem'));
|
290 | _this.setState({
|
291 | wrapperHeight: wrapperHeight,
|
292 | domRect: domRect
|
293 | });
|
294 | _this.tweenBool = false;
|
295 | };
|
296 |
|
297 | _this.getElementHeight = function (children) {
|
298 | var height = 0;
|
299 | for (var i = 0; i < children.length; i++) {
|
300 | var dom = children[i];
|
301 | var _height = dom.getBoundingClientRect().height;
|
302 | height = height > _height ? height : _height;
|
303 | }
|
304 | return height;
|
305 | };
|
306 |
|
307 | _this.getAnimType = function (type) {
|
308 | var typeArray = type ? (0, _utils.dataToArray)(type) : Object.keys(_anim2['default']);
|
309 | var random = Math.round(Math.random() * (typeArray.length - 1));
|
310 | return _anim2['default'][typeArray[random]];
|
311 | };
|
312 |
|
313 | _this.autoPlay = function () {
|
314 | _this.autoPlayId = _ticker2['default'].interval(_this.next, _this.props.autoPlaySpeed);
|
315 | };
|
316 |
|
317 | _this.animTweenStart = function (show, type, noGetAnimType) {
|
318 | if (!noGetAnimType) {
|
319 | _this.animType = _this.getAnimType(_this.props.type);
|
320 | }
|
321 | _this.props.onChange('before', show);
|
322 | _this.setState({
|
323 | currentShow: show,
|
324 | direction: type
|
325 | });
|
326 | };
|
327 |
|
328 | _this.animEnd = function (type) {
|
329 | if (type === 'enter') {
|
330 | _this.tweenBool = false;
|
331 | _this.props.onChange('after', _this.state.currentShow);
|
332 | }
|
333 | };
|
334 |
|
335 | _this.next = function () {
|
336 | if (!_this.tweenBool) {
|
337 | _this.tweenBool = true;
|
338 | var newShow = _this.state.currentShow;
|
339 | newShow++;
|
340 | if (newShow >= _this.elemWrapper.length) {
|
341 | newShow = 0;
|
342 | }
|
343 | _this.animTweenStart(newShow, 'next');
|
344 | }
|
345 | };
|
346 |
|
347 | _this.prev = function () {
|
348 | if (!_this.tweenBool) {
|
349 | _this.tweenBool = true;
|
350 | var newShow = _this.state.currentShow;
|
351 | newShow--;
|
352 | if (newShow < 0) {
|
353 | newShow = _this.elemWrapper.length - 1;
|
354 | }
|
355 | _this.animTweenStart(newShow, 'prev');
|
356 | }
|
357 | };
|
358 |
|
359 | _this.slickGoTo = function (i, noGetAnimType) {
|
360 | if (!_this.tweenBool && i !== _this.state.currentShow) {
|
361 | _this.tweenBool = true;
|
362 | var type = i > _this.state.currentShow ? 'next' : 'prev';
|
363 | _this.animTweenStart(i, type, noGetAnimType);
|
364 | }
|
365 | };
|
366 |
|
367 | _this.state = {
|
368 | currentShow: _this.props.initShow,
|
369 | direction: null,
|
370 | wrapperHeight: 0,
|
371 | domRect: {}
|
372 | };
|
373 | _this.tweenBool = false;
|
374 | return _this;
|
375 | }
|
376 |
|
377 | (0, _createClass3['default'])(BannerAnim, [{
|
378 | key: 'componentDidMount',
|
379 | value: function componentDidMount() {
|
380 | this.getDomDataSetToState();
|
381 | if (window.addEventListener) {
|
382 | window.addEventListener('resize', this.getDomDataSetToState);
|
383 | } else {
|
384 | window.attachEvent('onresize', this.getDomDataSetToState);
|
385 | }
|
386 | if (this.props.autoPlay) {
|
387 | this.autoPlay();
|
388 | }
|
389 | }
|
390 | }, {
|
391 | key: 'componentWillReceiveProps',
|
392 | value: function componentWillReceiveProps() {
|
393 | this.tweenBool = false;
|
394 | }
|
395 | }, {
|
396 | key: 'componentWillUnmount',
|
397 | value: function componentWillUnmount() {
|
398 | if (this.autoPlayId) {
|
399 | _ticker2['default'].clear(this.autoPlayId);
|
400 | this.autoPlayId = 0;
|
401 | }
|
402 | if (window.addEventListener) {
|
403 | window.removeEventListener('touchend', this.onTouchEnd);
|
404 | window.removeEventListener('mouseup', this.onTouchEnd);
|
405 | window.removeEventListener('resize', this.getDomDataSetToState);
|
406 | } else {
|
407 | window.detachEvent('ontouchend', this.onTouchEnd);
|
408 | window.attachEvent('onmouseup', this.onTouchEnd);
|
409 | window.detachEvent('onresize', this.getDomDataSetToState);
|
410 | }
|
411 | }
|
412 | }, {
|
413 | key: 'render',
|
414 | value: function render() {
|
415 | var prefixCls = this.props.prefixCls;
|
416 | var props = (0, _extends3['default'])({}, this.props);
|
417 | ['type', 'prefixCls', 'component', 'initShow', 'duration', 'delay', 'ease', 'arrow', 'thumb', 'autoPlaySpeed', 'autoPlay', 'thumbFloat', 'sync', 'dragPlay'].forEach(function (key) {
|
418 | return delete props[key];
|
419 | });
|
420 | var childrenToRender = this.getRenderChildren(props.children);
|
421 | props.className = (props.className + ' ' + (prefixCls || '')).trim();
|
422 | props.style = (0, _extends3['default'])({}, props.style);
|
423 | props.onMouseEnter = this.onMouseEnter;
|
424 | props.onMouseLeave = this.onMouseLeave;
|
425 | if (childrenToRender.length > 1 && this.props.dragPlay) {
|
426 | props.onTouchStart = this.onTouchStart;
|
427 | props.onMouseDown = this.onTouchStart;
|
428 | props.onTouchMove = this.onTouchMove;
|
429 | props.onMouseMove = this.onTouchMove;
|
430 | props.onTouchEnd = this.onTouchEnd;
|
431 | props.onMouseUp = this.onTouchEnd;
|
432 | }
|
433 | return _react2['default'].createElement(this.props.component, props, childrenToRender);
|
434 | }
|
435 | }]);
|
436 | return BannerAnim;
|
437 | }(_react.Component);
|
438 |
|
439 | BannerAnim.propTypes = {
|
440 | children: _propTypes2['default'].any,
|
441 | style: _propTypes2['default'].object,
|
442 | className: _propTypes2['default'].string,
|
443 | prefixCls: _propTypes2['default'].string,
|
444 | component: _propTypes2['default'].any,
|
445 | arrow: _propTypes2['default'].bool,
|
446 | thumb: _propTypes2['default'].bool,
|
447 | initShow: _propTypes2['default'].number,
|
448 | type: _propTypes2['default'].any,
|
449 | duration: _propTypes2['default'].number,
|
450 | delay: _propTypes2['default'].number,
|
451 | ease: _propTypes2['default'].string,
|
452 | autoPlay: _propTypes2['default'].bool,
|
453 | autoPlaySpeed: _propTypes2['default'].number,
|
454 | autoPlayEffect: _propTypes2['default'].bool,
|
455 | onChange: _propTypes2['default'].func,
|
456 | onMouseEnter: _propTypes2['default'].func,
|
457 | onMouseLeave: _propTypes2['default'].func,
|
458 | sync: _propTypes2['default'].bool,
|
459 | dragPlay: _propTypes2['default'].bool
|
460 | };
|
461 | BannerAnim.defaultProps = {
|
462 | component: 'div',
|
463 | className: 'banner-anim',
|
464 | initShow: 0,
|
465 | duration: 450,
|
466 | delay: 0,
|
467 | ease: 'easeInOutQuad',
|
468 | arrow: true,
|
469 | thumb: true,
|
470 | autoPlaySpeed: 5000,
|
471 | autoPlayEffect: true,
|
472 | dragPlay: true,
|
473 | onChange: function onChange() {},
|
474 | onMouseEnter: function onMouseEnter() {},
|
475 | onMouseLeave: function onMouseLeave() {}
|
476 | };
|
477 | BannerAnim.isBannerAnim = true;
|
478 | exports['default'] = BannerAnim;
|
479 | module.exports = exports['default']; |
\ | No newline at end of file |