vjrj
8dead27d22
Bootstrap's jQuery collapse (`data-toggle="collapse"` in Navigation.js, plus the per-NavItem `data-target=".navbar-collapse.show"` auto-close) disappears when we drop `alexwine:bootstrap-4` for `bootstrap@5`. Replace it with a React `useState` that toggles `.show`, and close the mobile menu via an onClick on the nav <ul>. Works on the current BS4 CSS (`.collapse.show` is pure CSS; jQuery only added the height animation) and removes one of the two jQuery/BS4 JS blockers to the CSS swap (the home carousel is the other). Also drops the dead sr-only toggler button that targeted a non-existent id. No CSS changes.
81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
import classNames from 'classnames';
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
// Self-contained NavItem. The old one wrapped react-bootstrap 0.31's
|
|
// `SafeAnchor` + `createChainedFunction` (both gone in v2); the markup this
|
|
// navbar needs is just an <li><a>. The mobile menu is now collapsed from React
|
|
// state in Navigation (the parent <ul onClick>), so the old jQuery
|
|
// `data-toggle="collapse"` / `data-target` hooks were dropped here.
|
|
const propTypes = {
|
|
active: PropTypes.bool,
|
|
disabled: PropTypes.bool,
|
|
role: PropTypes.string,
|
|
href: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
onSelect: PropTypes.func,
|
|
eventKey: PropTypes.any,
|
|
className: PropTypes.string,
|
|
anchorClassName: PropTypes.string,
|
|
style: PropTypes.object,
|
|
children: PropTypes.node
|
|
};
|
|
|
|
const defaultProps = {
|
|
active: false,
|
|
disabled: false
|
|
};
|
|
|
|
class NavItem extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.handleClick = this.handleClick.bind(this);
|
|
}
|
|
|
|
handleClick(e) {
|
|
const { disabled, onClick, onSelect, eventKey } = this.props;
|
|
if (disabled) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
if (onClick) onClick(e);
|
|
if (onSelect) {
|
|
e.preventDefault();
|
|
onSelect(eventKey, e);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
active, disabled, role, href, onClick, onSelect, eventKey,
|
|
className, anchorClassName, style, children, ...props
|
|
} = this.props;
|
|
|
|
const anchorProps = { ...props };
|
|
if (href) anchorProps.href = href;
|
|
anchorProps.role = role || (href === '#' ? 'button' : undefined);
|
|
if (role === 'tab') anchorProps['aria-selected'] = active;
|
|
|
|
return (
|
|
<li
|
|
role="presentation"
|
|
className={classNames(className, { active, disabled })}
|
|
style={style}
|
|
>
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
|
<a
|
|
{...anchorProps}
|
|
className={anchorClassName}
|
|
onClick={this.handleClick}
|
|
>
|
|
{children}
|
|
</a>
|
|
</li>
|
|
);
|
|
}
|
|
}
|
|
|
|
NavItem.propTypes = propTypes;
|
|
NavItem.defaultProps = defaultProps;
|
|
|
|
export default NavItem;
|