hy-checkbox/lib/Tab/tab.js

checkbox & radio ui components for react

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

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; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames2 = require('classnames');

var _classnames3 = _interopRequireDefault(_classnames2);

require('./tab.less');

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 Tab = function (_React$Component) {
    _inherits(Tab, _React$Component);

    function Tab(props) {
        _classCallCheck(this, Tab);

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

        var _this$props = _this.props,
            defaultKey = _this$props.defaultKey,
            children = _this$props.children;

        var pathArr = /^\S+[#\/]([\S]+)[?](\S+)$/.exec(window.location.hash);
        pathArr[2].split('&').forEach(function (item) {
            if (item.indexOf('activeKey') > -1) {
                defaultKey = item.split('=')[1];
            }
        });
        _this.pageNum = Math.floor((document.body.clientWidth - 220 - 90) / 2 / 110);
        _this.state = {
            activeKey: defaultKey,
            btnRight: children.length > _this.pageNum ? false : true,
            btnLeft: true,
            currentPage: 1
        };
        return _this;
    }
    /**
     * @handleSwitchTab:切换tab时可能需要执行的方法
     * @activeKey:控制页面刷新时停留在之前选中的tab上
     * 
     * @static
     * 
     * @memberof Tab
     */


    _createClass(Tab, [{
        key: 'handleRight',
        value: function handleRight() {
            var pageSize = Math.ceil(this.props.children.length / this.pageNum);
            // console.log("pageSize --->", pageSize);
            // console.log("currentPage --->", this.state.currentPage);
            if (this.state.currentPage + 1 < pageSize) {
                this.setState({
                    currentPage: this.state.currentPage + 1
                });
            } else if (this.state.currentPage + 1 == pageSize) {
                this.setState({
                    currentPage: this.state.currentPage + 1,
                    btnRight: !this.state.btnRight,
                    btnLeft: !this.state.btnLeft
                });
            }
        }
    }, {
        key: 'handleLeft',
        value: function handleLeft() {
            if (this.state.currentPage - 1 > 1) {
                this.setState({
                    currentPage: this.state.currentPage - 1
                });
            } else if (this.state.currentPage - 1 == 1) {
                this.setState({
                    currentPage: this.state.currentPage - 1,
                    btnRight: !this.state.btnRight,
                    btnLeft: !this.state.btnLeft
                });
            }
        }
    }, {
        key: 'getActivePanel',
        value: function getActivePanel() {
            var _this2 = this;

            return this.props.children.find(function (item) {
                return item.key === _this2.state.activeKey;
            });
        }
    }, {
        key: 'switchPanel',
        value: function switchPanel(key) {
            if (key == this.state.activeKey) {
                return;
            }
            this.setState({
                activeKey: key
            });
            if (this.props.handleSwitchTab) {
                this.props.handleSwitchTab(key);
            }
            //hashHistory.push({ pathname: '/' + this.path, search: '?activeKey=' + key })
            window.history.replaceState(null, document.title, window.location.href.split('?')[0] + '?activeKey=' + key);
        }
    }, {
        key: 'renderHeader',
        value: function renderHeader() {
            var _this3 = this;

            var me = this;
            return me.props.children.map(function (child) {
                if (child.props.isValid === false) {
                    return null;
                }
                return _react2.default.createElement(
                    'button',
                    {
                        className: (0, _classnames3.default)({ title: true, active: child.key === _this3.state.activeKey }),
                        key: child.key,
                        onClick: me.switchPanel.bind(me, child.key)
                    },
                    child.props.title
                );
            });
        }
    }, {
        key: 'render',
        value: function render() {
            var _classnames;

            // console.log(Object.prototype.toString.call(this.props.children));
            var me = this;
            var TabTitle = this.props.tabTitle;
            var _props = this.props,
                direction = _props.direction,
                tabTitle = _props.tabTitle,
                prefixCls = _props.prefixCls,
                className = _props.className,
                shadow = _props.shadow,
                padNone = _props.padNone;

            var tabtype = this.props.direction;
            var _me$state = me.state,
                btnRight = _me$state.btnRight,
                btnLeft = _me$state.btnLeft,
                currentPage = _me$state.currentPage;

            var ul_w = Math.ceil(me.props.children.length * 120);
            var content_w = this.pageNum * 120 - 70;
            var style_left = TabTitle ? 'auto' : (1 - this.pageNum) * 120 * (currentPage - 1);
            var pageSize = Math.ceil(this.props.children.length / this.pageNum);
            //console.log("tab 标签个数",pageSize);
            //  console.log('标签数组===============',tabList);
            // let tabLength = this.props.tabList.length;

            return _react2.default.createElement(
                'div',
                { className: shadow ? (0, _classnames3.default)(prefixCls + '-tabs ' + prefixCls + '-tabs-shadow') : (0, _classnames3.default)(prefixCls + '-tabs') },
                _react2.default.createElement(
                    'div',
                    { className: (0, _classnames3.default)(prefixCls + '-tabs-content ' + direction) },
                    _react2.default.createElement(
                        'div',
                        { className: (0, _classnames3.default)(prefixCls + '-tabs-title', (_classnames = {}, _defineProperty(_classnames, prefixCls + '-tab-after', currentPage != pageSize), _defineProperty(_classnames, prefixCls + '-tab-before', currentPage != 1), _classnames))
                        },
                        TabTitle ? _react2.default.createElement(
                            'h2',
                            { className: (0, _classnames3.default)(prefixCls + '-tabs-h2') },
                            tabTitle
                        ) : null,
                        _react2.default.createElement(
                            'div',
                            { className: prefixCls + '-tabs-btn', style: { 'width': ul_w + 'px', 'left': style_left + 'px' } },
                            me.renderHeader()
                        )
                    ),
                    _react2.default.createElement(
                        'button',
                        { className: (0, _classnames3.default)({ "btn-more": true, "tab-hidden": pageSize == 1 || pageSize == 0, "tab-disable": currentPage != 1 && currentPage == pageSize }), onClick: me.handleRight.bind(me) },
                        _react2.default.createElement(
                            'i',
                            { className: 'iconfont icon-right' },
                            ' '
                        )
                    ),
                    _react2.default.createElement(
                        'button',
                        { className: (0, _classnames3.default)({ "btn-more": true, "tab-hidden": pageSize == 1 || pageSize == 0, "tab-disable": currentPage == 1 && currentPage != pageSize }), onClick: me.handleLeft.bind(me) },
                        _react2.default.createElement(
                            'i',
                            { className: 'iconfont icon-left' },
                            ' '
                        )
                    )
                ),
                _react2.default.createElement(
                    'div',
                    { className: padNone ? (0, _classnames3.default)(prefixCls + '-tabs-panel') : (0, _classnames3.default)(prefixCls + '-tabs-panel pad-lg') },
                    me.getActivePanel()
                )
            );
        }
    }]);

    return Tab;
}(_react2.default.Component);

Tab.propTypes = {
    defaultKey: _react2.default.PropTypes.string,
    children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element, _react2.default.PropTypes.array]),
    prefixCls: _react2.default.PropTypes.string,
    className: _react2.default.PropTypes.string,
    direction: _react2.default.PropTypes.oneOf(['default', 'right', 'vertical', 'inner', 'inner2']),
    shadow: _react2.default.PropTypes.bool,
    padNone: _react2.default.PropTypes.bool,
    handleSwitchTab: _react2.default.PropTypes.func
};
Tab.defaultProps = {
    prefixCls: 'ult',
    shadow: false,
    padNone: false
};

var TabPanel = function (_React$Component2) {
    _inherits(TabPanel, _React$Component2);

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

        return _possibleConstructorReturn(this, (TabPanel.__proto__ || Object.getPrototypeOf(TabPanel)).apply(this, arguments));
    }

    _createClass(TabPanel, [{
        key: 'render',


        /**
         * @isValid:有些tab页根据此属性来判断是否显示，如果为false则不显示，其他所有值均显示
         * 
         * @static
         * 
         * @memberof TabPanel
         */
        value: function render() {
            var _props2 = this.props,
                prefixCls = _props2.prefixCls,
                className = _props2.className,
                isValid = _props2.isValid;

            if (isValid === false) {
                return null;
            }
            return _react2.default.createElement(
                'div',
                { className: (0, _classnames3.default)(prefixCls + '-tab-panel') },
                this.props.children
            );
        }
    }]);

    return TabPanel;
}(_react2.default.Component);

TabPanel.propTypes = {
    children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.element, _react2.default.PropTypes.array]),
    prefixCls: _react2.default.PropTypes.string,
    invalid: _react2.default.PropTypes.bool
};
TabPanel.defaultProps = {
    prefixCls: 'ult'
};


Tab.TabPanel = TabPanel;
exports.default = Tab;