1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 |
|
6 | var _class, _temp;
|
7 |
|
8 | import React from 'react';
|
9 | import { findDOMNode } from 'react-dom';
|
10 | import PropTypes from 'prop-types';
|
11 | import classnames from 'classnames';
|
12 | import Icon from '../../icon';
|
13 | import Overlay from '../../overlay';
|
14 | import Menu from '../../menu';
|
15 | import Animate from '../../animate';
|
16 | import { events, KEYCODE, dom, obj } from '../../util';
|
17 | import { triggerEvents, getOffsetLT, getOffsetWH, isTransformSupported, tabsArrayShallowEqual } from './utils';
|
18 |
|
19 | var floatRight = { float: 'right', zIndex: 1 };
|
20 | var floatLeft = { float: 'left', zIndex: 1 };
|
21 | var iconTypeMap = {
|
22 | dropdown: 'arrow-down',
|
23 | prev: 'arrow-left',
|
24 | next: 'arrow-right'
|
25 | };
|
26 | var Popup = Overlay.Popup;
|
27 | var Nav = (_temp = _class = function (_React$Component) {
|
28 | _inherits(Nav, _React$Component);
|
29 |
|
30 | function Nav(props, context) {
|
31 | _classCallCheck(this, Nav);
|
32 |
|
33 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
|
34 |
|
35 | _this.removeTab = function (key, e) {
|
36 | e && e.stopPropagation();
|
37 | _this.props.onClose(key);
|
38 | };
|
39 |
|
40 | _this.onCloseKeyDown = function (key, e) {
|
41 | if (e.keyCode === KEYCODE.ENTER) {
|
42 | e.stopPropagation();
|
43 | e.preventDefault();
|
44 | _this.props.onClose(key);
|
45 | }
|
46 | };
|
47 |
|
48 | _this.defaultTabTemplateRender = function (key, _ref) {
|
49 | var title = _ref.title,
|
50 | closeable = _ref.closeable;
|
51 | var _this$props = _this.props,
|
52 | locale = _this$props.locale,
|
53 | prefix = _this$props.prefix;
|
54 |
|
55 | var tail = closeable ? React.createElement(Icon, {
|
56 | 'aria-label': locale.closeAriaLabel,
|
57 | type: 'close',
|
58 | tabIndex: '0',
|
59 | onKeyDown: function onKeyDown(e) {
|
60 | return _this.onCloseKeyDown(key, e);
|
61 | },
|
62 | onClick: function onClick(e) {
|
63 | return _this.removeTab(key, e);
|
64 | },
|
65 | className: prefix + 'tabs-tab-close'
|
66 | }) : null;
|
67 | return React.createElement(
|
68 | 'div',
|
69 | { className: prefix + 'tabs-tab-inner' },
|
70 | title,
|
71 | tail
|
72 | );
|
73 | };
|
74 |
|
75 | _this.scrollToActiveTab = function () {
|
76 | if (_this.activeTab && ['slide', 'dropdown'].includes(_this.props.excessMode)) {
|
77 | var activeTabWH = getOffsetWH(_this.activeTab);
|
78 | var wrapperWH = getOffsetWH(_this.wrapper);
|
79 | var activeTabOffset = getOffsetLT(_this.activeTab);
|
80 | var wrapperOffset = getOffsetLT(_this.wrapper);
|
81 | var target = _this.offset;
|
82 |
|
83 | if (activeTabOffset + activeTabWH >= wrapperOffset + wrapperWH || activeTabOffset < wrapperOffset) {
|
84 | _this.setOffset(_this.offset + wrapperOffset - activeTabOffset, true, true);
|
85 | return;
|
86 | }
|
87 | _this.setOffset(target, true, true);
|
88 | }
|
89 | };
|
90 |
|
91 | _this.onPrevClick = function () {
|
92 | var wrapperWH = getOffsetWH(_this.wrapper);
|
93 | _this.setOffset(_this.offset + wrapperWH, true, false);
|
94 | };
|
95 |
|
96 | _this.onNextClick = function () {
|
97 | var wrapperWH = getOffsetWH(_this.wrapper);
|
98 | _this.setOffset(_this.offset - wrapperWH, true, false);
|
99 | };
|
100 |
|
101 | _this.onSelectMenuItem = function (keys) {
|
102 | var _this$props2 = _this.props,
|
103 | onTriggerEvent = _this$props2.onTriggerEvent,
|
104 | triggerType = _this$props2.triggerType;
|
105 |
|
106 | onTriggerEvent(triggerType, keys[0]);
|
107 | };
|
108 |
|
109 | _this.onWindowResized = function () {
|
110 | if (_this.updateTimer) {
|
111 | clearTimeout(_this.updateTimer);
|
112 | }
|
113 |
|
114 | _this.updateTimer = setTimeout(function () {
|
115 | _this.setSlideBtn();
|
116 | _this.getDropdownItems(_this.props);
|
117 | }, 100);
|
118 | };
|
119 |
|
120 | _this.navRefHandler = function (ref) {
|
121 | _this.nav = findDOMNode(ref);
|
122 | };
|
123 |
|
124 | _this.wrapperRefHandler = function (ref) {
|
125 | _this.wrapper = ref;
|
126 | };
|
127 |
|
128 | _this.navbarRefHandler = function (ref) {
|
129 | _this.navbar = ref;
|
130 | };
|
131 |
|
132 | _this.activeTabRefHandler = function (ref) {
|
133 | _this.activeTab = ref;
|
134 | };
|
135 |
|
136 | _this.prevBtnHandler = function (ref) {
|
137 | _this.prevBtn = findDOMNode(ref);
|
138 | };
|
139 |
|
140 | _this.nextBtnHandler = function (ref) {
|
141 | _this.nextBtn = findDOMNode(ref);
|
142 | };
|
143 |
|
144 | _this.state = {
|
145 | showBtn: false,
|
146 | dropdownTabs: []
|
147 | };
|
148 | _this.offset = 0;
|
149 | return _this;
|
150 | }
|
151 |
|
152 | Nav.prototype.componentDidMount = function componentDidMount() {
|
153 | if (!this.props.animation) {
|
154 | this.initialSettings();
|
155 | }
|
156 |
|
157 | events.on(window, 'resize', this.onWindowResized);
|
158 | };
|
159 |
|
160 | Nav.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
161 | var _this2 = this;
|
162 |
|
163 |
|
164 | clearTimeout(this.scrollTimer);
|
165 | this.scrollTimer = setTimeout(function () {
|
166 | _this2.scrollToActiveTab();
|
167 | }, 410);
|
168 |
|
169 | clearTimeout(this.slideTimer);
|
170 | this.slideTimer = setTimeout(function () {
|
171 | _this2.setSlideBtn();
|
172 | }, 410);
|
173 |
|
174 |
|
175 | if (this.props.excessMode === 'dropdown') {
|
176 | if (!tabsArrayShallowEqual(this.props.tabs, prevProps.tabs)) {
|
177 | this.getDropdownItems(this.props);
|
178 | }
|
179 | }
|
180 | };
|
181 |
|
182 | Nav.prototype.componentWillUnmount = function componentWillUnmount() {
|
183 | events.off(window, 'resize', this.onWindowResized);
|
184 | };
|
185 |
|
186 | Nav.prototype.initialSettings = function initialSettings() {
|
187 | this.setSlideBtn();
|
188 | this.getDropdownItems(this.props);
|
189 | };
|
190 |
|
191 | |
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 | Nav.prototype.setOffset = function setOffset(target) {
|
200 | var checkSlideBtn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
201 | var setActive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
202 | var _props = this.props,
|
203 | tabPosition = _props.tabPosition,
|
204 | rtl = _props.rtl;
|
205 |
|
206 | var navWH = getOffsetWH(this.nav, tabPosition);
|
207 | var wrapperWH = getOffsetWH(this.wrapper);
|
208 |
|
209 |
|
210 | target = target >= 0 ? 0 : target;
|
211 |
|
212 | target = target <= wrapperWH - navWH && wrapperWH - navWH < 0 ? wrapperWH - navWH : target;
|
213 |
|
214 | var relativeOffset = target - this.offset;
|
215 | if (this.activeTab && this.props.excessMode === 'slide' && setActive) {
|
216 | var activeTabWH = getOffsetWH(this.activeTab);
|
217 | var activeTabOffset = getOffsetLT(this.activeTab) + relativeOffset;
|
218 | var wrapperOffset = getOffsetLT(this.wrapper);
|
219 | target = this._adjustTarget({
|
220 | wrapperOffset: wrapperOffset,
|
221 | wrapperWH: wrapperWH,
|
222 | activeTabWH: activeTabWH,
|
223 | activeTabOffset: activeTabOffset,
|
224 | rtl: rtl,
|
225 | target: target
|
226 | });
|
227 | }
|
228 |
|
229 | var scaleRate = 1;
|
230 |
|
231 | if (this.nav && this.nav.offsetWidth) {
|
232 | scaleRate = getOffsetWH(this.nav) / this.nav.offsetWidth;
|
233 | }
|
234 |
|
235 | var _ov = target / scaleRate;
|
236 | var offsetValue = isNaN(_ov) ? target : _ov;
|
237 |
|
238 | if (this.offset !== target && this.nav) {
|
239 |
|
240 | this.offset = target;
|
241 | var divScroll = this.nav.parentElement;
|
242 |
|
243 | if (tabPosition === 'left' || tabPosition === 'right') {
|
244 | divScroll.scrollTo({ top: -offsetValue, left: 0, behavior: 'smooth' });
|
245 | } else if (!this.props.rtl) {
|
246 | divScroll.scrollTo({ top: 0, left: -offsetValue, behavior: 'smooth' });
|
247 | } else {
|
248 | divScroll.scrollTo({ top: 0, left: offsetValue, behavior: 'smooth' });
|
249 | }
|
250 |
|
251 | if (checkSlideBtn) {
|
252 | this.setSlideBtn();
|
253 | }
|
254 | }
|
255 | };
|
256 |
|
257 | Nav.prototype._adjustTarget = function _adjustTarget(_ref2) {
|
258 | var wrapperOffset = _ref2.wrapperOffset,
|
259 | wrapperWH = _ref2.wrapperWH,
|
260 | activeTabWH = _ref2.activeTabWH,
|
261 | activeTabOffset = _ref2.activeTabOffset,
|
262 | rtl = _ref2.rtl,
|
263 | target = _ref2.target;
|
264 |
|
265 | if (
|
266 |
|
267 | wrapperOffset + wrapperWH < activeTabOffset + activeTabWH && activeTabOffset < wrapperOffset + wrapperWH) {
|
268 | if (rtl) {
|
269 | target += activeTabOffset + activeTabWH - (wrapperOffset + wrapperWH);
|
270 | } else {
|
271 | target -= activeTabOffset + activeTabWH - (wrapperOffset + wrapperWH) + 1;
|
272 | }
|
273 |
|
274 | return target;
|
275 | }
|
276 | if (
|
277 |
|
278 | wrapperOffset < activeTabOffset + activeTabWH && activeTabOffset < wrapperOffset) {
|
279 | if (rtl) {
|
280 | target -= wrapperOffset - activeTabOffset + 1;
|
281 | } else {
|
282 | target += wrapperOffset - activeTabOffset;
|
283 | }
|
284 | return target;
|
285 | }
|
286 | return target;
|
287 | };
|
288 |
|
289 | Nav.prototype._setBtnStyle = function _setBtnStyle(prev, next) {
|
290 | if (this.prevBtn && this.nextBtn) {
|
291 | var cls = 'disabled';
|
292 | this.prevBtn.disabled = !prev;
|
293 | this.nextBtn.disabled = !next;
|
294 | if (prev) {
|
295 | dom.removeClass(this.prevBtn, cls);
|
296 | } else {
|
297 | dom.addClass(this.prevBtn, cls);
|
298 | }
|
299 | if (next) {
|
300 | dom.removeClass(this.nextBtn, cls);
|
301 | } else {
|
302 | dom.addClass(this.nextBtn, cls);
|
303 | }
|
304 | }
|
305 | };
|
306 |
|
307 | Nav.prototype.setSlideBtn = function setSlideBtn() {
|
308 | var tabPosition = this.props.tabPosition;
|
309 |
|
310 |
|
311 |
|
312 | var navWH = getOffsetWH(this.nav, tabPosition);
|
313 | var wrapperWH = getOffsetWH(this.wrapper, tabPosition);
|
314 | var minOffset = wrapperWH - navWH;
|
315 |
|
316 | var next = void 0;
|
317 | var prev = void 0;
|
318 | if (minOffset >= 0 || navWH <= wrapperWH) {
|
319 | next = false;
|
320 | prev = false;
|
321 | this.setOffset(0, false);
|
322 | } else if (this.offset < 0 && this.offset <= minOffset) {
|
323 | prev = true;
|
324 | next = false;
|
325 | } else if (this.offset >= 0) {
|
326 | prev = false;
|
327 | next = true;
|
328 | } else {
|
329 | prev = true;
|
330 | next = true;
|
331 | }
|
332 |
|
333 | if ((prev || next) !== this.state.showBtn) {
|
334 | this.setState({
|
335 | showBtn: prev || next
|
336 | });
|
337 | } else {
|
338 | this._setBtnStyle(prev, next);
|
339 | }
|
340 | };
|
341 |
|
342 | Nav.prototype.getDropdownItems = function getDropdownItems(_ref3) {
|
343 | var excessMode = _ref3.excessMode,
|
344 | tabs = _ref3.tabs;
|
345 |
|
346 | if (excessMode !== 'dropdown') {
|
347 | return;
|
348 | }
|
349 |
|
350 | var wrapperWidth = this.wrapper.offsetWidth;
|
351 | var childNodes = this.nav.childNodes;
|
352 |
|
353 | var index = void 0;
|
354 | var tabsWidth = 0;
|
355 | for (index = 0; index < tabs.length; index++) {
|
356 | tabsWidth += childNodes[index].offsetWidth;
|
357 | if (tabsWidth > wrapperWidth) {
|
358 | break;
|
359 | }
|
360 | }
|
361 |
|
362 | if (index === tabs.length) {
|
363 | this.setState({
|
364 | dropdownTabs: []
|
365 | });
|
366 | } else {
|
367 | this.setState({
|
368 | dropdownTabs: tabs
|
369 | });
|
370 | }
|
371 | };
|
372 |
|
373 | Nav.prototype.renderTabList = function renderTabList(props) {
|
374 | var _this3 = this;
|
375 |
|
376 | var prefix = props.prefix,
|
377 | tabs = props.tabs,
|
378 | activeKey = props.activeKey,
|
379 | tabRender = props.tabRender;
|
380 |
|
381 | var tabTemplateFn = tabRender || this.defaultTabTemplateRender;
|
382 |
|
383 | var rst = [];
|
384 | React.Children.forEach(tabs, function (child) {
|
385 | var _classnames;
|
386 |
|
387 | var _child$props = child.props,
|
388 | disabled = _child$props.disabled,
|
389 | className = _child$props.className,
|
390 | onClick = _child$props.onClick,
|
391 | onMouseEnter = _child$props.onMouseEnter,
|
392 | onMouseLeave = _child$props.onMouseLeave,
|
393 | style = _child$props.style;
|
394 |
|
395 |
|
396 | var active = activeKey === child.key;
|
397 | var cls = classnames((_classnames = {}, _classnames[prefix + 'tabs-tab'] = true, _classnames.disabled = disabled, _classnames.active = active, _classnames), className);
|
398 |
|
399 | var events = {};
|
400 |
|
401 | if (!disabled) {
|
402 | events = {
|
403 | onClick: _this3.onNavItemClick.bind(_this3, child.key, onClick),
|
404 | onMouseEnter: _this3.onNavItemMouseEnter.bind(_this3, child.key, onMouseEnter),
|
405 | onMouseLeave: _this3.onNavItemMouseLeave.bind(_this3, child.key, onMouseLeave)
|
406 | };
|
407 | }
|
408 |
|
409 | var dataProps = obj.pickAttrsWith(child.props, 'data-');
|
410 |
|
411 | rst.push(React.createElement(
|
412 | 'li',
|
413 | _extends({}, dataProps, {
|
414 | role: 'tab',
|
415 | key: child.key,
|
416 | ref: active ? _this3.activeTabRefHandler : null,
|
417 | 'aria-hidden': disabled ? 'true' : 'false',
|
418 | 'aria-selected': active ? 'true' : 'false',
|
419 | tabIndex: active ? 0 : -1,
|
420 | className: cls,
|
421 | style: style
|
422 | }, events),
|
423 | tabTemplateFn(child.key, child.props)
|
424 | ));
|
425 | });
|
426 | return rst;
|
427 | };
|
428 |
|
429 | Nav.prototype.onNavItemClick = function onNavItemClick(key, callback, e) {
|
430 | this.props.onTriggerEvent(triggerEvents.CLICK, key);
|
431 | if (callback) {
|
432 | return callback(key, e);
|
433 | }
|
434 | };
|
435 |
|
436 | Nav.prototype.onNavItemMouseEnter = function onNavItemMouseEnter(key, callback, e) {
|
437 | this.props.onTriggerEvent(triggerEvents.HOVER, key);
|
438 | if (callback) {
|
439 | return callback(key, e);
|
440 | }
|
441 | };
|
442 |
|
443 | Nav.prototype.onNavItemMouseLeave = function onNavItemMouseLeave(key, callback, e) {
|
444 | if (callback) {
|
445 | return callback(key, e);
|
446 | }
|
447 | };
|
448 |
|
449 | Nav.prototype.getIcon = function getIcon(type) {
|
450 | var _props2 = this.props,
|
451 | prefix = _props2.prefix,
|
452 | icons = _props2.icons,
|
453 | rtl = _props2.rtl;
|
454 |
|
455 | var iconType = iconTypeMap[type];
|
456 | var icon = React.createElement(Icon, { type: iconType, rtl: rtl, className: prefix + 'tab-icon-' + type });
|
457 | if (icons[type]) {
|
458 | icon = typeof icons[type] === 'string' ? React.createElement(Icon, { rtl: rtl, type: icons[type] }) : icons[type];
|
459 | }
|
460 |
|
461 | return icon;
|
462 | };
|
463 |
|
464 | Nav.prototype.renderDropdownTabs = function renderDropdownTabs() {
|
465 | var _this4 = this;
|
466 |
|
467 | var tabs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
468 |
|
469 | if (!tabs.length) {
|
470 | return null;
|
471 | }
|
472 |
|
473 | var _props3 = this.props,
|
474 | prefix = _props3.prefix,
|
475 | activeKey = _props3.activeKey,
|
476 | triggerType = _props3.triggerType,
|
477 | popupProps = _props3.popupProps,
|
478 | rtl = _props3.rtl;
|
479 |
|
480 | var dropdownIcon = this.getIcon('dropdown');
|
481 |
|
482 | var trigger = React.createElement(
|
483 | 'button',
|
484 | { className: prefix + 'tabs-btn-down' },
|
485 | dropdownIcon
|
486 | );
|
487 |
|
488 | return React.createElement(
|
489 | Popup,
|
490 | _extends({
|
491 | rtl: rtl,
|
492 | triggerType: triggerType,
|
493 | trigger: trigger,
|
494 | container: function container(target) {
|
495 | return target.parentNode;
|
496 | },
|
497 | className: prefix + 'tabs-bar-popup'
|
498 | }, popupProps),
|
499 | React.createElement(
|
500 | Menu,
|
501 | { rtl: rtl, selectedKeys: [activeKey], onSelect: this.onSelectMenuItem, selectMode: 'single' },
|
502 | tabs.map(function (tab) {
|
503 | var _tab$props = tab.props,
|
504 | disabled = _tab$props.disabled,
|
505 | onClick = _tab$props.onClick,
|
506 | onMouseEnter = _tab$props.onMouseEnter,
|
507 | onMouseLeave = _tab$props.onMouseLeave;
|
508 |
|
509 | var events = {};
|
510 | if (!disabled) {
|
511 | events = {
|
512 | onClick: _this4.onNavItemClick.bind(_this4, tab.key, onClick),
|
513 | onMouseEnter: _this4.onNavItemMouseEnter.bind(_this4, tab.key, onMouseEnter),
|
514 | onMouseLeave: _this4.onNavItemMouseLeave.bind(_this4, tab.key, onMouseLeave)
|
515 | };
|
516 | }
|
517 | return React.createElement(
|
518 | Menu.Item,
|
519 | _extends({ key: tab.key }, events),
|
520 | tab.props.title
|
521 | );
|
522 | })
|
523 | )
|
524 | );
|
525 | };
|
526 |
|
527 | Nav.prototype.render = function render() {
|
528 | var _classnames2;
|
529 |
|
530 | var _props4 = this.props,
|
531 | prefix = _props4.prefix,
|
532 | tabPosition = _props4.tabPosition,
|
533 | excessMode = _props4.excessMode,
|
534 | extra = _props4.extra,
|
535 | onKeyDown = _props4.onKeyDown,
|
536 | animation = _props4.animation,
|
537 | style = _props4.style,
|
538 | className = _props4.className,
|
539 | rtl = _props4.rtl;
|
540 |
|
541 | var state = this.state;
|
542 | var nextButton = void 0;
|
543 | var prevButton = void 0;
|
544 | var restButton = void 0;
|
545 |
|
546 | var showNextPrev = state.showBtn;
|
547 |
|
548 | if (excessMode === 'dropdown' && showNextPrev && state.dropdownTabs.length) {
|
549 | restButton = this.renderDropdownTabs(state.dropdownTabs);
|
550 | prevButton = null;
|
551 | nextButton = null;
|
552 | } else if (showNextPrev) {
|
553 | var prevIcon = this.getIcon('prev');
|
554 | prevButton = React.createElement(
|
555 | 'button',
|
556 | {
|
557 | onClick: this.onPrevClick,
|
558 | className: prefix + 'tabs-btn-prev',
|
559 | ref: this.prevBtnHandler,
|
560 | type: 'button'
|
561 | },
|
562 | prevIcon
|
563 | );
|
564 |
|
565 | var nextIcon = this.getIcon('next');
|
566 |
|
567 | nextButton = React.createElement(
|
568 | 'button',
|
569 | {
|
570 | onClick: this.onNextClick,
|
571 | className: prefix + 'tabs-btn-next',
|
572 | ref: this.nextBtnHandler,
|
573 | type: 'button'
|
574 | },
|
575 | nextIcon
|
576 | );
|
577 | restButton = null;
|
578 | } else {
|
579 | nextButton = null;
|
580 | prevButton = null;
|
581 | restButton = null;
|
582 | }
|
583 |
|
584 | var containerCls = classnames((_classnames2 = {}, _classnames2[prefix + 'tabs-nav-container'] = true, _classnames2[prefix + 'tabs-nav-container-scrolling'] = showNextPrev, _classnames2));
|
585 |
|
586 | var navCls = prefix + 'tabs-nav';
|
587 | var tabList = this.renderTabList(this.props);
|
588 |
|
589 | var container = React.createElement(
|
590 | 'div',
|
591 | { className: containerCls, onKeyDown: onKeyDown, key: 'nav-container' },
|
592 | React.createElement(
|
593 | 'div',
|
594 | { className: prefix + 'tabs-nav-wrap', ref: this.wrapperRefHandler },
|
595 | React.createElement(
|
596 | 'div',
|
597 | { className: prefix + 'tabs-nav-scroll' },
|
598 | animation ? React.createElement(
|
599 | Animate,
|
600 | {
|
601 | role: 'tablist',
|
602 | 'aria-multiselectable': false,
|
603 | component: 'ul',
|
604 | className: navCls,
|
605 | animation: navCls,
|
606 | singleMode: false,
|
607 | ref: this.navRefHandler,
|
608 | afterAppear: this.initialSettings.bind(this)
|
609 | },
|
610 | tabList
|
611 | ) : React.createElement(
|
612 | 'ul',
|
613 | {
|
614 | role: 'tablist',
|
615 | className: navCls + ' ' + prefix + 'disable-animation',
|
616 | ref: this.navRefHandler
|
617 | },
|
618 | tabList
|
619 | )
|
620 | )
|
621 | ),
|
622 | prevButton,
|
623 | nextButton,
|
624 | restButton
|
625 | );
|
626 |
|
627 | var navChildren = [container];
|
628 |
|
629 | if (extra) {
|
630 | var extraProps = {
|
631 | className: prefix + 'tabs-nav-extra',
|
632 | key: 'nav-extra'
|
633 | };
|
634 | if (tabPosition === 'top' || tabPosition === 'bottom') {
|
635 | var _style = rtl ? floatLeft : floatRight;
|
636 | navChildren.unshift(React.createElement(
|
637 | 'div',
|
638 | _extends({}, extraProps, { style: _style }),
|
639 | extra
|
640 | ));
|
641 | } else {
|
642 | navChildren.push(React.createElement(
|
643 | 'div',
|
644 | extraProps,
|
645 | extra
|
646 | ));
|
647 | }
|
648 | }
|
649 |
|
650 | var navbarCls = classnames(prefix + 'tabs-bar', className);
|
651 |
|
652 | return React.createElement(
|
653 | 'div',
|
654 | { className: navbarCls, style: style, ref: this.navbarRefHandler },
|
655 | navChildren
|
656 | );
|
657 | };
|
658 |
|
659 | return Nav;
|
660 | }(React.Component), _class.propTypes = {
|
661 | prefix: PropTypes.string,
|
662 | rtl: PropTypes.bool,
|
663 | animation: PropTypes.bool,
|
664 | activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
665 | excessMode: PropTypes.string,
|
666 | extra: PropTypes.any,
|
667 | tabs: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
668 | tabPosition: PropTypes.string,
|
669 | tabRender: PropTypes.func,
|
670 | triggerType: PropTypes.string,
|
671 | popupProps: PropTypes.object,
|
672 | onTriggerEvent: PropTypes.func,
|
673 | onKeyDown: PropTypes.func,
|
674 | onClose: PropTypes.func,
|
675 | style: PropTypes.object,
|
676 | className: PropTypes.string,
|
677 | locale: PropTypes.object,
|
678 | icons: PropTypes.object
|
679 | }, _temp);
|
680 | Nav.displayName = 'Nav';
|
681 |
|
682 |
|
683 | export default Nav; |
\ | No newline at end of file |