-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
NavbarToggle.js
76 lines (62 loc) · 1.8 KB
/
NavbarToggle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import classNames from 'classnames';
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import useEventCallback from '@restart/hooks/useEventCallback';
import { useBootstrapPrefix } from './ThemeProvider';
import NavbarContext from './NavbarContext';
const propTypes = {
/** @default 'navbar-toggler' */
bsPrefix: PropTypes.string,
/** An accessible ARIA label for the toggler button. */
label: PropTypes.string,
/** @private */
onClick: PropTypes.func,
/**
* The toggle content. When empty, the default toggle will be rendered.
*/
children: PropTypes.node,
as: PropTypes.elementType,
};
const defaultProps = {
label: 'Toggle navigation',
};
const NavbarToggle = React.forwardRef(
(
{
bsPrefix,
className,
children,
label,
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
as: Component = 'button',
onClick,
...props
},
ref,
) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-toggler');
const { onToggle, expanded } = useContext(NavbarContext) || {};
const handleClick = useEventCallback((e) => {
if (onClick) onClick(e);
if (onToggle) onToggle();
});
if (Component === 'button') {
props.type = 'button';
}
return (
<Component
{...props}
ref={ref}
onClick={handleClick}
aria-label={label}
className={classNames(className, bsPrefix, !expanded && 'collapsed')}
>
{children || <span className={`${bsPrefix}-icon`} />}
</Component>
);
},
);
NavbarToggle.displayName = 'NavbarToggle';
NavbarToggle.propTypes = propTypes;
NavbarToggle.defaultProps = defaultProps;
export default NavbarToggle;