tsp-component/lib/carousel/index.js

提供多端和react版本的UI组件

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import classNames from 'classnames';
import Hammer from 'react-hammerjs';
import Slider from '../slider';
import { setTranslate } from '../util/animation';
import { deviceWidth, deviceHeight } from '../util/device';
var prefix = 'tsp-component-carousel';
var Carousel = (function (_super) {
    __extends(Carousel, _super);
    function Carousel(props, state) {
        var _this = _super.call(this, props, state) || this;
        _this.onPanStart = _this.onPanStart.bind(_this);
        _this.onPan = _this.onPan.bind(_this);
        _this.onPanEnd = _this.onPanEnd.bind(_this);
        _this.onTap = _this.onTap.bind(_this);
        _this.onTransitionEnd = _this.onTransitionEnd.bind(_this);
        return _this;
    }
    Carousel.prototype.componentDidMount = function () {
        this.sliderElem = this.refs['slider'];
        this.containerElem = this.refs['container'];
        this.dotsElem = this.refs['dots'];
        this.slider = new Slider({
            sliderElem: this.sliderElem,
            containerElem: this.containerElem,
            count: React.Children.toArray(this.props.children).length,
            direction: this.props.direction,
            width: this.props.width,
            height: this.props.height,
            selectedIndex: this.props.selectedIndex
        });
        this.carouselInitial(this.props.selectedIndex);
        this.setContainerHeight();
        this.autoplay();
        this.sliderElem.addEventListener('webkitTransitionEnd', this.onTransitionEnd);
    };
    Carousel.prototype.componentWillUnmount = function () {
        this.clearAtuoplay();
        this.sliderElem.removeEventListener('webkitTransitionEnd', this.onTransitionEnd);
    };
    Carousel.prototype.componentWillReceiveProps = function (nextProps) {
        var selectedIndex = this.props.selectedIndex;
        var nextSelectedIndex = nextProps.selectedIndex;
        var selectedIndexChange = selectedIndex !== nextSelectedIndex;
        var updateIdChange = this.props.refreshId !== nextProps.refreshId;
        var changeSelectedIndexType = selectedIndexChange ? '' : 'auto';
        if (selectedIndexChange && !updateIdChange) {
            this.slider.count = React.Children.toArray(nextProps['children']).length;
            this.changeSelectedIndex(selectedIndex, nextSelectedIndex);
        }
        else if (nextProps.refreshId === nextSelectedIndex) {
            this.setCarouselSort(selectedIndex, nextSelectedIndex);
        }
    };
    Carousel.prototype.onPanStart = function (evt) {
        evt.preventDefault();
        if (!this.props.swipeable) {
            return;
        }
        this.slider.panStart();
        this.clearAtuoplay();
    };
    Carousel.prototype.onPan = function (evt) {
        evt.preventDefault();
        if (!this.props.swipeable) {
            return;
        }
        this.slider.panMove(evt);
    };
    Carousel.prototype.onPanEnd = function (evt) {
        evt.preventDefault();
        if (this.slider.isPanEnd) {
            return;
        }
        this.containerElem.classList.add('tsp-compoent-slider-disabled');
        this.slider.addPanEndClass();
        this.slider.panEnd(evt);
        this.setContainerHeight();
        this.autoplay();
    };
    Carousel.prototype.onTap = function () {
        if (this.props.onClick) {
            this.props.onClick(this.slider.selectedIndex);
        }
    };
    Carousel.prototype.onTransitionEnd = function () {
        var _a = this.slider.afterChangeIndexs, beforeSelectIndex = _a.beforeSelectIndex, afterSelectedIndex = _a.afterSelectedIndex;
        this.carouselInitial(afterSelectedIndex);
        if (this.props.dots) {
            this.dotsElem.children[beforeSelectIndex].classList.remove(prefix + "-dots-item-current");
            this.dotsElem.children[afterSelectedIndex].classList.add(prefix + "-dots-item-current");
        }
        if (this.props.afterChange) {
            this.props.afterChange(this.slider.afterChangeIndexs, this.isAuto);
        }
        this.isAuto = false;
        this.slider.removePanEndClass();
        this.containerElem.classList.remove('tsp-compoent-slider-disabled');
    };
    Carousel.prototype.carouselInitial = function (selectedIndex) {
        var position = this.slider.getMoveBeforePosition();
        this.setCarouselSort(selectedIndex);
        setTranslate(this.sliderElem, position.x, position.y);
    };
    Carousel.prototype.setContainerHeight = function (isReceive) {
        if (isReceive === void 0) { isReceive = false; }
        if (this.props.autoHeight) {
            var index = isReceive ? 0 : 1;
            var sliderChildrenElem = this.slider.sliderElem.children[index];
            if (this.slider.sliderElem.style.height !== sliderChildrenElem.clientHeight + 'px') {
                this.slider.sliderElem.style.height = sliderChildrenElem.clientHeight + 'px';
            }
        }
    };
    Carousel.prototype.setCarouselSort = function (selectedIndex, oldSelectedIndex, isReceive) {
        if (isReceive === void 0) { isReceive = false; }
        var children = this.refs['children']['cloneNode'](true).children;
        var childrenElemLength = children.length;
        var fragment = document.createDocumentFragment();
        var _a = [undefined, undefined, undefined], prevElem = _a[0], currentElem = _a[1], nextElem = _a[2];
        var i;
        for (i = 0; i < childrenElemLength; i++) {
            if (this.props.direction === 'horizontal') {
                children[i].style.width = this.props.width + 'px';
            }
            else {
                children[i].style.height = this.props.height + 'px';
            }
            children[i].classList.add(prefix + "-slider-item");
        }
        if (isReceive) {
            prevElem = children[selectedIndex];
            currentElem = children[oldSelectedIndex];
            nextElem = children[selectedIndex];
        }
        else {
            if (childrenElemLength > 1) {
                if (selectedIndex === 0) {
                    prevElem = children[childrenElemLength - 1];
                    nextElem = children[1];
                }
                else if (selectedIndex === childrenElemLength - 1) {
                    prevElem = children[childrenElemLength - 2];
                    nextElem = children[0];
                }
                else {
                    prevElem = children[selectedIndex - 1];
                    nextElem = children[selectedIndex + 1];
                }
            }
            else if (childrenElemLength === 1) {
                prevElem = children[0];
                nextElem = children[0];
            }
            currentElem = children[selectedIndex];
        }
        if (childrenElemLength >= 1) {
            fragment.appendChild(prevElem.cloneNode(true));
        }
        if (childrenElemLength === 1) {
            fragment.appendChild(currentElem.cloneNode(true));
        }
        else {
            fragment.appendChild(currentElem);
        }
        if (childrenElemLength >= 1) {
            fragment.appendChild(nextElem);
        }
        this.sliderElem.innerHTML = null;
        this.sliderElem.appendChild(fragment);
    };
    Carousel.prototype.changeSelectedIndex = function (selectedIndex, nextSelectedIndex) {
        var _this = this;
        this.setCarouselSort(nextSelectedIndex, selectedIndex, true);
        this.setContainerHeight(true);
        this.containerElem.classList.add('tsp-compoent-slider-disabled');
        setTimeout(function () {
            _this.slider.onChangeSelectedIndex({
                deltaX: _this.isAuto ? -1 : selectedIndex - nextSelectedIndex,
                deltaY: selectedIndex - nextSelectedIndex,
                preventDefault: function () { return null; }
            }, nextSelectedIndex);
        }, 0);
    };
    Carousel.prototype.autoplay = function () {
        var _this = this;
        if (this.props.autoplayInterval) {
            this.autoplayInterval = setInterval(function () {
                var selectedIndex = _this.slider.selectedIndex;
                var nextSelectedIndex = selectedIndex + 1 >= _this.slider.count ? 0 : selectedIndex + 1;
                _this.isAuto = true;
                _this.changeSelectedIndex(selectedIndex, nextSelectedIndex);
            }, this.props.autoplayInterval);
        }
    };
    Carousel.prototype.clearAtuoplay = function () {
        if (this.autoplayInterval !== undefined) {
            clearInterval(this.autoplayInterval);
        }
    };
    Carousel.prototype.render = function () {
        var _this = this;
        var model = this.props.direction === 'horizontal' ? 'width' : 'height';
        var contentStyle = (_a = {}, _a[model] = this.props.width, _a);
        var flexStyle = (_b = {}, _b[model] = this.props.width * 3, _b);
        return (React.createElement("div", { className: classNames((_c = {},
                _c[prefix] = true,
                _c[this.props.className] = this.props.className,
                _c)), ref: "container", id: this.props.id ? this.props.id : '' },
            React.createElement(Hammer, { className: prefix + "-hammer", onPanStart: this.onPanStart, onPan: this.onPan, onPanEnd: this.onPanEnd, onTap: this.onTap },
                React.createElement("div", { className: prefix + "-content", style: contentStyle },
                    React.createElement("div", { className: "clearfix", style: flexStyle, ref: "slider" }))),
            React.createElement("div", { className: prefix + "-children", ref: "children" }, this.props.children),
            this.props.leftArrow ? (React.createElement("div", { className: prefix + "-left-arrow" }, this.props.leftArrow)) : null,
            this.props.rightArrow ? (React.createElement("div", { className: prefix + "-left-arrow" }, this.props.leftArrow)) : null,
            this.props.dots ? (React.createElement("div", { className: prefix + "-dots", ref: "dots" }, React.Children.toArray(this.props.children).map(function (value, i) {
                return (React.createElement("div", { className: classNames((_a = {},
                        _a[prefix + "-dots-item"] = true,
                        _a[prefix + "-dots-item-current"] = _this.props.selectedIndex === i,
                        _a)), key: i }));
                var _a;
            }))) : null));
        var _a, _b, _c;
    };
    Carousel.defaultProps = {
        width: deviceWidth,
        height: deviceHeight,
        direction: 'horizontal',
        refreshId: 1,
        selectedIndex: 0,
        swipeable: true
    };
    return Carousel;
}(React.Component));
export default Carousel;