1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import classNames from 'classnames';
|
4 | import { mapToCssModules, tagPropType } from './utils';
|
5 |
|
6 | const propTypes = {
|
7 | tabs: PropTypes.bool,
|
8 | pills: PropTypes.bool,
|
9 | vertical: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
10 | horizontal: PropTypes.string,
|
11 | justified: PropTypes.bool,
|
12 | fill: PropTypes.bool,
|
13 | navbar: PropTypes.bool,
|
14 | card: PropTypes.bool,
|
15 | tag: tagPropType,
|
16 | className: PropTypes.string,
|
17 | cssModule: PropTypes.object,
|
18 | };
|
19 |
|
20 | const defaultProps = {
|
21 | tag: 'ul',
|
22 | vertical: false,
|
23 | };
|
24 |
|
25 | const getVerticalClass = (vertical) => {
|
26 | if (vertical === false) {
|
27 | return false;
|
28 | } else if (vertical === true || vertical === 'xs') {
|
29 | return 'flex-column';
|
30 | }
|
31 |
|
32 | return `flex-${vertical}-column`;
|
33 | };
|
34 |
|
35 | const Nav = (props) => {
|
36 | const {
|
37 | className,
|
38 | cssModule,
|
39 | tabs,
|
40 | pills,
|
41 | vertical,
|
42 | horizontal,
|
43 | justified,
|
44 | fill,
|
45 | navbar,
|
46 | card,
|
47 | tag: Tag,
|
48 | ...attributes
|
49 | } = props;
|
50 |
|
51 | const classes = mapToCssModules(classNames(
|
52 | className,
|
53 | navbar ? 'navbar-nav' : 'nav',
|
54 | horizontal ? `justify-content-${horizontal}` : false,
|
55 | getVerticalClass(vertical),
|
56 | {
|
57 | 'nav-tabs': tabs,
|
58 | 'card-header-tabs': card && tabs,
|
59 | 'nav-pills': pills,
|
60 | 'card-header-pills': card && pills,
|
61 | 'nav-justified': justified,
|
62 | 'nav-fill': fill,
|
63 | }
|
64 | ), cssModule);
|
65 |
|
66 | return (
|
67 | <Tag {...attributes} className={classes} />
|
68 | );
|
69 | };
|
70 |
|
71 | Nav.propTypes = propTypes;
|
72 | Nav.defaultProps = defaultProps;
|
73 |
|
74 | export default Nav;
|