zent
Version:
一套前端设计语言和基于React的实现
954 lines (786 loc) • 33.3 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof define === 'function' && define.amd)
define(["react", "react-dom"], factory);
else if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("react-dom"));
else if(typeof exports === 'object')
exports["zent-tabs"] = factory(require("react"), require("react-dom"));
else
root["zent-tabs"] = factory(root["React"], root["ReactDOM"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_6__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'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 = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _TabPanel = __webpack_require__(3);
var _TabPanel2 = _interopRequireDefault(_TabPanel);
var _LazyMount = __webpack_require__(4);
var _LazyMount2 = _interopRequireDefault(_LazyMount);
var _Nav = __webpack_require__(5);
var _Nav2 = _interopRequireDefault(_Nav);
var _tabUtil = __webpack_require__(9);
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'];
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
'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 _class, _temp;
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
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 TabPanel = (_temp = _class = function (_React$Component) {
_inherits(TabPanel, _React$Component);
function TabPanel() {
_classCallCheck(this, TabPanel);
return _possibleConstructorReturn(this, (TabPanel.__proto__ || Object.getPrototypeOf(TabPanel)).apply(this, arguments));
}
_createClass(TabPanel, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.componentDidUpdate();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
var _props = this.props,
onPanelReady = _props.onPanelReady,
id = _props.id;
// Dom ready后的回调
onPanelReady(id);
}
}, {
key: 'render',
value: function render() {
var props = this.props;
var actived = props.actived;
var hiddenStyle = {};
if (!actived) {
hiddenStyle.display = 'none';
}
return _react2['default'].createElement(
'div',
{ style: hiddenStyle, role: 'tabpanel', id: props.prefix + '-tabpanel-' + props.uniqueId + '-' + props.id, className: props.prefix + '-tab-tabpanel ' + props.className },
props.children
);
}
}]);
return TabPanel;
}(_react2['default'].Component), _class.propTypes = {
className: _react2['default'].PropTypes.string,
prefix: _react2['default'].PropTypes.string,
actived: _react2['default'].PropTypes.bool,
tab: _react2['default'].PropTypes.any.isRequired,
id: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.string, _react2['default'].PropTypes.number]),
onPanelReady: _react2['default'].PropTypes.func,
uniqueId: _react2['default'].PropTypes.number
}, _class.defaultProps = {
prefix: 'zent',
className: '',
actived: false,
onPanelReady: noop,
uniqueId: 0
}, _temp);
exports['default'] = TabPanel;
module.exports = exports['default'];
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
'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; /**
* 保存domMount状态
*/
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
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; }
var LazyMount = (_temp = _class = function (_Component) {
_inherits(LazyMount, _Component);
function LazyMount(props) {
_classCallCheck(this, LazyMount);
var _this = _possibleConstructorReturn(this, (LazyMount.__proto__ || Object.getPrototypeOf(LazyMount)).call(this, props));
_this.state = {
mounted: props.mountTrigger
};
return _this;
}
_createClass(LazyMount, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var mountTrigger = nextProps.mountTrigger;
var mounted = this.state.mounted;
if (mountTrigger && !mounted) {
this.setState({
mounted: true
});
}
}
}, {
key: 'render',
value: function render() {
var children = this.props.children;
var mounted = this.state.mounted;
if (mounted) {
return children;
}
return null;
}
}]);
return LazyMount;
}(_react.Component), _class.propTypes = {
mountTrigger: _react2['default'].PropTypes.bool
}, _class.defaultProps = {
mountTrigger: false
}, _temp);
exports['default'] = LazyMount;
module.exports = exports['default'];
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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; }; }();
var _class, _temp;
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(6);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _Tab = __webpack_require__(7);
var _Tab2 = _interopRequireDefault(_Tab);
var _navUtil = __webpack_require__(8);
var _navUtil2 = _interopRequireDefault(_navUtil);
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 Nav = (_temp = _class = function (_React$Component) {
_inherits(Nav, _React$Component);
function Nav() {
_classCallCheck(this, Nav);
return _possibleConstructorReturn(this, (Nav.__proto__ || Object.getPrototypeOf(Nav)).apply(this, arguments));
}
_createClass(Nav, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.componentDidUpdate();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
// 设置navContent的宽度
this.positionInkBar();
}
}, {
key: 'positionInkBar',
value: function positionInkBar() {
var type = this.props.type;
if (type === 'slider') {
var activeTabDom = _reactDom2['default'].findDOMNode(this.activeTab);
if (activeTabDom) {
var activeTabInner = activeTabDom.children[0];
var activeTabInnerContentDom = activeTabInner.children[0];
var targetDom = activeTabInnerContentDom || activeTabInner;
var tWidth = _navUtil2['default'].getOffsetWH(targetDom);
var tLeft = _navUtil2['default'].getOffsetLT(targetDom);
var wrapLeft = _navUtil2['default'].getOffsetLT(this.tabwrapDom);
if (!activeTabInnerContentDom) {
var cssStyle = window.getComputedStyle(activeTabInner);
var paddingLeft = window.parseInt(cssStyle.paddingLeft);
var paddingRight = window.parseInt(cssStyle.paddingRight);
tWidth = tWidth - paddingLeft - paddingRight;
wrapLeft = wrapLeft - paddingLeft;
}
this.inkBarDom.style.width = tWidth + 'px';
this.inkBarDom.style.left = tLeft - wrapLeft + 'px';
}
}
}
}, {
key: 'renderTabs',
value: function renderTabs() {
var _this2 = this;
var renderData = _navUtil2['default'].modifyTabListData(this.props);
var TabList = [];
renderData.forEach(function (renderDataItem) {
var refParam = {};
if (renderDataItem.actived) {
refParam.ref = function (c) {
_this2.activeTab = c;
};
}
TabList.push(_react2['default'].createElement(
_Tab2['default'],
_extends({
prefix: _this2.props.prefix,
onSelected: _this2.onTabSelected.bind(_this2),
onDelete: _this2.onTabDel.bind(_this2),
uniqueId: _this2.props.uniqueId
}, renderDataItem, {
id: renderDataItem.key
}, refParam),
renderDataItem.title
));
});
return TabList;
}
}, {
key: 'onTabSelected',
value: function onTabSelected(id) {
var onChange = this.props.onChange;
// change
onChange(id);
}
}, {
key: 'onTabDel',
value: function onTabDel(id) {
var onDelete = this.props.onDelete;
onDelete(id);
}
}, {
key: 'onTabAdd',
value: function onTabAdd() {
var onTabAdd = this.props.onTabAdd;
onTabAdd();
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
var _props = this.props,
prefix = _props.prefix,
align = _props.align,
canadd = _props.canadd,
size = _props.size,
type = _props.type;
var classes = prefix + '-tabs-size-' + size + ' ' + prefix + '-tabs-type-' + type + ' ' + prefix + '-tabs-align-' + align;
var addOperation = '';
if (canadd && align !== 'center') {
addOperation = _react2['default'].createElement(
'div',
{ className: prefix + '-tabs-nav-add', onClick: this.onTabAdd.bind(this) },
_react2['default'].createElement(
'span',
null,
'+'
)
);
}
return _react2['default'].createElement(
'div',
{ className: prefix + '-tabs-nav ' + classes },
_react2['default'].createElement(
'div',
{ className: prefix + '-tabs-nav-content', ref: function ref(r) {
_this3.navContentDom = _reactDom2['default'].findDOMNode(r);
} },
addOperation,
_react2['default'].createElement(
'div',
{ className: prefix + '-tabs-scroll' },
_react2['default'].createElement(
'div',
{ className: prefix + '-tabs-tabwrap', role: 'tablist', ref: function ref(c) {
_this3.tabwrapDom = c;
} },
_react2['default'].createElement('span', { className: prefix + '-tabs-nav-ink-bar', ref: function ref(c) {
_this3.inkBarDom = c;
} }),
_react2['default'].createElement(
'div',
null,
this.renderTabs()
)
)
)
)
);
}
}]);
return Nav;
}(_react2['default'].Component), _class.propTypes = {
prefix: _react2['default'].PropTypes.string,
tabListData: _react2['default'].PropTypes.array,
onChange: _react2['default'].PropTypes.func,
type: _react2['default'].PropTypes.string,
align: _react2['default'].PropTypes.string,
size: _react2['default'].PropTypes.string,
onDelete: _react2['default'].PropTypes.func,
onTabAdd: _react2['default'].PropTypes.func,
candel: _react2['default'].PropTypes.bool,
canadd: _react2['default'].PropTypes.bool,
uniqueId: _react2['default'].PropTypes.number
}, _class.defaultProps = {
prefix: 'zent',
onChange: noop,
tabListData: [],
type: 'normal',
align: 'left',
size: 'normal',
onDelete: noop,
candel: false,
canadd: false,
onTabAdd: noop,
uniqueId: 0
}, _temp);
exports['default'] = Nav;
module.exports = exports['default'];
/***/ },
/* 6 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
'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 _class, _temp;
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
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 Tab = (_temp = _class = function (_React$Component) {
_inherits(Tab, _React$Component);
function Tab() {
_classCallCheck(this, Tab);
return _possibleConstructorReturn(this, (Tab.__proto__ || Object.getPrototypeOf(Tab)).apply(this, arguments));
}
_createClass(Tab, [{
key: 'onDel',
value: function onDel(e) {
e.stopPropagation();
var _props = this.props,
onDelete = _props.onDelete,
id = _props.id;
onDelete(id);
}
}, {
key: 'onClick',
value: function onClick() {
var _props2 = this.props,
onSelected = _props2.onSelected,
id = _props2.id,
actived = _props2.actived,
disabled = _props2.disabled;
if (!actived && !disabled) {
onSelected(id);
}
}
}, {
key: 'renderDelOperater',
value: function renderDelOperater() {
var _props3 = this.props,
candel = _props3.candel,
prefix = _props3.prefix;
if (candel) {
return _react2['default'].createElement(
'span',
{ className: prefix + '-tabs-tab-inner-del', onClick: this.onDel.bind(this) },
'\u2715'
);
}
return '';
}
}, {
key: 'render',
value: function render() {
var props = this.props;
var prefix = props.prefix,
minWidth = props.minWidth;
var classes = prefix + '-tabs-tab';
if (props.actived) {
classes += ' ' + prefix + '-tabs-actived';
}
if (props.disabled) {
classes += ' ' + prefix + '-tabs-disabled';
}
var style = {};
if (minWidth) {
style.minWidth = minWidth;
}
return _react2['default'].createElement(
'div',
{
role: 'tab',
'aria-labelledby': props.prefix + '-tabpanel-' + props.uniqueId + '-' + props.id,
className: classes,
'aria-disabled': props.disabled,
'aria-selected': props.actived,
onClick: this.onClick.bind(this),
style: style },
_react2['default'].createElement(
'div',
{ className: prefix + '-tabs-tab-inner' },
this.renderDelOperater(),
props.children
)
);
}
}]);
return Tab;
}(_react2['default'].Component), _class.propTypes = {
prefix: _react2['default'].PropTypes.string,
actived: _react2['default'].PropTypes.bool,
disabled: _react2['default'].PropTypes.bool,
id: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.string, _react2['default'].PropTypes.number]),
minWidth: _react2['default'].PropTypes.string,
onSelected: _react2['default'].PropTypes.func,
onDelete: _react2['default'].PropTypes.func,
candel: _react2['default'].PropTypes.bool,
uniqueId: _react2['default'].PropTypes.number
}, _class.defaultProps = {
prefix: 'zent',
actived: false,
disabled: false,
id: '',
minWidth: '',
onSelected: noop,
onDelete: noop,
candel: false
}, _temp);
exports['default'] = Tab;
module.exports = exports['default'];
/***/ },
/* 8 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var navUtil = {
// 获取宽高
getOffsetWH: function getOffsetWH(node) {
var prop = 'offsetWidth';
return node[prop];
},
// 获取偏移量
getOffsetLT: function getOffsetLT(node) {
var prop = 'left';
return node.getBoundingClientRect()[prop];
},
modifyTabListData: function modifyTabListData(props) {
var widthInfo = this.getWidth(props) || {};
var tabListData = props.tabListData,
candel = props.candel;
var modifiedTabListData = [];
var modifiedTabInfo = void 0;
tabListData.forEach(function (tabItem, i) {
modifiedTabInfo = {
key: tabItem.key,
actived: tabItem.actived,
disabled: tabItem.disabled,
title: tabItem.title,
prefix: tabItem.prefix,
className: tabItem.tabClassName,
minWidth: i === tabListData.length - 1 ? widthInfo.lastWidth || '' : widthInfo.width || '',
candel: candel && !tabItem.disabled
};
modifiedTabListData.push(modifiedTabInfo);
});
return modifiedTabListData;
},
getWidth: function getWidth(props) {
// 当align为center时做处理
var align = props.align,
tabListData = props.tabListData;
if (align === 'center') {
var width = '';
var lastWidth = '';
var childCount = tabListData.length;
width = 1 / childCount * 100 + '%';
lastWidth = (1 - 1 / childCount * (childCount - 1)) * 100 + '%';
return {
width: width,
lastWidth: lastWidth
};
}
}
};
exports['default'] = navUtil;
module.exports = exports['default'];
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _TabPanel = __webpack_require__(3);
var _TabPanel2 = _interopRequireDefault(_TabPanel);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/**
* 从tabpanel中提取数据，数据格式为
* {
* title: 'xxx',
* disabled: false,
* key: 'xx',
* actived: false,
* content: ReactElement,
* panelClassName: 'xxx',
* tabClassName: 'xxx',
* onTabReady: func
* }
*/
var tabUtil = {
getTabListData: function getTabListData(children, activeId) {
var _this = this;
var childrenList = _react2['default'].Children.toArray(children);
var listData = [];
_react2['default'].Children.forEach(childrenList, function (child) {
if (_this.checkIfTabPanel(child)) {
var _child$props = child.props,
id = _child$props.id,
disabled = _child$props.disabled,
tab = _child$props.tab,
panelChildren = _child$props.children,
onTabReady = _child$props.onTabReady,
panelClassName = _child$props.panelClassName,
tabClassName = _child$props.tabClassName;
listData.push({
title: tab || '',
disabled: !!disabled,
key: id,
actived: activeId === id,
content: panelChildren,
panelClassName: panelClassName,
tabClassName: tabClassName,
onTabReady: onTabReady
});
}
});
this.listData = listData;
return listData;
},
checkIfTabPanel: function checkIfTabPanel(rEl) {
return rEl.type && rEl.type === _TabPanel2['default'];
}
};
exports['default'] = tabUtil;
module.exports = exports['default'];
/***/ }
/******/ ])
});
;