tsp-component/lib/tab/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 Carousel from '../carousel';
var prefix = 'tsp-component-Tab';
var Tab = (function (_super) {
    __extends(Tab, _super);
    function Tab(props, state) {
        var _this = _super.call(this, props, state) || this;
        _this.state = {
            selectedIndex: _this.props.selectedIndex
        };
        return _this;
    }
    Tab.prototype.componentDidMount = function () {
        this.carouselElem = this.refs.carousel['refs'].container;
        this.bodyElem = this.refs.body;
        this.setHeight();
    };
    Tab.prototype.componentDidUpdate = function (nextProps) {
        if (nextProps.selectIndex !== this.props.selectedIndex) {
            this.setHeight();
        }
    };
    Tab.prototype.setHeight = function () {
        this.bodyElem.style.height = this.carouselElem.clientHeight + 'px';
    };
    Tab.prototype.clickTab = function (selectedIndex) {
        var _this = this;
        if (this.props.onChange) {
            this.props.onChange(selectedIndex);
        }
        this.setState({ selectedIndex: selectedIndex }, function () { return _this.setHeight(); });
    };
    Tab.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", { className: classNames((_a = {},
                _a[prefix] = true,
                _a[this.props.className] = this.props.className,
                _a)) },
            React.createElement("div", { className: prefix + "-head" }, this.props.tabs.map(function (tab, i) {
                return (React.createElement(Hammer, { onTap: function () { return _this.clickTab(i); }, key: i },
                    React.createElement("div", { className: classNames((_a = {},
                            _a[prefix + "-head-tab"] = true,
                            _a[prefix + "-head-tab-selected"] = _this.state.selectedIndex === i,
                            _a)) }, tab)));
                var _a;
            })),
            React.createElement("div", { className: prefix + "-body", ref: "body" },
                React.createElement(Carousel, { selectedIndex: this.state.selectedIndex, swipeable: false, autoHeight: true, ref: "carousel" }, this.props.children))));
        var _a;
    };
    Tab.defaultProps = {
        selectedIndex: 0,
        tabs: []
    };
    return Tab;
}(React.Component));
export default Tab;