chore(v2): upgrade Infima (#2669)

* chore(v2): upgrade Infima

* Make proper classes for active items

* upgrade Infima to v0.2.0-alpha.9

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
This commit is contained in:
Yangshun Tay 2020-04-27 10:50:28 +08:00 committed by GitHub
parent c0e531e5d9
commit 1d8cc4b10f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 10 deletions

View file

@ -12,7 +12,7 @@
"@mdx-js/react": "^1.5.8",
"classnames": "^2.2.6",
"clipboard": "^2.0.6",
"infima": "0.2.0-alpha.6",
"infima": "0.2.0-alpha.9",
"parse-numeric-range": "^0.0.2",
"prism-react-renderer": "^1.1.0",
"prismjs": "^1.20.0",

View file

@ -20,7 +20,15 @@ import useLogo from '@theme/hooks/useLogo';
import styles from './styles.module.css';
function NavLink({activeBasePath, to, href, label, position, ...props}) {
function NavLink({
activeBasePath,
to,
href,
label,
position,
activeClassName = 'navbar__link--active',
...props
}) {
const toUrl = useBaseUrl(to);
const activeBaseUrl = useBaseUrl(activeBasePath);
@ -34,7 +42,7 @@ function NavLink({activeBasePath, to, href, label, position, ...props}) {
}
: {
isNavLink: true,
activeClassName: 'navbar__link--active',
activeClassName,
to: toUrl,
...(activeBasePath
? {
@ -50,8 +58,11 @@ function NavLink({activeBasePath, to, href, label, position, ...props}) {
}
function NavItem({items, position, className, ...props}) {
const navLinkClassNames = (extraClassName) =>
classnames('navbar__item', 'navbar__link', extraClassName);
const navLinkClassNames = (extraClassName, isDropdownItem) =>
classnames(extraClassName, {
'navbar__item navbar__link': !isDropdownItem,
dropdown__link: isDropdownItem,
});
if (!items) {
return <NavLink className={navLinkClassNames(className)} {...props} />;
@ -71,7 +82,8 @@ function NavItem({items, position, className, ...props}) {
({className: childItemClassName, ...linkItemInnerProps}, i) => (
<li key={i}>
<NavLink
className={navLinkClassNames(childItemClassName)}
activeClassName="dropdown__link--active"
className={navLinkClassNames(childItemClassName, true)}
{...linkItemInnerProps}
/>
</li>
@ -106,6 +118,7 @@ function MobileNavItem({items, className, ...props}) {
({className: childItemClassName, ...linkItemInnerProps}, i) => (
<li className="menu__list-item" key={i}>
<NavLink
activeClassName="menu__link--active"
className={navLinkClassNames(childItemClassName)}
{...linkItemInnerProps}
onClick={props.onClick}