1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _extends3 = require('babel-runtime/helpers/extends');
|
6 |
|
7 | var _extends4 = _interopRequireDefault(_extends3);
|
8 |
|
9 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
10 |
|
11 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
12 |
|
13 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
14 |
|
15 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
16 |
|
17 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
18 |
|
19 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
20 |
|
21 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
22 |
|
23 | var _inherits3 = _interopRequireDefault(_inherits2);
|
24 |
|
25 | var _classnames = require('classnames');
|
26 |
|
27 | var _classnames2 = _interopRequireDefault(_classnames);
|
28 |
|
29 | var _keycode = require('keycode');
|
30 |
|
31 | var _keycode2 = _interopRequireDefault(_keycode);
|
32 |
|
33 | var _react = require('react');
|
34 |
|
35 | var _react2 = _interopRequireDefault(_react);
|
36 |
|
37 | var _propTypes = require('prop-types');
|
38 |
|
39 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
40 |
|
41 | var _reactDom = require('react-dom');
|
42 |
|
43 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
44 |
|
45 | var _all = require('prop-types-extra/lib/all');
|
46 |
|
47 | var _all2 = _interopRequireDefault(_all);
|
48 |
|
49 | var _warning = require('warning');
|
50 |
|
51 | var _warning2 = _interopRequireDefault(_warning);
|
52 |
|
53 | var _bootstrapUtils = require('./utils/bootstrapUtils');
|
54 |
|
55 | var _createChainedFunction = require('./utils/createChainedFunction');
|
56 |
|
57 | var _createChainedFunction2 = _interopRequireDefault(_createChainedFunction);
|
58 |
|
59 | var _ValidComponentChildren = require('./utils/ValidComponentChildren');
|
60 |
|
61 | var _ValidComponentChildren2 = _interopRequireDefault(_ValidComponentChildren);
|
62 |
|
63 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 | var propTypes = {
|
73 | |
74 |
|
75 |
|
76 |
|
77 | activeKey: _propTypes2.default.any,
|
78 |
|
79 | |
80 |
|
81 |
|
82 | activeHref: _propTypes2.default.string,
|
83 |
|
84 | |
85 |
|
86 |
|
87 | stacked: _propTypes2.default.bool,
|
88 |
|
89 | justified: (0, _all2.default)(_propTypes2.default.bool, function (_ref) {
|
90 | var justified = _ref.justified,
|
91 | navbar = _ref.navbar;
|
92 | return justified && navbar ? Error('justified navbar `Nav`s are not supported') : null;
|
93 | }),
|
94 |
|
95 | |
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 | onSelect: _propTypes2.default.func,
|
106 |
|
107 | |
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 | role: _propTypes2.default.string,
|
116 |
|
117 | |
118 |
|
119 |
|
120 |
|
121 | navbar: _propTypes2.default.bool,
|
122 |
|
123 | |
124 |
|
125 |
|
126 |
|
127 | pullRight: _propTypes2.default.bool,
|
128 |
|
129 | |
130 |
|
131 |
|
132 |
|
133 | pullLeft: _propTypes2.default.bool
|
134 | };
|
135 |
|
136 | var defaultProps = {
|
137 | justified: false,
|
138 | pullRight: false,
|
139 | pullLeft: false,
|
140 | stacked: false
|
141 | };
|
142 |
|
143 | var contextTypes = {
|
144 | $bs_navbar: _propTypes2.default.shape({
|
145 | bsClass: _propTypes2.default.string,
|
146 | onSelect: _propTypes2.default.func
|
147 | }),
|
148 |
|
149 | $bs_tabContainer: _propTypes2.default.shape({
|
150 | activeKey: _propTypes2.default.any,
|
151 | onSelect: _propTypes2.default.func.isRequired,
|
152 | getTabId: _propTypes2.default.func.isRequired,
|
153 | getPaneId: _propTypes2.default.func.isRequired
|
154 | })
|
155 | };
|
156 |
|
157 | var Nav = function (_React$Component) {
|
158 | (0, _inherits3.default)(Nav, _React$Component);
|
159 |
|
160 | function Nav() {
|
161 | (0, _classCallCheck3.default)(this, Nav);
|
162 | return (0, _possibleConstructorReturn3.default)(this, _React$Component.apply(this, arguments));
|
163 | }
|
164 |
|
165 | Nav.prototype.componentDidUpdate = function componentDidUpdate() {
|
166 | var _this2 = this;
|
167 |
|
168 | if (!this._needsRefocus) {
|
169 | return;
|
170 | }
|
171 |
|
172 | this._needsRefocus = false;
|
173 |
|
174 | var children = this.props.children;
|
175 |
|
176 | var _getActiveProps = this.getActiveProps(),
|
177 | activeKey = _getActiveProps.activeKey,
|
178 | activeHref = _getActiveProps.activeHref;
|
179 |
|
180 | var activeChild = _ValidComponentChildren2.default.find(children, function (child) {
|
181 | return _this2.isActive(child, activeKey, activeHref);
|
182 | });
|
183 |
|
184 | var childrenArray = _ValidComponentChildren2.default.toArray(children);
|
185 | var activeChildIndex = childrenArray.indexOf(activeChild);
|
186 |
|
187 | var childNodes = _reactDom2.default.findDOMNode(this).children;
|
188 | var activeNode = childNodes && childNodes[activeChildIndex];
|
189 |
|
190 | if (!activeNode || !activeNode.firstChild) {
|
191 | return;
|
192 | }
|
193 |
|
194 | activeNode.firstChild.focus();
|
195 | };
|
196 |
|
197 | Nav.prototype.getActiveProps = function getActiveProps() {
|
198 | var tabContainer = this.context.$bs_tabContainer;
|
199 |
|
200 | if (tabContainer) {
|
201 | process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(this.props.activeKey == null && !this.props.activeHref, 'Specifying a `<Nav>` `activeKey` or `activeHref` in the context of ' + 'a `<TabContainer>` is not supported. Instead use `<TabContainer ' + ('activeKey={' + this.props.activeKey + '} />`.')) : void 0;
|
202 |
|
203 | return tabContainer;
|
204 | }
|
205 |
|
206 | return this.props;
|
207 | };
|
208 |
|
209 | Nav.prototype.getNextActiveChild = function getNextActiveChild(offset) {
|
210 | var _this3 = this;
|
211 |
|
212 | var children = this.props.children;
|
213 |
|
214 | var validChildren = children.filter(function (child) {
|
215 | return child.props.eventKey != null && !child.props.disabled;
|
216 | });
|
217 |
|
218 | var _getActiveProps2 = this.getActiveProps(),
|
219 | activeKey = _getActiveProps2.activeKey,
|
220 | activeHref = _getActiveProps2.activeHref;
|
221 |
|
222 | var activeChild = _ValidComponentChildren2.default.find(children, function (child) {
|
223 | return _this3.isActive(child, activeKey, activeHref);
|
224 | });
|
225 |
|
226 |
|
227 | var activeChildIndex = validChildren.indexOf(activeChild);
|
228 | if (activeChildIndex === -1) {
|
229 |
|
230 | return validChildren[0];
|
231 | }
|
232 |
|
233 | var nextIndex = activeChildIndex + offset;
|
234 | var numValidChildren = validChildren.length;
|
235 |
|
236 | if (nextIndex >= numValidChildren) {
|
237 | nextIndex = 0;
|
238 | } else if (nextIndex < 0) {
|
239 | nextIndex = numValidChildren - 1;
|
240 | }
|
241 |
|
242 | return validChildren[nextIndex];
|
243 | };
|
244 |
|
245 | Nav.prototype.getTabProps = function getTabProps(child, tabContainer, navRole, active, onSelect) {
|
246 | var _this4 = this;
|
247 |
|
248 | if (!tabContainer && navRole !== 'tablist') {
|
249 |
|
250 | return null;
|
251 | }
|
252 |
|
253 | var _child$props = child.props,
|
254 | id = _child$props.id,
|
255 | controls = _child$props['aria-controls'],
|
256 | eventKey = _child$props.eventKey,
|
257 | role = _child$props.role,
|
258 | onKeyDown = _child$props.onKeyDown,
|
259 | tabIndex = _child$props.tabIndex;
|
260 |
|
261 |
|
262 | if (tabContainer) {
|
263 | process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(!id && !controls, 'In the context of a `<TabContainer>`, `<NavItem>`s are given ' + 'generated `id` and `aria-controls` attributes for the sake of ' + 'proper component accessibility. Any provided ones will be ignored. ' + 'To control these attributes directly, provide a `generateChildId` ' + 'prop to the parent `<TabContainer>`.') : void 0;
|
264 |
|
265 | id = tabContainer.getTabId(eventKey);
|
266 | controls = tabContainer.getPaneId(eventKey);
|
267 | }
|
268 |
|
269 | if (navRole === 'tablist') {
|
270 | role = role || 'tab';
|
271 | onKeyDown = (0, _createChainedFunction2.default)(function (event) {
|
272 | return _this4.handleTabKeyDown(onSelect, event);
|
273 | }, onKeyDown);
|
274 | tabIndex = active ? tabIndex : -1;
|
275 | }
|
276 |
|
277 | return {
|
278 | id: id,
|
279 | role: role,
|
280 | onKeyDown: onKeyDown,
|
281 | 'aria-controls': controls,
|
282 | tabIndex: tabIndex
|
283 | };
|
284 | };
|
285 |
|
286 | Nav.prototype.handleTabKeyDown = function handleTabKeyDown(onSelect, event) {
|
287 | var nextActiveChild = void 0;
|
288 |
|
289 | switch (event.keyCode) {
|
290 | case _keycode2.default.codes.left:
|
291 | case _keycode2.default.codes.up:
|
292 | nextActiveChild = this.getNextActiveChild(-1);
|
293 | break;
|
294 | case _keycode2.default.codes.right:
|
295 | case _keycode2.default.codes.down:
|
296 | nextActiveChild = this.getNextActiveChild(1);
|
297 | break;
|
298 | default:
|
299 |
|
300 | return;
|
301 | }
|
302 |
|
303 | event.preventDefault();
|
304 |
|
305 | if (onSelect && nextActiveChild && nextActiveChild.props.eventKey != null) {
|
306 | onSelect(nextActiveChild.props.eventKey);
|
307 | }
|
308 |
|
309 | this._needsRefocus = true;
|
310 | };
|
311 |
|
312 | Nav.prototype.isActive = function isActive(_ref2, activeKey, activeHref) {
|
313 | var props = _ref2.props;
|
314 |
|
315 | if (props.active || activeKey != null && props.eventKey === activeKey || activeHref && props.href === activeHref) {
|
316 | return true;
|
317 | }
|
318 |
|
319 | return props.active;
|
320 | };
|
321 |
|
322 | Nav.prototype.render = function render() {
|
323 | var _extends2,
|
324 | _this5 = this;
|
325 |
|
326 | var _props = this.props,
|
327 | stacked = _props.stacked,
|
328 | justified = _props.justified,
|
329 | onSelect = _props.onSelect,
|
330 | propsRole = _props.role,
|
331 | propsNavbar = _props.navbar,
|
332 | pullRight = _props.pullRight,
|
333 | pullLeft = _props.pullLeft,
|
334 | className = _props.className,
|
335 | children = _props.children,
|
336 | props = (0, _objectWithoutProperties3.default)(_props, ['stacked', 'justified', 'onSelect', 'role', 'navbar', 'pullRight', 'pullLeft', 'className', 'children']);
|
337 |
|
338 |
|
339 | var tabContainer = this.context.$bs_tabContainer;
|
340 | var role = propsRole || (tabContainer ? 'tablist' : null);
|
341 |
|
342 | var _getActiveProps3 = this.getActiveProps(),
|
343 | activeKey = _getActiveProps3.activeKey,
|
344 | activeHref = _getActiveProps3.activeHref;
|
345 |
|
346 | delete props.activeKey;
|
347 | delete props.activeHref;
|
348 |
|
349 | var _splitBsProps = (0, _bootstrapUtils.splitBsProps)(props),
|
350 | bsProps = _splitBsProps[0],
|
351 | elementProps = _splitBsProps[1];
|
352 |
|
353 | var classes = (0, _extends4.default)({}, (0, _bootstrapUtils.getClassSet)(bsProps), (_extends2 = {}, _extends2[(0, _bootstrapUtils.prefix)(bsProps, 'stacked')] = stacked, _extends2[(0, _bootstrapUtils.prefix)(bsProps, 'justified')] = justified, _extends2));
|
354 |
|
355 | var navbar = propsNavbar != null ? propsNavbar : this.context.$bs_navbar;
|
356 | var pullLeftClassName = void 0;
|
357 | var pullRightClassName = void 0;
|
358 |
|
359 | if (navbar) {
|
360 | var navbarProps = this.context.$bs_navbar || { bsClass: 'navbar' };
|
361 |
|
362 | classes[(0, _bootstrapUtils.prefix)(navbarProps, 'nav')] = true;
|
363 |
|
364 | pullRightClassName = (0, _bootstrapUtils.prefix)(navbarProps, 'right');
|
365 | pullLeftClassName = (0, _bootstrapUtils.prefix)(navbarProps, 'left');
|
366 | } else {
|
367 | pullRightClassName = 'pull-right';
|
368 | pullLeftClassName = 'pull-left';
|
369 | }
|
370 |
|
371 | classes[pullRightClassName] = pullRight;
|
372 | classes[pullLeftClassName] = pullLeft;
|
373 |
|
374 | return _react2.default.createElement(
|
375 | 'ul',
|
376 | (0, _extends4.default)({}, elementProps, {
|
377 | role: role,
|
378 | className: (0, _classnames2.default)(className, classes)
|
379 | }),
|
380 | _ValidComponentChildren2.default.map(children, function (child) {
|
381 | var active = _this5.isActive(child, activeKey, activeHref);
|
382 | var childOnSelect = (0, _createChainedFunction2.default)(child.props.onSelect, onSelect, navbar && navbar.onSelect, tabContainer && tabContainer.onSelect);
|
383 |
|
384 | return (0, _react.cloneElement)(child, (0, _extends4.default)({}, _this5.getTabProps(child, tabContainer, role, active, childOnSelect), {
|
385 | active: active,
|
386 | activeKey: activeKey,
|
387 | activeHref: activeHref,
|
388 | onSelect: childOnSelect
|
389 | }));
|
390 | })
|
391 | );
|
392 | };
|
393 |
|
394 | return Nav;
|
395 | }(_react2.default.Component);
|
396 |
|
397 | Nav.propTypes = propTypes;
|
398 | Nav.defaultProps = defaultProps;
|
399 | Nav.contextTypes = contextTypes;
|
400 |
|
401 | exports.default = (0, _bootstrapUtils.bsClass)('nav', (0, _bootstrapUtils.bsStyles)(['tabs', 'pills'], Nav));
|
402 | module.exports = exports['default']; |
\ | No newline at end of file |