zent
Version:
一套前端设计语言和基于React的实现
221 lines (191 loc) • 8.01 kB
JavaScript
;
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 = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _Tab = require('../Tab/Tab');
var _Tab2 = _interopRequireDefault(_Tab);
var _navUtil = require('./navUtil');
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'];