lm-noticebar/lib/ScrollV.js

* 作者：kanghongyan * 邮箱：khongyan@gmail.com * 版本：**`1.0.3`**

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require('react'));

var _propTypes = _interopRequireDefault(require('prop-types'));

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _jsxFileName = 'src\\ScrollV.js';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (_typeof(call) === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + _typeof(superClass)); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var AutoPlay = function (_React$PureComponent) {
    _inherits(AutoPlay, _React$PureComponent);

    function AutoPlay() {
        _classCallCheck(this, AutoPlay);

        var _this = _possibleConstructorReturn(this, (AutoPlay.__proto__ || Object.getPrototypeOf(AutoPlay)).call(this));

        _this.state = {
            currentSlide: 0
        };

        _this.timer = null;
        return _this;
    }

    _createClass(AutoPlay, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            var _props = this.props,
                children = _props.children,
                height = _props.height;


            this.allSlides = _react.default.Children.count(children);

            if (this.props.useLineHeight) {

                var contHeight = this.dom.getBoundingClientRect().height;
                var firstChildHeight = this.dom.children[0].getBoundingClientRect().height;

                this.allSlides = Math.ceil((contHeight - firstChildHeight + height) / height) - 1;
            }

            this.allSlides > 1 && this.startPlay(this.state.currentSlide);
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            clearTimeout(this.timer);
        }
    }, {
        key: 'startPlay',
        value: function startPlay(startIndex, time) {
            var _this2 = this;

            var _props$speed = this.props.speed,
                speed = _props$speed === undefined ? 3000 : _props$speed;


            this.timer = setTimeout(function () {

                if (startIndex < _this2.allSlides) {
                    _this2.setState({
                        currentSlide: startIndex + 1
                    }, function () {
                        _this2.startPlay(startIndex + 1, speed);
                    });
                } else {
                    clearTimeout(_this2.timer);

                    _this2.setState({
                        currentSlide: 0
                    });
                    _this2.startPlay(0, 100);
                }
            }, time || speed);
        }
    }, {
        key: 'getStyle',
        value: function getStyle() {
            var _props$height = this.props.height,
                height = _props$height === undefined ? 18 : _props$height;


            var ht = height * this.state.currentSlide + 'px';

            if (this.state.currentSlide === 0) {
                return {
                    WebkitTransform: 'translate3d(0, 0, 0)',
                    transform: 'translate3d(0, 0, 0)',
                    WebkitTransition: 'none',
                    transition: 'none'
                };
            }

            return {
                WebkitTransform: 'translate3d(0, -' + ht + ', 0)',
                transform: 'translate3d(0, -' + ht + ', 0)'
            };
        }
    }, {
        key: '_cloneChildren',
        value: function _cloneChildren(children) {
            var _props2 = this.props,
                height = _props2.height,
                useLineHeight = _props2.useLineHeight;


            return children.map(function (item, index) {
                return _react.default.cloneElement(item, {
                    key: index,
                    style: _extends({}, useLineHeight ? { lineHeight: height + 'px' } : { height: height + 'px' }, item.props.style)
                });
            });
        }
    }, {
        key: 'render',
        value: function render() {
            var _this3 = this;

            var _props3 = this.props,
                children = _props3.children,
                useLineHeight = _props3.useLineHeight;

            // todo: 默认在useLineHeight情况下数据会多余一行, 优化

            var isObjectChildren = Object.prototype.toString.call(children) === '[object Object]';
            var childrenCount = _react.default.Children.count(children);
            var childrenArr = childrenCount === 1 && isObjectChildren ? [children] : children;

            return _react.default.createElement(
                'div',
                _defineProperty({ className: 'm-autoplay-wrap',
                    ref: function ref(dom) {
                        _this3.dom = dom;
                    },
                    style: _extends({
                        WebkitTransition: '-webkit-transform 1s',
                        transition: 'transform 1s'
                    }, this.getStyle(), {
                        overflow: 'hidden'
                    }),
                    __source: {
                        fileName: _jsxFileName,
                        lineNumber: 116
                    },
                    __self: this
                }, '__self', this),
                childrenCount > 1 || useLineHeight ? this._cloneChildren(childrenArr.concat(childrenArr[0])) : children
            );
        }
    }]);

    return AutoPlay;
}(_react.default.PureComponent);

AutoPlay.propTypes = {
    height: _propTypes.default.number,
    speed: _propTypes.default.number,
    useLineHeight: _propTypes.default.bool // 适用于每条数据数据过多情况下，用lineHeight表示height
};

AutoPlay.defaultProps = {
    height: 18,
    speed: 3000,
    useLineHeight: false
};

var _default = AutoPlay;
exports.default = _default;
module.exports = exports['default'];