Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 77 78 79 80 | 1x 77x 77x 44x 77x 77x 77x 77x 1x 77x 77x | import * as React from 'react';
import { Box as ReakitBox, useButton as useReakitButton } from 'reakit';
import buildClassNames from 'classnames';
import { bindFns, useClassName, createComponent, createElement, createHook } from '../utils';
import { ListItem, ListItemProps } from '../List';
import { TopNavContext } from './TopNav';
import * as styles from './styles';
export type LocalTopNavItemProps = {
href?: string;
isActive?: boolean;
palette?: string;
navId?: string;
variant?: string;
};
export type TopNavItemProps = ListItemProps & LocalTopNavItemProps;
const useProps = createHook<TopNavItemProps>(
(props, { themeKey, themeKeyOverride }) => {
const { children, href, isActive, navId, onClick, overrides, ...restProps } = props;
let htmlProps;
if (navId) {
htmlProps = useReakitButton(restProps);
}
htmlProps = ListItem.useProps({ ...htmlProps, ...restProps });
const { onChangeSelectedId, selectedId, overrides: topNavOverrides } = React.useContext(TopNavContext);
const className = useClassName({
style: styles.TopNavItem,
styleProps: {
...props,
isActive: typeof isActive === 'boolean' ? isActive : selectedId === navId,
overrides: { ...topNavOverrides, ...overrides }
},
themeKey,
themeKeyOverride
});
return {
...htmlProps,
'aria-current': isActive || selectedId === navId ? 'page' : undefined,
className: buildClassNames(htmlProps.className, href ? undefined : className),
onClick: href ? undefined : bindFns(onClick, () => onChangeSelectedId(navId)),
children: href ? (
<a className={className} href={href} onClick={bindFns(onClick, () => onChangeSelectedId(navId))}>
{children}
</a>
) : (
children
)
};
},
{ defaultProps: { palette: 'primary', variant: 'default' }, themeKey: 'TopNav.Item' }
);
export const TopNavItem = createComponent<TopNavItemProps>(
props => {
const TopNavItemProps = useProps(props);
return createElement({
children: props.children,
component: ReakitBox,
use: props.use,
htmlProps: TopNavItemProps
});
},
{
attach: {
useProps
},
defaultProps: {
use: 'li'
},
themeKey: 'TopNav.Item'
}
);
|