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