UNPKG

zent

Version:

一套前端设计语言和基于React的实现

204 lines (168 loc) 6.92 kB
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); exports['default'] = undefined; 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 _class, _temp; var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _TabPanel = require('./components/TabPanel/TabPanel'); var _TabPanel2 = _interopRequireDefault(_TabPanel); var _LazyMount = require('./components/LazyMount'); var _LazyMount2 = _interopRequireDefault(_LazyMount); var _Nav = require('./components/Nav/Nav'); var _Nav2 = _interopRequireDefault(_Nav); var _tabUtil = require('./tabUtil'); var _tabUtil2 = _interopRequireDefault(_tabUtil); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': 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; } function noop() {} var Tabs = (_temp = _class = function (_React$Component) { _inherits(Tabs, _React$Component); function Tabs(props) { _classCallCheck(this, Tabs); var _this = _possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this, props)); Tabs.uniqueId++; return _this; } // 选中tab _createClass(Tabs, [{ key: 'onTabChange', value: function onTabChange(selectKey) { var onTabChange = this.props.onTabChange; if (onTabChange) { onTabChange(selectKey); } } // 删除tab }, { key: 'onTabDel', value: function onTabDel(tabKey) { var onTabDel = this.props.onTabDel; if (onTabDel) { onTabDel(tabKey); } } // 增加tab }, { key: 'onTabAdd', value: function onTabAdd() { var onTabAdd = this.props.onTabAdd; if (onTabAdd) { onTabAdd(); } } }, { key: 'renderNav', value: function renderNav(tabListData) { var _props = this.props, type = _props.type, align = _props.align, canadd = _props.canadd, candel = _props.candel, prefix = _props.prefix, size = _props.size; if (tabListData && tabListData.length) { return _react2['default'].createElement(_Nav2['default'], { onChange: this.onTabChange.bind(this), tabListData: tabListData, type: type, align: align, size: size, onDelete: this.onTabDel.bind(this), onTabAdd: this.onTabAdd.bind(this), canadd: canadd, candel: candel, prefix: prefix, uniqueId: Tabs.uniqueId }); } } }, { key: 'renderTabPanel', value: function renderTabPanel(tabListData) { var prefix = this.props.prefix; var newChildren = []; if (tabListData && tabListData.length) { tabListData.forEach(function (tabItem) { newChildren.push(_react2['default'].createElement( _LazyMount2['default'], { mountTrigger: tabItem.actived, key: tabItem.key }, _react2['default'].createElement( _TabPanel2['default'], { tab: tabItem.title, actived: tabItem.actived, onTabReady: tabItem.onTabReady, prefix: prefix, className: tabItem.panelClassName, id: tabItem.key, uniqueId: Tabs.uniqueId }, tabItem.content ) )); }); return newChildren; } return null; } }, { key: 'render', value: function render() { var _props2 = this.props, prefix = _props2.prefix, className = _props2.className, children = _props2.children, activeKey = _props2.activeKey, activeId = _props2.activeId; // 向上兼容 activeId = activeId || activeKey; var tabListData = _tabUtil2['default'].getTabListData(children, activeId); return _react2['default'].createElement( 'div', { className: prefix + '-tabs ' + className }, this.renderNav(tabListData), _react2['default'].createElement( 'div', { className: prefix + '-tabs-panewrap' }, this.renderTabPanel(tabListData) ) ); } }]); return Tabs; }(_react2['default'].Component), _class.propTypes = { className: _react2['default'].PropTypes.string, prefix: _react2['default'].PropTypes.string, type: _react2['default'].PropTypes.oneOf(['normal', 'card', 'slider']), activeKey: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.string, _react2['default'].PropTypes.number]), // 推荐使用activeId代替原来的activeKey // 更直观 activeId: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.string, _react2['default'].PropTypes.number]), size: _react2['default'].PropTypes.oneOf(['huge', 'normal']), align: _react2['default'].PropTypes.oneOf(['left', 'right', 'center']), onTabChange: _react2['default'].PropTypes.func, onTabDel: _react2['default'].PropTypes.func, onTabAdd: _react2['default'].PropTypes.func, candel: _react2['default'].PropTypes.bool, canadd: _react2['default'].PropTypes.bool }, _class.defaultProps = { prefix: 'zent', className: '', type: 'normal', activeKey: '', activeId: '', size: 'normal', align: 'left', onTabChange: noop, onTabDel: noop, onTabAdd: noop, candel: false, canadd: false }, _class.uniqueId = 0, _class.TabPanel = _TabPanel2['default'], _temp); exports['default'] = Tabs; module.exports = exports['default'];